[prev in list] [next in list] [prev in thread] [next in thread] 

List:       kde-commits
Subject:    [gcompris/gsoc_pulkit_digital_electricity] src/activities/digital_electricity: digital_electricity: 
From:       Rudra Nil Basu <null () kde ! org>
Date:       2017-08-27 10:53:08
Message-ID: E1dlvBk-0007Ak-C6 () code ! kde ! org
[Download RAW message or body]

Git commit 9aa13a38bf7f5025a649f809e92b54f15d9a10cd by Rudra Nil Basu.
Committed on 27/08/2017 at 10:23.
Pushed by rudranilbasu into branch 'gsoc_pulkit_digital_electricity'.

digital_electricity: Add zoom icons in toolbar

Added zoom in and out icons in the Toolbar along with their active and
inactive states, depending on whether the zooming is possible or not.

For active state, the button's opacity is kept 1.0, and for inactive
state, the opacity is reduced to 0.5.

Initially, the zoom is set to it's default value in the init() method in
the js, and the "Zoom in" button is deactivated, while the zoom out
button is activated.

In the zoomIn() function, after calculating the final zoom amount, we
are checking whether the current zoom is the maximum allowed zoom or
not, and if so, we are setting the state of the zoom in button as
deactive.

Similarly in the zoomOut() function, after calculating the final zoom
amount, we are checking if the current zoom amount is same as that of
the minimum zoom amount, and if so, we are deactivating the zoom out
button.

Signed-off-by: Rudra Nil Basu <rudra.nil.basu.1996@gmail.com>

M  +75   -1    src/activities/digital_electricity/ListWidget.qml
M  +16   -0    src/activities/digital_electricity/digital_electricity.js

https://commits.kde.org/gcompris/9aa13a38bf7f5025a649f809e92b54f15d9a10cd

diff --git a/src/activities/digital_electricity/ListWidget.qml \
b/src/activities/digital_electricity/ListWidget.qml index ae8e1d70..dbce7b0b 100644
--- a/src/activities/digital_electricity/ListWidget.qml
+++ b/src/activities/digital_electricity/ListWidget.qml
@@ -39,6 +39,8 @@ Item {
     property alias rotateLeft: rotateLeft
     property alias rotateRight: rotateRight
     property alias info: info
+    property alias zoomInBtn: zoomInBtn
+    property alias zoomOutBtn: zoomOutBtn
 
     ListModel {
         id: mymodel
@@ -197,7 +199,7 @@ Item {
                         states: [
                             State {
                                 name: "canBeSelected"
-                                PropertyChanges{
+                                PropertyChanges {
                                     target: info
                                     source: Activity.url + "Info.svg"
                                 }
@@ -277,6 +279,78 @@ Item {
                             }
                         ]
                     }
+
+                    Rectangle {
+                        id: zoomInBtn
+                        width: 100
+                        height: 100
+                        radius: 100
+
+                        color: "black"
+
+                        GCText {
+                            anchors.centerIn: parent
+                            text: qsTr("+")
+                            color: "white"
+                        }
+
+                        MouseArea {
+                            anchors.fill: parent
+                            onClicked: Activity.zoomIn()
+                        }
+                        states: [
+                            State {
+                                name: "canZoomIn"
+                                PropertyChanges {
+                                    target: zoomInBtn
+                                    opacity: 1.0
+                                }
+                            },
+                            State {
+                                name: "cannotZoomIn"
+                                PropertyChanges {
+                                    target: zoomInBtn
+                                    opacity: 0.5
+                                }
+                            }
+                        ]
+                    }
+
+                    Rectangle {
+                        id: zoomOutBtn
+                        width: 100
+                        height: 100
+                        radius: 100
+
+                        color: "black"
+
+                        GCText {
+                            anchors.centerIn: parent
+                            text: qsTr("-")
+                            color: "white"
+                        }
+
+                        MouseArea {
+                            anchors.fill: parent
+                            onClicked: Activity.zoomOut()
+                        }
+                        states: [
+                            State {
+                                name: "canZoomOut"
+                                PropertyChanges {
+                                    target: zoomOutBtn
+                                    opacity: 1.0
+                                }
+                            },
+                            State {
+                                name: "cannotZoomOut"
+                                PropertyChanges {
+                                    target: zoomOutBtn
+                                    opacity: 0.5
+                                }
+                            }
+                        ]
+                    }
                 }
             }
         }
diff --git a/src/activities/digital_electricity/digital_electricity.js \
b/src/activities/digital_electricity/digital_electricity.js index 79ddd97f..815ce577 \
                100644
--- a/src/activities/digital_electricity/digital_electricity.js
+++ b/src/activities/digital_electricity/digital_electricity.js
@@ -99,6 +99,8 @@ function initLevel() {
     updateToolTip("")
 
     currentZoom = defaultZoom
+    items.availablePieces.zoomInBtn.state = "cannotZoomIn"
+    items.availablePieces.zoomOutBtn.state = "canZoomOut"
     viewPort.leftEdge = 0
     viewPort.topEdge = 0
 
@@ -347,6 +349,13 @@ function zoomIn() {
         currentZoom = maxZoom
     var zoomRatio = currentZoom / previousZoom
     updateComponentDimension(zoomRatio)
+
+    if (currentZoom == maxZoom) {
+        items.availablePieces.zoomInBtn.state = "cannotZoomIn"
+    } else {
+        items.availablePieces.zoomInBtn.state = "canZoomIn"
+    }
+    items.availablePieces.zoomOutBtn.state = "canZoomOut"
 }
 
 function zoomOut() {
@@ -356,6 +365,13 @@ function zoomOut() {
         currentZoom = minZoom
     var zoomRatio = currentZoom / previousZoom
     updateComponentDimension(zoomRatio)
+
+    if (currentZoom == minZoom) {
+        items.availablePieces.zoomOutBtn.state = "cannotZoomOut"
+    } else {
+        items.availablePieces.zoomOutBtn.state = "canZoomOut"
+    }
+    items.availablePieces.zoomInBtn.state = "canZoomIn"
 }
 
 function updateComponentDimension(zoomRatio) {


[prev in list] [next in list] [prev in thread] [next in thread]