progress update

This commit is contained in:
kossLAN 2025-07-16 19:34:36 -04:00
parent 41ccd5c460
commit e82ef6e0c1
Signed by: kossLAN
SSH key fingerprint: SHA256:bdV0x+wdQHGJ6LgmstH3KV8OpWY+OOFmJcPcB0wQPV8
7 changed files with 175 additions and 128 deletions

View file

@ -10,7 +10,7 @@ Singleton {
property alias colors: jsonAdapter.colors property alias colors: jsonAdapter.colors
FileView { FileView {
path: `${Quickshell.env("XDG_DATA_HOME")}/quickshell/settings.json` path: `${Quickshell.dataPath("settings")}/quickshell/settings.json`
watchChanges: true watchChanges: true
onFileChanged: reload() onFileChanged: reload()
onAdapterUpdated: writeAdapter() onAdapterUpdated: writeAdapter()
@ -24,64 +24,81 @@ Singleton {
property string wallpaperUrl: Qt.resolvedUrl("root:resources/wallpapers/pixelart0.jpg") property string wallpaperUrl: Qt.resolvedUrl("root:resources/wallpapers/pixelart0.jpg")
property string colorScheme: "scheme-fruit-salad" property string colorScheme: "scheme-fruit-salad"
property string screenshotPath: "/home/koss/Pictures" property string screenshotPath: "/home/koss/Pictures"
property real opacity: 0.55
} }
property JsonObject sizing: JsonObject { property JsonObject sizing: JsonObject {
property int barHeight: 25 property int barHeight: 25
} }
property var colors: { property JsonObject colors: JsonObject {
"background": "#131313", property color surface: "#111111"
"error": "#ffb4ab", property color surface_container: "#191919"
"error_container": "#93000a", property color primary: "#52DBCB"
"inverse_on_surface": "#303030", property color active: "#FFFFFF"
"inverse_primary": "#9c4236", property color inactive: "#6F6F6F"
"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 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"
// }
} }
} }
} }

View file

