diff --git a/LeftPanel.qml b/LeftPanel.qml
index 678cbef3..faf55a6d 100644
--- a/LeftPanel.qml
+++ b/LeftPanel.qml
@@ -289,6 +289,14 @@ Rectangle {
}
*/
+ // top border
+ Rectangle {
+ anchors.left: parent.left
+ anchors.right: parent.right
+ anchors.leftMargin: 16
+ color: "#313131"
+ height: 1
+ }
// ------------- Transfer tab ---------------
MenuButton {
diff --git a/components/MenuButton.qml b/components/MenuButton.qml
index 7c7b0426..600bcd51 100644
--- a/components/MenuButton.qml
+++ b/components/MenuButton.qml
@@ -58,21 +58,89 @@ Rectangle {
color: "black"
property bool present: !under || under.checked || checked || under.numSelectedChildren > 0
- height: present ? ((appWindow.height >= 800) ? 40 * scaleRatio : 52 * scaleRatio ) : 0
+ height: present ? ((appWindow.height >= 800) ? 44 * scaleRatio : 52 * scaleRatio ) : 0
- Item {
- visible: parent.checked ? true : false
- width: 300
- height: 40
+ // Button gradient whilst checked
+ // @TODO: replace by .png - gradient not available in 2d renderer
+ LinearGradient {
+ visible: button.checked ? true : false
+ anchors.fill: parent
+ start: Qt.point(0, 0)
+ end: Qt.point(300, 0)
+ gradient: Gradient {
+ GradientStop { position: 1.0; color: "#333333" }
+ GradientStop { position: 0.0; color: "black" }
+ }
+ }
- LinearGradient {
- anchors.fill: parent
- start: Qt.point(0, 0)
- end: Qt.point(300, 0)
- gradient: Gradient {
- GradientStop { position: 1.0; color: "#333333" }
- GradientStop { position: 0.0; color: "black" }
- }
+ // button decorations that are subject to leftMargin offsets
+ Rectangle {
+ anchors.left: parent.left
+ anchors.leftMargin: parent.getOffset() + 20 * scaleRatio
+ height: parent.height
+ width: button.checked ? 20: 10
+ color: "#00000000"
+
+ // dot if unchecked
+ Rectangle {
+ id: dot
+ anchors.centerIn: parent
+ width: 8 * scaleRatio
+ height: 8 * scaleRatio
+ radius: 4 * scaleRatio
+ color: button.dotColor
+ visible: !button.checked
+ }
+
+ // arrow if checked
+ Image {
+ anchors.centerIn: parent
+ anchors.left: parent.left
+ source: "../images/menuArrow.png"
+ visible: button.checked
+ }
+
+ // button text
+ Text {
+ id: label
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.left: parent.right
+ anchors.leftMargin: 8 * scaleRatio
+ font.family: "Arial"
+ font.bold: true
+ font.pixelSize: 16 * scaleRatio
+ color: "#FFFFFF"
+ }
+ }
+
+ // menu button right arrow
+ Image {
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.right: parent.right
+ anchors.rightMargin: 20 * scaleRatio
+ anchors.leftMargin: parent.getOffset()
+ source: "../images/right.png"
+ opacity: button.checked ? 1.0 : 0.4
+ }
+
+ Text {
+ id: symbolText
+ anchors.centerIn: parent
+ font.pixelSize: 11 * scaleRatio
+ font.bold: true
+ color: button.checked || buttonArea.containsMouse ? "#FFFFFF" : dot.color
+ visible: appWindow.ctrlPressed
+ }
+
+ MouseArea {
+ id: buttonArea
+ anchors.fill: parent
+ hoverEnabled: true
+ onClicked: {
+ if(parent.checked)
+ return
+ button.doClick()
+ parent.checked = true
}
}
@@ -94,79 +162,4 @@ Rectangle {
// we get the value of checked before the change
ScriptAction { script: if (under) under.numSelectedChildren += checked > 0 ? -1 : 1 }
}
-
- Item {
- anchors.top: parent.top
- anchors.bottom: parent.bottom
- anchors.left: parent.left
- anchors.leftMargin: parent.getOffset()
- width: 46 * scaleRatio
-
- Rectangle {
- id: dot
- anchors.centerIn: parent
- width: 8 * scaleRatio
- height: width
- radius: height / 2
-
- Rectangle {
- anchors.centerIn: parent
- width: 8 * scaleRatio
- height: width
- radius: height / 2
- color: "#1C1C1C"
- visible: !button.checked && !buttonArea.containsMouse
- }
- }
-
- Text {
- id: symbolText
- anchors.centerIn: parent
- font.pixelSize: 11 * scaleRatio
- font.bold: true
- color: button.checked || buttonArea.containsMouse ? "#FFFFFF" : dot.color
- visible: appWindow.ctrlPressed
- }
- }
-
-// Rectangle {
-// anchors.left: parent.left
-// anchors.top: parent.top
-// anchors.bottom: parent.bottom
-// width: 1
-// color: "#DBDBDB"
-// visible: parent.checked
-// }
-
- // menu button arrow
- Image {
- anchors.verticalCenter: parent.verticalCenter
- anchors.right: parent.right
- anchors.rightMargin: 20 * scaleRatio
- anchors.leftMargin: parent.getOffset()
- source: "../images/right.png"
- }
-
- // menu button text
- Text {
- id: label
- anchors.verticalCenter: parent.verticalCenter
- anchors.left: parent.left
- anchors.leftMargin: parent.getOffset() + 38 * scaleRatio
- font.family: "Arial"
- font.pixelSize: 16 * scaleRatio
- color: "#FFFFFF"
- }
-
- MouseArea {
- id: buttonArea
- anchors.fill: parent
- hoverEnabled: true
- onClicked: {
- if(parent.checked)
- return
- button.doClick()
- parent.checked = true
- }
- }
}
diff --git a/images/menuArrow.png b/images/menuArrow.png
new file mode 100755
index 00000000..6443f794
Binary files /dev/null and b/images/menuArrow.png differ
diff --git a/qml.qrc b/qml.qrc
index d1358ba3..d1c5431c 100644
--- a/qml.qrc
+++ b/qml.qrc
@@ -177,5 +177,6 @@
images/balanceGradient.jpg
images/titlebarGradient.jpg
images/titlebarLogo.png
+ images/menuArrow.png