From 1f9e0287324122ea8dc698ead8f8350210328e1a Mon Sep 17 00:00:00 2001
From: Kalle Struik <kalle@kallestruik.nl>
Date: Sun, 30 Mar 2025 13:59:49 +0200
Subject: [PATCH] Restyle bars slightly and add date
---
modules/ags/config/style.scss | 42 +++++++-----------------
modules/ags/config/widget/Clock.tsx | 2 +-
modules/ags/config/widget/Date.tsx | 18 ++++++++++
modules/ags/config/widget/RightBar.tsx | 8 +++--
modules/ags/config/widget/Systray.tsx | 2 +-
modules/ags/config/widget/Workspaces.tsx | 2 +-
6 files changed, 37 insertions(+), 37 deletions(-)
create mode 100644 modules/ags/config/widget/Date.tsx
diff --git a/modules/ags/config/style.scss b/modules/ags/config/style.scss
index a19299e..96191a3 100644
--- a/modules/ags/config/style.scss
+++ b/modules/ags/config/style.scss
@@ -8,19 +8,15 @@ window.Bar {
color: $ctp-text;
>centerbox {
- background: $ctp-base;
- border-radius: 5px;
- margin: 8px;
- padding: 8px;
+ margin: 8px 8px 0 8px;
}
}
-.Time {
+.pill {
background: $ctp-surface-0;
border-radius: 5px;
>.icon {
- background: $ctp-red;
color: $ctp-surface-0;
padding: 6px 8px;
font-size: 18px;
@@ -32,28 +28,24 @@ window.Bar {
&.icon-right>.icon {
border-radius: 0 5px 5px 0;
}
+
>.label {
padding: 0 8px;
font-size: 16px;
}
}
-.Workspaces {
- background: $ctp-surface-0;
- border-radius: 5px;
+.Time >.icon {
+ background: $ctp-red;
+}
+.Date >.icon {
+ background: $ctp-lavender;
+}
+
+.Workspaces {
>.icon {
background: $ctp-blue;
- color: $ctp-surface-0;
- padding: 6px 8px;
- font-size: 18px;
- }
-
- &.icon-left>.icon {
- border-radius: 5px 0 0 5px;
- }
- &.icon-right>.icon {
- border-radius: 0 5px 5px 0;
}
>.labels {
@@ -72,22 +64,10 @@ window.Bar {
}
.Systray {
- background: $ctp-surface-0;
- border-radius: 5px;
-
>.icon {
background: $ctp-green;
- color: $ctp-surface-0;
padding: 4px 8px 0 8px;
font-size: 20px;
- border-radius: 5px 0 0 5px;
- }
-
- &.icon-left>.icon {
- border-radius: 5px 0 0 5px;
- }
- &.icon-right>.icon {
- border-radius: 0 5px 5px 0;
}
>.item {
diff --git a/modules/ags/config/widget/Clock.tsx b/modules/ags/config/widget/Clock.tsx
index f2f6f85..4029ffa 100644
--- a/modules/ags/config/widget/Clock.tsx
+++ b/modules/ags/config/widget/Clock.tsx
@@ -6,7 +6,7 @@ export default function Clock(props: { iconSide: "left" | "right" }) {
const time = Variable<string>("").poll(1000, () =>
GLib.DateTime.new_now_local().format(TIME_FORMAT)!)
- return <box className={`Time icon-${props.iconSide}`}>
+ return <box className={`pill Time icon-${props.iconSide}`}>
{props.iconSide == "left" && <label className="icon" label="" />}
<label
className="label"
diff --git a/modules/ags/config/widget/Date.tsx b/modules/ags/config/widget/Date.tsx
new file mode 100644
index 0000000..5f3b211
--- /dev/null
+++ b/modules/ags/config/widget/Date.tsx
@@ -0,0 +1,18 @@
+import { GLib, Variable } from "astal"
+
+const DATE_FORMAT = "%Y-%m-%d"
+
+export default function Date(props: { iconSide: "left" | "right" }) {
+ const date = Variable<string>("").poll(1000, () =>
+ GLib.DateTime.new_now_local().format(DATE_FORMAT)!)
+
+ return <box className={`pill Date icon-${props.iconSide}`}>
+ {props.iconSide == "left" && <label className="icon" label="" />}
+ <label
+ className="label"
+ onDestroy={() => date.drop()}
+ label={date()}
+ />
+ {props.iconSide == "right" && <label className="icon" label="" />}
+ </box>
+}
diff --git a/modules/ags/config/widget/RightBar.tsx b/modules/ags/config/widget/RightBar.tsx
index 544f4a1..b079bc0 100644
--- a/modules/ags/config/widget/RightBar.tsx
+++ b/modules/ags/config/widget/RightBar.tsx
@@ -1,5 +1,6 @@
import { App, Astal, Gdk, Gtk } from "astal/gtk3";
import Clock from "./Clock";
+import Date from "./Date";
import Workspaces from "./Workspaces";
import Systray from "./Systray";
@@ -13,13 +14,14 @@ export default function RightBar(gdkmonitor: Gdk.Monitor) {
anchor={TOP | LEFT | RIGHT}
application={App}>
<centerbox>
- <box halign={Gtk.Align.START}>
+ <box halign={Gtk.Align.START} spacing={8}>
<Clock iconSide="left" />
+ <Date iconSide="left" />
</box>
- <box halign={Gtk.Align.CENTER}>
+ <box halign={Gtk.Align.CENTER} spacing={8}>
<Workspaces monitor="HDMI-A-1" iconSide="left" />
</box>
- <box halign={Gtk.Align.END}>
+ <box halign={Gtk.Align.END} spacing={8}>
<Systray iconSide="left" />
</box>
</centerbox>
diff --git a/modules/ags/config/widget/Systray.tsx b/modules/ags/config/widget/Systray.tsx
index 800f3d4..e535ac3 100644
--- a/modules/ags/config/widget/Systray.tsx
+++ b/modules/ags/config/widget/Systray.tsx
@@ -4,7 +4,7 @@ import Tray from "gi://AstalTray"
const tray = Tray.get_default()
export default function Systray(props: { iconSide: "left" | "right" }) {
- return <box className={`Systray icon-${props.iconSide}`}>
+ return <box className={`pill Systray icon-${props.iconSide}`}>
{props.iconSide == "left" && <label className="icon" label="" />}
{bind(tray, "items").as(items => items.map(item => <SystrayItem item={item} />))}
{props.iconSide == "right" && <label className="icon" label="" />}
diff --git a/modules/ags/config/widget/Workspaces.tsx b/modules/ags/config/widget/Workspaces.tsx
index 85a34d2..e78d8aa 100644
--- a/modules/ags/config/widget/Workspaces.tsx
+++ b/modules/ags/config/widget/Workspaces.tsx
@@ -4,7 +4,7 @@ import Hyprland from "gi://AstalHyprland"
export default function Workspaces(props: { monitor: string, iconSide: "left" | "right" }) {
const hyprland = Hyprland.get_default();
- return <box className={`Workspaces icon-${props.iconSide}`}>
+ return <box className={`pill Workspaces icon-${props.iconSide}`}>
{props.iconSide == "left" && <label className="icon" label="" />}
<box className="labels">
{bind(hyprland, "workspaces").as(wss => wss