diff --git a/sandbox/DemoApp.qml b/sandbox/DemoApp.qml index 1287023a..9f4d0e33 100644 --- a/sandbox/DemoApp.qml +++ b/sandbox/DemoApp.qml @@ -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 diff --git a/sandbox/main.qml b/sandbox/main.qml index 5455a7e7..802829a3 100644 --- a/sandbox/main.qml +++ b/sandbox/main.qml @@ -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() } diff --git a/src/StatusQ/Core/Theme/StatusDarkTheme.qml b/src/StatusQ/Core/Theme/StatusDarkTheme.qml index 15b9a3c4..53657c36 100644 --- a/src/StatusQ/Core/Theme/StatusDarkTheme.qml +++ b/src/StatusQ/Core/Theme/StatusDarkTheme.qml @@ -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) diff --git a/src/StatusQ/Core/Theme/StatusLightTheme.qml b/src/StatusQ/Core/Theme/StatusLightTheme.qml index f1eb4464..3b49561a 100644 --- a/src/StatusQ/Core/Theme/StatusLightTheme.qml +++ b/src/StatusQ/Core/Theme/StatusLightTheme.qml @@ -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) diff --git a/src/StatusQ/Core/Theme/ThemePalette.qml b/src/StatusQ/Core/Theme/ThemePalette.qml index eea944a8..a26ab124 100644 --- a/src/StatusQ/Core/Theme/ThemePalette.qml +++ b/src/StatusQ/Core/Theme/ThemePalette.qml @@ -64,6 +64,7 @@ QtObject { property color directColor6 property color directColor7 property color directColor8 + property color directColor9 property color indirectColor1 property color indirectColor2 diff --git a/src/StatusQ/Platform/StatusWindowsTitleBar.qml b/src/StatusQ/Platform/StatusWindowsTitleBar.qml new file mode 100644 index 00000000..f52455a5 --- /dev/null +++ b/src/StatusQ/Platform/StatusWindowsTitleBar.qml @@ -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() + } + } + } +} diff --git a/src/StatusQ/Platform/qmldir b/src/StatusQ/Platform/qmldir index 8ef441bf..477c3640 100644 --- a/src/StatusQ/Platform/qmldir +++ b/src/StatusQ/Platform/qmldir @@ -1,5 +1,5 @@ module StatusQ.Platform StatusMacTrafficLights 0.1 StatusMacTrafficLights.qml - +StatusWindowsTitleBar 0.1 StatusWindowsTitleBar.qml diff --git a/src/assets/img/icons/windows_titlebar/close.svg b/src/assets/img/icons/windows_titlebar/close.svg new file mode 100644 index 00000000..7e70cb85 --- /dev/null +++ b/src/assets/img/icons/windows_titlebar/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/icons/windows_titlebar/maximize.svg b/src/assets/img/icons/windows_titlebar/maximize.svg new file mode 100644 index 00000000..a0ef6938 --- /dev/null +++ b/src/assets/img/icons/windows_titlebar/maximize.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/icons/windows_titlebar/minimise.svg b/src/assets/img/icons/windows_titlebar/minimise.svg new file mode 100644 index 00000000..cac13939 --- /dev/null +++ b/src/assets/img/icons/windows_titlebar/minimise.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/icons/windows_titlebar/status.svg b/src/assets/img/icons/windows_titlebar/status.svg new file mode 100644 index 00000000..1268f2cf --- /dev/null +++ b/src/assets/img/icons/windows_titlebar/status.svg @@ -0,0 +1,3 @@ + + + diff --git a/statusq.qrc b/statusq.qrc index abcaec77..7ad95aeb 100644 --- a/statusq.qrc +++ b/statusq.qrc @@ -258,5 +258,10 @@ src/StatusQ/Popups/StatusSearchPopupMenuItem.qml src/StatusQ/Popups/StatusSearchLocationMenu.qml src/StatusQ/Core/StatusTooltipSettings.qml + src/StatusQ/Platform/StatusWindowsTitleBar.qml + src/assets/img/icons/windows_titlebar/close.svg + src/assets/img/icons/windows_titlebar/maximize.svg + src/assets/img/icons/windows_titlebar/minimise.svg + src/assets/img/icons/windows_titlebar/status.svg