mirror of
https://github.com/monero-project/monero-gui.git
synced 2024-12-23 12:09:57 +00:00
Make the titlebar more modular
This commit is contained in:
parent
47f9a1765a
commit
4d56ed9e27
2 changed files with 84 additions and 42 deletions
|
@ -33,28 +33,44 @@ import QtQuick.Layouts 1.1
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: titleBar
|
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 int mouseX: 0
|
||||||
property bool containsMouse: false
|
property bool containsMouse: false
|
||||||
property alias basicButtonVisible: goToBasicVersionButton.visible
|
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)
|
signal goToBasicVersion(bool yes)
|
||||||
height: customDecorations && !isMobile ? 50 : 0
|
|
||||||
y: -height
|
|
||||||
property string title
|
|
||||||
property alias maximizeButtonVisible: maximizeButton.visible
|
|
||||||
z: 1
|
|
||||||
|
|
||||||
Item {
|
Item {
|
||||||
id: test
|
// Background gradient
|
||||||
width: parent.width
|
width: parent.width
|
||||||
height: 50
|
height: s
|
||||||
z: 1
|
z: parent.z + 1
|
||||||
|
|
||||||
// use jpg for gradiency
|
|
||||||
Image {
|
Image {
|
||||||
anchors.fill: parent
|
anchors.fill: titleBar
|
||||||
height: parent.height
|
height: titleBar.height
|
||||||
width: parent.width
|
width: titleBar.width
|
||||||
source: "../images/titlebarGradient.jpg"
|
source: "../images/titlebarGradient.jpg"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -62,10 +78,10 @@ Rectangle {
|
||||||
Item {
|
Item {
|
||||||
id: titlebarlogo
|
id: titlebarlogo
|
||||||
width: 125
|
width: 125
|
||||||
height: 50
|
height: parent.height
|
||||||
anchors.centerIn: parent
|
anchors.centerIn: parent
|
||||||
visible: customDecorations
|
visible: customDecorations && showMoneroLogo
|
||||||
z: 1
|
z: parent.z + 1
|
||||||
|
|
||||||
Image {
|
Image {
|
||||||
anchors.left: parent.left
|
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
|
// collapse left panel
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: goToBasicVersionButton
|
id: goToBasicVersionButton
|
||||||
|
@ -85,10 +110,10 @@ Rectangle {
|
||||||
anchors.top: parent.top
|
anchors.top: parent.top
|
||||||
anchors.left: parent.left
|
anchors.left: parent.left
|
||||||
color: "transparent"
|
color: "transparent"
|
||||||
height: 50 * scaleRatio
|
height: titleBar.height
|
||||||
width: height
|
width: height
|
||||||
visible: isMobile
|
visible: isMobile
|
||||||
z: 2
|
z: parent.z + 2
|
||||||
|
|
||||||
Image {
|
Image {
|
||||||
width: 14
|
width: 14
|
||||||
|
@ -118,10 +143,11 @@ Rectangle {
|
||||||
anchors.top: parent.top
|
anchors.top: parent.top
|
||||||
anchors.bottom: parent.bottom
|
anchors.bottom: parent.bottom
|
||||||
visible: parent.customDecorations
|
visible: parent.customDecorations
|
||||||
z: 2
|
z: parent.z + 2
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: minimizeButton
|
id: minimizeButton
|
||||||
|
visible: showMinimizeButton
|
||||||
anchors.top: parent.top
|
anchors.top: parent.top
|
||||||
anchors.bottom: parent.bottom
|
anchors.bottom: parent.bottom
|
||||||
width: 42
|
width: 42
|
||||||
|
@ -139,14 +165,13 @@ Rectangle {
|
||||||
cursorShape: Qt.PointingHandCursor
|
cursorShape: Qt.PointingHandCursor
|
||||||
onEntered: minimizeButton.color = "#262626";
|
onEntered: minimizeButton.color = "#262626";
|
||||||
onExited: minimizeButton.color = "transparent";
|
onExited: minimizeButton.color = "transparent";
|
||||||
onClicked: {
|
onClicked: minimizeClicked();
|
||||||
appWindow.visibility = Window.Minimized
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: maximizeButton
|
id: maximizeButton
|
||||||
|
visible: showMaximizeButton
|
||||||
anchors.top: parent.top
|
anchors.top: parent.top
|
||||||
anchors.bottom: parent.bottom
|
anchors.bottom: parent.bottom
|
||||||
width: 42
|
width: 42
|
||||||
|
@ -167,15 +192,13 @@ Rectangle {
|
||||||
cursorShape: Qt.PointingHandCursor
|
cursorShape: Qt.PointingHandCursor
|
||||||
onEntered: maximizeButton.color = "#262626";
|
onEntered: maximizeButton.color = "#262626";
|
||||||
onExited: maximizeButton.color = "transparent";
|
onExited: maximizeButton.color = "transparent";
|
||||||
onClicked: {
|
onClicked: maximizeClicked();
|
||||||
appWindow.visibility = appWindow.visibility !== Window.FullScreen ? Window.FullScreen :
|
|
||||||
Window.Windowed
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: closeButton
|
id: closeButton
|
||||||
|
visible: showCloseButton
|
||||||
anchors.top: parent.top
|
anchors.top: parent.top
|
||||||
anchors.bottom: parent.bottom
|
anchors.bottom: parent.bottom
|
||||||
width: 42
|
width: 42
|
||||||
|
@ -190,7 +213,7 @@ Rectangle {
|
||||||
|
|
||||||
MouseArea {
|
MouseArea {
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
onClicked: appWindow.close();
|
onClicked: closeClicked();
|
||||||
hoverEnabled: true
|
hoverEnabled: true
|
||||||
cursorShape: Qt.PointingHandCursor
|
cursorShape: Qt.PointingHandCursor
|
||||||
onEntered: closeButton.color = "#262626";
|
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
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
28
main.qml
28
main.qml
|
@ -1261,7 +1261,7 @@ ApplicationWindow {
|
||||||
PropertyChanges { target: appWindow; width: (screenWidth < 930 || isAndroid || isIOS)? screenWidth : 930; }
|
PropertyChanges { target: appWindow; width: (screenWidth < 930 || isAndroid || isIOS)? screenWidth : 930; }
|
||||||
PropertyChanges { target: appWindow; height: maxWindowHeight; }
|
PropertyChanges { target: appWindow; height: maxWindowHeight; }
|
||||||
PropertyChanges { target: resizeArea; visible: true }
|
PropertyChanges { target: resizeArea; visible: true }
|
||||||
PropertyChanges { target: titleBar; maximizeButtonVisible: false }
|
PropertyChanges { target: titleBar; showMaximizeButton: false }
|
||||||
// PropertyChanges { target: frameArea; blocked: true }
|
// PropertyChanges { target: frameArea; blocked: true }
|
||||||
PropertyChanges { target: titleBar; visible: false }
|
PropertyChanges { target: titleBar; visible: false }
|
||||||
PropertyChanges { target: titleBar; y: 0 }
|
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; width: (screenWidth < 969 || isAndroid || isIOS)? screenWidth : 969 } //rightPanelExpanded ? 1269 : 1269 - 300;
|
||||||
PropertyChanges { target: appWindow; height: maxWindowHeight; }
|
PropertyChanges { target: appWindow; height: maxWindowHeight; }
|
||||||
PropertyChanges { target: resizeArea; visible: true }
|
PropertyChanges { target: resizeArea; visible: true }
|
||||||
PropertyChanges { target: titleBar; maximizeButtonVisible: true }
|
PropertyChanges { target: titleBar; showMaximizeButton: true }
|
||||||
// PropertyChanges { target: frameArea; blocked: true }
|
// PropertyChanges { target: frameArea; blocked: true }
|
||||||
PropertyChanges { target: titleBar; visible: true }
|
PropertyChanges { target: titleBar; visible: true }
|
||||||
// PropertyChanges { target: titleBar; y: 0 }
|
// PropertyChanges { target: titleBar; y: 0 }
|
||||||
|
@ -1596,11 +1596,20 @@ ApplicationWindow {
|
||||||
|
|
||||||
TitleBar {
|
TitleBar {
|
||||||
id: titleBar
|
id: titleBar
|
||||||
anchors.left: parent.left
|
|
||||||
anchors.right: parent.right
|
|
||||||
x: 0
|
x: 0
|
||||||
y: 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: {
|
onGoToBasicVersion: {
|
||||||
if (yes) {
|
if (yes) {
|
||||||
// basicPanel.currentView = middlePanel.currentView
|
// 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
|
// new ToolTip
|
||||||
|
|
Loading…
Reference in a new issue