Make the titlebar more modular

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