[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-25 15:03:01
Message-ID: E1dlG8T-0004r3-UE () code ! kde ! org
[Download RAW message or body]
Git commit 363e0725dbd127883615335189258fc74347683e by Rudra Nil Basu.
Committed on 25/08/2017 at 15:02.
Pushed by rudranilbasu into branch 'gsoc_pulkit_digital_electricity'.
digital_electricity: Allow hide/unhide tool icons
Previously, the tools icons were placed in a Grid with two rows and two
columns, which were too small for devices with small screen size. This
is replaced by a single "Tools" button, which shows/hides a menu
containing all the tools options on alternate clicking. This avoids the
problem of having the icons of small size, along with keeping a balance
between amount of free space available and number of clicks required to
access a tool (once or more than once).
The Tools are placed under a Flow, whose parent is a Rectangle which
serves as the container of the Tools. When the tools option is clicked
alternatively, the visibility of the container is changed accordingly.
Signed-off-by: Rudra Nil Basu <rudra.nil.basu.1996@gmail.com>
M +160 -120 src/activities/digital_electricity/ListWidget.qml
https://commits.kde.org/gcompris/363e0725dbd127883615335189258fc74347683e
diff --git a/src/activities/digital_electricity/ListWidget.qml \
b/src/activities/digital_electricity/ListWidget.qml index 18b22b33..ae8e1d70 100644
--- a/src/activities/digital_electricity/ListWidget.qml
+++ b/src/activities/digital_electricity/ListWidget.qml
@@ -97,146 +97,186 @@ Item {
availablePieces.view.setPreviousNavigation()
}
- Column {
- id: toolButtons
+ Rectangle {
+ id: toolButton
width: listWidget.vert ? listWidget.width : listWidget.height
height: listWidget.vert ? listWidget.width : listWidget.height
- spacing: 10
+ color: "black"
+ radius: 100
- Row {
- spacing: view.iconSize * 0.20
+ property bool showToolBar: false
- Image {
- id: toolDelete
- state: "notSelected"
- sourceSize.width: view.iconSize * 0.35
- fillMode: Image.PreserveAspectFit
- MouseArea {
- anchors.fill: parent
- onClicked: {
- toolDelete.state = toolDelete.state == "selected" ? \
"notSelected" : "selected"
- Activity.toolDelete = !Activity.toolDelete
- Activity.toolDeleteSticky = false
- }
- onDoubleClicked: {
- Activity.toolDeleteSticky = true
- Activity.toolDelete = true
- toolDelete.state = "selected"
- }
+ GCText {
+ anchors.centerIn: parent
+ color: "white"
+ text: qsTr("Tools")
+ }
+
+ MouseArea {
+ anchors.fill: parent
+ onClicked: toolButton.showToolBar = !toolButton.showToolBar
+ }
+
+ Rectangle {
+ id: toolsContainer
+ visible: toolButton.showToolBar
+ width: listWidget.vert ? (toolDelete.width + tools.spacing) * \
tools.children.length : parent.width + height: listWidget.vert ? \
parent.width : (toolDelete.height + tools.spacing) * tools.children.length + \
anchors.top: listWidget.vert ? parent.top : parent.bottom + \
anchors.left: listWidget.vert ? parent.right : parent.left + color: \
"gray" + radius: 50
+
+ Flow {
+ id: tools
+ width: parent.width
+ height: parent.height
+
+ property int topMarginAmt: (toolsContainer.height - \
toolDelete.height) / 2 + property int leftMarginAmt: \
(toolsContainer.width - toolDelete.width) / 2 +
+ anchors {
+ fill: parent
+ leftMargin: listWidget.vert ? 5 : tools.leftMarginAmt
+ topMargin: listWidget.vert ? tools.topMarginAmt : 5
}
- states: [
- State {
- name: "selected"
- PropertyChanges{
- target: toolDelete
- source: Activity.url + "deleteOn.svg"
+ spacing: 10
+
+ Image {
+ id: toolDelete
+ state: "notSelected"
+ width: 100
+ height: 100
+ source: Activity.url + "deleteOn.svg"
+ fillMode: Image.PreserveAspectFit
+ MouseArea {
+ anchors.fill: parent
+ onClicked: {
+ toolDelete.state = toolDelete.state == "selected" ? \
"notSelected" : "selected" + Activity.toolDelete = \
!Activity.toolDelete + Activity.toolDeleteSticky = \
false }
- },
- State {
- name: "notSelected"
- PropertyChanges {
- target: toolDelete
- source: Activity.url + "deleteOff.svg"
+ onDoubleClicked: {
+ Activity.toolDeleteSticky = true
+ Activity.toolDelete = true
+ toolDelete.state = "selected"
}
}
- ]
- }
-
- Image {
- id: info
- source: Activity.url + "Info.svg"
- sourceSize.width: view.iconSize * 0.35
- fillMode: Image.PreserveAspectFit
- MouseArea {
- anchors.fill: parent
- onClicked: {
- if(!Activity.animationInProgress && parent.state == \
"canBeSelected") {
- Activity.displayInfo()
+ states: [
+ State {
+ name: "selected"
+ PropertyChanges{
+ target: toolDelete
+ source: Activity.url + "deleteOn.svg"
+ }
+ },
+ State {
+ name: "notSelected"
+ PropertyChanges {
+ target: toolDelete
+ source: Activity.url + "deleteOff.svg"
+ }
}
- }
+ ]
}
- states: [
- State {
- name: "canBeSelected"
- PropertyChanges{
- target: info
- source: Activity.url + "Info.svg"
- }
- },
- State {
- name: "canNotBeSelected"
- PropertyChanges {
- target: info
- source: Activity.url + "InfoOff.svg"
- }
- }
- ]
- }
- }
-
- Row {
- spacing: view.iconSize * 0.20
- Image {
- id: rotateLeft
- sourceSize.width: view.iconSize * 0.35
- fillMode: Image.PreserveAspectFit
- state: "CanNotBeSelected"
- MouseArea {
- anchors.fill: parent
- onClicked: {
- if(!Activity.animationInProgress && parent.state == \
"canBeSelected") {
- Activity.rotateLeft()
+ Image {
+ id: info
+ source: Activity.url + "Info.svg"
+ width: 100
+ height: 100
+ fillMode: Image.PreserveAspectFit
+ MouseArea {
+ anchors.fill: parent
+ onClicked: {
+ if(!Activity.animationInProgress && parent.state == \
"canBeSelected") { + Activity.displayInfo()
+ }
}
}
- }
- states: [
- State {
- name: "canBeSelected"
- PropertyChanges{
- target: rotateLeft
- source: Activity.url + "rotateLeft.svg"
- }
- },
- State {
- name: "canNotBeSelected"
- PropertyChanges {
- target: rotateLeft
- source: Activity.url + "rotateLeftOff.svg"
+ states: [
+ State {
+ name: "canBeSelected"
+ PropertyChanges{
+ target: info
+ source: Activity.url + "Info.svg"
+ }
+ },
+ State {
+ name: "canNotBeSelected"
+ PropertyChanges {
+ target: info
+ source: Activity.url + "InfoOff.svg"
+ }
}
- }
- ]
- }
+ ]
+ }
- Image {
- id: rotateRight
- sourceSize.width: view.iconSize * 0.35
- fillMode: Image.PreserveAspectFit
- state: "CanNotBeSelected"
- MouseArea {
- anchors.fill: parent
- onClicked: {
- if(!Activity.animationInProgress && parent.state == \
"canBeSelected") {
- Activity.rotateRight()
+ Image {
+ id: rotateLeft
+ width: 100
+ height: 100
+ source: Activity.url + "rotateLeft.svg"
+ fillMode: Image.PreserveAspectFit
+ state: "CanNotBeSelected"
+ MouseArea {
+ anchors.fill: parent
+ onClicked: {
+ if(!Activity.animationInProgress && parent.state == \
"canBeSelected") { + Activity.rotateLeft()
+ }
}
}
- }
- states: [
- State {
- name: "canBeSelected"
- PropertyChanges{
- target: rotateRight
- source: Activity.url + "rotateRight.svg"
+ states: [
+ State {
+ name: "canBeSelected"
+ PropertyChanges{
+ target: rotateLeft
+ source: Activity.url + "rotateLeft.svg"
+ }
+ },
+ State {
+ name: "canNotBeSelected"
+ PropertyChanges {
+ target: rotateLeft
+ source: Activity.url + "rotateLeftOff.svg"
+ }
}
- },
- State {
- name: "canNotBeSelected"
- PropertyChanges {
- target: rotateRight
- source: Activity.url + "rotateRightOff.svg"
+ ]
+ }
+
+ Image {
+ id: rotateRight
+ width: 100
+ height: 100
+ source: Activity.url + "rotateRight.svg"
+ fillMode: Image.PreserveAspectFit
+ state: "CanNotBeSelected"
+ MouseArea {
+ anchors.fill: parent
+ onClicked: {
+ if(!Activity.animationInProgress && parent.state == \
"canBeSelected") { + Activity.rotateRight()
+ }
}
}
- ]
+ states: [
+ State {
+ name: "canBeSelected"
+ PropertyChanges{
+ target: rotateRight
+ source: Activity.url + "rotateRight.svg"
+ }
+ },
+ State {
+ name: "canNotBeSelected"
+ PropertyChanges {
+ target: rotateRight
+ source: Activity.url + "rotateRightOff.svg"
+ }
+ }
+ ]
+ }
}
}
}
[prev in list] [next in list] [prev in thread] [next in thread]
Configure |
About |
News |
Add a list |
Sponsored by KoreLogic