lucy/quickshell
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add setting for margins in bar

Browse Source
This commit is contained in:
lucy 2026-03-20 10:34:10 +01:00
parent 57f9603531
commit e0808edeb5
11 changed files with 189 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
Colors.qml
View File

@ -3,24 +3,24 @@ import QtQuick
QtObject { QtObject {
// --- The Backgrounds (Darkest to Lightest) --- // --- The Backgrounds (Darkest to Lightest) ---
readonly property string base00: "#1f2430" // Default Background readonly property string base00: "#181616" // Default Background
readonly property string base01: "#242936" // Lighter Background (Status bars, panels) readonly property string base01: "#282727" // Lighter Background (Status bars, panels)
readonly property string base02: "#323844" // Selection Background readonly property string base02: "#393836" // Selection Background
readonly property string base03: "#4a5059" // Comments, Invisibles, line highlighting readonly property string base03: "#625e5a" // Comments, Invisibles, line highlighting
// --- The Foregrounds (Darkest to Lightest) --- // --- The Foregrounds (Darkest to Lightest) ---
readonly property string base04: "#707a8c" // Dark Foreground (Used for status bars) readonly property string base04: "#737c73" // Dark Foreground (Used for status bars)
readonly property string base05: "#cccac2" // Default Foreground, Caret readonly property string base05: "#c5c9c5" // Default Foreground, Caret
readonly property string base06: "#d9d7ce" // Light Foreground (Rarely used) readonly property string base06: "#c8c093" // Light Foreground (Rarely used)
readonly property string base07: "#f3f4f5" // Lightest Foreground readonly property string base07: "#c5c9c5" // Lightest Foreground
// --- The Accent Colors --- // --- The Accent Colors ---
readonly property string base08: "#f28779" // Red (Variables, errors) readonly property string base08: "#c4746e" // Red (Variables, errors)
readonly property string base09: "#ffad66" // Orange (Integers, booleans, constants) readonly property string base09: "#b6927b" // Orange (Integers, booleans, constants)
readonly property string base0A: "#ffd173" // Yellow (Classes, search text bg, warnings) readonly property string base0A: "#c4b28a" // Yellow (Classes, search text bg, warnings)
readonly property string base0B: "#d5ff80" // Green (Strings, success states) readonly property string base0B: "#8a9a7b" // Green (Strings, success states)
readonly property string base0C: "#95e6cb" // Cyan (Support, regex, escape chars) readonly property string base0C: "#8ea4a2" // Cyan (Support, regex, escape chars)
readonly property string base0D: "#73d0ff" // Blue (Functions, methods, headings) readonly property string base0D: "#8ba4b0" // Blue (Functions, methods, headings)
readonly property string base0E: "#d4bfff" // Purple/Mauve (Keywords, storage, selectors) readonly property string base0E: "#a292a3" // Purple/Mauve (Keywords, storage, selectors)
readonly property string base0F: "#f27983" // Brown/Flamingo (Deprecated, embedded tags) readonly property string base0F: "#b98d7b" // Brown/Flamingo (Deprecated, embedded tags)
} }

8
modules/Bar/Bar.qml
View File

