feat(StatusWindowsTitleBar): Add windows title bar

Closes: #200
This commit is contained in:
B.Melnik 2021-08-27 16:21:00 +03:00 committed by Michał Cieślak
parent 4c5b8a79d6
commit aec06b41d4
12 changed files with 205 additions and 26 deletions

View File

@ -7,6 +7,7 @@ import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import StatusQ.Layout 0.1
import StatusQ.Popups 0.1
import StatusQ.Platform 0.1
Rectangle {
id: demoApp
@ -15,38 +16,27 @@ Rectangle {
border.width: 1
border.color: Theme.palette.baseColor2
Row {
anchors.top: demoApp.top
anchors.left: demoApp.left
anchors.topMargin: 14
anchors.leftMargin: 14
property string titleStyle: "osx"
spacing: 6
StatusMacTrafficLights {
anchors.left: parent.left
anchors.top: parent.top
anchors.margins: 13
z: statusAppLayout.z + 1
visible: titleStyle === "osx"
}
Rectangle {
color: "#E24640"
height: 12
width: 12
radius: 6
}
Rectangle {
color: "#FFC12F"
height: 12
width: 12
radius: 6
}
Rectangle {
color: "#2ACB42"
height: 12
width: 12
radius: 6
}
StatusWindowsTitleBar {
id: windowsTitle
anchors.top: parent.top
width: parent.width
z: statusAppLayout.z + 1
visible: titleStyle === "windows"
}
StatusAppLayout {
id: statusAppLayout
anchors.top: demoApp.top
anchors.top: windowsTitle.visible ? windowsTitle.bottom : demoApp.top
anchors.left: demoApp.left
anchors.topMargin: demoApp.border.width
anchors.leftMargin: demoApp.border.width

View File

@ -287,6 +287,36 @@ StatusWindow {
Rectangle {
anchors.fill: parent
color: Theme.palette.baseColor3
Row {
id: platformSwitch
anchors.left: demoApp.left
anchors.bottom: demoApp.top
anchors.bottomMargin: 20
spacing: 2
Text {
text: "OSX"
font.pixelSize: 15
anchors.verticalCenter: parent.verticalCenter
}
StatusSwitch {
onCheckedChanged: {
if (checked) {
demoApp.titleStyle = "windows"
} else {
demoApp.titleStyle = "osx"
}
}
}
Text {
text: "Win"
font.pixelSize: 15
anchors.verticalCenter: parent.verticalCenter
}
}
DemoApp {
id: demoApp
anchors.verticalCenter: parent.verticalCenter
@ -309,6 +339,27 @@ StatusWindow {
anchors.top: parent.top
anchors.margins: 13
visible: Qt.platform.os == "osx"
onClose: {
rootWindow.close()
}
onMinimised: {
rootWindow.showMinimized()
}
onMaximized: {
rootWindow.toggleFullScreen()
}
}
StatusWindowsTitleBar {
anchors.top: parent.top
width: parent.width
visible: Qt.platform.os == "windows"
onClose: {
rootWindow.close()
}

View File

@ -104,6 +104,7 @@ ThemePalette {
directColor6: getColor('white', 0.2)
directColor7: getColor('white', 0.1)
directColor8: getColor('white', 0.05)
directColor9: getColor('white', 0.2)
indirectColor1: getColor('black')
indirectColor2: getColor('black', 0.7)

View File

@ -102,6 +102,7 @@ ThemePalette {
directColor6: getColor('black', 0.3)
directColor7: getColor('black', 0.1)
directColor8: getColor('black', 0.05)
directColor9: getColor('black', 0.2)
indirectColor1: getColor('white')
indirectColor2: getColor('white', 0.7)

View File

@ -64,6 +64,7 @@ QtObject {
property color directColor6
property color directColor7
property color directColor8
property color directColor9
property color indirectColor1
property color indirectColor2

View File

@ -0,0 +1,118 @@
import QtQuick 2.14
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Core 0.1
Rectangle {
id: windowsTitleBar
property string title: titleText.text
signal close();
signal minimised();
signal maximized();
implicitHeight: 32
color: Theme.palette.baseColor5
Row {
id: titleLayout
anchors.left: parent.left
anchors.leftMargin: 12
anchors.verticalCenter: parent.verticalCenter
spacing: 4
StatusIcon {
anchors.verticalCenter: parent.verticalCenter
width: 16
height: 16
icon: "windows_titlebar/status"
}
StatusBaseText {
id: titleText
anchors.verticalCenter: parent.verticalCenter
text: qsTr("Status")
color: Theme.palette.directColor1
}
}
Row {
id: buttonsLayout
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
height: parent.height
Rectangle {
width: 48
height: parent.height
color: minimizeSensor.containsMouse ? (minimizeSensor.pressed ? Theme.palette.directColor9 : Theme.palette.directColor8)
: "transparent"
StatusIcon {
anchors.centerIn: parent
width: 10
height: 1
icon: "windows_titlebar/minimise"
color: Theme.palette.directColor1
}
MouseArea {
id: minimizeSensor
anchors.fill: parent
hoverEnabled: true
onClicked: windowsTitleBar.minimised()
}
}
Rectangle {
width: 48
height: parent.height
color: maximizeSensor.containsMouse ? (maximizeSensor.pressed ? Theme.palette.directColor9 : Theme.palette.directColor8)
: "transparent"
StatusIcon {
anchors.centerIn: parent
width: 10
height: 10
icon: "windows_titlebar/maximize"
color: Theme.palette.directColor1
}
MouseArea {
id: maximizeSensor
anchors.fill: parent
hoverEnabled: true
onClicked: windowsTitleBar.maximized()
}
}
Rectangle {
width: 48
height: parent.height
color: closeSensor.containsMouse ? (closeSensor.pressed ? "#DB1518" : "#ED4245")
: "transparent"
StatusIcon {
anchors.centerIn: parent
width: 10
height: 10
icon: "windows_titlebar/close"
color: closeSensor.containsMouse ? Theme.palette.white : Theme.palette.directColor1
}
MouseArea {
id: closeSensor
anchors.fill: parent
hoverEnabled: true
onClicked: windowsTitleBar.closed()
}
}
}
}

View File

@ -1,5 +1,5 @@
module StatusQ.Platform
StatusMacTrafficLights 0.1 StatusMacTrafficLights.qml
StatusWindowsTitleBar 0.1 StatusWindowsTitleBar.qml

View File

@ -0,0 +1,3 @@
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.70801 5L10 9.29199L9.29199 10L5 5.70801L0.708008 10L0 9.29199L4.29199 5L0 0.708008L0.708008 0L5 4.29199L9.29199 0L10 0.708008L5.70801 5Z" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 268 B

View File

@ -0,0 +1,3 @@
<svg width="11" height="10" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.2002 0V10H0.200195V0H10.2002ZM9.19922 1.00098H1.20117V8.99902H9.19922V1.00098Z" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 211 B

View File

@ -0,0 +1,3 @@
<svg width="10" height="1" viewBox="0 0 10 1" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 -0.000976562V1H0V-0.000976562H10Z" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 164 B

View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.34942 7.92611C8.39058 7.98137 7.78968 7.75801 6.83071 7.81339C6.59287 7.82675 6.35668 7.86122 6.1249 7.9164C6.26645 6.143 7.52155 4.59165 9.22826 4.49304C10.2756 4.43261 11.3225 5.07926 11.3792 6.12902C11.4351 7.16079 10.6484 7.85105 9.34955 7.92598L9.34942 7.92611ZM6.77458 11.5535C5.77123 11.6102 4.76852 11.0049 4.71406 10.0225C4.66052 9.05687 5.41432 8.41087 6.65858 8.34073C7.57703 8.28897 8.15277 8.49809 9.07123 8.4462C9.29896 8.43371 9.52518 8.40146 9.74735 8.34979C9.612 10.0094 8.40968 11.4614 6.77458 11.5535ZM8 0.000129406C3.58168 -1.67222e-09 0 3.58162 0 8C0 12.4184 3.58168 16 8 16C12.4183 16 16 12.4182 16 8C16 3.58175 12.4183 0 8 0" fill="#4360DF"/>
</svg>

After

Width:  |  Height:  |  Size: 821 B

View File

@ -258,5 +258,10 @@
<file>src/StatusQ/Popups/StatusSearchPopupMenuItem.qml</file>
<file>src/StatusQ/Popups/StatusSearchLocationMenu.qml</file>
<file>src/StatusQ/Core/StatusTooltipSettings.qml</file>
<file>src/StatusQ/Platform/StatusWindowsTitleBar.qml</file>
<file>src/assets/img/icons/windows_titlebar/close.svg</file>
<file>src/assets/img/icons/windows_titlebar/maximize.svg</file>
<file>src/assets/img/icons/windows_titlebar/minimise.svg</file>
<file>src/assets/img/icons/windows_titlebar/status.svg</file>
</qresource>
</RCC>