From c8a4da6d8b679ee426fcab33c9068a37eb34f6ab Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Sat, 24 May 2025 11:44:07 +0200 Subject: [PATCH] bar: add "hella shortened" form for even narrower screens --- .config/quickshell/modules/bar/Bar.qml | 25 +++++++++++++------ .../quickshell/modules/bar/ClockWidget.qml | 3 +++ .config/quickshell/modules/bar/Resources.qml | 10 ++++++-- .../quickshell/modules/common/Appearance.qml | 4 ++- 4 files changed, 32 insertions(+), 10 deletions(-) diff --git a/.config/quickshell/modules/bar/Bar.qml b/.config/quickshell/modules/bar/Bar.qml index 05c73230e..7e0f30242 100644 --- a/.config/quickshell/modules/bar/Bar.qml +++ b/.config/quickshell/modules/bar/Bar.qml @@ -29,9 +29,12 @@ Scope { property ShellScreen modelData property var brightnessMonitor: Brightness.getMonitorForScreen(modelData) - property bool useShortenedForm: Appearance.sizes.barShortenScreenWidth >= screen.width - readonly property int centerSideModuleWidth: useShortenedForm ? - Appearance.sizes.barCenterSideModuleWidthShortened : Appearance.sizes.barCenterSideModuleWidth + property real useShortenedForm: (Appearance.sizes.barHellaShortenScreenWidthThreshold >= screen.width) ? 2 : + (Appearance.sizes.barShortenScreenWidthThreshold >= screen.width) ? 1 : 0 + readonly property int centerSideModuleWidth: + (useShortenedForm == 2) ? Appearance.sizes.barCenterSideModuleWidthHellaShortened : + (useShortenedForm == 1) ? Appearance.sizes.barCenterSideModuleWidthShortened : + Appearance.sizes.barCenterSideModuleWidth WlrLayershell.namespace: "quickshell:bar" implicitHeight: barHeight + Appearance.rounding.screenRounding @@ -162,7 +165,7 @@ Scope { } ActiveWindow { - visible: !barRoot.useShortenedForm + visible: barRoot.useShortenedForm === 0 Layout.rightMargin: Appearance.rounding.screenRounding Layout.fillWidth: true bar: barRoot @@ -177,21 +180,26 @@ Scope { spacing: 8 RowLayout { + id: leftCenterGroup Layout.preferredWidth: barRoot.centerSideModuleWidth spacing: 4 Layout.fillHeight: true implicitWidth: 350 Resources { + alwaysShowAllResources: barRoot.useShortenedForm === 2 + Layout.fillWidth: barRoot.useShortenedForm === 2 } Media { + visible: barRoot.useShortenedForm < 2 Layout.fillWidth: true } } RowLayout { + id: middleCenterGroup Layout.fillWidth: true Layout.fillHeight: true @@ -212,21 +220,24 @@ Scope { } RowLayout { - Layout.preferredWidth: barRoot.centerSideModuleWidth + id: rightCenterGroup + Layout.preferredWidth: leftCenterGroup.width Layout.fillHeight: true spacing: 4 ClockWidget { + showDate: barRoot.useShortenedForm < 2 Layout.alignment: Qt.AlignVCenter Layout.fillWidth: true } UtilButtons { - visible: !barRoot.useShortenedForm + visible: barRoot.useShortenedForm === 0 Layout.alignment: Qt.AlignVCenter } Battery { + visible: barRoot.useShortenedForm < 2 Layout.alignment: Qt.AlignVCenter } @@ -397,7 +408,7 @@ Scope { SysTray { bar: barRoot - visible: !barRoot.useShortenedForm + visible: barRoot.useShortenedForm === 0 Layout.fillWidth: false Layout.fillHeight: true } diff --git a/.config/quickshell/modules/bar/ClockWidget.qml b/.config/quickshell/modules/bar/ClockWidget.qml index 080dfb9b8..598122c0b 100644 --- a/.config/quickshell/modules/bar/ClockWidget.qml +++ b/.config/quickshell/modules/bar/ClockWidget.qml @@ -6,6 +6,7 @@ import QtQuick.Layouts Rectangle { property bool borderless: ConfigOptions.bar.borderless + property bool showDate: true implicitWidth: rowLayout.implicitWidth + rowLayout.spacing * 6 // idk, text seems nicer w/ more padding implicitHeight: 32 color: borderless ? "transparent" : Appearance.colors.colLayer1 @@ -24,12 +25,14 @@ Rectangle { } StyledText { + visible: showDate font.pixelSize: Appearance.font.pixelSize.small color: Appearance.colors.colOnLayer1 text: "•" } StyledText { + visible: showDate font.pixelSize: Appearance.font.pixelSize.small color: Appearance.colors.colOnLayer1 text: DateTime.date diff --git a/.config/quickshell/modules/bar/Resources.qml b/.config/quickshell/modules/bar/Resources.qml index 3f82c9950..537a06c09 100644 --- a/.config/quickshell/modules/bar/Resources.qml +++ b/.config/quickshell/modules/bar/Resources.qml @@ -8,7 +8,9 @@ import Quickshell.Io import Quickshell.Services.Mpris Rectangle { + id: root property bool borderless: ConfigOptions.bar.borderless + property bool alwaysShowAllResources: false implicitWidth: rowLayout.implicitWidth + rowLayout.anchors.leftMargin + rowLayout.anchors.rightMargin implicitHeight: 32 color: borderless ? "transparent" : Appearance.colors.colLayer1 @@ -30,14 +32,18 @@ Rectangle { Resource { iconName: "swap_horiz" percentage: ResourceUsage.swapUsedPercentage - shown: (ConfigOptions.bar.resources.alwaysShowSwap && percentage > 0) || (MprisController.activePlayer?.trackTitle == null) + shown: (ConfigOptions.bar.resources.alwaysShowSwap && percentage > 0) || + (MprisController.activePlayer?.trackTitle == null) || + root.alwaysShowAllResources Layout.leftMargin: shown ? 4 : 0 } Resource { iconName: "settings_slow_motion" percentage: ResourceUsage.cpuUsage - shown: ConfigOptions.bar.resources.alwaysShowCpu || !(MprisController.activePlayer?.trackTitle?.length > 0) + shown: ConfigOptions.bar.resources.alwaysShowCpu || + !(MprisController.activePlayer?.trackTitle?.length > 0) || + root.alwaysShowAllResources Layout.leftMargin: shown ? 4 : 0 } diff --git a/.config/quickshell/modules/common/Appearance.qml b/.config/quickshell/modules/common/Appearance.qml index 49bdfda5f..959bcdaf6 100644 --- a/.config/quickshell/modules/common/Appearance.qml +++ b/.config/quickshell/modules/common/Appearance.qml @@ -260,7 +260,9 @@ Singleton { property real barHeight: 40 property real barCenterSideModuleWidth: 360 property real barCenterSideModuleWidthShortened: 280 - property real barShortenScreenWidth: 1200 // Bar will be shortened if screen width is at most this value + property real barCenterSideModuleWidthHellaShortened: 190 + property real barShortenScreenWidthThreshold: 1200 // Shorten if screen width is at most this value + property real barHellaShortenScreenWidthThreshold: 1000 // Shorten even more... property real sidebarWidth: 460 property real sidebarWidthExtended: 750 property real osdWidth: 200