@ -26,8 +26,8 @@ Variants {
implicitHeight: Settings.config.barHeight implicitHeight: Settings.config.barHeight
color: "transparent" color: "transparent"
Rectangle { Rectangle {
anchors.fill: parent
id: bar id: bar
anchors.fill: parent
radius: Settings.config.floating ? Settings.config.rounding * 2 : 0 radius: Settings.config.floating ? Settings.config.rounding * 2 : 0
color: Colors.base00 color: Colors.base00
RowLayout { RowLayout {
@ -41,22 +41,22 @@ Variants {
barScreen: root.modelData barScreen: root.modelData
} }
MPris {} MPris {}
Title {}
} }
RowLayout { RowLayout {
id: center id: center
anchors { anchors {
centerIn: parent centerIn: parent
} }
Title {} Clock {}
} }
RowLayout { RowLayout {
id: right id: right
anchors { anchors {
right: parent.right right: parent.right
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
rightMargin: Settings.config.floating ? 6 : 10 rightMargin: Settings.config.floating ? Settings.config.barmargins : 10
} }
Clock {}
StatusIcons {} StatusIcons {}
Tray {} Tray {}
} }

40
modules/Bar/Clock.qml
View File

@ -1,33 +1,39 @@
import Quickshell import Quickshell
import Quickshell.Widgets
import QtQuick import QtQuick
import Qt5Compat.GraphicalEffects import Qt5Compat.GraphicalEffects
import qs.settings import qs.settings
import qs import qs
import qs.widgets import qs.widgets
Rectangle { WrapperRectangle {
layer {
enabled: true
effect: DropShadow {
color: Colors.base01
radius: 4
verticalOffset: 2
horizontalOffset: 2
samples: 18
}
}
id: root 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 color: Colors.base02
implicitWidth: clockText.implicitWidth + 14
implicitHeight: Settings.config.barHeight / 1.5
radius: Settings.config.rounding radius: Settings.config.rounding
implicitWidth: clockText.implicitWidth + 20
implicitHeight: Settings.config.barHeight - margin * 2
SystemClock { SystemClock {
id: clock id: clock
precision: SystemClock.Minutes precision: SystemClock.Minutes
} }
CText { child: Item {
id: clockText id: textWrap
anchors.centerIn: root
text: Qt.formatDateTime(clock.date, "hh:mm") CText {
id: clockText
text: Qt.formatDateTime(clock.date, "hh:mm")
anchors.centerIn: parent
}
} }
} }

47
modules/Bar/MPris.qml
View File

@ -1,5 +1,6 @@
import Quickshell import Quickshell
import Quickshell.Services.Mpris import Quickshell.Services.Mpris
import Quickshell.Widgets
import QtQuick import QtQuick
import Qt5Compat.GraphicalEffects import Qt5Compat.GraphicalEffects
import QtQuick.Layouts import QtQuick.Layouts
@ -7,21 +8,23 @@ import qs
import qs.settings import qs.settings
import qs.widgets import qs.widgets
Rectangle { WrapperRectangle {
layer {
enabled: true
effect: DropShadow {
color: Colors.base01
radius: 4
verticalOffset: 2
horizontalOffset: 2
samples: 18
}
}
id: root 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 color: Colors.base02
implicitWidth: songLayout.implicitWidth + 14 implicitWidth: songLayout.implicitWidth + 20
implicitHeight: Settings.config.barHeight / 1.5 implicitHeight: Settings.config.barHeight - margin * 2
radius: Settings.config.rounding radius: Settings.config.rounding
property var spotify: root.getSpotify() property var spotify: root.getSpotify()
visible: getSpotify() == null ? false : true visible: getSpotify() == null ? false : true
@ -37,14 +40,16 @@ Rectangle {
return null; return null;
} }
RowLayout { child: Item {
id: songLayout RowLayout {
anchors.centerIn: parent id: songLayout
CText { anchors.centerIn: parent
id: playingSong CText {
Layout.maximumWidth: 400 id: playingSong
text: root.spotify == null ? "" : root.spotify.trackTitle + " - " + root.spotify.trackArtist Layout.maximumWidth: 400
elide: Text.ElideRight text: root.spotify == null ? "" : root.spotify.trackTitle + " - " + root.spotify.trackArtist
elide: Text.ElideRight
}
} }
} }
} }

61
modules/Bar/StatusIcons.qml
View File

@ -1,5 +1,6 @@
import Quickshell.Services.UPower import Quickshell.Services.UPower
import Quickshell.Services.Pipewire import Quickshell.Services.Pipewire
import Quickshell.Widgets
import QtQuick import QtQuick
import Qt5Compat.GraphicalEffects import Qt5Compat.GraphicalEffects
import QtQuick.Layouts import QtQuick.Layouts
@ -7,21 +8,22 @@ import qs
import qs.settings import qs.settings
import qs.widgets import qs.widgets
Rectangle { WrapperRectangle {
layer {
enabled: true
effect: DropShadow {
color: Colors.base01
radius: 4
verticalOffset: 2
horizontalOffset: 2
samples: 18
}
}
id: root 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 color: Colors.base02
implicitWidth: iconLayout.implicitWidth + 14 implicitWidth: iconLayout.implicitWidth + 14
implicitHeight: Settings.config.barHeight / 1.5 implicitHeight: Settings.config.barHeight - margin * 2
radius: Settings.config.rounding radius: Settings.config.rounding
property var battery: UPower.displayDevice property var battery: UPower.displayDevice
property var percentage: UPower.displayDevice.percentage property var percentage: UPower.displayDevice.percentage
@ -78,24 +80,23 @@ Rectangle {
return ""; return "";
} }
} }
RowLayout { child: Item {
id: iconLayout RowLayout {
anchors.centerIn: parent id: iconLayout
spacing: 5 anchors.centerIn: parent
CIcon { CIcon {
id: batteryIcon id: batteryIcon
Layout.leftMargin: 2 Layout.leftMargin: 2
text: root.getBatteryIcon() 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 : []
} }
} }

26
modules/Bar/Title.qml
View File

@ -1,14 +1,16 @@
import Quickshell import Quickshell
import Qt5Compat.GraphicalEffects import Qt5Compat.GraphicalEffects
import Quickshell.Wayland import Quickshell.Wayland
import Quickshell.Widgets
import QtQuick import QtQuick
import QtQuick.Layouts import QtQuick.Layouts
import qs import qs
import qs.widgets import qs.widgets
import qs.settings import qs.settings
Rectangle { WrapperRectangle {
id: root id: root
margin: Settings.config.barmargins
layer { layer {
enabled: true enabled: true
effect: DropShadow { effect: DropShadow {
@ -23,15 +25,19 @@ Rectangle {
property bool active: activeWindow ? activeWindow.activated ? true : false : false property bool active: activeWindow ? activeWindow.activated ? true : false : false
radius: Settings.config.rounding radius: Settings.config.rounding
color: active ? Colors.base02 : "transparent" color: active ? Colors.base02 : "transparent"
implicitHeight: Settings.config.barHeight / 1.5 implicitWidth: titleText.width + 40
implicitWidth: titleText.width + 14 implicitHeight: Settings.config.barHeight - margin * 2
RowLayout { child: Item {
anchors.centerIn: parent RowLayout {
CText { anchors.centerIn: parent
id: titleText CText {
Layout.maximumWidth: 300 id: titleText
text: root.activeWindow ? root.activeWindow.activated ? root.activeWindow.title : "" : "" Layout.maximumWidth: 250
elide: Text.ElideRight // Allows wrapping text: root.activeWindow ? root.activeWindow.activated ? root.activeWindow.title : "" : ""
elide: Text.ElideRight // Allows wrapping
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
}
} }
Layout.alignment: Qt.AlignHCenter
} }
} }

23
modules/Bar/Tray.qml
View File

@ -1,12 +1,14 @@
import Quickshell.Services.SystemTray import Quickshell.Services.SystemTray
import Quickshell.Widgets
import QtQuick import QtQuick
import Qt5Compat.GraphicalEffects import Qt5Compat.GraphicalEffects
import qs import qs
import qs.settings import qs.settings
import QtQuick.Layouts import QtQuick.Layouts
Rectangle { WrapperRectangle {
id: root id: root
margin: Settings.config.barmargins
layer { layer {
enabled: true enabled: true
effect: DropShadow { effect: DropShadow {
@ -18,17 +20,20 @@ Rectangle {
} }
} }
implicitWidth: trayRow.implicitWidth + 14 implicitWidth: trayRow.implicitWidth + 14
implicitHeight: Settings.config.barHeight / 1.5 implicitHeight: Settings.config.barHeight - margin * 2
visible: trayRep.count > 0 visible: trayRep.count > 0
color: Colors.base02 color: Colors.base02
radius: Settings.config.rounding radius: Settings.config.rounding
RowLayout { child: Item {
id: trayRow RowLayout {
anchors.centerIn: parent id: trayRow
Repeater { anchors.centerIn: parent
id: trayRep Repeater {
model: SystemTray.items id: trayRep
delegate: TrayItem {} Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
model: SystemTray.items
delegate: TrayItem {}
}
} }
} }
} }

101
modules/Bar/Ws.qml
View File

@ -1,5 +1,6 @@
pragma ComponentBehavior: Bound pragma ComponentBehavior: Bound
import Quickshell import Quickshell
import Quickshell.Widgets
import Quickshell.Hyprland import Quickshell.Hyprland
import QtQuick import QtQuick
import Qt5Compat.GraphicalEffects import Qt5Compat.GraphicalEffects
@ -8,61 +9,65 @@ import qs
import qs.settings import qs.settings
import qs.widgets import qs.widgets
Rectangle { WrapperRectangle {
id: wsWrap id: wsWrap
margin: Settings.config.barmargins
leftMargin: margin * 2
required property ShellScreen barScreen required property ShellScreen barScreen
color: "transparent" color: "transparent"
radius: Settings.config.rounding radius: Settings.config.rounding
implicitWidth: wsLayout.implicitWidth + 6 implicitWidth: wsLayout.implicitWidth + 6
implicitHeight: wsLayout.implicitHeight + 6 implicitHeight: Settings.config.barHeight - margin * 2
RowLayout { child: Item {
id: wsLayout RowLayout {
spacing: 6 id: wsLayout
anchors.centerIn: parent spacing: 6
Repeater { anchors.centerIn: parent
id: wsRep Repeater {
model: Hyprland.workspaces id: wsRep
delegate: Rectangle { model: Hyprland.workspaces
layer { delegate: Rectangle {
enabled: true id: wsRect
effect: DropShadow { layer {
color: Colors.base01 enabled: true
radius: 8 effect: DropShadow {
verticalOffset: 1 color: Colors.base01
horizontalOffset: 1 radius: 8
samples: 16 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
} }
duration: 400
} }
} implicitWidth: modelData.focused ? Settings.config.barHeight * 1.5 : Settings.config.barHeight / 2 + 10
MouseArea { implicitHeight: Settings.config.barHeight - wsWrap.margin * 2
id: mouseHandler visible: modelData.id < 0 ? false : modelData.monitor?.name == wsWrap.barScreen.name
acceptedButtons: Qt.LeftButton required property var modelData
anchors.fill: parent color: modelData.focused ? Colors.base0D : Colors.base02
cursorShape: Qt.PointingHandCursor radius: Settings.config.rounding
onClicked: { CText {
wsRect.modelData.activate(); 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();
}
} }
} }
} }

5
modules/notifications/NotificationCard.qml
View File

@ -14,7 +14,7 @@ Rectangle {
implicitHeight: fullLayout.implicitHeight + 40 implicitHeight: fullLayout.implicitHeight + 40
color: dismissArea.containsMouse ? Colors.base02 : Colors.base00 color: dismissArea.containsMouse ? Colors.base02 : Colors.base00
radius: Settings.config.rounding radius: Settings.config.rounding
border.width: 0 border.width: 2
border.color: Colors.base0D border.color: Colors.base0D
Timer { Timer {
id: dismissTimer id: dismissTimer
@ -27,8 +27,9 @@ Rectangle {
RowLayout { RowLayout {
id: fullLayout id: fullLayout
anchors.margins: 10 anchors.margins: 20
anchors.fill: parent anchors.fill: parent
anchors.centerIn: parent
spacing: 10 spacing: 10
ClippingWrapperRectangle { ClippingWrapperRectangle {

1
settings/Settings.qml
View File

@ -24,6 +24,7 @@ Singleton {
property int margins property int margins
property var currentWall property var currentWall
property bool wallswitchershown property bool wallswitchershown
property int barmargins
} }
} }
} }

3
settings/settings.json
View File

@ -6,5 +6,6 @@
"fontSize": 12, "fontSize": 12,
"margins": 10, "margins": 10,
"rounding": 26, "rounding": 26,
"wallswitchershown": false "wallswitchershown": false,
"barmargins": 8
} }