From 9be644b2aa2ccb146893a4f728e10f9b79b6e771 Mon Sep 17 00:00:00 2001 From: retrozinndev Date: Wed, 4 Jun 2025 21:37:37 -0300 Subject: [PATCH] :boom: fix(bar/status): spacing between status icons and volume indicators --- ags/style/_bar.scss | 16 +++--- ags/widget/bar/Status.ts | 118 ++++++++++++++++++++------------------- 2 files changed, 70 insertions(+), 64 deletions(-) diff --git a/ags/style/_bar.scss b/ags/style/_bar.scss index 01b9911..ddf5654 100644 --- a/ags/style/_bar.scss +++ b/ags/style/_bar.scss @@ -211,20 +211,22 @@ & > box { padding: 0 8px; + & icon { font-size: 14px; } + & revealer > eventbox > box { + background: rgba($color: colors.$bg-tertiary, $alpha: .7); + border-radius: 12px; + margin: 4px 0; + margin-left: 5px; + padding: 2px 6px; + } + & .status-icons { padding-left: 4px; - & revealer > eventbox > box { - background: rgba($color: colors.$bg-tertiary, $alpha: .7); - border-radius: 12px; - margin: 4px 0; - padding: 2px 6px; - } - & icon.notification-count { font-size: 6px; margin-top: -14px; diff --git a/ags/widget/bar/Status.ts b/ags/widget/bar/Status.ts index 15b2564..b11bbfc 100644 --- a/ags/widget/bar/Status.ts +++ b/ags/widget/bar/Status.ts @@ -13,27 +13,72 @@ import { tr } from "../../i18n/intl"; export function Status(): Gtk.Widget { + const recordingTimer: Variable = Variable.derive([ + bind(Recording.getDefault(), "recording"), + getDateTime() + ], (recording, dateTime) => { + if(!recording || !Recording.getDefault().startedAt) + return "..."; + + const startedAtSeconds = dateTime.to_unix() - Recording.getDefault().startedAt!.to_unix(); + if(startedAtSeconds <= 0) return "00:00"; + + const minutes = Math.floor(startedAtSeconds / 60); + const seconds = Math.floor(startedAtSeconds % 60); + + return `${ minutes < 10 ? `0${minutes}` : minutes }:${ seconds < 10 ? `0${seconds}` : seconds }`; + }); + return new Widget.EventBox({ className: bind(Windows, "openWindows").as((openWins) => Object.hasOwn(openWins, "control-center") ? "open status" : "status"), onClick: () => Windows.toggle("control-center"), child: new Widget.Box({ - spacing: 5, children: [ - volumeStatus({ - className: "sink", - endpoint: Wireplumber.getDefault().getDefaultSink(), - icon: bind(Wireplumber.getDefault().getDefaultSink(), "volumeIcon").as(icon => - !Wireplumber.getDefault().isMutedSink() && Wireplumber.getDefault().getSinkVolume() > 0 ? - icon : "audio-volume-muted-symbolic"), - }), - volumeStatus({ - className: "source", - endpoint: Wireplumber.getDefault().getDefaultSource(), - icon: bind(Wireplumber.getDefault().getDefaultSource(), "volumeIcon").as(icon => - !Wireplumber.getDefault().isMutedSource() && Wireplumber.getDefault().getSourceVolume() > 0 ? - icon : "microphone-sensitivity-muted-symbolic"), - }), + new Widget.Box({ + className: "volume-indicators", + spacing: 5, + children: [ + volumeStatus({ + className: "sink", + endpoint: Wireplumber.getDefault().getDefaultSink(), + icon: bind(Wireplumber.getDefault().getDefaultSink(), "volumeIcon").as(icon => + !Wireplumber.getDefault().isMutedSink() && Wireplumber.getDefault().getSinkVolume() > 0 ? + icon : "audio-volume-muted-symbolic"), + }), + volumeStatus({ + className: "source", + endpoint: Wireplumber.getDefault().getDefaultSource(), + icon: bind(Wireplumber.getDefault().getDefaultSource(), "volumeIcon").as(icon => + !Wireplumber.getDefault().isMutedSource() && Wireplumber.getDefault().getSourceVolume() > 0 ? + icon : "microphone-sensitivity-muted-symbolic"), + }) + ] + } as Widget.BoxProps), + new Widget.Revealer({ + revealChild: bind(Recording.getDefault(), "recording"), + transitionDuration: 500, + transitionType: Gtk.RevealerTransitionType.SLIDE_LEFT, + onDestroy: () => recordingTimer.drop(), + child: new Widget.EventBox({ + onClick: () => Recording.getDefault().recording && + Recording.getDefault().stopRecording(), + tooltipText: tr("control_center.tiles.recording.enabled_desc"), + child: new Widget.Box({ + children: [ + new Widget.Icon({ + className: "recording state", + icon: "media-record-symbolic", + css: "margin-right: 4px;" + } as Widget.IconProps), + new Widget.Label({ + className: "rec-time", + label: recordingTimer() + } as Widget.LabelProps) + ] + } as Widget.BoxProps) + } as Widget.EventBoxProps) + } as Widget.RevealerProps), StatusIcons() ] } as Widget.BoxProps) @@ -46,8 +91,7 @@ function volumeStatus(props: { className?: string, endpoint: AstalWp.Endpoint, i onScroll: (_, event) => event.delta_y > 0 ? Wireplumber.getDefault().decreaseEndpointVolume(props.endpoint, 5) - : - Wireplumber.getDefault().increaseEndpointVolume(props.endpoint, 5), + : Wireplumber.getDefault().increaseEndpointVolume(props.endpoint, 5), child: new Widget.Box({ spacing: 2, children: [ @@ -96,50 +140,10 @@ function StatusIcons(): Gtk.Widget { return "network-no-route-symbolic"; }); - const recordingTimer: Variable = Variable.derive([ - bind(Recording.getDefault(), "recording"), - getDateTime() - ], (recording, dateTime) => { - if(!recording || !Recording.getDefault().startedAt) - return "..."; - - const startedAtSeconds = dateTime.to_unix() - Recording.getDefault().startedAt!.to_unix(); - if(startedAtSeconds <= 0) return "00:00"; - - const minutes = Math.floor(startedAtSeconds / 60); - const seconds = Math.floor(startedAtSeconds % 60); - - return `${ minutes < 10 ? `0${minutes}` : minutes }:${ seconds < 10 ? `0${seconds}` : seconds }`; - }); - return new Widget.Box({ className: "status-icons", spacing: 8, children: [ - new Widget.Revealer({ - revealChild: bind(Recording.getDefault(), "recording"), - transitionDuration: 500, - transitionType: Gtk.RevealerTransitionType.SLIDE_LEFT, - onDestroy: () => recordingTimer.drop(), - child: new Widget.EventBox({ - onClick: () => Recording.getDefault().recording && - Recording.getDefault().stopRecording(), - tooltipText: tr("control_center.tiles.recording.enabled_desc"), - child: new Widget.Box({ - children: [ - new Widget.Icon({ - className: "recording state", - icon: "media-record-symbolic", - css: "margin-right: 4px;" - } as Widget.IconProps), - new Widget.Label({ - className: "rec-time", - label: recordingTimer() - } as Widget.LabelProps) - ] - } as Widget.BoxProps) - } as Widget.EventBoxProps) - } as Widget.RevealerProps), new Widget.Icon({ className: "bluetooth state", visible: bind(AstalBluetooth.get_default(), "adapter").as(Boolean),