Optional capsule bg

This commit is contained in:
LemmyCook 2025-09-16 09:23:37 -04:00
parent 071100459f
commit 95d2dbe3fc
13 changed files with 26 additions and 17 deletions

View file

@ -273,6 +273,7 @@ Singleton {
property real backgroundOpacity: 1.0
property list<string> monitors: []
property string density: "default" // "compact", "default", "comfortable"
property bool showCapsule: true
// Floating bar settings
property bool floating: false

View file

@ -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

View file

@ -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

View file

@ -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 {

View file

@ -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 !== ""

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -61,7 +61,6 @@ 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)
@ -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

View file

@ -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"

View file

@ -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)

View file

@ -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)

View file

@ -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