status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
ui/StatusQ/sandbox/DemoApp.qml
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

51
ui/StatusQ/sandbox/main.qml
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()
}

1
ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml
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)

1
ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml
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)

1
ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml
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

118
ui/StatusQ/src/StatusQ/Platform/StatusWindowsTitleBar.qml Normal file
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()
}
}
}
}

2
ui/StatusQ/src/StatusQ/Platform/qmldir
View File

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

3
ui/StatusQ/src/assets/img/icons/windows_titlebar/close.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 268 B

3
ui/StatusQ/src/assets/img/icons/windows_titlebar/maximize.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 211 B

3
ui/StatusQ/src/assets/img/icons/windows_titlebar/minimise.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 164 B

3
ui/StatusQ/src/assets/img/icons/windows_titlebar/status.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 821 B

5
ui/StatusQ/statusq.qrc
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>