From 21969cf5a9ff3ee90221c88a6cd6848138bc88c8 Mon Sep 17 00:00:00 2001 From: kossLAN Date: Mon, 6 Oct 2025 12:36:40 -0400 Subject: [PATCH 1/2] refactor: wip refactor on color scheme, make screenshots suck less, etc. --- shell/bar/Bar.qml | 10 +- shell/bar/power/PowerMenu.qml | 24 ++++- shell/bar/systray/SysTray.qml | 2 +- shell/screencapture/Controller.qml | 1 - shell/screencapture/Screenshot.qml | 3 - shell/screencapture/SelectionRectangle.qml | 116 +++++++++++++++------ shell/widgets/OptionSlider.qml | 98 +++++++++++++++++ shell/widgets/StyledMouseArea.qml | 9 +- 8 files changed, 214 insertions(+), 49 deletions(-) delete mode 100644 shell/screencapture/Screenshot.qml create mode 100644 shell/widgets/OptionSlider.qml diff --git a/shell/bar/Bar.qml b/shell/bar/Bar.qml index f987654..746134d 100644 --- a/shell/bar/Bar.qml +++ b/shell/bar/Bar.qml @@ -62,7 +62,7 @@ Variants { // Right side of bar RowLayout { - spacing: 10 + spacing: 5 Layout.fillWidth: true Layout.fillHeight: true Layout.alignment: Qt.AlignRight @@ -81,10 +81,10 @@ Variants { // Layout.bottomMargin: 2 // } - // PowerMenu { - // bar: root - // Layout.fillHeight: true - // } + PowerMenu { + bar: root + Layout.fillHeight: true + } // Widgets.Separator { // Layout.leftMargin: 5 diff --git a/shell/bar/power/PowerMenu.qml b/shell/bar/power/PowerMenu.qml index a693e03..91945b2 100644 --- a/shell/bar/power/PowerMenu.qml +++ b/shell/bar/power/PowerMenu.qml @@ -1,6 +1,7 @@ pragma ComponentBehavior: Bound import QtQuick +import QtQuick.Layouts import Qt5Compat.GraphicalEffects import Quickshell.Widgets import Quickshell.Services.UPower @@ -38,7 +39,7 @@ StyledMouseArea { Rectangle { id: batteryBackground - color: Qt.color(ShellSettings.colors["surface"]).lighter(4) + color: Qt.color(ShellSettings.colors.inactive_translucent).lighter(4) opacity: 0.75 anchors { fill: parent @@ -49,7 +50,7 @@ StyledMouseArea { Rectangle { id: batteryPercentage width: (parent.width - 4) * UPower.displayDevice.percentage - color: ShellSettings.colors["inverse_surface"] + color: ShellSettings.colors.surface anchors { left: batteryBackground.left @@ -64,9 +65,22 @@ StyledMouseArea { popup: root.bar.popup show: root.showMenu onClosed: root.showMenu = false - centered: true - implicitWidth: 250 - implicitHeight: 250 + implicitWidth: 300 + implicitHeight: 50 + + ColumnLayout { + anchors { + fill: parent + margins: 8 + } + + OptionSlider { + Layout.fillWidth: true + values: ["Power Save", "Balanced", "Performance"] + index: PowerProfiles.profile + onIndexChanged: PowerProfiles.profile = this.index + } + } } } diff --git a/shell/bar/systray/SysTray.qml b/shell/bar/systray/SysTray.qml index 7c69646..47dfbe2 100644 --- a/shell/bar/systray/SysTray.qml +++ b/shell/bar/systray/SysTray.qml @@ -10,7 +10,7 @@ import ".." // TODO: // 1. Get rid of leftItem/rightItem properties on menu -// 2. Load menu properly, right now its pretty buggy +// 2. Animate height of subTrayMenu's on expand // 3. Fix bug that causes close on update (nm-applet wifi networks updating) RowLayout { diff --git a/shell/screencapture/Controller.qml b/shell/screencapture/Controller.qml index f41b6f4..7827b0f 100644 --- a/shell/screencapture/Controller.qml +++ b/shell/screencapture/Controller.qml @@ -5,7 +5,6 @@ import Quickshell import Quickshell.Io import Quickshell.Wayland import QtQuick -import ".." Singleton { id: root diff --git a/shell/screencapture/Screenshot.qml b/shell/screencapture/Screenshot.qml deleted file mode 100644 index 34f719a..0000000 --- a/shell/screencapture/Screenshot.qml +++ /dev/null @@ -1,3 +0,0 @@ -import QtQuick - -Image {} diff --git a/shell/screencapture/SelectionRectangle.qml b/shell/screencapture/SelectionRectangle.qml index 0c0fc25..7f66091 100644 --- a/shell/screencapture/SelectionRectangle.qml +++ b/shell/screencapture/SelectionRectangle.qml @@ -1,54 +1,106 @@ import QtQuick -import ".." +import qs -Canvas { +Item { id: root + width: 800 + height: 600 property color overlayColor: "#80000000" - property color outlineColor: ShellSettings.colors["primary"] - property rect selectionRect - property point startPosition + property rect selectionRect: Qt.rect(0, 0, 0, 0) + property point startPosition: Qt.point(0, 0) signal areaSelected(rect selection) - - onPaint: { - var ctx = getContext("2d"); - ctx.clearRect(0, 0, width, height); - - // grey overlay - ctx.fillStyle = overlayColor; - ctx.fillRect(0, 0, width, height); - - // cut out the selection rectangle - ctx.globalCompositeOperation = "destination-out"; - ctx.fillRect(selectionRect.x, selectionRect.y, selectionRect.width, selectionRect.height); - ctx.globalCompositeOperation = "source-over"; - ctx.strokeStyle = outlineColor; - ctx.lineWidth = 2; - ctx.strokeRect(selectionRect.x, selectionRect.y, selectionRect.width, selectionRect.height); - } + + // only send signal when selection rectangle has finished + onVisibleChanged: areaSelected(selectionRect) MouseArea { + id: selectionArea anchors.fill: parent + hoverEnabled: true + + onReleased: root.visible = false onPressed: mouse => { root.startPosition = Qt.point(mouse.x, mouse.y); + rectangle.x = mouse.x; + rectangle.y = mouse.y; + rectangle.width = 0; + rectangle.height = 0; + root.selectionRect = Qt.rect(rectangle.x, rectangle.y, rectangle.width, rectangle.height); } onPositionChanged: mouse => { if (pressed) { - var x = Math.min(root.startPosition.x, mouse.x); - var y = Math.min(root.startPosition.y, mouse.y); - var width = Math.abs(mouse.x - root.startPosition.x); - var height = Math.abs(mouse.y - root.startPosition.y); + rectangle.x = Math.min(root.startPosition.x, mouse.x); + rectangle.y = Math.min(root.startPosition.y, mouse.y); + rectangle.width = Math.abs(mouse.x - root.startPosition.x); + rectangle.height = Math.abs(mouse.y - root.startPosition.y); - root.selectionRect = Qt.rect(x, y, width, height); - root.requestPaint(); + root.selectionRect = Qt.rect(rectangle.x, rectangle.y, rectangle.width, rectangle.height); } } + } - onReleased: mouse => { - root.visible = false; - root.areaSelected(root.selectionRect); - } + Rectangle { + id: overlayStart + color: root.overlayColor + visible: !selectionArea.containsPress + anchors.fill: parent + } + + Rectangle { + id: overlayTop + color: root.overlayColor + x: 0 + y: 0 + width: parent.width + height: Math.max(0, rectangle.y) + visible: selectionArea.containsPress + } + + Rectangle { + id: overlayLeft + color: root.overlayColor + x: 0 + y: rectangle.y + width: Math.max(0, rectangle.x) + height: Math.max(0, rectangle.height) + visible: selectionArea.containsPress + } + + Rectangle { + id: overlayRight + color: root.overlayColor + x: rectangle.x + rectangle.width + y: rectangle.y + width: Math.max(0, parent.width - (rectangle.x + rectangle.width)) + height: Math.max(0, rectangle.height) + visible: selectionArea.containsPress + } + + Rectangle { + id: overlayBottom + color: root.overlayColor + x: 0 + y: rectangle.y + rectangle.height + width: parent.width + height: Math.max(0, parent.height - (rectangle.y + rectangle.height)) + visible: selectionArea.containsPress + } + + // The visible selection rectangle with border drawn above overlays + Rectangle { + id: rectangle + color: "transparent" + radius: 8 + border.color: ShellSettings.colors.active_translucent + border.width: 2 + x: 0 + y: 0 + width: 0 + height: 0 + z: 1 + visible: selectionArea.containsPress } } diff --git a/shell/widgets/OptionSlider.qml b/shell/widgets/OptionSlider.qml new file mode 100644 index 0000000..9c32a8b --- /dev/null +++ b/shell/widgets/OptionSlider.qml @@ -0,0 +1,98 @@ +pragma ComponentBehavior: Bound + +import QtQuick +import qs + +Item { + id: root + + property list values + property int index: 0 + + implicitWidth: 300 + implicitHeight: 40 + + MouseArea { + id: mouseArea + anchors.fill: parent + + property real halfHandle: handle.width / 2 + property real activeWidth: groove.width - handle.width + property real valueOffset: mouseArea.halfHandle + (root.index / (root.values.length - 1)) * mouseArea.activeWidth + + Repeater { + model: root.values + + Item { + id: delegate + required property int index + required property string modelData + + anchors.top: groove.bottom + anchors.topMargin: 2 + x: mouseArea.halfHandle + (delegate.index / (root.values.length - 1)) * mouseArea.activeWidth + + Rectangle { + id: mark + color: ShellSettings.colors.active_translucent + width: 1 + height: groove.height + } + + Text { + anchors.top: mark.bottom + + x: delegate.index === 0 ? -4 : delegate.index === root.values.length - 1 ? -this.width + 4 : -(this.width / 2) + + text: delegate.modelData + color: ShellSettings.colors.active + } + } + } + + Rectangle { + id: grooveFill + + anchors { + left: groove.left + top: groove.top + bottom: groove.bottom + } + + radius: 5 + color: ShellSettings.colors.active_translucent + width: mouseArea.valueOffset + } + + Rectangle { + id: groove + + anchors { + left: parent.left + right: parent.right + } + + y: 5 + implicitHeight: 7 + color: "transparent" + border.color: ShellSettings.colors.active_translucent + border.width: 1 + radius: 5 + } + + Rectangle { + id: handle + anchors.verticalCenter: groove.verticalCenter + height: 15 + width: height + radius: height * 0.5 + x: mouseArea.valueOffset - width * 0.5 + } + } + + Binding { + when: mouseArea.pressed + root.index: Math.max(0, Math.min(root.values.length - 1, Math.round((mouseArea.mouseX / root.width) * (root.values.length - 1)))) + restoreMode: Binding.RestoreBinding + } +} diff --git a/shell/widgets/StyledMouseArea.qml b/shell/widgets/StyledMouseArea.qml index d7c694a..0c9f174 100644 --- a/shell/widgets/StyledMouseArea.qml +++ b/shell/widgets/StyledMouseArea.qml @@ -5,16 +5,21 @@ MouseArea { id: root hoverEnabled: true - property real radius: width / 2 + property real radius: 10 property bool checked: false property var activeColor: ShellSettings.colors.active_translucent property var inactiveColor: "transparent" Rectangle { - color: root.containsMouse || root.checked ? root.activeColor : root.inactiveColor + color: root.containsMouse || root.checked ? root.activeColor : root.inactiveColor radius: root.radius anchors.fill: parent + border { + width: root.containsMouse ? 1 : 0 + color: ShellSettings.colors.active_translucent + } + Behavior on color { ColorAnimation { duration: 200 From 62ed66e60af658e9f47d1d6539d095909f097c05 Mon Sep 17 00:00:00 2001 From: kossLAN Date: Mon, 6 Oct 2025 13:10:34 -0400 Subject: [PATCH 2/2] fix: remove radius from selection rect --- shell/screencapture/SelectionRectangle.qml | 1 - 1 file changed, 1 deletion(-) diff --git a/shell/screencapture/SelectionRectangle.qml b/shell/screencapture/SelectionRectangle.qml index 7f66091..ec205e5 100644 --- a/shell/screencapture/SelectionRectangle.qml +++ b/shell/screencapture/SelectionRectangle.qml @@ -93,7 +93,6 @@ Item { Rectangle { id: rectangle color: "transparent" - radius: 8 border.color: ShellSettings.colors.active_translucent border.width: 2 x: 0