diff --git a/ags/style/_osd.scss b/ags/style/_osd.scss index 9d72c49..5740e11 100644 --- a/ags/style/_osd.scss +++ b/ags/style/_osd.scss @@ -2,10 +2,12 @@ @use "./wal"; @use "./functions" as funs; + .osd { background: funs.toRGB(color.change($color: wal.$background, $alpha: 65%)); - padding: 14px 16px; - border-radius: 20px; + padding: 16px; + border-radius: 24px; + min-width: 180px; .icon { margin-right: 10px; diff --git a/ags/style/_wal.scss b/ags/style/_wal.scss index 869ba1a..0c75ac5 100644 --- a/ags/style/_wal.scss +++ b/ags/style/_wal.scss @@ -1,26 +1,26 @@ // SCSS Variables // Generated by 'wal' -$wallpaper: "/home/joaov/wallpapers/Frieren Rain.jpg"; +$wallpaper: "/home/joaov/wallpapers/Gumi Forest Sunlight.jpg"; // Special -$background: #25301c; -$foreground: #c8cbc6; -$cursor: #c8cbc6; +$background: #2a2825; +$foreground: #c9c9c8; +$cursor: #c9c9c8; // Colors -$color0: #25301c; -$color1: #6c8251; -$color2: #7c9357; -$color3: #78846e; -$color4: #948a88; -$color5: #899869; -$color6: #98a27b; -$color7: #9ba197; -$color8: #707c66; -$color9: #91AE6D; -$color10: #A6C574; -$color11: #A0B093; -$color12: #C6B9B6; -$color13: #B7CB8D; -$color14: #CBD9A4; -$color15: #c8cbc6; +$color0: #2a2825; +$color1: #6a6a3b; +$color2: #7b7b48; +$color3: #908a45; +$color4: #7e876d; +$color5: #8a9680; +$color6: #a5a679; +$color7: #a29f98; +$color8: #7d7667; +$color9: #8E8E4F; +$color10: #A5A560; +$color11: #C0B85C; +$color12: #A9B592; +$color13: #B9C8AB; +$color14: #DDDEA2; +$color15: #c9c9c8; diff --git a/ags/window/OSD.ts b/ags/window/OSD.ts index df43d8d..ddc8655 100644 --- a/ags/window/OSD.ts +++ b/ags/window/OSD.ts @@ -1,4 +1,4 @@ -import { bind, Binding, Variable } from "astal"; +import { bind, Variable } from "astal"; import { Astal, Gtk, Widget } from "astal/gtk3"; import { Wireplumber } from "../scripts/volume"; @@ -8,7 +8,6 @@ export enum OSDModes { } let osdMode: (Variable|null); -let osdIcon: (Binding|null); export function setOSDMode(newMode: OSDModes): void { if(!osdMode) return; @@ -18,31 +17,24 @@ export function setOSDMode(newMode: OSDModes): void { export const OSD = (mon: number) => { osdMode = new Variable(OSDModes.SINK); - osdIcon = osdMode().as((mode: OSDModes) => { - switch(mode) { - case OSDModes.SINK: return "󰕾"; - case OSDModes.BRIGHTNESS: return "󰃠"; - default: return "󱧣"; - } - }); return new Widget.Window({ namespace: "osd", + className: "osd-window", layer: Astal.Layer.OVERLAY, anchor: Astal.WindowAnchor.BOTTOM, canFocus: false, - marginBottom: 80, - focusOnClick: false, clickThrough: true, + focusOnClick: false, + marginBottom: 80, monitor: mon, onDestroy: () => { osdMode?.drop(); - osdMode = null; - osdIcon = null; }, child: new Widget.Box({ className: "osd", + expand: true, children: [ new Widget.Icon({ className: "icon", @@ -53,37 +45,24 @@ export const OSD = (mon: number) => { className: "volume", orientation: Gtk.Orientation.VERTICAL, valign: Gtk.Align.CENTER, + expand: true, children: [ new Widget.Label({ className: "device", - label: bind(Wireplumber.getDefault().getDefaultSink(), "name").as((name: string) => - name || "Speaker"), - halign: Gtk.Align.CENTER + label: bind(Wireplumber.getDefault().getDefaultSink(), "description").as(description => + description ?? "Speaker"), + truncate: true, } as Widget.LabelProps), new Widget.Box({ - vexpand: false, - expand: false, - children: [ - new Widget.LevelBar({ - className: "levelbar", - width_request: 120, - value: bind(Wireplumber.getDefault().getDefaultSink(), "volume").as((volume: number) => - Math.floor(volume * 100)), - maxValue: bind(Wireplumber.getWireplumber(), "defaultSpeaker").as(() => - Wireplumber.getDefault().getMaxSinkVolume()), - vexpand: false, - expand: false, - halign: Gtk.Align.CENTER - } as Widget.LevelBarProps), - /*new Widget.Label({ - className: "value", - label: bind(Wireplumber.getDefault().getDefaultSink(), "volume").as((volume: number) => - `${Math.floor(volume * 100)}%`), - vexpand: false, - expand: false, - halign: Gtk.Align.CENTER - } as Widget.LabelProps)*/ - ] + expand: true, + child: new Widget.LevelBar({ + className: "levelbar", + value: bind(Wireplumber.getDefault().getDefaultSink(), "volume").as((volume: number) => + Math.floor(volume * 100)), + maxValue: bind(Wireplumber.getWireplumber(), "defaultSpeaker").as(() => + Wireplumber.getDefault().getMaxSinkVolume()), + expand: true + } as Widget.LevelBarProps) } as Widget.BoxProps) ] } as Widget.BoxProps)