diff --git a/scss/popdowns/bluetoothdevices.scss b/scss/popdowns/bluetoothdevices.scss new file mode 100644 index 00000000..e426b27b --- /dev/null +++ b/scss/popdowns/bluetoothdevices.scss @@ -0,0 +1,43 @@ +@use "sass:color"; +@use "../scheme"; +@use "../lib"; +@use "../font"; + +$-accent: scheme.$rosewater; + +.bluetooth-devices { + @include lib.popdown-window($-accent); + + min-width: lib.s(500); + min-height: lib.s(400); + + .list { + @include lib.spacing($vertical: true); + + color: scheme.$text; + + .device { + @include lib.spacing(8); + + .icon { + font-size: lib.s(18); + } + + button { + @include lib.rounded(5); + @include lib.element-decel; + + padding: lib.s(3) lib.s(8); + + &:hover, + &:focus { + background-color: scheme.$surface0; + } + + &:active { + background-color: scheme.$surface1; + } + } + } + } +} diff --git a/scss/popdowns/index.scss b/scss/popdowns/index.scss new file mode 100644 index 00000000..81855d3c --- /dev/null +++ b/scss/popdowns/index.scss @@ -0,0 +1,3 @@ +@forward "notifications"; +@forward "updates"; +@forward "bluetoothdevices"; diff --git a/scss/notifications.scss b/scss/popdowns/notifications.scss similarity index 95% rename from scss/notifications.scss rename to scss/popdowns/notifications.scss index e955a4c4..c7914c2a 100644 --- a/scss/notifications.scss +++ b/scss/popdowns/notifications.scss @@ -1,7 +1,7 @@ @use "sass:color"; -@use "scheme"; -@use "lib"; -@use "font"; +@use "../scheme"; +@use "../lib"; +@use "../font"; @mixin popup($accent) { .separator { diff --git a/scss/updates.scss b/scss/popdowns/updates.scss similarity index 68% rename from scss/updates.scss rename to scss/popdowns/updates.scss index 12da9771..d11a551d 100644 --- a/scss/updates.scss +++ b/scss/popdowns/updates.scss @@ -1,12 +1,12 @@ @use "sass:color"; -@use "scheme"; -@use "lib"; -@use "font"; +@use "../scheme"; +@use "../lib"; +@use "../font"; -$accent: scheme.$blue; +$-accent: scheme.$blue; .updates { - @include lib.popdown-window($accent); + @include lib.popdown-window($-accent); min-width: lib.s(600); min-height: lib.s(400); @@ -16,11 +16,11 @@ $accent: scheme.$blue; &:hover, &:focus { - color: color.mix($accent, scheme.$base, 80%); + color: color.mix($-accent, scheme.$base, 80%); } &:active { - color: color.mix($accent, scheme.$base, 60%); + color: color.mix($-accent, scheme.$base, 60%); } } diff --git a/src/modules/bar.tsx b/src/modules/bar.tsx index 1bcbc08a..0bc4485f 100644 --- a/src/modules/bar.tsx +++ b/src/modules/bar.tsx @@ -36,6 +36,14 @@ const hookFocusedClientProp = ( callback(lastClient); }; +const togglePopup = (self: JSX.Element, event: Astal.ClickEvent, name: string) => { + const popup = App.get_window(name) as PopupWindow | null; + if (popup) { + if (popup.visible) popup.hide(); + else popup.popup_at_widget(self, event); + } +}; + const OSIcon = () =>