feat: new bar & new SCSS styles

2025-05-19 09:58:00 +02:00 · 2025-05-19 09:58:00 +02:00 · d5392bf0d3
commit d5392bf0d3
parent 8c8e112249
11 changed files with 89 additions and 85 deletions
--- a/ags/lib/widgets/separator.tsx
+++ b/ags/lib/widgets/separator.tsx
@ -1,8 +0,0 @@
-import { Gio } from "astal";
-
-export default function Separator() {
-    return <image
-        cssClasses={["separator"]}
-        gicon={Gio.Icon.new_for_string("switch-on-symbolic")}
-    />
-}
--- a/ags/styles/components/_bar.scss
+++ b/ags/styles/components/_bar.scss
@ -1,26 +1,23 @@
@use '../theme_colors.scss' as *;

 window.bar {
-    font-weight: bold;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    background: color-mix(in srgb, $base00, transparent 85%);
+    margin: 0;

-    >box {
-        border-radius: 10px;
+    * {
+        color: $base0A;
    }

-    >.inner {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-        background: $base00;
-        padding: 0.1rem 1rem;
-        margin: 0;
-
-        *:not(.separator) { color: $base0B; }
+    >button, >label, >menubutton {
+        padding: 0.15rem 0.25rem;
    }

    .tray .item {
        padding: 0;
        margin: 0;
-        background: $base00;
+        background: transparent;

        image {
            padding: 0;
@ -28,5 +25,7 @@ window.bar {
        }
    }

-    calendar>header { border: none; }
-}
+    calendar>header {
+        border: none;
+    }
+}
--- a/ags/styles/components/_battery_info.scss
+++ b/ags/styles/components/_battery_info.scss
@ -12,7 +12,7 @@ window.battery_info {
    >.inner {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
-        background: $base00;
+        background: color-mix(in srgb, $base00, transparent 15%);
        padding: 0.75rem 3rem;
        margin: 0;

@ -22,7 +22,7 @@ window.battery_info {

        * { 
            transition: all 0.2s ease-in-out;
-            color: $base0B;
+            color: $base0A;
        }
    }

@ -33,7 +33,7 @@ window.battery_info {

 window.battery_info button {
    transition: all 0.2s ease-in-out;
-    background: $base00;
+    background: color-mix(in srgb, $base00, transparent 15%);
    border: 2px solid $base01;
    margin: 5px;

@ -41,7 +41,7 @@ window.battery_info button {
        background: $base01;

        * {
-            color: $base0B;
+            color: $base0A;
        }
    }

@ -50,7 +50,7 @@ window.battery_info button {
        border: 2px solid $base00;

        * {
-            color: $base0B;
+            color: $base0A;
        }
    }
 }
--- a/ags/styles/components/_clipboard.scss
+++ b/ags/styles/components/_clipboard.scss
@ -2,8 +2,7 @@

 .clipboard {
    entry {
-        background: $base00;
-        color: $base0B;
+        color: $base0A;
        padding: 8px 12px;
        border: none;

@ -15,23 +14,37 @@
    }

    .entry.primary {
-        background: $base01;
+        background: $base0A;
+
+        .content {
+            color: $base00;
+        }

        &:focus {
+            background: color-mix(in srgb, $base00, transparent 15%);
+        }
+
+        &:hover {
            background: $base00;
+
+            .content {
+                color: $base0A;
+            }
        }
    }

    .entry {
        padding: 10px;
-        background: $base00;
+        background: color-mix(in srgb, $base00, transparent 15%);
        border-radius: 8px;
        transition: background 0.2s ease;

-        &:hover { background: $base01; }
+        &:hover {
+            background: $base01;
+        }

        .content {
-            color: $base0B;
+            color: $base0A;
            font-size: 14px;
            font-weight: 600;
        }
@ -40,7 +53,7 @@
    .not-found {
        border: 1px solid $base07;
        background: $base01;
-        color: $base0B;
+        color: $base0A;
        font-size: 14px;
        padding: 10px;
        border-radius: 8px;
@ -49,4 +62,4 @@
            margin-bottom: 8px;
        }
    }
-}
+}
--- a/ags/styles/components/_launcher.scss
+++ b/ags/styles/components/_launcher.scss
@ -2,8 +2,7 @@

 .launcher {
    entry {
-        background: $base00;
-        color: $base0B;
+        background: color-mix(in srgb, $base00, transparent 75%);
        padding: 8px 12px;
        border: none;

@ -16,7 +15,7 @@

    .application {
        padding: 10px;
-        background: $base00;
+        background: color-mix(in srgb, $base00, transparent 15%);
        border-radius: 8px;
        transition: background 0.2s ease;

@ -29,20 +28,20 @@
        }

        .name {
-            color: $base0B;
+            color: $base0A;
            font-size: 14px;
            font-weight: 600;
        }

        .description {
-            color: $base0B;
+            color: $base0C;
            font-size: 12px;
        }
    }

    .not-found {
        background: $base01;
-        color: $base0B;
+        color: $base0A;
        font-size: 14px;
        padding: 10px;
        border-radius: 8px;
--- a/ags/styles/components/_quick_settings.scss
+++ b/ags/styles/components/_quick_settings.scss
@ -12,13 +12,13 @@ window.quick_settings {
    >.inner {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
-        background: $base00;
+        background: color-mix(in srgb, $base00, transparent 15%);
        padding: 0.75rem 3rem;
        margin: 0;

        * { 
            transition: all 0.2s ease-in-out;
-            color: $base0B;
+            color: $base0A;
        }
    }

@ -29,11 +29,11 @@ window.quick_settings {

 window.qs_bluetooth {
    >.inner {
-        background: $base00;
+        background: color-mix(in srgb, $base00, transparent 15%);
        padding: 0.75rem 3rem;
        border-radius: 10px;
    
-        * { color: $base0B; }
+        * { color: $base0A; }
    }

    .device {
@ -56,7 +56,11 @@ window.quick_settings button, window.qs_bluetooth button {
    }

    &.active {
-        background: $base01;
+        background: $base0A;
        border: 0.5px solid $base00;
+
+        * {
+            color: $base01;
+        }
    }
 }
--- a/ags/styles/components/_shortcuts.scss
+++ b/ags/styles/components/_shortcuts.scss
@ -3,7 +3,7 @@
 .shortcuts {
    .entry {
        padding: 10px;
-        background: $base00;
+        background: color-mix(in srgb, $base00, transparent 15%);
        border-radius: 8px;
        transition: background 0.2s ease;

@ -11,12 +11,12 @@
            background: $base01;

            >.kbd {
-                background: $base00;
+                background: color-mix(in srgb, $base00, transparent 15%);
            }
        }

        label {
-            color: $base0B;
+            color: $base0A;
            font-size: 14px;
            font-weight: 600;
        }
@ -29,13 +29,13 @@
            margin: 0 2px;

            background: $base01;
-            color: $base0B;
+            color: $base0A;
        }
    }

    .not-found {
        background: $base01;
-        color: $base0B;
+        color: $base0A;
        font-size: 14px;
        padding: 10px;
        border-radius: 8px;
--- a/ags/styles/style.scss
+++ b/ags/styles/style.scss
@ -14,7 +14,7 @@ separator {
 }

 popover>contents, calendar {
-    background: $base00;
+    background: color-mix(in srgb, $base00, transparent 15%);
 }

 button, button:hover {
--- a/ags/widget/bar/bar.tsx
+++ b/ags/widget/bar/bar.tsx
@ -7,12 +7,9 @@ import { BatteryInfo } from "./components/battery";
 import Workspace from "./components/workspace";
 import DateTime from "@lib/widgets/datetime";
 import TrayView from "./components/tray";
-import Separator from "@/lib/widgets/separator";

 export default function Bar(monitor_id: number) {
    const { BOTTOM, LEFT, RIGHT } = Astal.WindowAnchor
-    const CENTER = Gtk.Align.CENTER;
-
    const battery = Battery.get_default();

    const openQuickSettings = (_self: Gtk.Button, state: Gdk.ButtonEvent) => {
@ -25,27 +22,27 @@ export default function Bar(monitor_id: number) {
        name={`bar_${monitor_id}`}
        monitor={monitor_id}
        cssClasses={["bar"]}
-        exclusivity={Astal.Exclusivity.IGNORE}
+        exclusivity={Astal.Exclusivity.EXCLUSIVE}
        anchor={BOTTOM | LEFT | RIGHT}
-        application={App}>
-        <box halign={CENTER} cssClasses={["inner"]}>
-            {[
-                Workspace(),
+        application={App}
+        hexpand
+    >
+        <centerbox hexpand>
+            {Workspace()}
+            <box>
                <menubutton hasFrame={false}>
                    <DateTime format="%d.%m.%Y %H:%M:%S" interval={1000} />
                    <popover>
                        <Gtk.Calendar />
                    </popover>
-                </menubutton>,
-                BatteryInfo({ battery }),
-                <button hasFrame={false} iconName={"applications-system-symbolic"} onButtonPressed={openQuickSettings} />,
-                NetworkInfo(),
-                TrayView()
-            ].reduce((acc, it) => <>
-                {acc}
-                {Separator()}
-                {it}
-            </>)}
-        </box>
+                </menubutton>
+                {BatteryInfo({ battery })}
+                {NetworkInfo()}
+            </box>
+            <box>
+                <button hasFrame={false} iconName={"applications-system-symbolic"} onButtonPressed={openQuickSettings} />
+                {TrayView()}
+            </box>
+        </centerbox>
    </window>
 }
--- a/ags/widget/bar/components/battery.tsx
+++ b/ags/widget/bar/components/battery.tsx
@ -11,16 +11,14 @@ export function BatteryInfo({ battery }: { battery: Battery.Device }) {
    const charging = bind(battery, "charging");

    return (
-        <box>
-            {percentage.as(p => <button hasFrame={false}>
-                <box onButtonPressed={(_self, event) =>
-                    openOnButton(event, Gdk.BUTTON_PRIMARY)
-                        (() => App.toggle_window("battery_info"))
-                }>
-                    <label>{percentage.as(p => `${p}%`)}</label>
-                    <image iconName={getBatteryIcon(p, charging)} />
-                </box>
-            </button>)}
-        </box>
+        <button hasFrame={false}>
+            {percentage.as(p => <box onButtonPressed={(_self, event) =>
+                openOnButton(event, Gdk.BUTTON_PRIMARY)
+                    (() => App.toggle_window("battery_info"))
+            }>
+                <label>{percentage.as(p => `${p}%`)}</label>
+                <image iconName={getBatteryIcon(p, charging)} />
+            </box>)}
+        </button>
    );
 };
--- a/ags/widget/bar/components/network_info.tsx
+++ b/ags/widget/bar/components/network_info.tsx
@ -70,8 +70,10 @@ export default function NetworkInfo() {
    const binding = bind(currentConn);

    return binding.as(Boolean) ? <box spacing={3}>
-        {binding.as(getConnection)}
-        TX: {dataBinding.as(data => toHumanReadable(data.totalTx / 4, "B/s"))}
-        RX: {dataBinding.as(data => toHumanReadable(data.totalRx / 4, "B/s"))}
+        {binding.as(getConnection).as(data => data && <label label={data} />)}
+        {dataBinding.as(data => <>
+            <label label={`TX: ${toHumanReadable(data.totalTx / 4, "B/s")}`} />
+            <label label={`RX: ${toHumanReadable(data.totalRx / 4, "B/s")}`} />
+        </>)}
    </box> : <label>No network</label>
 }