Olivier/colorshell
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ ags(bar): add lots of widgets ❤️

Browse Source
This commit is contained in:
retrozinndev
2025-01-22 20:46:06 -03:00
parent c7a34caa44
commit 2887ddd38c
7 changed files with 233 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ags/style.scss
-14
View File
@@ -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;
}
}
ags/style/_bar.scss
+101 -4
View File
@@ -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;
ags/style/_wal.scss
+20 -20
View File
@@ -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;
ags/widget/bar/Audio.tsx
+44
View File
@@ -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);
}
ags/widget/bar/FocusedWindow.tsx
+42
View File
@@ -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);
}
ags/widget/bar/Tray.tsx
+20 -11
View File
@@ -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.TrayItem> = astalTray.items;
const handlerId = astalTray.connect("item-added", () => {
items = astalTray.items;
console.log(astalTray.items);
}) as number;
export function Tray() {
return (
<Box className={"tray"}>
</Box>
);
return new Widget.Box({
className: "tray",
children: bind(astalTray, "items").as((items: Array<AstalTray.TrayItem>) =>
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);
}
ags/window/Bar.tsx
+6 -2
View File
@@ -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,
<Logo />
<Workspaces />
<FocusedWindow />
</Box>
<Box className={ "widgets-center" } halign={ Gtk.Align.CENTER }
@@ -34,7 +37,8 @@ export function Bar(monitor: number = 0, width: (number|undefined) = undefined,
<Box className={ "widgets-right" } halign={ Gtk.Align.END }
vertical={ false } homogeneous={ false }>
{/*<Tray />*/}
<Tray />
<Audio />
<CCToggle />
</Box>
</CenterBox>