From d2e02f553a58ca08884956adbbbb6cdfe5b64040 Mon Sep 17 00:00:00 2001 From: Jas Singh Date: Mon, 30 Dec 2024 04:09:16 -0800 Subject: [PATCH] OSDs are now click through and can have borders. (#674) --- nix/module.nix | 1 + src/components/osd/helpers.ts | 108 ++---------- src/components/osd/index.tsx | 12 +- .../settings/pages/config/osd/index.tsx | 3 +- .../settings/pages/theme/osd/index.tsx | 1 + src/options.ts | 4 + src/scss/style/osd/index.scss | 159 ++++++++++-------- 7 files changed, 121 insertions(+), 167 deletions(-) diff --git a/nix/module.nix b/nix/module.nix index c0f5912..ca84fa2 100644 --- a/nix/module.nix +++ b/nix/module.nix @@ -551,6 +551,7 @@ in theme.osd.opacity = mkIntOption 100; theme.osd.orientation = mkStrOption "vertical"; theme.osd.radius = mkStrOption "0.4em"; + theme.osd.border.size = mkStrOption "0em"; theme.osd.scaling = mkIntOption 100; theme.tooltip.scaling = mkIntOption 100; wallpaper.enable = mkBoolOption true; diff --git a/src/components/osd/helpers.ts b/src/components/osd/helpers.ts index 2899f44..00c616e 100644 --- a/src/components/osd/helpers.ts +++ b/src/components/osd/helpers.ts @@ -1,4 +1,3 @@ -import { Binding } from 'astal'; import { bind, timeout, Variable } from 'astal'; import { Widget } from 'astal/gtk3'; import { audioService, brightnessService, hyprlandService } from 'src/lib/constants/services'; @@ -17,16 +16,19 @@ timeout(3000, () => { }); /** - * Handles the reveal state of a Widget.Revealer. + * Handles the reveal state of a Widget.Revealer or Widget.Window. * - * This function sets the `reveal_child` property of the Widget.Revealer to true if the OSD is enabled and the property is 'revealChild'. - * It also manages a timeout to reset the `reveal_child` property after the specified duration. + * This function delegates the reveal handling to either `handleRevealRevealer` or `handleRevealWindow` based on the type of the widget. * - * @param self The Widget.Revealer instance. + * @param self The Widget.Revealer or Widget.Window instance. * @param property The property to check, either 'revealChild' or 'visible'. */ -export const handleRevealRevealer = (self: Widget.Revealer, property: 'revealChild' | 'visible'): void => { - if (!enable.get() || property !== 'revealChild') { +export const handleReveal = (self: Widget.Revealer): void => { + if (isStartingUp) { + return; + } + + if (!enable.get()) { return; } @@ -42,60 +44,14 @@ export const handleRevealRevealer = (self: Widget.Revealer, property: 'revealChi }); }; -/** - * Handles the reveal state of a Widget.Window. - * - * This function sets the `visible` property of the Widget.Window to true if the OSD is enabled and the property is 'visible'. - * It also manages a timeout to reset the `visible` property after the specified duration. - * - * @param self The Widget.Window instance. - * @param property The property to check, either 'revealChild' or 'visible'. - */ -export const handleRevealWindow = (self: Widget.Window, property: 'revealChild' | 'visible'): void => { - if (!enable.get() || property !== 'visible') { - return; - } - - self.visible = true; - - count++; - timeout(duration.get(), () => { - count--; - - if (count === 0) { - self.visible = false; - } - }); -}; - -/** - * Handles the reveal state of a Widget.Revealer or Widget.Window. - * - * This function delegates the reveal handling to either `handleRevealRevealer` or `handleRevealWindow` based on the type of the widget. - * - * @param self The Widget.Revealer or Widget.Window instance. - * @param property The property to check, either 'revealChild' or 'visible'. - */ -export const handleReveal = (self: Widget.Revealer | Widget.Window, property: 'revealChild' | 'visible'): void => { - if (isStartingUp) { - return; - } - - if (self instanceof Widget.Revealer) { - handleRevealRevealer(self, property); - } else if (self instanceof Widget.Window) { - handleRevealWindow(self, property); - } -}; - /** * Retrieves the monitor index for the OSD. * * This function derives the monitor index for the OSD based on the focused monitor, default monitor, and active monitor settings. * - * @returns A Binding representing the monitor index for the OSD. + * @returns A Variable representing the monitor index for the OSD. */ -export const getOsdMonitor = (): Binding => { +export const getOsdMonitor = (): Variable => { return Variable.derive( [bind(hyprlandService, 'focusedMonitor'), bind(monitor), bind(active_monitor)], (currentMonitor, defaultMonitor, followMonitor) => { @@ -105,39 +61,7 @@ export const getOsdMonitor = (): Binding => { return defaultMonitor; }, - )(); -}; - -/** - * Sets up the window for OSD. - * - * This function hooks various services and settings to the window to handle its visibility based on the OSD configuration. - * - * @param self The Widget.Window instance to set up. - */ -export const windowSetup = (self: Widget.Window): void => { - self.hook(enable, () => { - handleReveal(self, 'visible'); - }); - - self.hook(brightnessService, 'notify::screen', () => { - handleReveal(self, 'visible'); - }); - - self.hook(brightnessService, 'notify::kbd', () => { - handleReveal(self, 'visible'); - }); - - Variable.derive( - [bind(audioService.defaultMicrophone, 'volume'), bind(audioService.defaultMicrophone, 'mute')], - () => { - handleReveal(self, 'visible'); - }, ); - - Variable.derive([bind(audioService.defaultSpeaker, 'volume'), bind(audioService.defaultSpeaker, 'mute')], () => { - handleReveal(self, 'visible'); - }); }; /** @@ -149,25 +73,25 @@ export const windowSetup = (self: Widget.Window): void => { */ export const revealerSetup = (self: Widget.Revealer): void => { self.hook(enable, () => { - handleReveal(self, 'revealChild'); + handleReveal(self); }); self.hook(brightnessService, 'notify::screen', () => { - handleReveal(self, 'revealChild'); + handleReveal(self); }); self.hook(brightnessService, 'notify::kbd', () => { - handleReveal(self, 'revealChild'); + handleReveal(self); }); Variable.derive( [bind(audioService.defaultMicrophone, 'volume'), bind(audioService.defaultMicrophone, 'mute')], () => { - handleReveal(self, 'revealChild'); + handleReveal(self); }, ); Variable.derive([bind(audioService.defaultSpeaker, 'volume'), bind(audioService.defaultSpeaker, 'mute')], () => { - handleReveal(self, 'revealChild'); + handleReveal(self); }); }; diff --git a/src/components/osd/index.tsx b/src/components/osd/index.tsx index e9b5143..746578b 100644 --- a/src/components/osd/index.tsx +++ b/src/components/osd/index.tsx @@ -2,7 +2,7 @@ import options from 'src/options'; import { getPosition } from 'src/lib/utils'; import { bind } from 'astal'; import { Astal } from 'astal/gtk3'; -import { getOsdMonitor, windowSetup } from './helpers'; +import { getOsdMonitor } from './helpers'; import { OsdRevealer } from './OsdRevealer'; const { location } = options.theme.osd; @@ -10,14 +10,18 @@ const { location } = options.theme.osd; export default (): JSX.Element => { return ( (tear ? Astal.Layer.TOP : Astal.Layer.OVERLAY))} anchor={bind(location).as((anchorPoint) => getPosition(anchorPoint))} - setup={windowSetup} + setup={(self) => { + getOsdMonitor().subscribe(() => { + self.set_click_through(true); + }); + }} clickThrough > diff --git a/src/components/settings/pages/config/osd/index.tsx b/src/components/settings/pages/config/osd/index.tsx index 9da652b..2592d68 100644 --- a/src/components/settings/pages/config/osd/index.tsx +++ b/src/components/settings/pages/config/osd/index.tsx @@ -42,13 +42,14 @@ export const OSDSettings = (): JSX.Element => { subtitle="OSD follows monitor of cursor" type="boolean" /> -