diff --git a/components/Style.qml b/components/Style.qml index da739477..5671ef6e 100644 --- a/components/Style.qml +++ b/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" diff --git a/components/TitleBar.qml b/components/TitleBar.qml index ef04fdf4..b09e57ef 100644 --- a/components/TitleBar.qml +++ b/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: { - parent.color = MoneroComponents.Style.titleBarButtonHoverColor - btnCloseWalletTooltip.tooltipPopup.open() - } - onExited: { - parent.color = "transparent" - btnCloseWalletTooltip.tooltipPopup.close() - } + onEntered: btnCloseWalletTooltip.tooltipPopup.open() + onExited: 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: { - parent.color = MoneroComponents.Style.titleBarButtonHoverColor - btnLanguageToggleTooltip.tooltipPopup.open() - } - onExited: { - parent.color = "transparent" - btnLanguageToggleTooltip.tooltipPopup.close() - } + onEntered: btnLanguageToggleTooltip.tooltipPopup.open() + onExited: 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: { - parent.color = MoneroComponents.Style.titleBarButtonHoverColor - btnSwitchThemeTooltip.tooltipPopup.open() - } - onExited: { - parent.color = "transparent" - btnSwitchThemeTooltip.tooltipPopup.close() - } + onEntered: btnSwitchThemeTooltip.tooltipPopup.open() + onExited: 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 - onExited: parent.color = "transparent" + onEntered: minimizeTooltip.tooltipPopup.open() + 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 - sourceSize.width: 16 - sourceSize.height: 16 - smooth: true - mipmap: true + image: appWindow.visibility === Window.Maximized ? MoneroComponents.Style.titleBarRestoreSource : MoneroComponents.Style.titleBarFullscreenSource + color: MoneroComponents.Style.defaultFontColor + width: 16 + height: 16 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 - onExited: parent.color = "transparent" + onEntered: maximizeTooltip.tooltipPopup.open() + 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 - onExited: parent.color = "transparent" + onEntered: closeTooltip.tooltipPopup.open() + onExited: closeTooltip.tooltipPopup.close() onClicked: root.closeClicked(); } } diff --git a/fonts/FontAwesome/FontAwesome.qml b/fonts/FontAwesome/FontAwesome.qml index 533909a7..f43fb8dd 100644 --- a/fonts/FontAwesome/FontAwesome.qml +++ b/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" } diff --git a/images/restore.svg b/images/restore.svg new file mode 100644 index 00000000..d232227c --- /dev/null +++ b/images/restore.svg @@ -0,0 +1,83 @@ + + + + + + + + + + + + + + diff --git a/images/themes/white/restore.svg b/images/themes/white/restore.svg new file mode 100644 index 00000000..e1e5007e --- /dev/null +++ b/images/themes/white/restore.svg @@ -0,0 +1,83 @@ + + + + + + + + + + + + + + diff --git a/pages/merchant/MerchantTitlebar.qml b/pages/merchant/MerchantTitlebar.qml index 5f9ebad6..154500bb 100644 --- a/pages/merchant/MerchantTitlebar.qml +++ b/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" - onExited: parent.color = "transparent" + onEntered: minimizeTooltip.tooltipPopup.open() + 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 - sourceSize.width: 16 - sourceSize.height: 16 - smooth: true - mipmap: true + image: appWindow.visibility === Window.Maximized ? MoneroComponents.Style.titleBarRestoreSource : MoneroComponents.Style._b_titleBarFullscreenSource + color: "white" + width: 16 + height: 16 + 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" - onExited: parent.color = "transparent" + onEntered: maximizeTooltip.tooltipPopup.open() + 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" - onExited: parent.color = "transparent" + onEntered: closeTooltip.tooltipPopup.open() + onExited: closeTooltip.tooltipPopup.close() onClicked: root.closeClicked(); } } diff --git a/qml.qrc b/qml.qrc index 1f6e7a36..feacc33b 100644 --- a/qml.qrc +++ b/qml.qrc @@ -233,9 +233,11 @@ images/fullscreen.svg images/close.svg images/minimize.svg + images/restore.svg images/themes/white/close.svg images/themes/white/fullscreen.svg images/themes/white/minimize.svg + images/themes/white/restore.svg components/effects/ColorTransition.qml components/effects/GradientBackground.qml images/check-white.svg