@ -10,7 +10,7 @@ import ".."
PanelWindow { PanelWindow {
id: root id: root
color: ShellSettings.colors["surface"] color: "transparent"
implicitHeight: ShellSettings.sizing.barHeight implicitHeight: ShellSettings.sizing.barHeight
property alias popup: popupWindow property alias popup: popupWindow
@ -20,6 +20,12 @@ PanelWindow {
right: true right: true
} }
Rectangle {
color: ShellSettings.colors.surface
opacity: 0.15
anchors.fill: parent
}
// Popup window for all popups // Popup window for all popups
Popup.MenuWindow { Popup.MenuWindow {
id: popupWindow id: popupWindow
@ -37,38 +43,32 @@ PanelWindow {
// Left side of bar // Left side of bar
RowLayout { RowLayout {
spacing: 5 spacing: 15
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
HyprWorkspaces { // HyprWorkspaces {
screen: root.screen // screen: root.screen
Layout.fillHeight: true // Layout.fillHeight: true
Layout.leftMargin: 4 // }
}
Widgets.Separator { // ActiveWindow {
visible: activeWindow.visible // id: activeWindow
Layout.leftMargin: 5 // Layout.preferredWidth: 400
Layout.rightMargin: 5 // }
}
ActiveWindow {
id: activeWindow
Layout.preferredWidth: 400
}
} }
// Right side of bar // Right side of bar
RowLayout { RowLayout {
spacing: 5 spacing: 10
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
SysTray.SysTray { SysTray.SysTray {
id: sysTray id: sysTray
popup: root.popup // popup: root.popup
bar: root
Layout.fillHeight: true Layout.fillHeight: true
} }
@ -81,20 +81,20 @@ PanelWindow {
// Layout.bottomMargin: 2 // Layout.bottomMargin: 2
// } // }
BatteryIndicator { // BatteryIndicator {
id: batteryIndicator // id: batteryIndicator
popup: root.popup // popup: root.popup
Layout.fillHeight: true // Layout.fillHeight: true
} // }
Widgets.Separator { // Widgets.Separator {
Layout.leftMargin: 5 // Layout.leftMargin: 5
Layout.rightMargin: 5 // Layout.rightMargin: 5
} // }
Clock { Clock {
id: clock id: clock
color: ShellSettings.colors["inverse_surface"] color: ShellSettings.colors["active"]
} }
} }
} }

View file

@ -37,8 +37,9 @@ PopupWindow {
let itemPos = item.mapToItem(root.bar.contentItem, 0, root.bar.height, item.width, 0).x; let itemPos = item.mapToItem(root.bar.contentItem, 0, root.bar.height, item.width, 0).x;
position(itemPos); position(itemPos);
popupContainer.opacity = 0; // popupContainer.opacity = 0;
popupContent.opacity = 0; // popupContent.opacity = 0;
popupContainer.visible = false;
} }
function position(itemPos) { function position(itemPos) {
@ -66,15 +67,17 @@ PopupWindow {
isOpen = true; isOpen = true;
root.visible = true; // set and leave open root.visible = true; // set and leave open
root.content.visible = true; root.content.visible = true;
popupContainer.opacity = 1; // popupContainer.opacity = 1;
popupContent.opacity = 1; // popupContent.opacity = 1;
popupContainer.visible = true;
} }
function hide() { function hide() {
grab.active = false; grab.active = false;
isOpen = false; isOpen = false;
popupContainer.opacity = 0; // popupContainer.opacity = 0;
popupContent.opacity = 0; // popupContent.opacity = 0;
popupContainer.visible = false;
root.item = undefined; root.item = undefined;
root.content = undefined; root.content = undefined;
@ -89,24 +92,33 @@ PopupWindow {
} }
} }
RectangularShadow { // RectangularShadow {
radius: popupContainer.radius // 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 anchors.fill: popupContainer
opacity: popupContainer.opacity border.color: ShellSettings.colors.active
visible: popupContainer.visible
blur: 10
spread: 2
} }
WrapperRectangle { WrapperItem {
id: popupContainer id: popupContainer
color: ShellSettings.colors["surface"] // color: ShellSettings.colors.surface
radius: 12 // radius: 12
margin: 8 margin: 8
clip: true clip: true
opacity: 0 // opacity: 0.5
visible: opacity > 0 // visible: opacity > 0
x: root.bar.width x: root.bar.width
// spooky, likely to cause problems lol // spooky, likely to cause problems lol
@ -132,7 +144,7 @@ PopupWindow {
Behavior on opacity { Behavior on opacity {
NumberAnimation { NumberAnimation {
duration: 200 duration: 200
easing.type: Easing.Linear easing.type: Easing.InOutQuad
from: 0 from: 0
to: 1 to: 1
} }
@ -158,25 +170,25 @@ PopupWindow {
} }
} }
Behavior on opacity { // Behavior on opacity {
NumberAnimation { // NumberAnimation {
duration: 200 // duration: 200
easing.type: Easing.Linear // easing.type: Easing.Linear
} // }
} // }
Behavior on width { Behavior on width {
enabled: root.isOpen enabled: root.isOpen
SmoothedAnimation { SmoothedAnimation {
duration: 200 duration: 200
easing.type: Easing.Linear easing.type: Easing.InOutQuad
} }
} }
Behavior on height { Behavior on height {
SmoothedAnimation { SmoothedAnimation {
duration: 200 duration: 200
easing.type: Easing.Linear easing.type: Easing.InOutQuad
} }
} }
@ -184,7 +196,7 @@ PopupWindow {
enabled: root.isOpen enabled: root.isOpen
SmoothedAnimation { SmoothedAnimation {
duration: 200 duration: 200
easing.type: Easing.OutQuad easing.type: Easing.InOutQuad
} }
} }
} }

View file

