4rkal/monero-gui
1
0
Fork 0
mirror of https://github.com/monero-project/monero-gui.git synced 2024-12-04 23:51:10 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
rating89us 2021-12-01 01:08:48 +01:00
parent c72729fa5d
commit 902cc2b13e
7 changed files with 275 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/Style.qml
View File

@ -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"

102
components/TitleBar.qml
View File

@ -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();
}
}

2
fonts/FontAwesome/FontAwesome.qml
View File

@ -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"
}

83
images/restore.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

83
images/themes/white/restore.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

65
pages/merchant/MerchantTitlebar.qml
View File

@ -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();
}
}

2
qml.qrc
View File

@ -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>