diff --git a/default/quickshell/omarchy-shell/README.md b/default/quickshell/omarchy-shell/README.md index 02d9e690..ded897ba 100644 --- a/default/quickshell/omarchy-shell/README.md +++ b/default/quickshell/omarchy-shell/README.md @@ -164,6 +164,7 @@ rewrites the `bar` subtree from the current `shell-defaults.json`. "version": 1, "bar": { "position": "top", + "transparent": false, "centerAnchor": "calendar", "fontFamily": "JetBrainsMono Nerd Font", "layout": { diff --git a/default/quickshell/omarchy-shell/plugins/bar/Bar.qml b/default/quickshell/omarchy-shell/plugins/bar/Bar.qml index f19aa764..64812241 100644 --- a/default/quickshell/omarchy-shell/plugins/bar/Bar.qml +++ b/default/quickshell/omarchy-shell/plugins/bar/Bar.qml @@ -40,11 +40,13 @@ Item { property string omarchyConfigDir: home + "/.config/omarchy" property var fallbackBarConfig: ({ position: "top", + transparent: false, centerAnchor: "calendar", layout: { left: [], center: [], right: [] } }) property var layoutConfig: fallbackBarConfig.layout property string centerAnchor: "" + property bool transparent: false property int barConfigSerial: 0 property string position: "top" // "monospace" resolves through fontconfig at paint time, so changing the @@ -192,6 +194,7 @@ Item { var config = isPlainObject(barConfig) ? barConfig : fallbackBarConfig position = normalizePosition(config.position) + transparent = config.transparent === true centerAnchor = String(config.centerAnchor || "") layoutConfig = normalizeLayout(config.layout) barConfigSerial++ @@ -885,7 +888,7 @@ Item { implicitWidth: root.vertical ? root.barSize : 0 implicitHeight: root.vertical ? 0 : root.barSize - color: root.background + color: root.transparent ? "transparent" : root.background WlrLayershell.namespace: "omarchy-bar" WlrLayershell.layer: WlrLayer.Top diff --git a/default/quickshell/omarchy-shell/plugins/bar/README.md b/default/quickshell/omarchy-shell/plugins/bar/README.md index 390b7664..5e52e25a 100644 --- a/default/quickshell/omarchy-shell/plugins/bar/README.md +++ b/default/quickshell/omarchy-shell/plugins/bar/README.md @@ -25,6 +25,7 @@ Example `shell.json` (bar subtree only shown): "version": 1, "bar": { "position": "top", + "transparent": false, "centerAnchor": "calendar", "layout": { "left": [ diff --git a/default/quickshell/omarchy-shell/plugins/settings/SettingsPanel.qml b/default/quickshell/omarchy-shell/plugins/settings/SettingsPanel.qml index 7668a4ca..19f1c504 100644 --- a/default/quickshell/omarchy-shell/plugins/settings/SettingsPanel.qml +++ b/default/quickshell/omarchy-shell/plugins/settings/SettingsPanel.qml @@ -142,6 +142,7 @@ Item { version: 1, bar: { position: "top", + transparent: false, fontFamily: "monospace", centerAnchor: "calendar", layout: { @@ -163,7 +164,7 @@ Item { }) property var defaultConfig: builtinShellConfig - property var draft: ({ version: 1, bar: { position: "top", centerAnchor: "calendar", layout: { left: [], center: [], right: [] } }, plugins: [] }) + property var draft: ({ version: 1, bar: { position: "top", transparent: false, centerAnchor: "calendar", layout: { left: [], center: [], right: [] } }, plugins: [] }) property int draftRevision: 0 property bool suppressReload: false @@ -200,6 +201,7 @@ Item { version: 1, bar: { position: String(bar.position || "top"), + transparent: bar.transparent === true, centerAnchor: String(bar.centerAnchor || ""), fontFamily: "monospace", layout: normalizeLayout(bar.layout || {}) @@ -681,6 +683,19 @@ Item { } } + BarToggleRow { + Layout.fillWidth: true + label: "Transparent bar" + description: "Hide the bar background so the wallpaper shows through." + checked: root.draft.bar.transparent === true + onClicked: { + var next = root.cloneJson(root.draft) + next.bar.transparent = !(next.bar.transparent === true) + root.draft = next + root.markDirty() + } + } + SectionEditor { sectionKey: "left"; sectionLabel: "Bar · Left" } SectionEditor { sectionKey: "center"; sectionLabel: "Bar · Center" } SectionEditor { sectionKey: "right"; sectionLabel: "Bar · Right" } @@ -702,6 +717,101 @@ Item { } // ===================== shared chrome ===================================== + component BarToggleRow: Rectangle { + id: toggleRow + + property string label: "" + property string description: "" + property bool checked: false + + signal clicked() + + activeFocusOnTab: true + Keys.onReturnPressed: toggleRow.clicked() + Keys.onEnterPressed: toggleRow.clicked() + Keys.onSpacePressed: toggleRow.clicked() + + Layout.fillWidth: true + implicitHeight: Math.max(54, toggleContent.implicitHeight + 18) + radius: root.cornerRadius + color: toggleRow.activeFocus + ? root.focusFillColor + : (toggleArea.containsMouse ? Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.08) : Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.03)) + border.color: toggleRow.activeFocus ? root.focusBorderColor : Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.12) + border.width: toggleRow.activeFocus ? root.focusBorderWidth : 1 + + Behavior on color { ColorAnimation { duration: 100 } } + + Row { + id: toggleContent + anchors.left: parent.left + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + anchors.margins: 12 + spacing: 12 + + Column { + width: parent.width - switchTrack.width - parent.spacing + spacing: 3 + anchors.verticalCenter: parent.verticalCenter + + Text { + text: toggleRow.label + color: root.foreground + font.family: root.fontFamily + font.pixelSize: 13 + font.bold: true + elide: Text.ElideRight + width: parent.width + } + + Text { + text: toggleRow.description + color: Qt.darker(root.foreground, 1.5) + font.family: root.fontFamily + font.pixelSize: 10 + wrapMode: Text.WordWrap + width: parent.width + } + } + + Rectangle { + id: switchTrack + width: 42 + height: 22 + radius: height / 2 + color: toggleRow.checked + ? Qt.rgba(root.accent.r, root.accent.g, root.accent.b, 0.35) + : Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.12) + border.color: toggleRow.checked ? root.accent : Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.28) + border.width: 1 + anchors.verticalCenter: parent.verticalCenter + + Behavior on color { ColorAnimation { duration: 120 } } + + Rectangle { + width: 16 + height: 16 + radius: 8 + x: toggleRow.checked ? switchTrack.width - width - 3 : 3 + y: 3 + color: toggleRow.checked ? root.accent : Qt.darker(root.foreground, 1.25) + + Behavior on x { NumberAnimation { duration: 120; easing.type: Easing.OutCubic } } + Behavior on color { ColorAnimation { duration: 120 } } + } + } + } + + MouseArea { + id: toggleArea + anchors.fill: parent + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + onClicked: toggleRow.clicked() + } + } + component ActionPill: Rectangle { id: pill property string text: "" diff --git a/default/quickshell/omarchy-shell/shell-defaults.json b/default/quickshell/omarchy-shell/shell-defaults.json index aada85c9..5781f19b 100644 --- a/default/quickshell/omarchy-shell/shell-defaults.json +++ b/default/quickshell/omarchy-shell/shell-defaults.json @@ -2,6 +2,7 @@ "version": 1, "bar": { "position": "top", + "transparent": false, "centerAnchor": "calendar", "layout": { "left": [ diff --git a/default/quickshell/omarchy-shell/shell.qml b/default/quickshell/omarchy-shell/shell.qml index bd6c5488..ec542269 100644 --- a/default/quickshell/omarchy-shell/shell.qml +++ b/default/quickshell/omarchy-shell/shell.qml @@ -45,6 +45,7 @@ ShellRoot { version: 1, bar: { position: "top", + transparent: false, fontFamily: "JetBrainsMono Nerd Font", centerAnchor: "calendar", layout: {