mirror of
https://github.com/monero-project/monero-gui.git
synced 2025-01-10 03:42:05 +02:00
Titlebar, first version
This commit is contained in:
parent
5be04964a3
commit
b34432c6ac
@ -29,47 +29,85 @@
|
|||||||
import QtQuick 2.2
|
import QtQuick 2.2
|
||||||
import QtQuick.Window 2.0
|
import QtQuick.Window 2.0
|
||||||
import QtQuick.Layouts 1.1
|
import QtQuick.Layouts 1.1
|
||||||
|
import QtGraphicalEffects 1.0
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: titleBar
|
id: titleBar
|
||||||
color: "#000000"
|
|
||||||
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: true
|
||||||
signal goToBasicVersion(bool yes)
|
signal goToBasicVersion(bool yes)
|
||||||
height: customDecorations && !isMobile ? 30 : 0
|
height: customDecorations && !isMobile ? 50 : 0
|
||||||
y: -height
|
y: -height
|
||||||
property string title
|
property string title
|
||||||
property alias maximizeButtonVisible: maximizeButton.visible
|
property alias maximizeButtonVisible: maximizeButton.visible
|
||||||
z: 1
|
z: 1
|
||||||
|
|
||||||
Text {
|
Item {
|
||||||
anchors.centerIn: parent
|
id: test
|
||||||
font.family: "Arial"
|
width: parent.width
|
||||||
font.pixelSize: 15
|
height: 50
|
||||||
color: "#FFFFFF"
|
z: 1
|
||||||
text: titleBar.title
|
|
||||||
visible: customDecorations
|
LinearGradient {
|
||||||
|
anchors.fill: parent
|
||||||
|
start: Qt.point(0, 0)
|
||||||
|
end: Qt.point(parent.width, 0)
|
||||||
|
gradient: Gradient {
|
||||||
|
GradientStop { position: 1.0; color: "#1a1a1a" }
|
||||||
|
GradientStop { position: 0.0; color: "black" }
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Rectangle {
|
Item{
|
||||||
|
id: titlebarlogo
|
||||||
|
width: 128
|
||||||
|
height: 50
|
||||||
|
anchors.centerIn: parent
|
||||||
|
visible: customDecorations
|
||||||
|
z: 1
|
||||||
|
|
||||||
|
Image {
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.top: parent.top
|
||||||
|
anchors.topMargin: 11
|
||||||
|
width: 86
|
||||||
|
height: 26
|
||||||
|
fillMode: Image.PreserveAspectFit
|
||||||
|
source: "../images/moneroLogo_white.png"
|
||||||
|
}
|
||||||
|
|
||||||
|
Image {
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.top: parent.top
|
||||||
|
anchors.topMargin: 11
|
||||||
|
width: 28
|
||||||
|
height: 28
|
||||||
|
source: "../images/moneroIcon-trans28x28.png"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// collapse left panel
|
||||||
|
Rectangle {
|
||||||
id: goToBasicVersionButton
|
id: goToBasicVersionButton
|
||||||
property bool containsMouse: titleBar.mouseX >= x && titleBar.mouseX <= x + width
|
property bool containsMouse: titleBar.mouseX >= x && titleBar.mouseX <= x + width
|
||||||
property bool checked: false
|
property bool checked: false
|
||||||
anchors.top: parent.top
|
anchors.top: parent.top
|
||||||
anchors.left: parent.left
|
anchors.left: parent.left
|
||||||
color: "#FFE00A"
|
color: "black"
|
||||||
height: 30 * scaleRatio
|
height: 50 * scaleRatio
|
||||||
width: height
|
width: height
|
||||||
visible: isMobile
|
visible: isMobile
|
||||||
|
z: 2
|
||||||
|
|
||||||
Image {
|
Image {
|
||||||
width: parent.width * 2/3;
|
width: 14
|
||||||
height: width;
|
height: 14
|
||||||
anchors.centerIn: parent
|
anchors.centerIn: parent
|
||||||
source: "../images/menu.png"
|
source: "../images/expand.png"
|
||||||
}
|
}
|
||||||
|
|
||||||
MouseArea {
|
MouseArea {
|
||||||
@ -90,17 +128,20 @@ 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
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
property bool containsMouse: titleBar.mouseX >= x + row.x && titleBar.mouseX <= x + row.x + width && titleBar.containsMouse
|
property bool containsMouse: titleBar.mouseX >= x + row.x && titleBar.mouseX <= x + row.x + width && titleBar.containsMouse
|
||||||
anchors.top: parent.top
|
anchors.top: parent.top
|
||||||
anchors.bottom: parent.bottom
|
anchors.bottom: parent.bottom
|
||||||
width: height
|
width: 42
|
||||||
color: containsMouse ? "#6B0072" : "#000000"
|
color: containsMouse ? "#6B0072" : "#00000000"
|
||||||
|
|
||||||
Image {
|
Image {
|
||||||
anchors.centerIn: parent
|
anchors.centerIn: parent
|
||||||
source: "../images/helpIcon.png"
|
width: 9
|
||||||
|
height: 16
|
||||||
|
source: "../images/question.png"
|
||||||
}
|
}
|
||||||
|
|
||||||
MouseArea {
|
MouseArea {
|
||||||
@ -116,12 +157,12 @@ Rectangle {
|
|||||||
property bool containsMouse: titleBar.mouseX >= x + row.x && titleBar.mouseX <= x + row.x + width && titleBar.containsMouse
|
property bool containsMouse: titleBar.mouseX >= x + row.x && titleBar.mouseX <= x + row.x + width && titleBar.containsMouse
|
||||||
anchors.top: parent.top
|
anchors.top: parent.top
|
||||||
anchors.bottom: parent.bottom
|
anchors.bottom: parent.bottom
|
||||||
width: height
|
width: 42
|
||||||
color: containsMouse ? "#3665B3" : "#000000"
|
color: containsMouse ? "#3665B3" : "#00000000"
|
||||||
|
|
||||||
Image {
|
Image {
|
||||||
anchors.centerIn: parent
|
anchors.centerIn: parent
|
||||||
source: "../images/minimizeIcon.png"
|
source: "../images/minimize.png"
|
||||||
}
|
}
|
||||||
|
|
||||||
MouseArea {
|
MouseArea {
|
||||||
@ -138,13 +179,15 @@ Rectangle {
|
|||||||
property bool containsMouse: titleBar.mouseX >= x + row.x && titleBar.mouseX <= x + row.x + width && titleBar.containsMouse
|
property bool containsMouse: titleBar.mouseX >= x + row.x && titleBar.mouseX <= x + row.x + width && titleBar.containsMouse
|
||||||
anchors.top: parent.top
|
anchors.top: parent.top
|
||||||
anchors.bottom: parent.bottom
|
anchors.bottom: parent.bottom
|
||||||
width: height
|
width: 42
|
||||||
color: containsMouse ? "#FF6C3C" : "#000000"
|
color: containsMouse ? "#FF6C3C" : "#00000000"
|
||||||
|
|
||||||
Image {
|
Image {
|
||||||
anchors.centerIn: parent
|
anchors.centerIn: parent
|
||||||
|
height: 16
|
||||||
|
width: 16
|
||||||
source: appWindow.visibility === Window.FullScreen ? "../images/backToWindowIcon.png" :
|
source: appWindow.visibility === Window.FullScreen ? "../images/backToWindowIcon.png" :
|
||||||
"../images/maximizeIcon.png"
|
"../images/fullscreen.png"
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -162,12 +205,14 @@ Rectangle {
|
|||||||
property bool containsMouse: titleBar.mouseX >= x + row.x && titleBar.mouseX <= x + row.x + width && titleBar.containsMouse
|
property bool containsMouse: titleBar.mouseX >= x + row.x && titleBar.mouseX <= x + row.x + width && titleBar.containsMouse
|
||||||
anchors.top: parent.top
|
anchors.top: parent.top
|
||||||
anchors.bottom: parent.bottom
|
anchors.bottom: parent.bottom
|
||||||
width: height
|
width: 42
|
||||||
color: containsMouse ? "#E04343" : "#000000"
|
color: containsMouse ? "#E04343" : "#00000000"
|
||||||
|
|
||||||
Image {
|
Image {
|
||||||
anchors.centerIn: parent
|
anchors.centerIn: parent
|
||||||
source: "../images/closeIcon.png"
|
width: 16
|
||||||
|
height: 16
|
||||||
|
source: "../images/close.png"
|
||||||
}
|
}
|
||||||
|
|
||||||
MouseArea {
|
MouseArea {
|
||||||
|
Loading…
Reference in New Issue
Block a user