From 55b3b6f8c26a4c7fc14c93da809191aa85364145 Mon Sep 17 00:00:00 2001 From: rating89us <45968869+rating89us@users.noreply.github.com> Date: Sun, 20 Jun 2021 14:30:37 +0200 Subject: [PATCH] TitleBar/MerchantTitleBar/StandardDialog: use fontAwesome on maximize, restore & close icons; main: fontawesome fallback for resize area --- components/StandardDialog.qml | 29 ++++++--- components/Style.qml | 9 --- components/TitleBar.qml | 97 ++++++++++++++++++++--------- fonts/FontAwesome/FontAwesome.qml | 1 + images/close.svg | 5 -- images/fullscreen.svg | 6 -- images/minimize.svg | 3 - images/themes/white/close.svg | 6 -- images/themes/white/fullscreen.svg | 7 --- images/themes/white/minimize.svg | 3 - main.qml | 9 ++- pages/merchant/MerchantTitlebar.qml | 86 +++++++++++++++++-------- qml.qrc | 6 -- 13 files changed, 154 insertions(+), 113 deletions(-) delete mode 100644 images/close.svg delete mode 100644 images/fullscreen.svg delete mode 100644 images/minimize.svg delete mode 100644 images/themes/white/close.svg delete mode 100644 images/themes/white/fullscreen.svg delete mode 100644 images/themes/white/minimize.svg diff --git a/components/StandardDialog.qml b/components/StandardDialog.qml index df1aa2f4..fb5b09c8 100644 --- a/components/StandardDialog.qml +++ b/components/StandardDialog.qml @@ -32,6 +32,7 @@ import QtQuick.Dialogs 1.2 import QtQuick.Layouts 1.1 import QtQuick.Controls.Styles 1.4 import QtQuick.Window 2.0 +import FontAwesome 1.0 import "../components" as MoneroComponents import "effects/" as MoneroEffects @@ -199,24 +200,34 @@ Rectangle { height: 48 color: "transparent" - MoneroEffects.ImageMask { - anchors.centerIn: parent - width: 16 - height: 16 - image: MoneroComponents.Style.titleBarCloseSource - color: MoneroComponents.Style.defaultFontColor + Text { + text: FontAwesome.times + font.family:FontAwesome.fontFamilySolid + font.pixelSize: 19 + color: closeButtonMouseArea.containsMouse ? MoneroComponents.Style.dimmedFontColor : MoneroComponents.Style.defaultFontColor + font.styleName: "Solid" + anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: parent.horizontalCenter opacity: 0.75 } - MouseArea { + MoneroComponents.Tooltip { + id: btnCloseStandardDialogTooltip anchors.fill: parent + text: qsTr("Close") + translationManager.emptyString + } + + MouseArea { + id: closeButtonMouseArea + anchors.fill: parent + hoverEnabled: true onClicked: { root.close() root.rejected() } cursorShape: Qt.PointingHandCursor - onEntered: closeButton.color = "#262626"; - onExited: closeButton.color = "transparent"; + onEntered: btnCloseStandardDialogTooltip.tooltipPopup.open() + onExited: btnCloseStandardDialogTooltip.tooltipPopup.close() } } diff --git a/components/Style.qml b/components/Style.qml index 2edd555e..440eb50c 100644 --- a/components/Style.qml +++ b/components/Style.qml @@ -54,9 +54,6 @@ QtObject { property string titleBarBackgroundGradientStop: blackTheme ? _b_titleBarBackgroundGradientStop : _w_titleBarBackgroundGradientStop property string titleBarBackgroundBorderColor: blackTheme ? _b_titleBarBackgroundBorderColor : _w_titleBarBackgroundBorderColor 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 titleBarCloseSource: blackTheme ? _b_titleBarCloseSource : _w_titleBarCloseSource property string titleBarButtonHoverColor: blackTheme ? _b_titleBarButtonHoverColor : _w_titleBarButtonHoverColor property string wizardBackgroundGradientStart: blackTheme ? _b_wizardBackgroundGradientStart : _w_wizardBackgroundGradientStart @@ -111,9 +108,6 @@ QtObject { property string _b_titleBarBackgroundGradientStop: "#191919" property string _b_titleBarBackgroundBorderColor: "#2f2f2f" 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_titleBarCloseSource: "qrc:///images/close.svg" property string _b_titleBarButtonHoverColor: "#10FFFFFF" property string _b_wizardBackgroundGradientStart: "#1e1e1e" @@ -168,9 +162,6 @@ QtObject { property string _w_titleBarBackgroundGradientStop: "#FBFBFB" property string _w_titleBarBackgroundBorderColor: "#DEDEDE" 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_titleBarCloseSource: "qrc:///images/themes/white/close.svg" property string _w_titleBarButtonHoverColor: "#11000000" property string _w_wizardBackgroundGradientStart: "white" diff --git a/components/TitleBar.qml b/components/TitleBar.qml index ef04fdf4..0dd5eeba 100644 --- a/components/TitleBar.qml +++ b/components/TitleBar.qml @@ -118,6 +118,7 @@ Rectangle { MouseArea { anchors.fill: parent + visible: middlePanel.state !== "Merchant" && !informationPopup.visible && !confirmationDialog.visible hoverEnabled: true cursorShape: Qt.PointingHandCursor onEntered: { @@ -158,6 +159,7 @@ Rectangle { MouseArea { anchors.fill: parent + visible: middlePanel.state !== "Merchant" && !informationPopup.visible && !confirmationDialog.visible hoverEnabled: true cursorShape: Qt.PointingHandCursor onEntered: { @@ -197,6 +199,7 @@ Rectangle { MouseArea { anchors.fill: parent + visible: middlePanel.state !== "Merchant" && !informationPopup.visible && !confirmationDialog.visible hoverEnabled: true cursorShape: Qt.PointingHandCursor onEntered: { @@ -275,26 +278,36 @@ Rectangle { Layout.preferredWidth: parent.height Layout.preferredHeight: parent.height - MoneroEffects.ImageMask { - anchors.bottom: parent.bottom - anchors.bottomMargin: 18 - anchors.horizontalCenter: parent.horizontalCenter - height: 3 - width: 15 - image: MoneroComponents.Style.titleBarMinimizeSource + Text { + text: FontAwesome.windowMinimize + font.family:FontAwesome.fontFamilySolid + font.pixelSize: 16 color: MoneroComponents.Style.defaultFontColor - fontAwesomeFallbackIcon: FontAwesome.minus - fontAwesomeFallbackSize: 18 - fontAwesomeFallbackOpacity: MoneroComponents.Style.blackTheme ? 0.8 : 0.6 + font.styleName: "Solid" + anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: parent.horizontalCenter opacity: 0.75 } + MoneroComponents.Tooltip { + id: btnMinimizeWindowTooltip + anchors.fill: parent + text: qsTr("Minimize") + translationManager.emptyString + } + MouseArea { anchors.fill: parent + visible: !informationPopup.visible && !confirmationDialog.visible hoverEnabled: true cursorShape: Qt.PointingHandCursor - onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor - onExited: parent.color = "transparent" + onEntered: { + parent.color = MoneroComponents.Style.titleBarButtonHoverColor + btnMinimizeWindowTooltip.tooltipPopup.open() + } + onExited: { + parent.color = "transparent" + btnMinimizeWindowTooltip.tooltipPopup.close() + } onClicked: root.minimizeClicked(); } } @@ -307,25 +320,37 @@ Rectangle { Layout.preferredWidth: parent.height Layout.preferredHeight: parent.height - Image { + Text { + text: appWindow.visibility == Window.Maximized ? FontAwesome.windowRestore : FontAwesome.windowMaximize + font.family:FontAwesome.fontFamilySolid + font.pixelSize: 16 + color: MoneroComponents.Style.defaultFontColor + font.styleName: "Solid" anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: parent.horizontalCenter - source: MoneroComponents.Style.titleBarFullscreenSource - sourceSize.width: 16 - sourceSize.height: 16 - smooth: true - mipmap: true opacity: 0.75 - rotation: appWindow.visibility === Window.FullScreen ? 180 : 0 + } + + MoneroComponents.Tooltip { + id: btnMaximizeRestoreTooltip + anchors.fill: parent + text: appWindow.visibility == Window.Maximized ? qsTr("Restore") : qsTr("Maximize") + translationManager.emptyString } MouseArea { id: buttonArea anchors.fill: parent + visible: !informationPopup.visible && !confirmationDialog.visible hoverEnabled: true cursorShape: Qt.PointingHandCursor - onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor - onExited: parent.color = "transparent" + onEntered: { + parent.color = MoneroComponents.Style.titleBarButtonHoverColor + btnMaximizeRestoreTooltip.tooltipPopup.open() + } + onExited: { + parent.color = "transparent" + btnMaximizeRestoreTooltip.tooltipPopup.close() + } onClicked: root.maximizeClicked(); } } @@ -337,25 +362,35 @@ Rectangle { Layout.preferredWidth: parent.height Layout.preferredHeight: parent.height - MoneroEffects.ImageMask { + Text { + text: FontAwesome.times + font.family:FontAwesome.fontFamilySolid + font.pixelSize: 19 + color: MoneroComponents.Style.defaultFontColor + font.styleName: "Solid" anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: parent.horizontalCenter - height: 16 - width: 16 - image: MoneroComponents.Style.titleBarCloseSource - color: MoneroComponents.Style.defaultFontColor - fontAwesomeFallbackIcon: FontAwesome.times - fontAwesomeFallbackSize: 21 - fontAwesomeFallbackOpacity: MoneroComponents.Style.blackTheme ? 0.8 : 0.6 opacity: 0.75 } + MoneroComponents.Tooltip { + id: btnCloseWindowTooltip + anchors.fill: parent + text: qsTr("Close Monero GUI") + translationManager.emptyString + } + MouseArea { anchors.fill: parent hoverEnabled: true cursorShape: Qt.PointingHandCursor - onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor - onExited: parent.color = "transparent" + onEntered: { + parent.color = MoneroComponents.Style.titleBarButtonHoverColor + btnCloseWindowTooltip.tooltipPopup.open() + } + onExited: { + parent.color = "transparent" + btnCloseWindowTooltip.tooltipPopup.close() + } onClicked: root.closeClicked(); } } diff --git a/fonts/FontAwesome/FontAwesome.qml b/fonts/FontAwesome/FontAwesome.qml index d57ec8fa..1651e57f 100644 --- a/fonts/FontAwesome/FontAwesome.qml +++ b/fonts/FontAwesome/FontAwesome.qml @@ -42,6 +42,7 @@ Object { property string edit : "\uf044" property string ellipsisH : "\uf141" property string exclamationCircle : "\uf06a" + property string expandAlt : "\uf424" property string eye : "\uf06e" property string eyeSlash : "\uf070" property string folderOpen : "\uf07c" diff --git a/images/close.svg b/images/close.svg deleted file mode 100644 index a06c9bb0..00000000 --- a/images/close.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/images/fullscreen.svg b/images/fullscreen.svg deleted file mode 100644 index 25280d24..00000000 --- a/images/fullscreen.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/images/minimize.svg b/images/minimize.svg deleted file mode 100644 index 33359a0d..00000000 --- a/images/minimize.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/images/themes/white/close.svg b/images/themes/white/close.svg deleted file mode 100644 index a888809d..00000000 --- a/images/themes/white/close.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/images/themes/white/fullscreen.svg b/images/themes/white/fullscreen.svg deleted file mode 100644 index d732d086..00000000 --- a/images/themes/white/fullscreen.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/images/themes/white/minimize.svg b/images/themes/white/minimize.svg deleted file mode 100644 index 16d66987..00000000 --- a/images/themes/white/minimize.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/main.qml b/main.qml index 7bde3d50..e14723d3 100644 --- a/main.qml +++ b/main.qml @@ -1737,13 +1737,13 @@ ApplicationWindow { name: "wizard" PropertyChanges { target: middlePanel; visible: false } PropertyChanges { target: wizard; visible: true } - PropertyChanges { target: resizeArea; visible: true } + PropertyChanges { target: resizeArea; visible: appWindow.visibility !== Window.Maximized } PropertyChanges { target: titleBar; state: "essentials" } }, State { name: "normal" PropertyChanges { target: middlePanel; visible: true } PropertyChanges { target: wizard; visible: false } - PropertyChanges { target: resizeArea; visible: true } + PropertyChanges { target: resizeArea; visible: appWindow.visibility !== Window.Maximized } PropertyChanges { target: titleBar; state: "default" } } ] @@ -1854,11 +1854,14 @@ ApplicationWindow { MoneroEffects.ImageMask { anchors.centerIn: parent - visible: persistentSettings.customDecorations + visible: persistentSettings.customDecorations && appWindow.visibility !== Window.Maximized image: "qrc:///images/resize.png" color: MoneroComponents.Style.defaultFontColor width: 12 height: 12 + fontAwesomeFallbackIcon: FontAwesome.expandAlt + fontAwesomeFallbackSize: 18 + fontAwesomeFallbackOpacity: MoneroComponents.Style.blackTheme ? 0.8 : 0.6 opacity: (parent.containsMouse || parent.pressed) ? 0.5 : 1.0 } diff --git a/pages/merchant/MerchantTitlebar.qml b/pages/merchant/MerchantTitlebar.qml index 5f9ebad6..397fffce 100644 --- a/pages/merchant/MerchantTitlebar.qml +++ b/pages/merchant/MerchantTitlebar.qml @@ -96,23 +96,35 @@ Rectangle { Layout.preferredWidth: parent.height Layout.preferredHeight: parent.height - MoneroEffects.ImageMask { - anchors.bottom: parent.bottom - anchors.bottomMargin: 18 + Text { + text: FontAwesome.windowMinimize + font.family:FontAwesome.fontFamilySolid + font.pixelSize: 16 + color: MoneroComponents.Style.defaultFontColor + font.styleName: "Solid" + anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: parent.horizontalCenter - height: 3 - width: 15 - image: MoneroComponents.Style.titleBarMinimizeSource - color: "white" opacity: 0.75 } + MoneroComponents.Tooltip { + id: btnMinimizeWindowTooltip + anchors.fill: parent + text: qsTr("Minimize") + translationManager.emptyString + } + MouseArea { anchors.fill: parent hoverEnabled: true cursorShape: Qt.PointingHandCursor - onEntered: parent.color = "#44FFFFFF" - onExited: parent.color = "transparent" + onEntered: { + parent.color = "#44FFFFFF" + btnMinimizeWindowTooltip.tooltipPopup.open() + } + onExited: { + parent.color = "transparent" + btnMinimizeWindowTooltip.tooltipPopup.close() + } onClicked: root.minimizeClicked(); } } @@ -125,16 +137,21 @@ Rectangle { Layout.preferredWidth: parent.height Layout.preferredHeight: parent.height - Image { + Text { + text: appWindow.visibility == Window.Maximized ? FontAwesome.windowRestore : FontAwesome.windowMaximize + font.family:FontAwesome.fontFamilySolid + font.pixelSize: 16 + color: MoneroComponents.Style.defaultFontColor + font.styleName: "Solid" anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: parent.horizontalCenter - source: MoneroComponents.Style._b_titleBarFullscreenSource - sourceSize.width: 16 - sourceSize.height: 16 - smooth: true - mipmap: true opacity: 0.75 - rotation: appWindow.visibility === Window.FullScreen ? 180 : 0 + } + + MoneroComponents.Tooltip { + id: btnMaximizeRestoreTooltip + anchors.fill: parent + text: appWindow.visibility == Window.Maximized ? qsTr("Restore") : qsTr("Maximize") + translationManager.emptyString } MouseArea { @@ -142,8 +159,14 @@ Rectangle { anchors.fill: parent hoverEnabled: true cursorShape: Qt.PointingHandCursor - onEntered: parent.color = "#44FFFFFF" - onExited: parent.color = "transparent" + onEntered: { + parent.color = "#44FFFFFF" + btnMaximizeRestoreTooltip.tooltipPopup.open() + } + onExited: { + parent.color = "transparent" + btnMaximizeRestoreTooltip.tooltipPopup.close() + } onClicked: root.maximizeClicked(); } } @@ -155,22 +178,35 @@ Rectangle { Layout.preferredWidth: parent.height Layout.preferredHeight: parent.height - MoneroEffects.ImageMask { + Text { + text: FontAwesome.times + font.family:FontAwesome.fontFamilySolid + font.pixelSize: 19 + color: MoneroComponents.Style.defaultFontColor + font.styleName: "Solid" anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: parent.horizontalCenter - height: 16 - width: 16 - image: MoneroComponents.Style._b_titleBarCloseSource - color: "white" opacity: 0.75 } + MoneroComponents.Tooltip { + id: btnCloseWindowTooltip + anchors.fill: parent + text: qsTr("Close Monero GUI") + translationManager.emptyString + } + MouseArea { anchors.fill: parent hoverEnabled: true cursorShape: Qt.PointingHandCursor - onEntered: parent.color = "#44FFFFFF" - onExited: parent.color = "transparent" + onEntered: { + parent.color = "#44FFFFFF" + btnCloseWindowTooltip.tooltipPopup.open() + } + onExited: { + parent.color = "transparent" + btnCloseWindowTooltip.tooltipPopup.close() + } onClicked: root.closeClicked(); } } diff --git a/qml.qrc b/qml.qrc index 8283948d..93a97435 100644 --- a/qml.qrc +++ b/qml.qrc @@ -232,12 +232,6 @@ images/middlePanelShadow.png images/themes/white/titlebarLogo@2x.png images/themes/white/titlebarLogo.png - images/fullscreen.svg - images/close.svg - images/minimize.svg - images/themes/white/close.svg - images/themes/white/fullscreen.svg - images/themes/white/minimize.svg components/effects/ColorTransition.qml components/effects/GradientBackground.qml images/check-white.svg