Warning, /education/gcompris/src/activities/analog_electricity/ListWidget.qml is written in an unsupported language. File is not indexed.
0001 /* gcompris - ListWidget.qml 0002 * 0003 * SPDX-FileCopyrightText: 2020 Aiswarya Kaitheri Kandoth <aiswaryakk29@gmail.com> 0004 * 0005 * Authors: 0006 * Bruno Coudoin <bruno.coudoin@gcompris.net> (GTK+ version) 0007 * Pulkit Gupta <pulkitnsit@gmail.com> (Qt Quick port) 0008 * Aiswarya Kaitheri Kandoth <aiswaryakk29@gmail.com> (AnalogElectricity activity) 0009 0010 * SPDX-License-Identifier: GPL-3.0-or-later 0011 */ 0012 import QtQuick 2.12 0013 import GCompris 1.0 0014 import "../../core" 0015 import "analog_electricity.js" as Activity 0016 0017 Item { 0018 id: listWidget 0019 anchors.fill: parent 0020 anchors.topMargin: 5 * ApplicationInfo.ratio 0021 anchors.leftMargin: 5 * ApplicationInfo.ratio 0022 z: 10 0023 0024 property bool hori 0025 property alias model: mymodel 0026 property alias view: view 0027 property alias repeater: repeater 0028 property alias toolDelete: toolDelete 0029 property alias rotateLeft: rotateLeft 0030 property alias rotateRight: rotateRight 0031 property alias info: info 0032 property alias zoomInBtn: zoomInBtn 0033 property alias zoomOutBtn: zoomOutBtn 0034 0035 signal hideToolbar 0036 onHideToolbar: toolButton.showToolBar = false; 0037 0038 property int minIconWidth: Math.min((background.width - 1.5 * view.width) / 6, 100) 0039 0040 ListModel { 0041 id: mymodel 0042 } 0043 0044 Grid { 0045 id: view 0046 width: inputComponentsContainer.width 0047 height: background.height - 2 * bar.height 0048 spacing: 5 0049 z: 20 0050 columns: 1 0051 0052 property int currentDisplayedGroup: 0 0053 property int setCurrentDisplayedGroup: 0 0054 property int nbItemsByGroup: parent.height / iconSize - 2 0055 property int nbDisplayedGroup: Math.ceil(model.count / nbItemsByGroup) 0056 property int iconSize: 80 * ApplicationInfo.ratio 0057 property int previousNavigation: 1 0058 property int nextNavigation: 1 0059 0060 onNbDisplayedGroupChanged: { 0061 view.setCurrentDisplayedGroup = 0; 0062 refreshInputComponentsContainer(); 0063 } 0064 0065 //For setting navigation buttons 0066 function setNextNavigation() { 0067 nextNavigation = 0; 0068 if(currentDisplayedGroup + 1 < nbDisplayedGroup) 0069 nextNavigation = 1; 0070 } 0071 0072 function setPreviousNavigation() { 0073 previousNavigation = 0; 0074 if(currentDisplayedGroup > 0) 0075 previousNavigation = 1; 0076 } 0077 0078 function refreshInputComponentsContainer() { 0079 view.currentDisplayedGroup = view.setCurrentDisplayedGroup; 0080 view.setNextNavigation(); 0081 view.setPreviousNavigation(); 0082 } 0083 0084 Image { 0085 id: toolButton 0086 width: listWidget.width - listWidget.anchors.leftMargin 0087 height: width 0088 sourceSize.width: width 0089 sourceSize.height: height 0090 source: Activity.urlDigital + "tools.svg" 0091 fillMode: Image.PreserveAspectFit 0092 0093 property bool showToolBar: false 0094 0095 MouseArea { 0096 anchors.fill: parent 0097 onClicked: toolButton.showToolBar = !toolButton.showToolBar; 0098 } 0099 0100 Rectangle { 0101 id: toolsContainer 0102 visible: toolButton.showToolBar 0103 width: (toolDelete.width + tools.spacing) * tools.children.length + tools.spacing * 4 0104 height: parent.width 0105 anchors.top: parent.top 0106 anchors.left: parent.right 0107 color: "#2a2a2a" 0108 radius: 4 * ApplicationInfo.ratio 0109 0110 Flow { 0111 id: tools 0112 width: parent.width 0113 height: parent.height 0114 0115 property int topMarginAmt: (toolsContainer.height - toolDelete.height) / 2 0116 property int leftMarginAmt: (toolsContainer.width - toolDelete.width) / 2 0117 0118 anchors { 0119 fill: parent 0120 leftMargin: 8 * ApplicationInfo.ratio 0121 topMargin: tools.topMarginAmt 0122 } 0123 spacing: 4 * ApplicationInfo.ratio 0124 0125 Image { 0126 id: toolDelete 0127 state: "notSelected" 0128 width: minIconWidth 0129 height: width 0130 sourceSize.width: width 0131 sourceSize.height: height 0132 source: Activity.urlDigital + "deleteOn.svg" 0133 fillMode: Image.PreserveAspectFit 0134 MouseArea { 0135 anchors.fill: parent 0136 onClicked: { 0137 toolDelete.state = (toolDelete.state == "selected") ? "notSelected" : "selected"; 0138 Activity.toolDelete = !Activity.toolDelete; 0139 } 0140 } 0141 states: [ 0142 State { 0143 name: "selected" 0144 PropertyChanges { 0145 target: toolDelete 0146 opacity: 1 0147 } 0148 }, 0149 State { 0150 name: "notSelected" 0151 PropertyChanges { 0152 target: toolDelete 0153 opacity: 0.5 0154 } 0155 } 0156 ] 0157 } 0158 0159 Image { 0160 id: info 0161 source: Activity.urlDigital + "info.svg" 0162 width: minIconWidth 0163 height: width 0164 sourceSize.width: width 0165 sourceSize.height: height 0166 fillMode: Image.PreserveAspectFit 0167 MouseArea { 0168 anchors.fill: parent 0169 onClicked: { 0170 if(!Activity.animationInProgress && parent.state === "canBeSelected") { 0171 Activity.displayInfo(); 0172 hideToolbar(); 0173 } 0174 } 0175 } 0176 states: [ 0177 State { 0178 name: "canBeSelected" 0179 PropertyChanges { 0180 target: info 0181 opacity: 1 0182 } 0183 }, 0184 State { 0185 name: "canNotBeSelected" 0186 PropertyChanges { 0187 target: info 0188 opacity: 0.5 0189 } 0190 } 0191 ] 0192 } 0193 0194 Image { 0195 id: rotateLeft 0196 width: minIconWidth 0197 height: width 0198 sourceSize.width: width 0199 sourceSize.height: height 0200 source: Activity.urlDigital + "rotate.svg" 0201 fillMode: Image.PreserveAspectFit 0202 state: "CanNotBeSelected" 0203 MouseArea { 0204 anchors.fill: parent 0205 onClicked: { 0206 if(!Activity.animationInProgress && parent.state == "canBeSelected") { 0207 Activity.rotateLeft(); 0208 } 0209 } 0210 } 0211 states: [ 0212 State { 0213 name: "canBeSelected" 0214 PropertyChanges { 0215 target: rotateLeft 0216 opacity: 1 0217 } 0218 }, 0219 State { 0220 name: "canNotBeSelected" 0221 PropertyChanges { 0222 target: rotateLeft 0223 opacity: 0.5 0224 } 0225 } 0226 ] 0227 } 0228 0229 Image { 0230 id: rotateRight 0231 width: minIconWidth 0232 height: width 0233 sourceSize.width: width 0234 sourceSize.height: height 0235 source: Activity.urlDigital + "rotate.svg" 0236 fillMode: Image.PreserveAspectFit 0237 mirror: true 0238 state: "CanNotBeSelected" 0239 MouseArea { 0240 anchors.fill: parent 0241 onClicked: { 0242 if(!Activity.animationInProgress && parent.state == "canBeSelected") { 0243 Activity.rotateRight(); 0244 } 0245 } 0246 } 0247 states: [ 0248 State { 0249 name: "canBeSelected" 0250 PropertyChanges{ 0251 target: rotateRight 0252 opacity: 1 0253 } 0254 }, 0255 State { 0256 name: "canNotBeSelected" 0257 PropertyChanges { 0258 target: rotateRight 0259 opacity: 0.5 0260 } 0261 } 0262 ] 0263 } 0264 0265 Image { 0266 id: zoomInBtn 0267 width: minIconWidth 0268 height: width 0269 sourceSize.width: width 0270 sourceSize.height: height 0271 source: Activity.urlDigital + "zoomIn.svg" 0272 fillMode: Image.PreserveAspectFit 0273 0274 MouseArea { 0275 anchors.fill: parent 0276 onClicked: Activity.zoomIn(); 0277 } 0278 states: [ 0279 State { 0280 name: "canZoomIn" 0281 PropertyChanges { 0282 target: zoomInBtn 0283 opacity: 1.0 0284 } 0285 }, 0286 State { 0287 name: "cannotZoomIn" 0288 PropertyChanges { 0289 target: zoomInBtn 0290 opacity: 0.5 0291 } 0292 } 0293 ] 0294 } 0295 0296 Image { 0297 id: zoomOutBtn 0298 width: minIconWidth 0299 height: width 0300 sourceSize.width: width 0301 sourceSize.height: height 0302 source: Activity.urlDigital + "zoomOut.svg" 0303 fillMode: Image.PreserveAspectFit 0304 0305 MouseArea { 0306 anchors.fill: parent 0307 onClicked: Activity.zoomOut(); 0308 } 0309 states: [ 0310 State { 0311 name: "canZoomOut" 0312 PropertyChanges { 0313 target: zoomOutBtn 0314 opacity: 1.0 0315 } 0316 }, 0317 State { 0318 name: "cannotZoomOut" 0319 PropertyChanges { 0320 target: zoomOutBtn 0321 opacity: 0.5 0322 } 0323 } 0324 ] 0325 } 0326 } 0327 } 0328 } 0329 0330 Repeater { 0331 id: repeater 0332 property int currentIndex 0333 width: 100 0334 DragListItem { 0335 id: contactsDelegate 0336 z: 1 0337 heightInColumn: view.iconSize * 0.75 0338 widthInColumn: view.iconSize * 0.85 0339 tileWidth: view.iconSize 0340 tileHeight: view.iconSize * 0.85 0341 visible: view.currentDisplayedGroup * view.nbItemsByGroup <= index && 0342 index <= (view.currentDisplayedGroup+1) * view.nbItemsByGroup - 1 0343 0344 onPressed: repeater.currentIndex = index; 0345 } 0346 0347 clip: true 0348 model: mymodel 0349 0350 onModelChanged: repeater.currentIndex = -1; 0351 } 0352 0353 Row { 0354 spacing: view.iconSize * 0.20 0355 Image { 0356 id: previous 0357 opacity: (model.count > view.nbItemsByGroup && 0358 view.previousNavigation != 0 && view.currentDisplayedGroup != 0) ? 1 : 0 0359 source: "qrc:/gcompris/src/core/resource/bar_previous.svg" 0360 sourceSize.width: view.iconSize * 0.30 0361 fillMode: Image.PreserveAspectFit 0362 MouseArea { 0363 anchors.fill: parent 0364 onClicked: { 0365 repeater.currentIndex = -1; 0366 if(previous.opacity == 1) { 0367 view.setCurrentDisplayedGroup = view.currentDisplayedGroup - view.previousNavigation; 0368 view.refreshInputComponentsContainer(); 0369 } 0370 } 0371 } 0372 } 0373 0374 Image { 0375 id: next 0376 visible: model.count > view.nbItemsByGroup && view.nextNavigation != 0 && view.currentDisplayedGroup < 0377 view.nbDisplayedGroup - 1 0378 source: "qrc:/gcompris/src/core/resource/bar_next.svg" 0379 sourceSize.width: view.iconSize * 0.30 0380 fillMode: Image.PreserveAspectFit 0381 MouseArea { 0382 anchors.fill: parent 0383 onClicked: { 0384 repeater.currentIndex = -1; 0385 view.setCurrentDisplayedGroup = view.currentDisplayedGroup + view.nextNavigation; 0386 view.refreshInputComponentsContainer(); 0387 } 0388 } 0389 } 0390 } 0391 } 0392 0393 states: [ 0394 State { 0395 name: "horizontalList" 0396 when: listWidget.hori 0397 PropertyChanges { 0398 target: listWidget 0399 minIconWidth: Math.min((background.width - 1.5 * view.width) / 6, 100) 0400 } 0401 PropertyChanges { 0402 target: view 0403 width: inputComponentsContainer.width 0404 height: background.height - 2 * bar.height 0405 columns: 1 0406 nbItemsByGroup: parent.height / iconSize - 2 0407 } 0408 PropertyChanges { 0409 target: toolButton 0410 width: listWidget.width - listWidget.anchors.leftMargin 0411 } 0412 PropertyChanges { 0413 target: toolsContainer 0414 width: (toolDelete.width + tools.spacing) * tools.children.length + tools.spacing * 4 0415 height: parent.width 0416 } 0417 AnchorChanges { 0418 target: toolsContainer 0419 anchors.top: parent.top 0420 anchors.left: parent.right 0421 } 0422 PropertyChanges { 0423 target: tools 0424 anchors.leftMargin: 8 * ApplicationInfo.ratio 0425 anchors.topMargin: tools.topMarginAmt 0426 } 0427 }, 0428 State { 0429 name: "verticalList" 0430 when: !listWidget.hori 0431 PropertyChanges { 0432 target: listWidget 0433 minIconWidth: Math.min((background.height - 1.5 * bar.height - view.height) / 6, 100) 0434 } 0435 PropertyChanges { 0436 target: view 0437 width: 2 * bar.height 0438 height: bar.height 0439 columns: nbItemsByGroup + 2 0440 nbItemsByGroup: parent.width / iconSize - 2 0441 } 0442 PropertyChanges { 0443 target: toolButton 0444 width: listWidget.height - listWidget.anchors.leftMargin 0445 } 0446 PropertyChanges { 0447 target: toolsContainer 0448 width: parent.width 0449 height: (toolDelete.height + tools.spacing) * tools.children.length + tools.spacing * 4 0450 } 0451 AnchorChanges { 0452 target: toolsContainer 0453 anchors.top: parent.bottom 0454 anchors.left: parent.left 0455 } 0456 PropertyChanges { 0457 target: tools 0458 anchors.leftMargin: tools.leftMarginAmt 0459 anchors.topMargin: 8 * ApplicationInfo.ratio 0460 } 0461 } 0462 ] 0463 }