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