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 }