Titlebar, first version

This commit is contained in:
Sander Ferdinand 2017-11-15 23:51:22 +01:00 committed by moneromooo-monero
parent 5be04964a3
commit b34432c6ac

View file

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