diff --git a/ags/style.scss b/ags/style.scss index 4275cd5..acb4348 100644 --- a/ags/style.scss +++ b/ags/style.scss @@ -1,16 +1,2 @@ @use "./style/bar"; @use "./style/wal"; - -* { - all: unset; - transition: 120ms linear; -} - -button { - padding: 6px; - border-radius: 12px; - - &:hover { - background: wal.$color1; - } -} diff --git a/ags/style/_bar.scss b/ags/style/_bar.scss index ba430bb..c49e4e1 100644 --- a/ags/style/_bar.scss +++ b/ags/style/_bar.scss @@ -1,27 +1,67 @@ -@use "./_wal"; +@use "./wal"; +@use "./mixins"; .bar-container { padding: 6px; padding-bottom: 0px; - .bar-centerbox > * { + + & * { + all: unset; + transition: 120ms linear; + + menu { + padding: 4px; + background: wal.$background; + border-radius: 14px; + + & > separator { + margin: 0 4px; + color: wal.$background; + } + + & > menuitem { + padding: 8px 0px; + border-radius: 10px; + font-size: 12px; + font-weight: 600; + + &:hover { + background: wal.$color1; + } + } + } + + button { + padding: 6px 8px; + border-radius: 12px; + + &:hover { + background: wal.$color1; + } + } + } + & > .bar-centerbox > * { background: rgba($color: wal.$background, $alpha: .6); padding: 6px; border-radius: 18px; } } -label { +.bar-container label { font-size: 12px; font-family: "Cantarell", "Noto Sans"; font-weight: 500; } .workspaces { + padding: 2px 2px; & button { + all: unset; + border-radius: 16px; transition: 80ms linear; padding: 0 12px; background: wal.$color1; - margin: 3px 2px; + margin: 1px 2px; &.focus { background: wal.$foreground; @@ -30,6 +70,30 @@ label { } } +.focused-window { + padding: 0 6px; + + & > .icon { + margin-right: 6px; + } + + & > .text-content { + & > .class { + font-size: 9px; + font-weight: 500; + font-family: monospace; + color: adjust-hue($color: wal.$foreground, $degrees: 100deg); + margin-top: 1px; + } + + & > .title { + font-size: 11.5px; + font-weight: 500; + margin-top: -2px; + } + } +} + .logo button { $padding-inline: 12px; padding-left: $padding-inline; @@ -40,6 +104,39 @@ label { } } +.tray { + padding: 0 6px; + + & .item { + all: unset; + + &:hover { + background: none; + } + + margin: 0 6px; + padding: 0; + + &:first-child { + margin-left: 0; + } + + &:last-child { + margin-right: 0; + } + } +} + +.audio { + & .sink .icon { + margin-right: 6px; + } + + & .source .icon { + margin-right: 4px; + } +} + .cc-toggle button { $padding-inline: 12px; padding-left: $padding-inline; diff --git a/ags/style/_wal.scss b/ags/style/_wal.scss index e2dc560..5c9c132 100644 --- a/ags/style/_wal.scss +++ b/ags/style/_wal.scss @@ -1,26 +1,26 @@ // SCSS Variables // Generated by 'wal' -$wallpaper: "/home/joaov/wallpapers/Garden Kita.png"; +$wallpaper: "/home/joaov/wallpapers/Bocchi The Rock!.png"; // Special -$background: #101212; -$foreground: #c3c3c3; -$cursor: #c3c3c3; +$background: #0a0a0c; +$foreground: #c1c1c2; +$cursor: #c1c1c2; // Colors -$color0: #101212; -$color1: #59662a; -$color2: #517047; -$color3: #87863c; -$color4: #707b48; -$color5: #4b6266; -$color6: #84876e; -$color7: #8e9898; -$color8: #596d6d; -$color9: #778839; -$color10: #6C965F; -$color11: #B4B350; -$color12: #96A460; -$color13: #658388; -$color14: #B0B493; -$color15: #c3c3c3; +$color0: #0a0a0c; +$color1: #935d6d; +$color2: #967e84; +$color3: #ac8486; +$color4: #bcae7a; +$color5: #a49c9c; +$color6: #bcb79c; +$color7: #8a8a96; +$color8: #565669; +$color9: #C57C92; +$color10: #C9A9B0; +$color11: #E6B1B3; +$color12: #FBE8A3; +$color13: #DBD1D0; +$color14: #FBF5D1; +$color15: #c1c1c2; diff --git a/ags/widget/bar/Audio.tsx b/ags/widget/bar/Audio.tsx index e69de29..a22fff6 100644 --- a/ags/widget/bar/Audio.tsx +++ b/ags/widget/bar/Audio.tsx @@ -0,0 +1,44 @@ +import { bind } from "astal"; +import { Widget } from "astal/gtk3"; +import AstalWp from "gi://AstalWp?version=0.1"; + +const wp = AstalWp.get_default(); + +export function Audio() { + return wp && new Widget.Button({ + className: "audio", + child: new Widget.Box({ + children: [ + new Widget.EventBox({ + className: "sink", + child: new Widget.Box({ + children: [ + new Widget.Label({ + className: "icon nf", + label: "󰕾" + } as Widget.LabelProps), + new Widget.Label({ + className: "icon nf", + label: bind(wp!.defaultSpeaker, "volume").as((volume: number) => Math.round(volume * 100).toString() + "%") + } as Widget.LabelProps) + ] + }) + } as Widget.EventBoxProps), + new Widget.EventBox({ + className: "source", + child: new Widget.Box({ + children: [ + new Widget.Label({ + className: "icon", + label: "󰍬" + } as Widget.LabelProps), + new Widget.Label({ + label: bind(wp!.defaultMicrophone, "volume").as((volume: number) => Math.round(volume * 100).toString() + "%") + } as Widget.LabelProps) + ] + }) + } as Widget.EventBoxProps) + ] + } as Widget.BoxProps) + } as Widget.ButtonProps); +} diff --git a/ags/widget/bar/FocusedWindow.tsx b/ags/widget/bar/FocusedWindow.tsx new file mode 100644 index 0000000..01b8555 --- /dev/null +++ b/ags/widget/bar/FocusedWindow.tsx @@ -0,0 +1,42 @@ +import { bind } from "astal"; +import { Gtk, Widget } from "astal/gtk3"; +import AstalHyprland from "gi://AstalHyprland"; + +const hyprland = AstalHyprland.get_default(); + +export function FocusedWindow() { + return new Widget.Box({ + className: "focused-window", + children: [ + new Widget.Icon({ + className: "icon", + icon: bind(hyprland, "focusedClient").as((client: AstalHyprland.Client) => { + switch(client.initialClass) { + case "zen": + return "zen-browser"; + + default: + return client.initialClass; + }}), + iconSize: Gtk.IconSize.SMALL_TOOLBAR + }), + new Widget.Box({ + className: "text-content", + orientation: Gtk.Orientation.VERTICAL, + homogeneous: false, + children: [ + new Widget.Label({ + className: "class", + xalign: 0, + label: bind(hyprland, "focusedClient").as((client: AstalHyprland.Client) => client.get_class()) + } as Widget.LabelProps), + new Widget.Label({ + className: "title", + xalign: 0, + label: bind(hyprland, "focusedClient").as((client: AstalHyprland.Client) => client.get_title()) + } as Widget.LabelProps) + ] + }) + ] + } as Widget.BoxProps); +} diff --git a/ags/widget/bar/Tray.tsx b/ags/widget/bar/Tray.tsx index 22bdfa1..1a9defb 100644 --- a/ags/widget/bar/Tray.tsx +++ b/ags/widget/bar/Tray.tsx @@ -1,17 +1,26 @@ -import { Box, Label } from "astal/gtk3/widget"; +import { bind } from "astal"; +import { Astal, Gtk, Widget } from "astal/gtk3"; import AstalTray from "gi://AstalTray" const astalTray = AstalTray.get_default(); -let items: Array = astalTray.items; - -const handlerId = astalTray.connect("item-added", () => { - items = astalTray.items; - console.log(astalTray.items); -}) as number; export function Tray() { - return ( - - - ); + return new Widget.Box({ + className: "tray", + children: bind(astalTray, "items").as((items: Array) => + items.map((item: AstalTray.TrayItem) => + new Widget.MenuButton({ + className: "item", + tooltipMarkup: bind(item, "tooltipMarkup"), + menuModel: bind(item, "menuModel"), + usePopover: false, + actionGroup: bind(item, "actionGroup").as((actionGroup: any) => ["dbusmenu", actionGroup]), + child: new Widget.Icon({ + gIcon: bind(item, "gicon"), + iconSize: Gtk.IconSize.SMALL_TOOLBAR + }) + } as Widget.MenuButtonProps) + ) + ) + } as Widget.BoxProps); } diff --git a/ags/window/Bar.tsx b/ags/window/Bar.tsx index 7f49820..fa481ec 100644 --- a/ags/window/Bar.tsx +++ b/ags/window/Bar.tsx @@ -5,8 +5,10 @@ import Gdk from "gi://Gdk?version=3.0"; import { Clock } from "../widget/bar/Clock"; import { Logo } from "../widget/bar/Logo"; import { CCToggle } from "../widget/bar/CCToggle"; -//import { Tray } from "../widget/bar/Tray"; +import { Tray } from "../widget/bar/Tray"; import { Workspaces } from "../widget/bar/Workspaces"; +import { Audio } from "../widget/bar/Audio"; +import { FocusedWindow } from "../widget/bar/FocusedWindow"; export function Bar(monitor: number = 0, width: (number|undefined) = undefined, height: (number|undefined) = undefined) { return ( @@ -23,6 +25,7 @@ export function Bar(monitor: number = 0, width: (number|undefined) = undefined, + - {/**/} + +