From e82ef6e0c1e8e9e947d406305d31ae86654fde2b Mon Sep 17 00:00:00 2001 From: kossLAN Date: Wed, 16 Jul 2025 19:34:36 -0400 Subject: [PATCH] progress update --- shell/ShellSettings.qml | 121 ++++++++++++++++------------ shell/bar/Bar.qml | 58 ++++++------- shell/bar/popups/MenuWindow.qml | 66 ++++++++------- shell/bar/systray/SysTray.qml | 33 +++++--- shell/bar/systray/TrayMenuEntry.qml | 16 ++-- shell/bar/systray/TrayMenuItem.qml | 3 +- shell/widgets/Separator.qml | 6 +- 7 files changed, 175 insertions(+), 128 deletions(-) diff --git a/shell/ShellSettings.qml b/shell/ShellSettings.qml index 94a51ab..a6fc0cf 100644 --- a/shell/ShellSettings.qml +++ b/shell/ShellSettings.qml @@ -10,7 +10,7 @@ Singleton { property alias colors: jsonAdapter.colors FileView { - path: `${Quickshell.env("XDG_DATA_HOME")}/quickshell/settings.json` + path: `${Quickshell.dataPath("settings")}/quickshell/settings.json` watchChanges: true onFileChanged: reload() onAdapterUpdated: writeAdapter() @@ -24,64 +24,81 @@ Singleton { property string wallpaperUrl: Qt.resolvedUrl("root:resources/wallpapers/pixelart0.jpg") property string colorScheme: "scheme-fruit-salad" property string screenshotPath: "/home/koss/Pictures" + property real opacity: 0.55 } property JsonObject sizing: JsonObject { property int barHeight: 25 } - property var colors: { - "background": "#131313", - "error": "#ffb4ab", - "error_container": "#93000a", - "inverse_on_surface": "#303030", - "inverse_primary": "#9c4236", - "inverse_surface": "#e2e2e2", - "on_background": "#e2e2e2", - "on_error": "#690005", - "on_error_container": "#ffdad6", - "on_primary": "#5f150d", - "on_primary_container": "#ffdad4", - "on_primary_fixed": "#410000", - "on_primary_fixed_variant": "#7d2b21", - "on_secondary": "#442925", - "on_secondary_container": "#ffdad4", - "on_secondary_fixed": "#2c1512", - "on_secondary_fixed_variant": "#5d3f3b", - "on_surface": "#e2e2e2", - "on_surface_variant": "#c6c6c6", - "on_tertiary": "#3e2e04", - "on_tertiary_container": "#fbdfa6", - "on_tertiary_fixed": "#251a00", - "on_tertiary_fixed_variant": "#564419", - "outline": "#919191", - "outline_variant": "#474747", - "primary": "#ffb4a8", - "primary_container": "#7d2b21", - "primary_fixed": "#ffdad4", - "primary_fixed_dim": "#ffb4a8", - "scrim": "#000000", - "secondary": "#e7bdb6", - "secondary_container": "#5d3f3b", - "secondary_fixed": "#ffdad4", - "secondary_fixed_dim": "#e7bdb6", - "shadow": "#000000", - "source_color": "#df4332", - "surface": "#131313", - "surface_bright": "#393939", - "surface_container": "#1f1f1f", - "surface_container_high": "#2a2a2a", - "surface_container_highest": "#353535", - "surface_container_low": "#1b1b1b", - "surface_container_lowest": "#0e0e0e", - "surface_dim": "#131313", - "surface_tint": "#ffb4a8", - "surface_variant": "#474747", - "tertiary": "#dec38c", - "tertiary_container": "#564419", - "tertiary_fixed": "#fbdfa6", - "tertiary_fixed_dim": "#dec38c" + property JsonObject colors: JsonObject { + property color surface: "#111111" + property color surface_container: "#191919" + property color primary: "#52DBCB" + property color active: "#FFFFFF" + property color inactive: "#6F6F6F" } + + // property var colors: { + // "surface": "#111111", + // "surface_container": "#191919", + // "primary": "#52DBCB", + // "active": "#FFFFFF", + // "inactive": "#6F6F6F", + // } + + // property var colors: { + // "background": "#131313", + // "error": "#ffb4ab", + // "error_container": "#93000a", + // "inverse_on_surface": "#303030", + // "inverse_primary": "#9c4236", + // "inverse_surface": "#e2e2e2", + // "on_background": "#e2e2e2", + // "on_error": "#690005", + // "on_error_container": "#ffdad6", + // "on_primary": "#5f150d", + // "on_primary_container": "#ffdad4", + // "on_primary_fixed": "#410000", + // "on_primary_fixed_variant": "#7d2b21", + // "on_secondary": "#442925", + // "on_secondary_container": "#ffdad4", + // "on_secondary_fixed": "#2c1512", + // "on_secondary_fixed_variant": "#5d3f3b", + // "on_surface": "#e2e2e2", + // "on_surface_variant": "#c6c6c6", + // "on_tertiary": "#3e2e04", + // "on_tertiary_container": "#fbdfa6", + // "on_tertiary_fixed": "#251a00", + // "on_tertiary_fixed_variant": "#564419", + // "outline": "#919191", + // "outline_variant": "#474747", + // "primary": "#ffb4a8", + // "primary_container": "#7d2b21", + // "primary_fixed": "#ffdad4", + // "primary_fixed_dim": "#ffb4a8", + // "scrim": "#000000", + // "secondary": "#e7bdb6", + // "secondary_container": "#5d3f3b", + // "secondary_fixed": "#ffdad4", + // "secondary_fixed_dim": "#e7bdb6", + // "shadow": "#000000", + // "source_color": "#df4332", + // "surface": "#131313", + // "surface_bright": "#393939", + // "surface_container": "#1f1f1f", + // "surface_container_high": "#2a2a2a", + // "surface_container_highest": "#353535", + // "surface_container_low": "#1b1b1b", + // "surface_container_lowest": "#0e0e0e", + // "surface_dim": "#131313", + // "surface_tint": "#ffb4a8", + // "surface_variant": "#474747", + // "tertiary": "#dec38c", + // "tertiary_container": "#564419", + // "tertiary_fixed": "#fbdfa6", + // "tertiary_fixed_dim": "#dec38c" + // } } } } diff --git a/shell/bar/Bar.qml b/shell/bar/Bar.qml index 101a4cd..929c829 100644 --- a/shell/bar/Bar.qml +++ b/shell/bar/Bar.qml @@ -10,7 +10,7 @@ import ".." PanelWindow { id: root - color: ShellSettings.colors["surface"] + color: "transparent" implicitHeight: ShellSettings.sizing.barHeight property alias popup: popupWindow @@ -20,6 +20,12 @@ PanelWindow { right: true } + Rectangle { + color: ShellSettings.colors.surface + opacity: 0.15 + anchors.fill: parent + } + // Popup window for all popups Popup.MenuWindow { id: popupWindow @@ -37,38 +43,32 @@ PanelWindow { // Left side of bar RowLayout { - spacing: 5 + spacing: 15 Layout.fillWidth: true Layout.fillHeight: true - HyprWorkspaces { - screen: root.screen - Layout.fillHeight: true - Layout.leftMargin: 4 - } + // HyprWorkspaces { + // screen: root.screen + // Layout.fillHeight: true + // } - Widgets.Separator { - visible: activeWindow.visible - Layout.leftMargin: 5 - Layout.rightMargin: 5 - } - - ActiveWindow { - id: activeWindow - Layout.preferredWidth: 400 - } + // ActiveWindow { + // id: activeWindow + // Layout.preferredWidth: 400 + // } } // Right side of bar RowLayout { - spacing: 5 + spacing: 10 Layout.fillWidth: true Layout.fillHeight: true Layout.alignment: Qt.AlignRight SysTray.SysTray { id: sysTray - popup: root.popup + // popup: root.popup + bar: root Layout.fillHeight: true } @@ -81,20 +81,20 @@ PanelWindow { // Layout.bottomMargin: 2 // } - BatteryIndicator { - id: batteryIndicator - popup: root.popup - Layout.fillHeight: true - } + // BatteryIndicator { + // id: batteryIndicator + // popup: root.popup + // Layout.fillHeight: true + // } - Widgets.Separator { - Layout.leftMargin: 5 - Layout.rightMargin: 5 - } + // Widgets.Separator { + // Layout.leftMargin: 5 + // Layout.rightMargin: 5 + // } Clock { id: clock - color: ShellSettings.colors["inverse_surface"] + color: ShellSettings.colors["active"] } } } diff --git a/shell/bar/popups/MenuWindow.qml b/shell/bar/popups/MenuWindow.qml index d7bb944..3b41f74 100644 --- a/shell/bar/popups/MenuWindow.qml +++ b/shell/bar/popups/MenuWindow.qml @@ -37,8 +37,9 @@ PopupWindow { let itemPos = item.mapToItem(root.bar.contentItem, 0, root.bar.height, item.width, 0).x; position(itemPos); - popupContainer.opacity = 0; - popupContent.opacity = 0; + // popupContainer.opacity = 0; + // popupContent.opacity = 0; + popupContainer.visible = false; } function position(itemPos) { @@ -66,15 +67,17 @@ PopupWindow { isOpen = true; root.visible = true; // set and leave open root.content.visible = true; - popupContainer.opacity = 1; - popupContent.opacity = 1; + // popupContainer.opacity = 1; + // popupContent.opacity = 1; + popupContainer.visible = true; } function hide() { grab.active = false; isOpen = false; - popupContainer.opacity = 0; - popupContent.opacity = 0; + // popupContainer.opacity = 0; + // popupContent.opacity = 0; + popupContainer.visible = false; root.item = undefined; root.content = undefined; @@ -89,24 +92,33 @@ PopupWindow { } } - RectangularShadow { - radius: popupContainer.radius + // RectangularShadow { + // radius: popupContainer.radius + // anchors.fill: popupContainer + // opacity: popupContainer.opacity + // visible: popupContainer.visible + // blur: 10 + // spread: 2 + // } + + Rectangle { + color: ShellSettings.colors.surface + // opacity: ShellSettings.settings.opacity + opacity: 0.15 + radius: 12 anchors.fill: popupContainer - opacity: popupContainer.opacity - visible: popupContainer.visible - blur: 10 - spread: 2 + border.color: ShellSettings.colors.active } - WrapperRectangle { + WrapperItem { id: popupContainer - color: ShellSettings.colors["surface"] - radius: 12 + // color: ShellSettings.colors.surface + // radius: 12 margin: 8 clip: true - opacity: 0 - visible: opacity > 0 + // opacity: 0.5 + // visible: opacity > 0 x: root.bar.width // spooky, likely to cause problems lol @@ -132,7 +144,7 @@ PopupWindow { Behavior on opacity { NumberAnimation { duration: 200 - easing.type: Easing.Linear + easing.type: Easing.InOutQuad from: 0 to: 1 } @@ -158,25 +170,25 @@ PopupWindow { } } - Behavior on opacity { - NumberAnimation { - duration: 200 - easing.type: Easing.Linear - } - } + // Behavior on opacity { + // NumberAnimation { + // duration: 200 + // easing.type: Easing.Linear + // } + // } Behavior on width { enabled: root.isOpen SmoothedAnimation { duration: 200 - easing.type: Easing.Linear + easing.type: Easing.InOutQuad } } Behavior on height { SmoothedAnimation { duration: 200 - easing.type: Easing.Linear + easing.type: Easing.InOutQuad } } @@ -184,7 +196,7 @@ PopupWindow { enabled: root.isOpen SmoothedAnimation { duration: 200 - easing.type: Easing.OutQuad + easing.type: Easing.InOutQuad } } } diff --git a/shell/bar/systray/SysTray.qml b/shell/bar/systray/SysTray.qml index 87f2fe5..b4f956c 100644 --- a/shell/bar/systray/SysTray.qml +++ b/shell/bar/systray/SysTray.qml @@ -12,7 +12,8 @@ RowLayout { spacing: 5 visible: SystemTray.items.values.length > 0 - required property var popup + // required property var popup + required property var bar Repeater { model: SystemTray.items @@ -29,23 +30,26 @@ RowLayout { onClicked: { menuOpener.menu = trayField.modelData.menu; - if (root.popup.content == trayMenu) { - root.popup.hide(); + if (trayMenu.visible) { + trayMenu.visible = false; + // root.popup.hide(); + return; } - root.popup.set(this, trayMenu); - root.popup.show(); + trayMenu.visible = true; + + // root.popup.set(this, trayMenu); + // root.popup.show(); } anchors { fill: parent - margins: 2 + // margins: 2 } IconImage { id: trayIcon - anchors.fill: parent source: { // console.log(trayField.modelData.id); switch (trayField.modelData.id) { @@ -55,6 +59,11 @@ RowLayout { return trayField.modelData.icon; } } + + anchors { + fill: parent + margins: 2 + } } } @@ -62,13 +71,19 @@ RowLayout { id: menuOpener } - WrapperItem { + Widgets.StyledPopup { id: trayMenu - visible: false + // visible: false property var leftItem: false property var rightItem: false + anchor { + window: root.bar + item: trayButton + margins.top: root.bar.height + 5 + } + ColumnLayout { id: menuContainer spacing: 2 diff --git a/shell/bar/systray/TrayMenuEntry.qml b/shell/bar/systray/TrayMenuEntry.qml index 8c5c9d4..83cf29c 100644 --- a/shell/bar/systray/TrayMenuEntry.qml +++ b/shell/bar/systray/TrayMenuEntry.qml @@ -25,13 +25,15 @@ ColumnLayout { WrapperRectangle { Layout.fillWidth: true Layout.preferredHeight: 25 - radius: 6 + radius: 4 color: { if (!root.menuData?.enabled) return "transparent"; - if (entryArea.containsMouse) - return ShellSettings.colors["primary"]; + if (entryArea.containsMouse) { + let base = ShellSettings.colors.active; + return Qt.rgba(base.r, base.g, base.b, 0.15); + } return "transparent"; } @@ -92,13 +94,13 @@ ColumnLayout { text: root.menuData?.text ?? "" verticalAlignment: Text.AlignVCenter color: { - let color = Qt.color(ShellSettings.colors["inverse_surface"]); + let color = Qt.color(ShellSettings.colors.active); if (!root.menuData?.enabled) return color.darker(2); - if (entryArea.containsMouse) - return Qt.color(ShellSettings.colors["inverse_primary"]); + // if (entryArea.containsMouse) + // return Qt.color(ShellSettings.colors["inverse_primary"]); return color; } @@ -139,7 +141,7 @@ ColumnLayout { WrapperRectangle { id: subTrayMenu - color: ShellSettings.colors["surface_container"] + color: ShellSettings.colors.surface_container radius: 8 visible: false Layout.fillWidth: true diff --git a/shell/bar/systray/TrayMenuItem.qml b/shell/bar/systray/TrayMenuItem.qml index 590cf4c..69fcc32 100644 --- a/shell/bar/systray/TrayMenuItem.qml +++ b/shell/bar/systray/TrayMenuItem.qml @@ -12,7 +12,8 @@ ColumnLayout { Rectangle { visible: (root.modelData?.isSeparator ?? false) - color: ShellSettings.colors["surface_container_high"] + color: ShellSettings.colors.inactive + opacity: 0.1 Layout.fillWidth: true Layout.preferredHeight: 2 Layout.leftMargin: 8 diff --git a/shell/widgets/Separator.qml b/shell/widgets/Separator.qml index b5341a0..0e3fc25 100644 --- a/shell/widgets/Separator.qml +++ b/shell/widgets/Separator.qml @@ -2,8 +2,8 @@ import QtQuick import ".." Rectangle { - color: ShellSettings.colors["primary"] + color: ShellSettings.colors["active"] radius: 5 - width: 7.5 - height: 7.5 + width: 3.5 + height: 15 }