From e0808edeb5f013585f9781338470d9eeb46f3d49 Mon Sep 17 00:00:00 2001 From: lucy Date: Fri, 20 Mar 2026 10:34:10 +0100 Subject: [PATCH] add setting for margins in bar --- Colors.qml | 32 +++---- modules/Bar/Bar.qml | 8 +- modules/Bar/Clock.qml | 40 ++++---- modules/Bar/MPris.qml | 47 +++++----- modules/Bar/StatusIcons.qml | 61 +++++++------ modules/Bar/Title.qml | 26 ++++-- modules/Bar/Tray.qml | 23 +++-- modules/Bar/Ws.qml | 101 +++++++++++---------- modules/notifications/NotificationCard.qml | 5 +- settings/Settings.qml | 1 + settings/settings.json | 3 +- 11 files changed, 189 insertions(+), 158 deletions(-) diff --git a/Colors.qml b/Colors.qml index 3a2cd94..8f2bea7 100644 --- a/Colors.qml +++ b/Colors.qml @@ -3,24 +3,24 @@ import QtQuick QtObject { // --- The Backgrounds (Darkest to Lightest) --- - readonly property string base00: "#1f2430" // Default Background - readonly property string base01: "#242936" // Lighter Background (Status bars, panels) - readonly property string base02: "#323844" // Selection Background - readonly property string base03: "#4a5059" // Comments, Invisibles, line highlighting + readonly property string base00: "#181616" // Default Background + readonly property string base01: "#282727" // Lighter Background (Status bars, panels) + readonly property string base02: "#393836" // Selection Background + readonly property string base03: "#625e5a" // Comments, Invisibles, line highlighting // --- The Foregrounds (Darkest to Lightest) --- - readonly property string base04: "#707a8c" // Dark Foreground (Used for status bars) - readonly property string base05: "#cccac2" // Default Foreground, Caret - readonly property string base06: "#d9d7ce" // Light Foreground (Rarely used) - readonly property string base07: "#f3f4f5" // Lightest Foreground + readonly property string base04: "#737c73" // Dark Foreground (Used for status bars) + readonly property string base05: "#c5c9c5" // Default Foreground, Caret + readonly property string base06: "#c8c093" // Light Foreground (Rarely used) + readonly property string base07: "#c5c9c5" // Lightest Foreground // --- The Accent Colors --- - readonly property string base08: "#f28779" // Red (Variables, errors) - readonly property string base09: "#ffad66" // Orange (Integers, booleans, constants) - readonly property string base0A: "#ffd173" // Yellow (Classes, search text bg, warnings) - readonly property string base0B: "#d5ff80" // Green (Strings, success states) - readonly property string base0C: "#95e6cb" // Cyan (Support, regex, escape chars) - readonly property string base0D: "#73d0ff" // Blue (Functions, methods, headings) - readonly property string base0E: "#d4bfff" // Purple/Mauve (Keywords, storage, selectors) - readonly property string base0F: "#f27983" // Brown/Flamingo (Deprecated, embedded tags) + readonly property string base08: "#c4746e" // Red (Variables, errors) + readonly property string base09: "#b6927b" // Orange (Integers, booleans, constants) + readonly property string base0A: "#c4b28a" // Yellow (Classes, search text bg, warnings) + readonly property string base0B: "#8a9a7b" // Green (Strings, success states) + readonly property string base0C: "#8ea4a2" // Cyan (Support, regex, escape chars) + readonly property string base0D: "#8ba4b0" // Blue (Functions, methods, headings) + readonly property string base0E: "#a292a3" // Purple/Mauve (Keywords, storage, selectors) + readonly property string base0F: "#b98d7b" // Brown/Flamingo (Deprecated, embedded tags) } diff --git a/modules/Bar/Bar.qml b/modules/Bar/Bar.qml index a399b18..dfd0b23 100644 --- a/modules/Bar/Bar.qml +++ b/modules/Bar/Bar.qml @@ -26,8 +26,8 @@ Variants { implicitHeight: Settings.config.barHeight color: "transparent" Rectangle { - anchors.fill: parent id: bar + anchors.fill: parent radius: Settings.config.floating ? Settings.config.rounding * 2 : 0 color: Colors.base00 RowLayout { @@ -41,22 +41,22 @@ Variants { barScreen: root.modelData } MPris {} + Title {} } RowLayout { id: center anchors { centerIn: parent } - Title {} + Clock {} } RowLayout { id: right anchors { right: parent.right verticalCenter: parent.verticalCenter - rightMargin: Settings.config.floating ? 6 : 10 + rightMargin: Settings.config.floating ? Settings.config.barmargins : 10 } - Clock {} StatusIcons {} Tray {} } diff --git a/modules/Bar/Clock.qml b/modules/Bar/Clock.qml index 51dad69..c1015fc 100644 --- a/modules/Bar/Clock.qml +++ b/modules/Bar/Clock.qml @@ -1,33 +1,39 @@ import Quickshell +import Quickshell.Widgets import QtQuick import Qt5Compat.GraphicalEffects import qs.settings import qs import qs.widgets -Rectangle { - layer { - enabled: true - effect: DropShadow { - color: Colors.base01 - radius: 4 - verticalOffset: 2 - horizontalOffset: 2 - samples: 18 - } - } +WrapperRectangle { id: root + margin: Settings.config.barmargins + layer { + enabled: true + effect: DropShadow { + color: Colors.base01 + radius: 4 + verticalOffset: 2 + horizontalOffset: 2 + samples: 18 + } + } color: Colors.base02 - implicitWidth: clockText.implicitWidth + 14 - implicitHeight: Settings.config.barHeight / 1.5 radius: Settings.config.rounding + implicitWidth: clockText.implicitWidth + 20 + implicitHeight: Settings.config.barHeight - margin * 2 SystemClock { id: clock precision: SystemClock.Minutes } - CText { - id: clockText - anchors.centerIn: root - text: Qt.formatDateTime(clock.date, "hh:mm") + child: Item { + id: textWrap + + CText { + id: clockText + text: Qt.formatDateTime(clock.date, "hh:mm") + anchors.centerIn: parent + } } } diff --git a/modules/Bar/MPris.qml b/modules/Bar/MPris.qml index 1787a7f..975207b 100644 --- a/modules/Bar/MPris.qml +++ b/modules/Bar/MPris.qml @@ -1,5 +1,6 @@ import Quickshell import Quickshell.Services.Mpris +import Quickshell.Widgets import QtQuick import Qt5Compat.GraphicalEffects import QtQuick.Layouts @@ -7,21 +8,23 @@ import qs import qs.settings import qs.widgets -Rectangle { - layer { - enabled: true - effect: DropShadow { - color: Colors.base01 - radius: 4 - verticalOffset: 2 - horizontalOffset: 2 - samples: 18 - } - } +WrapperRectangle { id: root + margin: Settings.config.barmargins + + layer { + enabled: true + effect: DropShadow { + color: Colors.base01 + radius: 4 + verticalOffset: 2 + horizontalOffset: 2 + samples: 18 + } + } color: Colors.base02 - implicitWidth: songLayout.implicitWidth + 14 - implicitHeight: Settings.config.barHeight / 1.5 + implicitWidth: songLayout.implicitWidth + 20 + implicitHeight: Settings.config.barHeight - margin * 2 radius: Settings.config.rounding property var spotify: root.getSpotify() visible: getSpotify() == null ? false : true @@ -37,14 +40,16 @@ Rectangle { return null; } - RowLayout { - id: songLayout - anchors.centerIn: parent - CText { - id: playingSong - Layout.maximumWidth: 400 - text: root.spotify == null ? "" : root.spotify.trackTitle + " - " + root.spotify.trackArtist - elide: Text.ElideRight + child: Item { + RowLayout { + id: songLayout + anchors.centerIn: parent + CText { + id: playingSong + Layout.maximumWidth: 400 + text: root.spotify == null ? "" : root.spotify.trackTitle + " - " + root.spotify.trackArtist + elide: Text.ElideRight + } } } } diff --git a/modules/Bar/StatusIcons.qml b/modules/Bar/StatusIcons.qml index 844b1b2..798e5d2 100644 --- a/modules/Bar/StatusIcons.qml +++ b/modules/Bar/StatusIcons.qml @@ -1,5 +1,6 @@ import Quickshell.Services.UPower import Quickshell.Services.Pipewire +import Quickshell.Widgets import QtQuick import Qt5Compat.GraphicalEffects import QtQuick.Layouts @@ -7,21 +8,22 @@ import qs import qs.settings import qs.widgets -Rectangle { - layer { - enabled: true - effect: DropShadow { - color: Colors.base01 - radius: 4 - verticalOffset: 2 - horizontalOffset: 2 - samples: 18 - } - } +WrapperRectangle { id: root + margin: Settings.config.barmargins + layer { + enabled: true + effect: DropShadow { + color: Colors.base01 + radius: 4 + verticalOffset: 2 + horizontalOffset: 2 + samples: 18 + } + } color: Colors.base02 implicitWidth: iconLayout.implicitWidth + 14 - implicitHeight: Settings.config.barHeight / 1.5 + implicitHeight: Settings.config.barHeight - margin * 2 radius: Settings.config.rounding property var battery: UPower.displayDevice property var percentage: UPower.displayDevice.percentage @@ -78,24 +80,23 @@ Rectangle { return ""; } } - RowLayout { - id: iconLayout - anchors.centerIn: parent - spacing: 5 - CIcon { - id: batteryIcon - Layout.leftMargin: 2 - text: root.getBatteryIcon() + child: Item { + RowLayout { + id: iconLayout + anchors.centerIn: parent + CIcon { + id: batteryIcon + Layout.leftMargin: 2 + text: root.getBatteryIcon() + } + CIcon { + id: volIcon + text: root.getVolumeIcon() + PwObjectTracker { + id: audioTracker + objects: Pipewire.ready ? Pipewire.defaultAudioSink : [] + } + } } - CIcon { - id: volIcon - text: root.getVolumeIcon() - } - } - - property var audioSink: Pipewire.defaultAudioSink - PwObjectTracker { - id: audioTracker - objects: Pipewire.ready ? Pipewire.defaultAudioSink : [] } } diff --git a/modules/Bar/Title.qml b/modules/Bar/Title.qml index 05e5403..c452b5c 100644 --- a/modules/Bar/Title.qml +++ b/modules/Bar/Title.qml @@ -1,14 +1,16 @@ import Quickshell import Qt5Compat.GraphicalEffects import Quickshell.Wayland +import Quickshell.Widgets import QtQuick import QtQuick.Layouts import qs import qs.widgets import qs.settings -Rectangle { +WrapperRectangle { id: root + margin: Settings.config.barmargins layer { enabled: true effect: DropShadow { @@ -23,15 +25,19 @@ Rectangle { property bool active: activeWindow ? activeWindow.activated ? true : false : false radius: Settings.config.rounding color: active ? Colors.base02 : "transparent" - implicitHeight: Settings.config.barHeight / 1.5 - implicitWidth: titleText.width + 14 - RowLayout { - anchors.centerIn: parent - CText { - id: titleText - Layout.maximumWidth: 300 - text: root.activeWindow ? root.activeWindow.activated ? root.activeWindow.title : "" : "" - elide: Text.ElideRight // Allows wrapping + implicitWidth: titleText.width + 40 + implicitHeight: Settings.config.barHeight - margin * 2 + child: Item { + RowLayout { + anchors.centerIn: parent + CText { + id: titleText + Layout.maximumWidth: 250 + text: root.activeWindow ? root.activeWindow.activated ? root.activeWindow.title : "" : "" + elide: Text.ElideRight // Allows wrapping + Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter + } } + Layout.alignment: Qt.AlignHCenter } } diff --git a/modules/Bar/Tray.qml b/modules/Bar/Tray.qml index c5bf19f..b136650 100644 --- a/modules/Bar/Tray.qml +++ b/modules/Bar/Tray.qml @@ -1,12 +1,14 @@ import Quickshell.Services.SystemTray +import Quickshell.Widgets import QtQuick import Qt5Compat.GraphicalEffects import qs import qs.settings import QtQuick.Layouts -Rectangle { +WrapperRectangle { id: root + margin: Settings.config.barmargins layer { enabled: true effect: DropShadow { @@ -18,17 +20,20 @@ Rectangle { } } implicitWidth: trayRow.implicitWidth + 14 - implicitHeight: Settings.config.barHeight / 1.5 + implicitHeight: Settings.config.barHeight - margin * 2 visible: trayRep.count > 0 color: Colors.base02 radius: Settings.config.rounding - RowLayout { - id: trayRow - anchors.centerIn: parent - Repeater { - id: trayRep - model: SystemTray.items - delegate: TrayItem {} + child: Item { + RowLayout { + id: trayRow + anchors.centerIn: parent + Repeater { + id: trayRep + Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter + model: SystemTray.items + delegate: TrayItem {} + } } } } diff --git a/modules/Bar/Ws.qml b/modules/Bar/Ws.qml index 27310fd..c65beb3 100644 --- a/modules/Bar/Ws.qml +++ b/modules/Bar/Ws.qml @@ -1,5 +1,6 @@ pragma ComponentBehavior: Bound import Quickshell +import Quickshell.Widgets import Quickshell.Hyprland import QtQuick import Qt5Compat.GraphicalEffects @@ -8,61 +9,65 @@ import qs import qs.settings import qs.widgets -Rectangle { +WrapperRectangle { id: wsWrap + margin: Settings.config.barmargins + leftMargin: margin * 2 required property ShellScreen barScreen color: "transparent" radius: Settings.config.rounding implicitWidth: wsLayout.implicitWidth + 6 - implicitHeight: wsLayout.implicitHeight + 6 - RowLayout { - id: wsLayout - spacing: 6 - anchors.centerIn: parent - Repeater { - id: wsRep - model: Hyprland.workspaces - delegate: Rectangle { - layer { - enabled: true - effect: DropShadow { - color: Colors.base01 - radius: 8 - verticalOffset: 1 - horizontalOffset: 1 - samples: 16 - } - } - id: wsRect - implicitWidth: modelData.focused ? Settings.config.barHeight * 1.5 : Settings.config.barHeight / 2 + 10 - implicitHeight: Settings.config.barHeight / 1.5 - visible: modelData.id < 0 ? false : modelData.monitor?.name == wsWrap.barScreen.name - required property var modelData - color: modelData.focused ? Colors.base0D : Colors.base02 - radius: Settings.config.rounding - CText { - id: wsText - anchors.centerIn: parent - text: wsRect.modelData.id - opacity: parent.modelData.focused ? 1 : 0.5 - color: parent.modelData.focused ? Colors.base00 : Colors.base07 - } - Behavior on implicitWidth { - NumberAnimation { - easing { - type: Easing.OutBack - overshoot: 2 + implicitHeight: Settings.config.barHeight - margin * 2 + child: Item { + RowLayout { + id: wsLayout + spacing: 6 + anchors.centerIn: parent + Repeater { + id: wsRep + model: Hyprland.workspaces + delegate: Rectangle { + id: wsRect + layer { + enabled: true + effect: DropShadow { + color: Colors.base01 + radius: 8 + verticalOffset: 1 + horizontalOffset: 1 + samples: 16 } - duration: 400 } - } - MouseArea { - id: mouseHandler - acceptedButtons: Qt.LeftButton - anchors.fill: parent - cursorShape: Qt.PointingHandCursor - onClicked: { - wsRect.modelData.activate(); + implicitWidth: modelData.focused ? Settings.config.barHeight * 1.5 : Settings.config.barHeight / 2 + 10 + implicitHeight: Settings.config.barHeight - wsWrap.margin * 2 + visible: modelData.id < 0 ? false : modelData.monitor?.name == wsWrap.barScreen.name + required property var modelData + color: modelData.focused ? Colors.base0D : Colors.base02 + radius: Settings.config.rounding + CText { + id: wsText + anchors.centerIn: parent + text: wsRect.modelData.id + opacity: parent.modelData.focused ? 1 : 0.5 + color: parent.modelData.focused ? Colors.base00 : Colors.base07 + } + Behavior on implicitWidth { + NumberAnimation { + easing { + type: Easing.OutBack + overshoot: 2 + } + duration: 400 + } + } + MouseArea { + id: mouseHandler + acceptedButtons: Qt.LeftButton + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + onClicked: { + wsRect.modelData.activate(); + } } } } diff --git a/modules/notifications/NotificationCard.qml b/modules/notifications/NotificationCard.qml index 725d6a8..5476129 100644 --- a/modules/notifications/NotificationCard.qml +++ b/modules/notifications/NotificationCard.qml @@ -14,7 +14,7 @@ Rectangle { implicitHeight: fullLayout.implicitHeight + 40 color: dismissArea.containsMouse ? Colors.base02 : Colors.base00 radius: Settings.config.rounding - border.width: 0 + border.width: 2 border.color: Colors.base0D Timer { id: dismissTimer @@ -27,8 +27,9 @@ Rectangle { RowLayout { id: fullLayout - anchors.margins: 10 + anchors.margins: 20 anchors.fill: parent + anchors.centerIn: parent spacing: 10 ClippingWrapperRectangle { diff --git a/settings/Settings.qml b/settings/Settings.qml index 9e086f0..74d5501 100644 --- a/settings/Settings.qml +++ b/settings/Settings.qml @@ -24,6 +24,7 @@ Singleton { property int margins property var currentWall property bool wallswitchershown + property int barmargins } } } diff --git a/settings/settings.json b/settings/settings.json index 595acda..3ce42f7 100644 --- a/settings/settings.json +++ b/settings/settings.json @@ -6,5 +6,6 @@ "fontSize": 12, "margins": 10, "rounding": 26, - "wallswitchershown": false + "wallswitchershown": false, + "barmargins": 8 }