Skip to content

feat(bar): add pill bar width adjustment and popup opening style options #144

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
berlin-566 merged 2 commits into from
Oct 15, 2026
Merged

feat(bar): add pill bar width adjustment and popup opening style options #144

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1dcdeef
feat(bar): add pill bar width adjustment and popup opening style options
Chintanpatel24 Oct 15, 2026
fadbbe6
feat(settings): add widget layout option (distributed vs centered) in…
Chintanpatel24 Oct 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 37 additions & 0 deletions quickshell/agility/Core/Services/SettingsService.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@ Item {
property bool barConvexMode: barStyle === "convex"
property bool barPillMode: barStyle === "pill"
property string islandRightMode: "auto"
property int pillBarWidthPercent: 60
property string pillPopupStyle: "center"
property string pillWidgetLayout: "distributed"
readonly property int barWidgetHeight: 28
property bool edgeLightingEnabled: true
property string edgeLightingColorMode: "album_art"
Expand Down Expand Up @@ -180,6 +183,21 @@ Item {
if (settingsLoaded)
saveSettings();

}
onPillBarWidthPercentChanged: {
if (settingsLoaded)
saveSettings();

}
onPillPopupStyleChanged: {
if (settingsLoaded)
saveSettings();

}
onPillWidgetLayoutChanged: {
if (settingsLoaded)
saveSettings();

}
onEdgeLightingEnabledChanged: { if (settingsLoaded) saveSettings(); }
onEdgeLightingColorModeChanged: { if (settingsLoaded) saveSettings(); }
Expand Down Expand Up @@ -237,6 +255,9 @@ Item {
"cursorSize": settingsService.cursorSize,
"barStyle": settingsService.barStyle,
"islandRightMode": settingsService.islandRightMode,
"pillBarWidthPercent": settingsService.pillBarWidthPercent,
"pillPopupStyle": settingsService.pillPopupStyle,
"pillWidgetLayout": settingsService.pillWidgetLayout,
"actionShortcuts": settingsService.actionShortcuts,
"customShortcuts": settingsService.customShortcuts,
"edgeLightingEnabled": settingsService.edgeLightingEnabled,
Expand Down Expand Up @@ -404,6 +425,22 @@ cp ~/.cache/quickshell/settings_prefs.json /var/tmp/sddm-theme/settings_prefs.js
if (prefs.islandRightMode !== undefined)
settingsService.islandRightMode = prefs.islandRightMode;

if (prefs.pillBarWidthPercent !== undefined) {
let pbw = parseInt(prefs.pillBarWidthPercent);
if (!isNaN(pbw) && pbw >= 30 && pbw <= 100)
settingsService.pillBarWidthPercent = pbw;
}

if (prefs.pillPopupStyle !== undefined) {
if (prefs.pillPopupStyle === "sided" || prefs.pillPopupStyle === "top" || prefs.pillPopupStyle === "center")
settingsService.pillPopupStyle = prefs.pillPopupStyle;
}

if (prefs.pillWidgetLayout !== undefined) {
if (prefs.pillWidgetLayout === "distributed" || prefs.pillWidgetLayout === "centered")
settingsService.pillWidgetLayout = prefs.pillWidgetLayout;
}

if (prefs.actionShortcuts !== undefined)
settingsService.actionShortcuts = prefs.actionShortcuts;

Expand Down
22 changes: 14 additions & 8 deletions quickshell/agility/Core/Windows/OverlayStyles/IslandOverlayStyle.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,21 +31,27 @@ Item {
AppState.isIslandOpen = true;
let nw = (AppState.hasActiveNotification && AppState.activeNotificationWidth > 0) ? AppState.activeNotificationWidth : 0;
let nh = (AppState.hasActiveNotification && AppState.activeNotificationHeight > 0) ? AppState.activeNotificationHeight : 0;
mainContainer.fromWidth = nw > 0 ? nw : ((AppState.barIslandWidth > 0) ? AppState.barIslandWidth : ((AppState.islandWidth > 0) ? AppState.islandWidth : mainContainer.fromWidth));
mainContainer.fromHeight = nh > 0 ? nh : ((AppState.barIslandHeight > 0) ? AppState.barIslandHeight : ((AppState.islandHeight > 0) ? AppState.islandHeight : mainContainer.fromHeight));
let pillW = (SettingsService.barPillMode && root.width > 0) ? Math.round(root.width * (SettingsService.pillBarWidthPercent / 100)) : 0;
let baseW = pillW > 0 ? pillW : ((AppState.barIslandWidth > 0) ? AppState.barIslandWidth : ((AppState.islandWidth > 0) ? AppState.islandWidth : mainContainer.fromWidth));
let baseH = SettingsService.barPillMode ? 38 : ((AppState.barIslandHeight > 0) ? AppState.barIslandHeight : ((AppState.islandHeight > 0) ? AppState.islandHeight : mainContainer.fromHeight));
mainContainer.fromWidth = nw > 0 ? nw : baseW;
mainContainer.fromHeight = nh > 0 ? nh : baseH;
mainContainer.fromRadius = nh > 0 ? Constants.sizeSm : mainContainer.fromHeight / 2;
} else {
let nw = (AppState.hasActiveNotification && AppState.activeNotificationWidth > 0) ? AppState.activeNotificationWidth : 0;
let nh = (AppState.hasActiveNotification && AppState.activeNotificationHeight > 0) ? AppState.activeNotificationHeight : 0;
mainContainer.fromWidth = nw > 0 ? nw : ((AppState.barIslandWidth > 0) ? AppState.barIslandWidth : ((AppState.islandWidth > 0) ? AppState.islandWidth : mainContainer.fromWidth));
mainContainer.fromHeight = nh > 0 ? nh : ((AppState.barIslandHeight > 0) ? AppState.barIslandHeight : ((AppState.islandHeight > 0) ? AppState.islandHeight : mainContainer.fromHeight));
let pillW = (SettingsService.barPillMode && root.width > 0) ? Math.round(root.width * (SettingsService.pillBarWidthPercent / 100)) : 0;
let baseW = pillW > 0 ? pillW : ((AppState.barIslandWidth > 0) ? AppState.barIslandWidth : ((AppState.islandWidth > 0) ? AppState.islandWidth : mainContainer.fromWidth));
let baseH = SettingsService.barPillMode ? 38 : ((AppState.barIslandHeight > 0) ? AppState.barIslandHeight : ((AppState.islandHeight > 0) ? AppState.islandHeight : mainContainer.fromHeight));
mainContainer.fromWidth = nw > 0 ? nw : baseW;
mainContainer.fromHeight = nh > 0 ? nh : baseH;
mainContainer.fromRadius = nh > 0 ? Constants.sizeSm : mainContainer.fromHeight / 2;
}
}

Connections {
function onFullyClosed() {
if (SettingsService.barIslandMode && !widget.positionAtBottom) {
if ((SettingsService.barIslandMode || (SettingsService.barPillMode && SettingsService.pillPopupStyle === "top")) && !widget.positionAtBottom) {
isHandover = true;
AppState.isIslandOpen = false;
if (AppState.activeWidget !== "")
Expand Down Expand Up @@ -73,8 +79,8 @@ Item {

readonly property real notifW: (AppState.hasActiveNotification && AppState.activeNotificationWidth > 0) ? AppState.activeNotificationWidth : 0
readonly property real notifH: (AppState.hasActiveNotification && AppState.activeNotificationHeight > 0) ? AppState.activeNotificationHeight : 0
property real fromWidth: notifW > 0 ? notifW : ((AppState.barIslandWidth > 0) ? AppState.barIslandWidth : ((AppState.islandWidth > 0) ? AppState.islandWidth : 180))
property real fromHeight: notifH > 0 ? notifH : ((AppState.barIslandHeight > 0) ? AppState.barIslandHeight : ((AppState.islandHeight > 0) ? AppState.islandHeight : Constants.size3Xl))
property real fromWidth: notifW > 0 ? notifW : (SettingsService.barPillMode && root.width > 0 ? Math.round(root.width * (SettingsService.pillBarWidthPercent / 100)) : ((AppState.barIslandWidth > 0) ? AppState.barIslandWidth : ((AppState.islandWidth > 0) ? AppState.islandWidth : 180)))
property real fromHeight: notifH > 0 ? notifH : (SettingsService.barPillMode ? 38 : ((AppState.barIslandHeight > 0) ? AppState.barIslandHeight : ((AppState.islandHeight > 0) ? AppState.islandHeight : Constants.size3Xl)))
property real fromRadius: notifH > 0 ? Constants.sizeXl : fromHeight / 2
readonly property real openY: 8
readonly property real currentWidth: Math.round(fromWidth + (preferredWidth - fromWidth) * bounceProgress)
Expand All @@ -91,7 +97,7 @@ Item {
IslandStyle.IslandBackground {
anchors.fill: parent
radius: mainContainer.currentRadius
enableShadow: SettingsService.barIslandMode && !isHandover
enableShadow: (SettingsService.barIslandMode || SettingsService.barPillMode) && !isHandover
}

Item {
Expand Down
2 changes: 1 addition & 1 deletion quickshell/agility/Core/Windows/OverlayWindow.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ PanelWindow {
property bool windowFocusable: true
// Determine the active style mode cleanly
readonly property string activeStyle: {
if (SettingsService.barIslandMode && !positionAtBottom)
if ((SettingsService.barIslandMode || (SettingsService.barPillMode && SettingsService.pillPopupStyle === "top")) && !positionAtBottom)
return "island";

return "floating";
Expand Down
2 changes: 1 addition & 1 deletion quickshell/agility/Core/Windows/SidebarWindow.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ Item {
property int flareHeight: Constants.size2Xl + 4
property int flareWidth: Constants.size2Xl + 4
property bool alignTop: false
property int topOffset: (SettingsService.barStyle === "convex" ? 48 : 24)
property int topOffset: (SettingsService.barStyle === "convex" || (SettingsService.barPillMode && SettingsService.pillPopupStyle === "sided") ? 48 : 24)
readonly property int verticalPadding: flareHeight + contentPadding
default property alias content: innerLayout.data
property int _screenHeight: 1080
Expand Down
3 changes: 2 additions & 1 deletion quickshell/agility/Core/Windows/WidgetLoader.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ Item {
property bool _isInternalActive: false
readonly property bool isBarOverlayHandled: AppState.isBarOverlayWidget(widgetId)
readonly property bool isIslandHandled: !DisplayProfileService.gameModeActive && SettingsService.barIslandMode && isBarOverlayHandled
readonly property bool isConvexHandled: !DisplayProfileService.gameModeActive && SettingsService.barConvexMode && isBarOverlayHandled
readonly property bool isSidedPillHandled: SettingsService.barPillMode && SettingsService.pillPopupStyle === "sided" && (widgetId !== "music") && isBarOverlayHandled
readonly property bool isConvexHandled: !DisplayProfileService.gameModeActive && ((SettingsService.barConvexMode && isBarOverlayHandled) || isSidedPillHandled)
readonly property bool isGamingHandled: DisplayProfileService.gameModeActive && isBarOverlayHandled
readonly property bool shouldLoadWindow: enabled && !isIslandHandled && !isConvexHandled && !isGamingHandled
readonly property bool _isActive: shouldLoadWindow && (exclusive ? AppState.isWidgetOpen(widgetId) : _isInternalActive)
Expand Down
38 changes: 37 additions & 1 deletion quickshell/agility/Modules/Bar/BarOverlayWindow.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import qs.Core
import qs.Core.Services
import qs.Modules.Bar
import qs.Modules.Bar.Components
import qs.Modules.Bar.Styles.Convex

PanelWindow {
id: root
Expand All @@ -25,7 +26,9 @@ PanelWindow {
readonly property bool usesFloatingPopups: styleData.usesFloatingPopups
readonly property bool isPill: styleData.isPill
readonly property QtObject activeHost: SettingsService.barIslandMode ? barStrip : null
readonly property bool needsFocus: (activeHost && activeHost.isOpen && activeHost.needsFocus)
readonly property bool isSidedPill: SettingsService.barPillMode && SettingsService.pillPopupStyle === "sided"
readonly property bool sidedNeedsFocus: isSidedPill && AppState.isFocusWidgetOpen && (pillPanelsLoader.item && pillPanelsLoader.item.hasAnyDrawerOpen)
readonly property bool needsFocus: (activeHost && activeHost.isOpen && activeHost.needsFocus) || sidedNeedsFocus

function triggerStyleSwitch() {
if (!root.isShellReady || !SettingsService.settingsLoaded) {
Expand Down Expand Up @@ -83,6 +86,11 @@ PanelWindow {
WlrLayershell.layer: WlrLayer.Top
WlrLayershell.exclusionMode: ExclusionMode.Ignore
WlrLayershell.keyboardFocus: needsFocus ? WlrKeyboardFocus.Exclusive : WlrKeyboardFocus.None
onNeedsFocusChanged: {
if (sidedNeedsFocus && pillPanelsLoader.item && pillPanelsLoader.item.bottomDrawer) {
pillPanelsLoader.item.bottomDrawer.activateCurrentItem();
}
}
color: "transparent"
Component.onCompleted: {
activeBarStyle = SettingsService.barStyle;
Expand Down Expand Up @@ -127,6 +135,8 @@ PanelWindow {
if (activeHost && activeHost.isOpen)
activeHost.close();

if (root.isSidedPill && AppState.activeWidget !== "")
AppState.activeWidget = "";
}
}
}
Expand Down Expand Up @@ -315,6 +325,22 @@ PanelWindow {
anchors.fill: parent
layer.enabled: false

Loader {
id: pillPanelsLoader

anchors.fill: parent
active: root.isSidedPill
visible: active
z: 20
sourceComponent: Component {
ConvexPanels {
barHeight: root.currentBarHeight
bezelSize: 0
notificationService: root.notificationService
}
}
}

MouseArea {
id: dismissArea

Expand Down Expand Up @@ -383,6 +409,16 @@ PanelWindow {
height: isActive ? (root.activeHost.isOpen ? root.height : root.activeHost.blockHeight) : 0
}

// Sided Pill Panels Overlay (Full Screen for Clicks/Focus when Sided Pill has open panel)
Region {
property bool isActive: root.isSidedPill && pillPanelsLoader.item && (pillPanelsLoader.item.hasAnyPanelOpen || pillPanelsLoader.item.isConvexCenterOpen)

x: 0
y: 0
width: isActive ? root.width : 0
height: isActive ? root.height : 0
}

}

}
2 changes: 1 addition & 1 deletion quickshell/agility/Modules/Bar/Styles/Convex/ConvexRightHost.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,7 @@ Item {
positionAtLeft: false
backgroundColor: Theme.bg
alignTop: root.displayedWidgetId.startsWith("systemTray_")
topOffset: SettingsService.barConvexMode ? 80 : Constants.size4Xl
topOffset: (SettingsService.barConvexMode || (SettingsService.barPillMode && SettingsService.pillPopupStyle === "sided")) ? 80 : Constants.size4Xl
preferredWidth: 0
preferredHeight: 0
// Exact original dimensions per widget
Expand Down
Loading
Loading