Sweetbread/nixos-config
Sweetbread/nixos-config
1
0
Fork 0
Code Issues Activity

ags: style

Browse Source
This commit is contained in:
Sweetbread 2024-12-28 22:14:11 +03:00
parent dfa96985d6
commit 6f2c1bed14
9 changed files with 90 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
home-manager/modules/ags.nix
View File

@ -1,4 +1,4 @@
{ inputs, pkgs, ... }: { { config, inputs, pkgs, ... }: {
imports = [ inputs.ags.homeManagerModules.default ]; imports = [ inputs.ags.homeManagerModules.default ];
programs.ags = { programs.ags = {

2
home-manager/modules/ags/app.ts
View File

@ -4,7 +4,7 @@ import Bar from "./widget/Bar"
App.start({ App.start({
css: style, css: style,
instanceName: "js", instanceName: "ags",
requestHandler(request, res) { requestHandler(request, res) {
print(request) print(request)
res("ok") res("ok")

4
home-manager/modules/ags/colors.scss Normal file
View File

@ -0,0 +1,4 @@
$bg: #1e1e2e; // base00
$surface0: #313244; // base02
$fg: #cdd6f4; // base05
$accent: #a6e3a1; // base0B

103
home-manager/modules/ags/style.scss
View File

@ -1,69 +1,83 @@
@use "sass:color"; @use "sass:color";
@use "colors.scss" as *;
$bg: #212223; $radius: 10px;
$fg: #f1f1f1;
$accent: #378DF7; %item {
$radius: 7px; all: unset;
background: $bg;
border-radius: $radius;
padding: 4px;
& + &, .item + & { margin-left: 4px; }
label { margin: 0 8px; }
}
window.Bar { window.Bar {
border: none; border: none;
box-shadow: none; box-shadow: none;
background-color: $bg; background-color: transparent;
color: $fg; color: $fg;
font-size: 1.1em; font-size: 1.1em;
font-weight: bold; font-weight: bold;
label { .Container {
margin: 0 8px; margin: 10px 10px 0;
} }
.Workspaces { .Workspaces {
button { button {
all: unset; all: unset;
background-color: transparent;
&:hover label { &:hover label {
background-color: color.adjust($fg, $alpha: -0.84); background: $surface0;
border-color: color.adjust($accent, $alpha: -0.8); color: $accent;
} }
&:active label { &:active label {
background-color: color.adjust($fg, $alpha: -0.8) background: $surface0;
color: $accent;
} }
} }
label { label {
transition: 200ms; transition: 200ms;
padding: 0 8px; padding: 0 6px;
margin: 2px; margin: 2px;
border-radius: $radius; border-radius: $radius;
border: 1pt solid transparent; border: 1pt solid transparent;
} }
.focused label { .focused label {
color: $accent; background: $accent;
color: $bg;
border-color: $accent; border-color: $accent;
} }
} }
.SysTray { .SysTray button {
margin-right: 8px; all: unset;
padding: 8px;
border-radius: inherit;
button { &:hover {
padding: 0 4px; background: $surface0;
} }
} }
.FocusedClient { .Media {
color: $accent; &.playing {
} border: 2pt solid $accent;
}
.Media .Cover {
min-height: 1.2em; .Cover {
min-width: 1.2em; min-height: 1.2em;
border-radius: $radius; min-width: 1.2em;
background-position: center; border-radius: $radius;
background-size: contain; background-position: center;
background-size: contain;
}
} }
.Battery label { .Battery label {
@ -71,36 +85,11 @@ window.Bar {
margin-left: 0; margin-left: 0;
} }
.AudioSlider { .Time { padding: 0 8px; }
* {
all: unset;
}
icon { .AudioSlider icon { margin-left: 8px; }
margin-right: .6em;
}
& { .Workspaces, .Media, .SysTray, .AudioSlider, .Time {
margin: 0 1em; @extend %item;
}
trough {
background-color: color.adjust($fg, $alpha: -0.8);
border-radius: $radius;
}
highlight {
background-color: $accent;
min-height: .8em;
border-radius: $radius;
}
slider {
background-color: $fg;
border-radius: $radius;
min-height: 1em;
min-width: 1em;
margin: -.2em;
}
} }
} }

2
home-manager/modules/ags/widget/Bar.tsx
View File

@ -18,7 +18,7 @@ export default function Bar(monitor: Gdk.Monitor) {
gdkmonitor={monitor} gdkmonitor={monitor}
exclusivity={Astal.Exclusivity.EXCLUSIVE} exclusivity={Astal.Exclusivity.EXCLUSIVE}
anchor={TOP | LEFT | RIGHT}> anchor={TOP | LEFT | RIGHT}>
<centerbox> <centerbox className="Container">
<box hexpand halign={Gtk.Align.START}> <box hexpand halign={Gtk.Align.START}>
<Workspaces /> <Workspaces />
</box> </box>

8
home-manager/modules/ags/widget/elements/Audio.tsx
View File

@ -4,12 +4,8 @@ import Wp from "gi://AstalWp"
export default function Audio() { export default function Audio() {
const speaker = Wp.get_default()?.audio.defaultSpeaker! const speaker = Wp.get_default()?.audio.defaultSpeaker!
return <box className="AudioSlider" css="min-width: 140px"> return <box className="AudioSlider">
<icon icon={bind(speaker, "volumeIcon")} /> <icon icon={bind(speaker, "volumeIcon")} />
<slider <label label={bind(speaker, "volume").as(v => `${Math.floor(v*100)}%`)} />
hexpand
onDragged={({ value }) => speaker.volume = value}
value={bind(speaker, "volume")}
/>
</box> </box>
} }

39
home-manager/modules/ags/widget/elements/Media.tsx
View File

@ -1,28 +1,29 @@
import { bind } from "astal" import { Variable, bind } from "astal"
import { Gtk } from "astal/gtk3" import { Gtk } from "astal/gtk3"
import Mpris from "gi://AstalMpris" import Mpris from "gi://AstalMpris"
export default function Media() { export default function Media() {
const mpris = Mpris.get_default() const mpris = Mpris.get_default()
// console.log(bind(mpris, "players").as(ps => ps[0] ? `${ps[0].title} ${ps[0].artist} ${ps[0].get_playback_status()}` : "-"));
return <box className="Media"> return <box>
{bind(mpris, "players").as(ps => ps[0] ? ( {bind(mpris, "players").as(ps => ps[0] ? (
<box> <button
<box className={bind(ps[0], "playback-status").as(s => s == 0 ? "Media playing" : "Media")}
className="Cover" onClicked={() => ps[0].play_pause()}>
valign={Gtk.Align.CENTER} <box>
css={bind(ps[0], "coverArt").as(cover => <box
`background-image: url('${cover}');` className="Cover"
)} valign={Gtk.Align.CENTER}
/> css={bind(ps[0], "coverArt").as(cover =>
<label `background-image: url('${cover}');`
label={bind(ps[0], "title").as(() => )}
`${ps[0].title} - ${ps[0].artist}` />
)} <label
/> label={bind(ps[0], "title").as(() =>ps[0].title.length < 80 ? ps[0].title : `${ps[0].title.slice(0, 77)}...`)}
</box> />
) : ( </box>
"Nothing Playing" </button>
))} ) : ("") )}
</box> </box>
} }

24
home-manager/modules/ags/widget/elements/SysTray.tsx
View File

@ -4,15 +4,19 @@ import Tray from "gi://AstalTray"
export default function SysTray() { export default function SysTray() {
const tray = Tray.get_default() const tray = Tray.get_default()
return <box className="SysTray"> return <box className="item">
{bind(tray, "items").as(items => items.map(item => ( {bind(tray, "items").as(i => (i.length > 0) ? (
<menubutton <box className="SysTray">
tooltipMarkup={bind(item, "tooltipMarkup")} {bind(tray, "items").as(items => items.map(item => (
usePopover={false} <menubutton
actionGroup={bind(item, "action-group").as(ag => ["dbusmenu", ag])} tooltipMarkup={bind(item, "tooltipMarkup")}
menuModel={bind(item, "menu-model")}> usePopover={false}
<icon gicon={bind(item, "gicon")} /> actionGroup={bind(item, "action-group").as(ag => ["dbusmenu", ag])}
</menubutton> menuModel={bind(item, "menu-model")}>
)))} <icon gicon={bind(item, "gicon")} />
</menubutton>
)))}
</box>
) : ("") )}
</box> </box>
} }

2
home-manager/modules/ags/widget/elements/Time.tsx
View File

@ -1,6 +1,6 @@
import { Variable, GLib } from "astal" import { Variable, GLib } from "astal"
export default function Time({ format = "%H:%M - %A %e." }) { export default function Time({ format = "%e %b - %H:%M %a" }) {
const time = Variable<string>("").poll(1000, () => const time = Variable<string>("").poll(1000, () =>
GLib.DateTime.new_now_local().format(format)!) GLib.DateTime.new_now_local().format(format)!)