thomas/dotfiles
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feature: Move volume OSD to bottom-center and enlarge slightly

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Thomas Williams
2026-10-11 17:28:55 +01:00
parent 35374800bf
commit 626c7dbcc1
1 changed files with 17 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
dotfiles/.config/quickshell/modules/osd/VolumeOsd.qml
View File

@@ -11,16 +11,13 @@ PanelWindow {
color: "transparent" color: "transparent"
exclusiveZone: 0 exclusiveZone: 0
// Top-right, just under the bar — same fixed distance from the bar and // Bottom-center: anchoring only the bottom edge lets the layer shell
// screen edge (Appearance.spacing) that every popup opened from the bar // center it horizontally.
// itself uses, so this lines up with them instead of floating anchors { bottom: true }
// bottom-center. margins.bottom: Appearance.spacing * 4
anchors { top: true; right: true }
margins.top: Appearance.spacing
margins.right: Appearance.spacing
implicitWidth: 272 implicitWidth: 300
implicitHeight: 54 implicitHeight: 60
WlrLayershell.layer: WlrLayer.Overlay WlrLayershell.layer: WlrLayer.Overlay
WlrLayershell.namespace: "quickshell:osd" WlrLayershell.namespace: "quickshell:osd"
@@ -49,13 +46,13 @@ PanelWindow {
RowLayout { RowLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: 14 anchors.margins: 15
spacing: 12 spacing: 13
Text { Text {
font.family: Appearance.iconFontFamilyRounded font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 18 font.pixelSize: 21
color: Colors.foreground color: Colors.foreground
text: { text: {
const audio = osd.sink ? osd.sink.audio : null const audio = osd.sink ? osd.sink.audio : null
@@ -67,7 +64,7 @@ PanelWindow {
Item { Item {
id: slider id: slider
Layout.fillWidth: true Layout.fillWidth: true
implicitHeight: 16 implicitHeight: 18
readonly property real value: osd.sink && osd.sink.audio ? osd.sink.audio.volume : 0 readonly property real value: osd.sink && osd.sink.audio ? osd.sink.audio.volume : 0
readonly property bool enabled: !!osd.sink readonly property bool enabled: !!osd.sink
@@ -76,7 +73,7 @@ PanelWindow {
id: track id: track
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
width: parent.width width: parent.width
height: 4 height: 5
radius: 0 radius: 0
color: Colors.muted color: Colors.muted
opacity: 0.35 opacity: 0.35
@@ -85,15 +82,15 @@ PanelWindow {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left anchors.left: parent.left
width: track.width * Math.max(0, Math.min(1, slider.value)) width: track.width * Math.max(0, Math.min(1, slider.value))
height: 4 height: 5
radius: 0 radius: 0
color: Colors.primary color: Colors.primary
opacity: slider.enabled ? 1 : 0.4 opacity: slider.enabled ? 1 : 0.4
} }
Rectangle { Rectangle {
width: 12 width: 14
height: 12 height: 14
radius: 6 radius: 7
color: Colors.primary color: Colors.primary
opacity: slider.enabled ? 1 : 0.4 opacity: slider.enabled ? 1 : 0.4
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@@ -113,10 +110,10 @@ PanelWindow {
} }
Text { Text {
Layout.preferredWidth: 32 Layout.preferredWidth: 38
horizontalAlignment: Text.AlignRight horizontalAlignment: Text.AlignRight
font.family: Appearance.fontFamily font.family: Appearance.fontFamily
font.pixelSize: Appearance.fontSizeSmall font.pixelSize: 13
color: Colors.muted color: Colors.muted
text: Math.round(slider.value * 100) + "%" text: Math.round(slider.value * 100) + "%"
} }