TitleBar, MerchantTitleBar: add tooltips + fontAwesome fallback icons + restore icon; keep hover background color when switching theme

components/Style.qml

@@ -57,6 +57,7 @@ QtObject {
     property string titleBarLogoSource: blackTheme ? _b_titleBarLogoSource : _w_titleBarLogoSource
     property string titleBarMinimizeSource: blackTheme ? _b_titleBarMinimizeSource : _w_titleBarMinimizeSource
     property string titleBarFullscreenSource: blackTheme ? _b_titleBarFullscreenSource : _w_titleBarFullscreenSource
+    property string titleBarRestoreSource: blackTheme ? _b_titleBarRestoreSource : _w_titleBarRestoreSource
     property string titleBarCloseSource: blackTheme ? _b_titleBarCloseSource : _w_titleBarCloseSource
     property string titleBarButtonHoverColor: blackTheme ? _b_titleBarButtonHoverColor : _w_titleBarButtonHoverColor
 
@@ -118,6 +119,7 @@ QtObject {
     property string _b_titleBarLogoSource: "qrc:///images/titlebarLogo.png"
     property string _b_titleBarMinimizeSource: "qrc:///images/minimize.svg"
     property string _b_titleBarFullscreenSource: "qrc:///images/fullscreen.svg"
+    property string _b_titleBarRestoreSource: "qrc:///images/restore.svg"
     property string _b_titleBarCloseSource: "qrc:///images/close.svg"
     property string _b_titleBarButtonHoverColor: "#10FFFFFF"
 
@@ -179,6 +181,7 @@ QtObject {
     property string _w_titleBarLogoSource: "qrc:///images/themes/white/titlebarLogo.png"
     property string _w_titleBarMinimizeSource: "qrc:///images/themes/white/minimize.svg"
     property string _w_titleBarFullscreenSource: "qrc:///images/themes/white/fullscreen.svg"
+    property string _w_titleBarRestoreSource: "qrc:///images/themes/white/restore.svg"
     property string _w_titleBarCloseSource: "qrc:///images/themes/white/close.svg"
     property string _w_titleBarButtonHoverColor: "#11000000"
 

components/TitleBar.qml

@@ -94,7 +94,7 @@ Rectangle {
         // collapse sidebar
         Rectangle {
             id: btnCloseWallet
-            color: "transparent"
+            color: btnCloseWalletMouseArea.containsMouse ? MoneroComponents.Style.titleBarButtonHoverColor : "transparent"
             Layout.preferredWidth: parent.height
             Layout.preferredHeight: parent.height
 
@@ -117,17 +117,12 @@ Rectangle {
             }
 
             MouseArea {
+                id: btnCloseWalletMouseArea
                 anchors.fill: parent
                 hoverEnabled: true
                 cursorShape: Qt.PointingHandCursor
-                onEntered: {
+                onEntered: btnCloseWalletTooltip.tooltipPopup.open()
-                    parent.color = MoneroComponents.Style.titleBarButtonHoverColor
+                onExited: btnCloseWalletTooltip.tooltipPopup.close()
-                    btnCloseWalletTooltip.tooltipPopup.open()
-                }
-                onExited: {
-                    parent.color = "transparent"
-                    btnCloseWalletTooltip.tooltipPopup.close()
-                }
                 onClicked: root.closeWalletClicked(leftPanel.visible)
             }
         }
@@ -135,7 +130,7 @@ Rectangle {
         // language selection
         Rectangle {
             id: btnLanguageToggle
-            color: "transparent"
+            color: btnLanguageToggleMouseArea.containsMouse ? MoneroComponents.Style.titleBarButtonHoverColor : "transparent"
             Layout.preferredWidth: parent.height
             Layout.preferredHeight: parent.height
 
@@ -157,24 +152,19 @@ Rectangle {
             }
 
             MouseArea {
+                id: btnLanguageToggleMouseArea
                 anchors.fill: parent
                 hoverEnabled: true
                 cursorShape: Qt.PointingHandCursor
-                onEntered: {
+                onEntered: btnLanguageToggleTooltip.tooltipPopup.open()
-                    parent.color = MoneroComponents.Style.titleBarButtonHoverColor
+                onExited: btnLanguageToggleTooltip.tooltipPopup.close()
-                    btnLanguageToggleTooltip.tooltipPopup.open()
-                }
-                onExited: {
-                    parent.color = "transparent"
-                    btnLanguageToggleTooltip.tooltipPopup.close()
-                }
                 onClicked: root.languageClicked()
             }
         }
 
         // switch theme
         Rectangle {
-            color: "transparent"
+            color: switchThemeMouseArea.containsMouse ? MoneroComponents.Style.titleBarButtonHoverColor : "transparent"
             Layout.preferredWidth: parent.height
             Layout.preferredHeight: parent.height
 
@@ -196,17 +186,12 @@ Rectangle {
             }
 
             MouseArea {
+                id: switchThemeMouseArea
                 anchors.fill: parent
                 hoverEnabled: true
                 cursorShape: Qt.PointingHandCursor
-                onEntered: {
+                onEntered: btnSwitchThemeTooltip.tooltipPopup.open()
-                    parent.color = MoneroComponents.Style.titleBarButtonHoverColor
+                onExited: btnSwitchThemeTooltip.tooltipPopup.close()
-                    btnSwitchThemeTooltip.tooltipPopup.open()
-                }
-                onExited: {
-                    parent.color = "transparent"
-                    btnSwitchThemeTooltip.tooltipPopup.close()
-                }
                 onClicked: {
                     MoneroComponents.Style.blackTheme = !MoneroComponents.Style.blackTheme;
                 }
@@ -270,7 +255,7 @@ Rectangle {
 
         // minimize
         Rectangle {
-            color: "transparent"
+            color: minimizeMouseArea.containsMouse ? MoneroComponents.Style.titleBarButtonHoverColor : "transparent"
             visible: root.showMinimizeButton
             Layout.preferredWidth: parent.height
             Layout.preferredHeight: parent.height
@@ -285,47 +270,62 @@ Rectangle {
                 color: MoneroComponents.Style.defaultFontColor
                 fontAwesomeFallbackIcon: FontAwesome.minus
                 fontAwesomeFallbackSize: 18
-                fontAwesomeFallbackOpacity: MoneroComponents.Style.blackTheme ? 0.8 : 0.6
+                fontAwesomeFallbackOpacity: 1
                 opacity: 0.75
             }
 
+            MoneroComponents.Tooltip {
+                id: minimizeTooltip
+                anchors.fill: parent
+                text: qsTr("Minimize") + translationManager.emptyString
+                tooltipLeft: true
+            }
+
             MouseArea {
+                id: minimizeMouseArea
                 anchors.fill: parent
                 hoverEnabled: true
                 cursorShape: Qt.PointingHandCursor
-                onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor
+                onEntered: minimizeTooltip.tooltipPopup.open()
-                onExited: parent.color = "transparent"
+                onExited: minimizeTooltip.tooltipPopup.close()
                 onClicked: root.minimizeClicked();
             }
         }
 
         // maximize
         Rectangle {
-            id: test
             visible: root.showMaximizeButton
-            color: "transparent"
+            color: maximizeMouseArea.containsMouse ? MoneroComponents.Style.titleBarButtonHoverColor : "transparent"
             Layout.preferredWidth: parent.height
             Layout.preferredHeight: parent.height
 
-            Image {
+            MoneroEffects.ImageMask {
                 anchors.verticalCenter: parent.verticalCenter
                 anchors.horizontalCenter: parent.horizontalCenter
-                source: MoneroComponents.Style.titleBarFullscreenSource
+                image: appWindow.visibility === Window.Maximized ? MoneroComponents.Style.titleBarRestoreSource : MoneroComponents.Style.titleBarFullscreenSource
-                sourceSize.width: 16
+                color: MoneroComponents.Style.defaultFontColor
-                sourceSize.height: 16
+                width: 16
-                smooth: true
+                height: 16
-                mipmap: true
                 opacity: 0.75
-                rotation: appWindow.visibility === Window.FullScreen ? 180 : 0
+                fontAwesomeFallbackIcon: appWindow.visibility === Window.Maximized ? FontAwesome.windowRestore : FontAwesome.windowMaximize
+                fontAwesomeFallbackSize: 21
+                fontAwesomeFallbackOpacity: 1
+            }
+
+            MoneroComponents.Tooltip {
+                id: maximizeTooltip
+                anchors.fill: parent
+                text: appWindow.visibility === Window.Maximized ? qsTr("Restore") : qsTr("Maximize") + translationManager.emptyString
+                tooltipLeft: true
             }
 
             MouseArea {
-                id: buttonArea
+                id: maximizeMouseArea
                 anchors.fill: parent
                 hoverEnabled: true
                 cursorShape: Qt.PointingHandCursor
-                onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor
+                onEntered: maximizeTooltip.tooltipPopup.open()
-                onExited: parent.color = "transparent"
+                onExited: maximizeTooltip.tooltipPopup.close()
                 onClicked: root.maximizeClicked();
             }
         }
@@ -333,7 +333,7 @@ Rectangle {
         // close
         Rectangle {
             visible: root.showCloseButton
-            color: "transparent"
+            color: closeMouseArea.containsMouse ? MoneroComponents.Style.titleBarButtonHoverColor : "transparent"
             Layout.preferredWidth: parent.height
             Layout.preferredHeight: parent.height
 
@@ -346,16 +346,24 @@ Rectangle {
                 color: MoneroComponents.Style.defaultFontColor
                 fontAwesomeFallbackIcon: FontAwesome.times
                 fontAwesomeFallbackSize: 21
-                fontAwesomeFallbackOpacity: MoneroComponents.Style.blackTheme ? 0.8 : 0.6
+                fontAwesomeFallbackOpacity: 1
                 opacity: 0.75
             }
 
+            MoneroComponents.Tooltip {
+                id: closeTooltip
+                anchors.fill: parent
+                text: qsTr("Close Monero GUI") + translationManager.emptyString
+                tooltipLeft: true
+            }
+
             MouseArea {
+                id: closeMouseArea
                 anchors.fill: parent
                 hoverEnabled: true
                 cursorShape: Qt.PointingHandCursor
-                onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor
+                onEntered: closeTooltip.tooltipPopup.open()
-                onExited: parent.color = "transparent"
+                onExited: closeTooltip.tooltipPopup.close()
                 onClicked: root.closeClicked();
             }
         }

fonts/FontAwesome/FontAwesome.qml

@@ -71,4 +71,6 @@ Object {
     property string shieldAlt : "\uf3ed"
     property string signOutAlt : "\uf2f5"
     property string times : "\uf00d"
+    property string windowMaximize : "\uf2d0"
+    property string windowRestore : "\uf2d2"
 }

images/restore.svg

@@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="18"
+   height="18"
+   viewBox="0 0 18 18"
+   version="1.1"
+   id="svg161"
+   sodipodi:docname="restore.svg"
+   inkscape:version="1.1.1 (1:1.1+202109281944+c3084ef5ed)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs165" />
+  <sodipodi:namedview
+     id="namedview163"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="22.416667"
+     inkscape:cx="13.494424"
+     inkscape:cy="8.8550186"
+     inkscape:window-width="1848"
+     inkscape:window-height="1016"
+     inkscape:window-x="72"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg161">
+    <inkscape:grid
+       type="xygrid"
+       id="grid247" />
+  </sodipodi:namedview>
+  <g
+     fill="none"
+     fill-rule="evenodd"
+     stroke="#ffffff"
+     stroke-width="1.636"
+     opacity="1"
+     id="g159"
+     transform="matrix(0.81887555,0,0,0.81887555,2.7243075,0.03677091)"
+     style="fill:none">
+    <rect
+       width="16.364"
+       height="16.364"
+       x="0.81800002"
+       y="0.81800002"
+       rx="1.636"
+       id="rect155"
+       style="fill:none" />
+  </g>
+  <g
+     fill="none"
+     fill-rule="evenodd"
+     stroke="#ffffff"
+     stroke-width="1.636"
+     opacity="1"
+     id="g159-3"
+     transform="matrix(0.81887555,0,0,0.81887555,0.05518064,3.2479998)"
+     style="fill:none">
+    <rect
+       width="16.364"
+       height="16.364"
+       x="0.81800002"
+       y="0.81800002"
+       rx="1.636"
+       id="rect155-6"
+       style="fill:none" />
+    <rect
+       width="16.364"
+       height="3.273"
+       x="0.81800002"
+       y="0.81800002"
+       fill="#ffffff"
+       rx="1.636"
+       id="rect157-7"
+       style="fill:none" />
+  </g>
+</svg>

images/themes/white/restore.svg

@@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="18"
+   height="18"
+   viewBox="0 0 18 18"
+   version="1.1"
+   id="svg161"
+   sodipodi:docname="restore.svg"
+   inkscape:version="1.1.1 (1:1.1+202109281944+c3084ef5ed)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs165" />
+  <sodipodi:namedview
+     id="namedview163"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="22.416667"
+     inkscape:cx="4.7063196"
+     inkscape:cy="8.8550185"
+     inkscape:window-width="1848"
+     inkscape:window-height="1016"
+     inkscape:window-x="72"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg161">
+    <inkscape:grid
+       type="xygrid"
+       id="grid247" />
+  </sodipodi:namedview>
+  <g
+     fill="none"
+     fill-rule="evenodd"
+     stroke="#ffffff"
+     stroke-width="1.636"
+     opacity="1"
+     id="g159"
+     transform="matrix(0.81887555,0,0,0.81887555,2.7243075,0.03677091)"
+     style="fill:none;stroke:#000000;stroke-opacity:1">
+    <rect
+       width="16.364"
+       height="16.364"
+       x="0.81800002"
+       y="0.81800002"
+       rx="1.636"
+       id="rect155"
+       style="fill:none;stroke:#000000;stroke-opacity:1" />
+  </g>
+  <g
+     fill="none"
+     fill-rule="evenodd"
+     stroke="#ffffff"
+     stroke-width="1.636"
+     opacity="1"
+     id="g159-3"
+     transform="matrix(0.81887555,0,0,0.81887555,0.05518064,3.2479998)"
+     style="fill:none;stroke:#000000;stroke-opacity:1">
+    <rect
+       width="16.364"
+       height="16.364"
+       x="0.81800002"
+       y="0.81800002"
+       rx="1.636"
+       id="rect155-6"
+       style="fill:none;stroke:#000000;stroke-opacity:1" />
+    <rect
+       width="16.364"
+       height="3.273"
+       x="0.81800002"
+       y="0.81800002"
+       fill="#ffffff"
+       rx="1.636"
+       id="rect157-7"
+       style="fill:none;stroke:#000000;stroke-opacity:1" />
+  </g>
+</svg>

pages/merchant/MerchantTitlebar.qml

@@ -91,7 +91,7 @@ Rectangle {
 
         // minimize
         Rectangle {
-            color: "transparent"
+            color: minimizeMouseArea.containsMouse ? "#44FFFFFF" : "transparent"
             visible: root.showMinimizeButton
             Layout.preferredWidth: parent.height
             Layout.preferredHeight: parent.height
@@ -104,46 +104,64 @@ Rectangle {
                 width: 15
                 image: MoneroComponents.Style.titleBarMinimizeSource
                 color: "white"
+                fontAwesomeFallbackIcon: FontAwesome.minus
+                fontAwesomeFallbackSize: 18
+                fontAwesomeFallbackOpacity: MoneroComponents.Style.blackTheme ? 0.8 : 0.6
                 opacity: 0.75
             }
 
+            MoneroComponents.Tooltip {
+                id: minimizeTooltip
+                anchors.fill: parent
+                text: qsTr("Minimize") + translationManager.emptyString
+                tooltipLeft: true
+            }
+
             MouseArea {
+                id: minimizeMouseArea
                 anchors.fill: parent
                 hoverEnabled: true
                 cursorShape: Qt.PointingHandCursor
-                onEntered: parent.color = "#44FFFFFF"
+                onEntered: minimizeTooltip.tooltipPopup.open()
-                onExited: parent.color = "transparent"
+                onExited: minimizeTooltip.tooltipPopup.close()
                 onClicked: root.minimizeClicked();
             }
         }
 
         // maximize
         Rectangle {
-            id: test
             visible: root.showMaximizeButton
-            color: "transparent"
+            color: maximizeMouseArea.containsMouse ? "#44FFFFFF" : "transparent"
             Layout.preferredWidth: parent.height
             Layout.preferredHeight: parent.height
 
-            Image {
+            MoneroEffects.ImageMask {
                 anchors.verticalCenter: parent.verticalCenter
                 anchors.horizontalCenter: parent.horizontalCenter
-                source: MoneroComponents.Style._b_titleBarFullscreenSource
+                image: appWindow.visibility === Window.Maximized ? MoneroComponents.Style.titleBarRestoreSource : MoneroComponents.Style._b_titleBarFullscreenSource
-                sourceSize.width: 16
+                color: "white"
-                sourceSize.height: 16
+                width: 16
-                smooth: true
+                height: 16
-                mipmap: true
+                fontAwesomeFallbackIcon: appWindow.visibility === Window.Maximized ? FontAwesome.windowRestore : FontAwesome.windowMaximize
+                fontAwesomeFallbackSize: 21
+                fontAwesomeFallbackOpacity: MoneroComponents.Style.blackTheme ? 0.8 : 0.6
                 opacity: 0.75
-                rotation: appWindow.visibility === Window.FullScreen ? 180 : 0
+            }
+
+            MoneroComponents.Tooltip {
+                id: maximizeTooltip
+                anchors.fill: parent
+                text: appWindow.visibility === Window.Maximized ? qsTr("Restore") : qsTr("Maximize") + translationManager.emptyString
+                tooltipLeft: true
             }
 
             MouseArea {
-                id: buttonArea
+                id: maximizeMouseArea
                 anchors.fill: parent
                 hoverEnabled: true
                 cursorShape: Qt.PointingHandCursor
-                onEntered: parent.color = "#44FFFFFF"
+                onEntered: maximizeTooltip.tooltipPopup.open()
-                onExited: parent.color = "transparent"
+                onExited: maximizeTooltip.tooltipPopup.close()
                 onClicked: root.maximizeClicked();
             }
         }
@@ -151,7 +169,7 @@ Rectangle {
         // close
         Rectangle {
             visible: root.showCloseButton
-            color: "transparent"
+            color: closeMouseArea.containsMouse ? "#44FFFFFF" : "transparent"
             Layout.preferredWidth: parent.height
             Layout.preferredHeight: parent.height
 
@@ -162,15 +180,26 @@ Rectangle {
                 width: 16
                 image: MoneroComponents.Style._b_titleBarCloseSource
                 color: "white"
+                fontAwesomeFallbackIcon: FontAwesome.times
+                fontAwesomeFallbackSize: 21
+                fontAwesomeFallbackOpacity: MoneroComponents.Style.blackTheme ? 0.8 : 0.6
                 opacity: 0.75
             }
 
+            MoneroComponents.Tooltip {
+                id: closeTooltip
+                anchors.fill: parent
+                text: qsTr("Close Monero GUI") + translationManager.emptyString
+                tooltipLeft: true
+            }
+
             MouseArea {
+                id: closeMouseArea
                 anchors.fill: parent
                 hoverEnabled: true
                 cursorShape: Qt.PointingHandCursor
-                onEntered: parent.color = "#44FFFFFF"
+                onEntered: closeTooltip.tooltipPopup.open()
-                onExited: parent.color = "transparent"
+                onExited: closeTooltip.tooltipPopup.close()
                 onClicked: root.closeClicked();
             }
         }

qml.qrc

@@ -233,9 +233,11 @@
         <file>images/fullscreen.svg</file>
         <file>images/close.svg</file>
         <file>images/minimize.svg</file>
+        <file>images/restore.svg</file>
         <file>images/themes/white/close.svg</file>
         <file>images/themes/white/fullscreen.svg</file>
         <file>images/themes/white/minimize.svg</file>
+        <file>images/themes/white/restore.svg</file>
         <file>components/effects/ColorTransition.qml</file>
         <file>components/effects/GradientBackground.qml</file>
         <file>images/check-white.svg</file>