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 Pascal Precht
parent 503a07bf5a
commit faca4765f4
No known key found for this signature in database
GPG Key ID: 0EE28D8D6FD85D7D
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.Components 0.1
import StatusQ.Layout 0.1 import StatusQ.Layout 0.1
import StatusQ.Popups 0.1 import StatusQ.Popups 0.1
import StatusQ.Platform 0.1
Rectangle { Rectangle {
id: demoApp id: demoApp
@ -15,38 +16,27 @@ Rectangle {
border.width: 1 border.width: 1
border.color: Theme.palette.baseColor2 border.color: Theme.palette.baseColor2
Row { property string titleStyle: "osx"
anchors.top: demoApp.top
anchors.left: demoApp.left
anchors.topMargin: 14
anchors.leftMargin: 14
spacing: 6 StatusMacTrafficLights {
anchors.left: parent.left
anchors.top: parent.top
anchors.margins: 13
z: statusAppLayout.z + 1 z: statusAppLayout.z + 1
visible: titleStyle === "osx"
}
Rectangle { StatusWindowsTitleBar {
color: "#E24640" id: windowsTitle
height: 12 anchors.top: parent.top
width: 12 width: parent.width
radius: 6 z: statusAppLayout.z + 1
} visible: titleStyle === "windows"
Rectangle {
color: "#FFC12F"
height: 12
width: 12
radius: 6
}
Rectangle {
color: "#2ACB42"
height: 12
width: 12
radius: 6
}
} }
StatusAppLayout { StatusAppLayout {
id: statusAppLayout id: statusAppLayout
anchors.top: demoApp.top anchors.top: windowsTitle.visible ? windowsTitle.bottom : demoApp.top
anchors.left: demoApp.left anchors.left: demoApp.left
anchors.topMargin: demoApp.border.width anchors.topMargin: demoApp.border.width
anchors.leftMargin: demoApp.border.width anchors.leftMargin: demoApp.border.width

View File

@ -287,6 +287,36 @@ StatusWindow {
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
color: Theme.palette.baseColor3 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 { DemoApp {
id: demoApp id: demoApp
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@ -309,6 +339,27 @@ StatusWindow {
anchors.top: parent.top anchors.top: parent.top
anchors.margins: 13 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: { onClose: {
rootWindow.close() rootWindow.close()
} }

View File

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

View File

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

View File

@ -64,6 +64,7 @@ QtObject {
property color directColor6 property color directColor6
property color directColor7 property color directColor7
property color directColor8 property color directColor8
property color directColor9
property color indirectColor1 property color indirectColor1
property color indirectColor2 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 module StatusQ.Platform
StatusMacTrafficLights 0.1 StatusMacTrafficLights.qml 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/StatusSearchPopupMenuItem.qml</file>
<file>src/StatusQ/Popups/StatusSearchLocationMenu.qml</file> <file>src/StatusQ/Popups/StatusSearchLocationMenu.qml</file>
<file>src/StatusQ/Core/StatusTooltipSettings.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> </qresource>
</RCC> </RCC>