From 5fdc9d894eb5a0937e5900ac72d0f78fb75a6154 Mon Sep 17 00:00:00 2001 From: Sander Ferdinand Date: Thu, 16 Nov 2017 18:40:09 +0100 Subject: [PATCH] New menu button layout - implemented arrow thingy --- LeftPanel.qml | 8 ++ components/MenuButton.qml | 169 ++++++++++++++++++-------------------- images/menuArrow.png | Bin 0 -> 15933 bytes qml.qrc | 1 + 4 files changed, 90 insertions(+), 88 deletions(-) create mode 100755 images/menuArrow.png 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 0000000000000000000000000000000000000000..6443f794e5d85980340d10dac2e138e7e6d3dab1 GIT binary patch literal 15933 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/balanceGradient.jpg images/titlebarGradient.jpg images/titlebarLogo.png + images/menuArrow.png