@ -12,7 +12,8 @@ RowLayout {
spacing: 5 spacing: 5
visible: SystemTray.items.values.length > 0 visible: SystemTray.items.values.length > 0
required property var popup // required property var popup
required property var bar
Repeater { Repeater {
model: SystemTray.items model: SystemTray.items
@ -29,23 +30,26 @@ RowLayout {
onClicked: { onClicked: {
menuOpener.menu = trayField.modelData.menu; menuOpener.menu = trayField.modelData.menu;
if (root.popup.content == trayMenu) { if (trayMenu.visible) {
root.popup.hide(); trayMenu.visible = false;
// root.popup.hide();
return; return;
} }
root.popup.set(this, trayMenu); trayMenu.visible = true;
root.popup.show();
// root.popup.set(this, trayMenu);
// root.popup.show();
} }
anchors { anchors {
fill: parent fill: parent
margins: 2 // margins: 2
} }
IconImage { IconImage {
id: trayIcon id: trayIcon
anchors.fill: parent
source: { source: {
// console.log(trayField.modelData.id); // console.log(trayField.modelData.id);
switch (trayField.modelData.id) { switch (trayField.modelData.id) {
@ -55,6 +59,11 @@ RowLayout {
return trayField.modelData.icon; return trayField.modelData.icon;
} }
} }
anchors {
fill: parent
margins: 2
}
} }
} }
@ -62,13 +71,19 @@ RowLayout {
id: menuOpener id: menuOpener
} }
WrapperItem { Widgets.StyledPopup {
id: trayMenu id: trayMenu
visible: false // visible: false
property var leftItem: false property var leftItem: false
property var rightItem: false property var rightItem: false
anchor {
window: root.bar
item: trayButton
margins.top: root.bar.height + 5
}
ColumnLayout { ColumnLayout {
id: menuContainer id: menuContainer
spacing: 2 spacing: 2

View file

@ -25,13 +25,15 @@ ColumnLayout {
WrapperRectangle { WrapperRectangle {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 25 Layout.preferredHeight: 25
radius: 6 radius: 4
color: { color: {
if (!root.menuData?.enabled) if (!root.menuData?.enabled)
return "transparent"; return "transparent";
if (entryArea.containsMouse) if (entryArea.containsMouse) {
return ShellSettings.colors["primary"]; let base = ShellSettings.colors.active;
return Qt.rgba(base.r, base.g, base.b, 0.15);
}
return "transparent"; return "transparent";
} }
@ -92,13 +94,13 @@ ColumnLayout {
text: root.menuData?.text ?? "" text: root.menuData?.text ?? ""
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
color: { color: {
let color = Qt.color(ShellSettings.colors["inverse_surface"]); let color = Qt.color(ShellSettings.colors.active);
if (!root.menuData?.enabled) if (!root.menuData?.enabled)
return color.darker(2); return color.darker(2);
if (entryArea.containsMouse) // if (entryArea.containsMouse)
return Qt.color(ShellSettings.colors["inverse_primary"]); // return Qt.color(ShellSettings.colors["inverse_primary"]);
return color; return color;
} }
@ -139,7 +141,7 @@ ColumnLayout {
WrapperRectangle { WrapperRectangle {
id: subTrayMenu id: subTrayMenu
color: ShellSettings.colors["surface_container"] color: ShellSettings.colors.surface_container
radius: 8 radius: 8
visible: false visible: false
Layout.fillWidth: true Layout.fillWidth: true

View file

@ -12,7 +12,8 @@ ColumnLayout {
Rectangle { Rectangle {
visible: (root.modelData?.isSeparator ?? false) visible: (root.modelData?.isSeparator ?? false)
color: ShellSettings.colors["surface_container_high"] color: ShellSettings.colors.inactive
opacity: 0.1
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 2 Layout.preferredHeight: 2
Layout.leftMargin: 8 Layout.leftMargin: 8

View file

@ -2,8 +2,8 @@ import QtQuick
import ".." import ".."
Rectangle { Rectangle {
color: ShellSettings.colors["primary"] color: ShellSettings.colors["active"]
radius: 5 radius: 5
width: 7.5 width: 3.5
height: 7.5 height: 15
} }