From 4d56ed9e27b63df08a20f6c1459499aaca7bd1d6 Mon Sep 17 00:00:00 2001 From: Sander Ferdinand Date: Sat, 21 Apr 2018 21:59:31 +0200 Subject: [PATCH] Make the titlebar more modular --- components/TitleBar.qml | 98 +++++++++++++++++++++++++++++------------ main.qml | 28 ++++++------ 2 files changed, 84 insertions(+), 42 deletions(-) diff --git a/components/TitleBar.qml b/components/TitleBar.qml index 3fd9a8a0..166e2be9 100644 --- a/components/TitleBar.qml +++ b/components/TitleBar.qml @@ -33,39 +33,55 @@ import QtQuick.Layouts 1.1 Rectangle { id: titleBar + height: { + if(!customDecorations || isMobile){ + return 0; + } + + if(small) return 38 * scaleRatio; + else return 50 * scaleRatio; + } + y: -height + z: 1 + + property string title property int mouseX: 0 property bool containsMouse: false property alias basicButtonVisible: goToBasicVersionButton.visible - property bool customDecorations: true + property bool customDecorations: persistentSettings.customDecorations + property bool showWhatIsButton: true + property bool showMinimizeButton: false + property bool showMaximizeButton: false + property bool showCloseButton: true + property bool showMoneroLogo: false + property bool small: false + + signal closeClicked + signal maximizeClicked + signal minimizeClicked signal goToBasicVersion(bool yes) - height: customDecorations && !isMobile ? 50 : 0 - y: -height - property string title - property alias maximizeButtonVisible: maximizeButton.visible - z: 1 Item { - id: test + // Background gradient width: parent.width - height: 50 - z: 1 + height: s + z: parent.z + 1 - // use jpg for gradiency Image { - anchors.fill: parent - height: parent.height - width: parent.width + anchors.fill: titleBar + height: titleBar.height + width: titleBar.width source: "../images/titlebarGradient.jpg" } } - Item{ + Item { id: titlebarlogo width: 125 - height: 50 + height: parent.height anchors.centerIn: parent - visible: customDecorations - z: 1 + visible: customDecorations && showMoneroLogo + z: parent.z + 1 Image { anchors.left: parent.left @@ -77,6 +93,15 @@ Rectangle { } } + Label { + id: titleLabel + visible: !showMoneroLogo && customDecorations && titleBar.title !== '' + anchors.centerIn: parent + fontSize: 18 + text: titleBar.title + z: parent.z + 1 + } + // collapse left panel Rectangle { id: goToBasicVersionButton @@ -85,10 +110,10 @@ Rectangle { anchors.top: parent.top anchors.left: parent.left color: "transparent" - height: 50 * scaleRatio + height: titleBar.height width: height visible: isMobile - z: 2 + z: parent.z + 2 Image { width: 14 @@ -118,10 +143,11 @@ Rectangle { anchors.top: parent.top anchors.bottom: parent.bottom visible: parent.customDecorations - z: 2 + z: parent.z + 2 Rectangle { id: minimizeButton + visible: showMinimizeButton anchors.top: parent.top anchors.bottom: parent.bottom width: 42 @@ -139,14 +165,13 @@ Rectangle { cursorShape: Qt.PointingHandCursor onEntered: minimizeButton.color = "#262626"; onExited: minimizeButton.color = "transparent"; - onClicked: { - appWindow.visibility = Window.Minimized - } + onClicked: minimizeClicked(); } } Rectangle { id: maximizeButton + visible: showMaximizeButton anchors.top: parent.top anchors.bottom: parent.bottom width: 42 @@ -167,15 +192,13 @@ Rectangle { cursorShape: Qt.PointingHandCursor onEntered: maximizeButton.color = "#262626"; onExited: maximizeButton.color = "transparent"; - onClicked: { - appWindow.visibility = appWindow.visibility !== Window.FullScreen ? Window.FullScreen : - Window.Windowed - } + onClicked: maximizeClicked(); } } Rectangle { id: closeButton + visible: showCloseButton anchors.top: parent.top anchors.bottom: parent.bottom width: 42 @@ -190,7 +213,7 @@ Rectangle { MouseArea { anchors.fill: parent - onClicked: appWindow.close(); + onClicked: closeClicked(); hoverEnabled: true cursorShape: Qt.PointingHandCursor onEntered: closeButton.color = "#262626"; @@ -199,4 +222,23 @@ Rectangle { } } + // window borders + Rectangle { + anchors.bottom: parent.bottom + anchors.right: parent.right + anchors.left: parent.left + height: 1 + color: "#2F2F2F" + z: parent.z + 1 + } + + Rectangle { + anchors.top: parent.top + anchors.right: parent.right + anchors.left: parent.left + visible: titleBar.small + height: 1 + color: "#2F2F2F" + z: parent.z + 1 + } } diff --git a/main.qml b/main.qml index 00b910f5..19956c26 100644 --- a/main.qml +++ b/main.qml @@ -1261,7 +1261,7 @@ ApplicationWindow { PropertyChanges { target: appWindow; width: (screenWidth < 930 || isAndroid || isIOS)? screenWidth : 930; } PropertyChanges { target: appWindow; height: maxWindowHeight; } PropertyChanges { target: resizeArea; visible: true } - PropertyChanges { target: titleBar; maximizeButtonVisible: false } + PropertyChanges { target: titleBar; showMaximizeButton: false } // PropertyChanges { target: frameArea; blocked: true } PropertyChanges { target: titleBar; visible: false } PropertyChanges { target: titleBar; y: 0 } @@ -1277,7 +1277,7 @@ ApplicationWindow { PropertyChanges { target: appWindow; width: (screenWidth < 969 || isAndroid || isIOS)? screenWidth : 969 } //rightPanelExpanded ? 1269 : 1269 - 300; PropertyChanges { target: appWindow; height: maxWindowHeight; } PropertyChanges { target: resizeArea; visible: true } - PropertyChanges { target: titleBar; maximizeButtonVisible: true } + PropertyChanges { target: titleBar; showMaximizeButton: true } // PropertyChanges { target: frameArea; blocked: true } PropertyChanges { target: titleBar; visible: true } // PropertyChanges { target: titleBar; y: 0 } @@ -1596,11 +1596,20 @@ ApplicationWindow { TitleBar { id: titleBar - anchors.left: parent.left - anchors.right: parent.right x: 0 y: 0 - customDecorations: persistentSettings.customDecorations + anchors.left: parent.left + anchors.right: parent.right + showMinimizeButton: true + showMaximizeButton: true + showWhatIsButton: false + showMoneroLogo: true + onCloseClicked: appWindow.close(); + onMaximizeClicked: { + appWindow.visibility = appWindow.visibility !== Window.FullScreen ? Window.FullScreen : + Window.Windowed + } + onMinimizeClicked: appWindow.visibility = Window.Minimized onGoToBasicVersion: { if (yes) { // basicPanel.currentView = middlePanel.currentView @@ -1629,15 +1638,6 @@ ApplicationWindow { } } } - - Rectangle { - anchors.bottom: parent.bottom - anchors.right: parent.right - anchors.left: parent.left - height:1 - color: "#2F2F2F" - z: 2 - } } // new ToolTip