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 = () => ;
const ActiveWindow = () => (
@@ -315,10 +323,9 @@ const Network = () => (
const Bluetooth = () => (