diff --git a/Commons/Settings.qml b/Commons/Settings.qml index 992ed8c..dc0ee1d 100644 --- a/Commons/Settings.qml +++ b/Commons/Settings.qml @@ -273,6 +273,7 @@ Singleton { property real backgroundOpacity: 1.0 property list monitors: [] property string density: "default" // "compact", "default", "comfortable" + property bool showCapsule: true // Floating bar settings property bool floating: false diff --git a/Modules/Bar/Widgets/ActiveWindow.qml b/Modules/Bar/Widgets/ActiveWindow.qml index f1e2121..c190445 100644 --- a/Modules/Bar/Widgets/ActiveWindow.qml +++ b/Modules/Bar/Widgets/ActiveWindow.qml @@ -146,7 +146,7 @@ Item { width: (barPosition === "left" || barPosition === "right") ? Math.round(Style.capsuleHeight * scaling) : (horizontalLayout.implicitWidth + Style.marginM * 2 * scaling) height: (barPosition === "left" || barPosition === "right") ? Math.round(Style.capsuleHeight * scaling) : Math.round(Style.capsuleHeight * scaling) radius: width / 2 - color: compact ? Color.transparent : Color.mSurfaceVariant + color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent Item { id: mainContainer diff --git a/Modules/Bar/Widgets/Clock.qml b/Modules/Bar/Widgets/Clock.qml index e4a95bf..0cf3ff9 100644 --- a/Modules/Bar/Widgets/Clock.qml +++ b/Modules/Bar/Widgets/Clock.qml @@ -43,7 +43,7 @@ Rectangle { implicitHeight: verticalMode ? Math.round(Style.capsuleHeight * 2.5 * scaling) : Math.round(Style.capsuleHeight * scaling) // Match NPill radius: Math.round(Style.radiusS * scaling) - color: compact ? Color.transparent : Color.mSurfaceVariant + color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent Item { id: clockContainer diff --git a/Modules/Bar/Widgets/MediaMini.qml b/Modules/Bar/Widgets/MediaMini.qml index 9ec433e..6d55d48 100644 --- a/Modules/Bar/Widgets/MediaMini.qml +++ b/Modules/Bar/Widgets/MediaMini.qml @@ -82,7 +82,7 @@ Item { width: (barPosition === "left" || barPosition === "right") ? Math.round(Style.baseWidgetSize * 0.8 * scaling) : (rowLayout.implicitWidth + Style.marginM * 2 * scaling) height: (barPosition === "left" || barPosition === "right") ? Math.round(Style.baseWidgetSize * 0.8 * scaling) : Math.round(Style.capsuleHeight * scaling) radius: (barPosition === "left" || barPosition === "right") ? width / 2 : Math.round(Style.radiusM * scaling) - color: compact ? Color.transparent : Color.mSurfaceVariant + color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent // Used to anchor the tooltip, so the tooltip does not move when the content expands Item { diff --git a/Modules/Bar/Widgets/SidePanelToggle.qml b/Modules/Bar/Widgets/SidePanelToggle.qml index d0eae9f..4c122d1 100644 --- a/Modules/Bar/Widgets/SidePanelToggle.qml +++ b/Modules/Bar/Widgets/SidePanelToggle.qml @@ -46,7 +46,7 @@ NIconButton { IconImage { id: logo anchors.centerIn: parent - width: root.width * 0.85 + width: root.width * 0.8 height: width source: useDistroLogo ? DistroLogoService.osLogo : "" visible: useDistroLogo && source !== "" diff --git a/Modules/Bar/Widgets/SystemMonitor.qml b/Modules/Bar/Widgets/SystemMonitor.qml index a2bbe16..5bc5f86 100644 --- a/Modules/Bar/Widgets/SystemMonitor.qml +++ b/Modules/Bar/Widgets/SystemMonitor.qml @@ -50,7 +50,7 @@ Rectangle { implicitWidth: isVertical ? Math.round(Style.capsuleHeight * scaling) : Math.round(mainGrid.implicitWidth + Style.marginM * 2 * scaling) implicitHeight: isVertical ? Math.round(mainGrid.implicitHeight + Style.marginM * 2 * scaling) : Math.round(Style.capsuleHeight * scaling) radius: Math.round(Style.radiusM * scaling) - color: compact ? Color.transparent : Color.mSurfaceVariant + color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent GridLayout { id: mainGrid diff --git a/Modules/Bar/Widgets/Taskbar.qml b/Modules/Bar/Widgets/Taskbar.qml index f846704..d69007c 100644 --- a/Modules/Bar/Widgets/Taskbar.qml +++ b/Modules/Bar/Widgets/Taskbar.qml @@ -21,7 +21,7 @@ Rectangle { implicitWidth: isVerticalBar ? Math.round(Style.capsuleHeight * scaling) : taskbarLayout.implicitWidth + Style.marginM * scaling * 2 implicitHeight: isVerticalBar ? taskbarLayout.implicitHeight + Style.marginM * scaling * 2 : Math.round(Style.capsuleHeight * scaling) radius: Math.round(Style.radiusM * scaling) - color: compact ? Color.transparent : Color.mSurfaceVariant + color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent GridLayout { id: taskbarLayout diff --git a/Modules/Bar/Widgets/Tray.qml b/Modules/Bar/Widgets/Tray.qml index 7a43e82..3904a9c 100644 --- a/Modules/Bar/Widgets/Tray.qml +++ b/Modules/Bar/Widgets/Tray.qml @@ -32,7 +32,7 @@ Rectangle { implicitWidth: isVertical ? Math.round(Style.capsuleHeight * scaling) : (trayFlow.implicitWidth + Style.marginS * scaling * 2) implicitHeight: isVertical ? (trayFlow.implicitHeight + Style.marginS * scaling * 2) : Math.round(Style.capsuleHeight * scaling) radius: Math.round(Style.radiusM * scaling) - color: compact ? Color.transparent : Color.mSurfaceVariant + color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent Layout.alignment: Qt.AlignVCenter diff --git a/Modules/Bar/Widgets/Workspace.qml b/Modules/Bar/Widgets/Workspace.qml index 973aa8c..1a4f30e 100644 --- a/Modules/Bar/Widgets/Workspace.qml +++ b/Modules/Bar/Widgets/Workspace.qml @@ -61,12 +61,11 @@ Item { implicitWidth: isVertical ? Math.round(Style.barHeight * scaling) : computeWidth() implicitHeight: isVertical ? computeHeight() : Math.round(Style.barHeight * scaling) - function getWorkspaceWidth(ws) { const d = Style.capsuleHeight * root.baseDimensionRatio if (ws.isFocused) return d * 2.5 - else + else return d } @@ -74,7 +73,7 @@ Item { const d = Style.capsuleHeight * root.baseDimensionRatio if (ws.isFocused) return d * 3 - else + else return d } @@ -184,7 +183,7 @@ Item { width: isVertical ? Math.round(Style.capsuleHeight * scaling) : parent.width height: isVertical ? parent.height : Math.round(Style.capsuleHeight * scaling) radius: Math.round(Style.radiusM * scaling) - color: compact ? Color.transparent : Color.mSurfaceVariant + color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter @@ -205,7 +204,7 @@ Item { id: workspacePillContainer width: root.getWorkspaceWidth(model) height: Style.capsuleHeight * root.baseDimensionRatio - + Rectangle { id: pill anchors.fill: parent diff --git a/Modules/SettingsPanel/Tabs/BarTab.qml b/Modules/SettingsPanel/Tabs/BarTab.qml index deeda9d..c7c2d6b 100644 --- a/Modules/SettingsPanel/Tabs/BarTab.qml +++ b/Modules/SettingsPanel/Tabs/BarTab.qml @@ -112,6 +112,15 @@ ColumnLayout { text: Math.floor(Settings.data.bar.backgroundOpacity * 100) + "%" } } + + NToggle { + Layout.fillWidth: true + label: "Show Capsule" + description: "Adds a capsule behind each widget to improve readability on transparent bars." + checked: Settings.data.bar.showCapsule + onToggled: checked => Settings.data.bar.showCapsule = checked + } + NToggle { Layout.fillWidth: true label: "Floating Bar" diff --git a/Widgets/NIconButton.qml b/Widgets/NIconButton.qml index c9358cd..ce5cc26 100644 --- a/Widgets/NIconButton.qml +++ b/Widgets/NIconButton.qml @@ -33,7 +33,7 @@ Rectangle { implicitHeight: Math.round(baseSize * scaling) opacity: root.enabled ? Style.opacityFull : Style.opacityMedium - color: root.enabled && root.hovering ? colorBgHover : root.compact ? Color.transparent : colorBg + color: root.enabled && root.hovering ? colorBgHover : Settings.data.bar.showCapsule ? colorBg : Color.transparent radius: width * 0.5 border.color: root.enabled && root.hovering ? colorBorderHover : colorBorder border.width: Math.max(1, Style.borderS * scaling) diff --git a/Widgets/NPillHorizontal.qml b/Widgets/NPillHorizontal.qml index dcc7230..45cc95b 100644 --- a/Widgets/NPillHorizontal.qml +++ b/Widgets/NPillHorizontal.qml @@ -54,7 +54,7 @@ Item { (iconCircle.x + iconCircle.width / 2) - width // Opens left opacity: revealed ? Style.opacityFull : Style.opacityNone - color: compact ? Color.transparent : Color.mSurfaceVariant + color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent topLeftRadius: rightOpen ? 0 : pillHeight * 0.5 bottomLeftRadius: rightOpen ? 0 : pillHeight * 0.5 @@ -104,7 +104,7 @@ Item { width: pillHeight height: pillHeight radius: width * 0.5 - color: hovered ? Color.mTertiary : compact ? Color.transparent : Color.mSurfaceVariant + color: hovered ? Color.mTertiary : Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent anchors.verticalCenter: parent.verticalCenter x: rightOpen ? 0 : (parent.width - width) diff --git a/Widgets/NPillVertical.qml b/Widgets/NPillVertical.qml index 6f186da..1c5991a 100644 --- a/Widgets/NPillVertical.qml +++ b/Widgets/NPillVertical.qml @@ -67,7 +67,7 @@ Item { y: openUpward ? (iconCircle.y + iconCircle.height / 2 - height) : (iconCircle.y + iconCircle.height / 2) opacity: revealed ? Style.opacityFull : Style.opacityNone - color: compact ? Color.transparent : Color.mSurfaceVariant + color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent // Radius logic for vertical expansion - rounded on the side that connects to icon topLeftRadius: openUpward ? buttonSize * 0.5 : 0 @@ -127,7 +127,7 @@ Item { width: buttonSize height: buttonSize radius: width * 0.5 - color: hovered ? Color.mTertiary : compact ? Color.transparent : Color.mSurfaceVariant + color: hovered ? Color.mTertiary : Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent // Icon positioning based on direction x: 0