Finish notifications menu

modules/bar/notifications/index.js

@@ -1,9 +1,6 @@
 const notifs = await Service.import("notifications");
 
 export const Notifications = () => {
-  notifs.connect("changed", () => {
-    console.log(JSON.stringify(notifs, null, 2));
-  });
   return {
     component: Widget.Box({
       hpack: "start",

modules/bar/window_title/index.js

@@ -9,9 +9,9 @@ const filterTitle = (windowtitle) => {
     ["org.kde.dolphin", "   Dolphin"],
     ["plex", "󰚺   Plex"],
     ["steam", "   Steam"],
-    ["", "󰇄   Desktop"],
     ["spotify", "󰓇   Spotify"],
     ["obsidian", "󱓧   Obsidian"],
+    ["^$", "󰇄   Desktop"],
     ["(.+)", `󰣆   ${windowtitle.class.charAt(0).toUpperCase() + windowtitle.class.slice(1)}`],
   ];
 

modules/menus/PopupWindow.js

@@ -1,33 +1,34 @@
-export const Padding = (name) => Widget.EventBox({
+export const Padding = (name, opts = {}) =>
+  Widget.EventBox({
+    class_name: opts?.className || "",
     hexpand: true,
-    vexpand: true,
+    vexpand: typeof opts?.vexpand === "boolean" ? opts.vexpand : true,
     can_focus: false,
     child: Widget.Box(),
-    setup: w => w.on("button-press-event", () => App.toggleWindow(name)),
-})
+    setup: (w) => w.on("button-press-event", () => App.toggleWindow(name)),
+  });
 
-const PopupRevealer = (
-    name,
-    child,
-    transition = "slide_down",
-) => Widget.Box(
+const PopupRevealer = (name, child, transition = "slide_down") =>
+  Widget.Box(
     { css: "padding: 1px;" },
     Widget.Revealer({
       transition,
       child: Widget.Box({
-            class_name: `window-content ${name}`,
+        class_name: `window-content ${name}-window`,
         child,
       }),
       transitionDuration: 200,
-        setup: self => self.hook(App, (_, wname, visible) => {
-            if (wname === name)
-                self.reveal_child = visible
+      setup: (self) =>
+        self.hook(App, (_, wname, visible) => {
+          if (wname === name) self.reveal_child = visible;
         }),
     }),
-)
+  );
 
 const Layout = (name, child, transition) => ({
-    "center": () => Widget.CenterBox({},
+  center: () =>
+    Widget.CenterBox(
+      {},
       Padding(name),
       Widget.CenterBox(
         { vertical: true },
@@ -37,7 +38,9 @@ const Layout = (name, child, transition) => ({
       ),
       Padding(name),
     ),
-    "top": () => Widget.CenterBox({},
+  top: () =>
+    Widget.CenterBox(
+      {},
       Padding(name),
       Widget.Box(
         { vertical: true },
@@ -46,18 +49,26 @@ const Layout = (name, child, transition) => ({
       ),
       Padding(name),
     ),
-    "top-right": () => Widget.Box({},
+  "top-right": () =>
+    Widget.Box(
+      {},
       Padding(name),
       Widget.Box(
         {
           hexpand: false,
           vertical: true,
         },
+        Padding(name, {
+          vexpand: false,
+          className: "top-right-event-box_top",
+        }),
         PopupRevealer(name, child, transition),
         Padding(name),
       ),
     ),
-    "top-center": () => Widget.Box({},
+  "top-center": () =>
+    Widget.Box(
+      {},
       Padding(name),
       Widget.Box(
         {
@@ -69,7 +80,9 @@ const Layout = (name, child, transition) => ({
       ),
       Padding(name),
     ),
-    "top-left": () => Widget.Box({},
+  "top-left": () =>
+    Widget.Box(
+      {},
       Widget.Box(
         {
           hexpand: false,
@@ -80,7 +93,9 @@ const Layout = (name, child, transition) => ({
       ),
       Padding(name),
     ),
-    "bottom-left": () => Widget.Box({},
+  "bottom-left": () =>
+    Widget.Box(
+      {},
       Widget.Box(
         {
           hexpand: false,
@@ -91,7 +106,9 @@ const Layout = (name, child, transition) => ({
       ),
       Padding(name),
     ),
-    "bottom-center": () => Widget.Box({},
+  "bottom-center": () =>
+    Widget.Box(
+      {},
       Padding(name),
       Widget.Box(
         {
@@ -103,7 +120,9 @@ const Layout = (name, child, transition) => ({
       ),
       Padding(name),
     ),
-    "bottom-right": () => Widget.Box({},
+  "bottom-right": () =>
+    Widget.Box(
+      {},
       Padding(name),
       Widget.Box(
         {
@@ -114,7 +133,7 @@ const Layout = (name, child, transition) => ({
         PopupRevealer(name, child, transition),
       ),
     ),
-})
+});
 
 export default ({
   name,
@@ -123,10 +142,11 @@ export default ({
   transition,
   exclusivity = "ignore",
   ...props
-}) => Widget.Window({
+}) =>
+  Widget.Window({
     name,
     class_names: [name, "popup-window"],
-    setup: w => w.keybind("Escape", () => App.closeWindow(name)),
+    setup: (w) => w.keybind("Escape", () => App.closeWindow(name)),
     visible: false,
     keymode: "on-demand",
     exclusivity,
@@ -134,4 +154,4 @@ export default ({
     anchor: ["top", "bottom", "right", "left"],
     child: Layout(name, child, transition)[layout](),
     ...props,
-})
+  });

modules/menus/bluetooth/index.js

@@ -131,8 +131,6 @@ export default () => {
       });
     };
 
-    console.log(JSON.stringify(btDevices, null, 2));
-
     return btDevices.length === 0 ? noDevices() : deviceList();
   };
 

modules/menus/network/index.js

@@ -40,7 +40,6 @@ export default () => {
             vertical: true,
             setup: (self) => {
               self.hook(network, () => {
-                // console.log(JSON.stringify(network, null, 2));
                 self.hook(pendingAuth, () => {
                   let sortedNetworks = [];
 

modules/menus/notifications/index.js

@@ -19,10 +19,66 @@ export default () => {
           class_name: "notification-card-container menu",
           spacing: 0,
           vertical: true,
-          hexpand: true,
-          vexpand: false,
-          child: Widget.Box({
+          hexpand: false,
           vexpand: false,
+          children: [
+            Widget.Box({
+              class_name: "notification-menu-controls",
+              vertical: false,
+              children: [
+                Widget.Box({
+                  class_name: "menu-label-container notifications",
+                  hpack: "start",
+                  vpack: "center",
+                  expand: true,
+                  children: [
+                    Widget.Label({
+                      class_name: "menu-label notifications",
+                      label: "Notifications",
+                    }),
+                  ],
+                }),
+                Widget.Box({
+                  hpack: "end",
+                  vpack: "center",
+                  expand: false,
+                  children: [
+                    Widget.Switch({
+                      class_name: "menu-switch notifications",
+                      active: notifs.bind("dnd").as((dnd) => !dnd),
+                      on_activate: ({ active }) => {
+                        notifs.dnd = !active;
+                      },
+                    }),
+                  ],
+                }),
+              ],
+            }),
+            Widget.Separator({
+              class_name: "menu-separator notifications",
+            }),
+            Widget.Box({
+              hpack: "end",
+              children: notifs.bind("notifications").as((n) => {
+                if (n.length > 0) {
+                  return [
+                    Widget.Button({
+                      class_name: "clear-notifications-button",
+                      on_primary_click: () => notifs.clear(),
+                      child: Widget.Label({
+                        class_name: "clear-notifications-label",
+                        label: "clear",
+                      }),
+                    }),
+                  ];
+                }
+                return [];
+              }),
+            }),
+            Widget.Box({
+              class_name: "menu-content-container notifications",
+              hpack: "center",
+              expand: false,
               spacing: 0,
               vertical: true,
               setup: (self) => {
@@ -49,7 +105,10 @@ export default () => {
                   };
 
                   const actionsContainer = (notif) => {
-                  if (notif.actions !== undefined && notif.actions.length > 0) {
+                    if (
+                      notif.actions !== undefined &&
+                      notif.actions.length > 0
+                    ) {
                       return [
                         Widget.Box({
                           class_name: "notification-card-actions menu",
@@ -122,15 +181,29 @@ export default () => {
                     (a, b) => b.time - a.time,
                   );
 
+                  if (notifs.notifications.length <= 0) {
+                    return (self.children = [
+                      Widget.Box({
+                        vpack: "center",
+                        hpack: "center",
+                        expand: true,
+                        child: Widget.Label({
+                          class_name: "placehold-label dim",
+                          label: "You're all caught up :)",
+                        }),
+                      }),
+                    ]);
+                  }
+
                   return (self.children = sortedNotifications.map((notif) => {
                     return Widget.Box({
                       class_name: "notification-card menu",
-                    vpack: "start",
-                    hexpand: true,
+                      vpack: "center",
+                      hexpand: false,
                       children: [
                         ...imageContainer(notif),
                         Widget.Box({
-                        vpack: "start",
+                          vpack: "center",
                           vertical: true,
                           hexpand: true,
                           class_name: `notification-card-content ${notif.image === undefined ? "noimg" : " menu"}`,
@@ -181,7 +254,8 @@ export default () => {
                                   max_width_chars:
                                     notif.image === undefined ? 35 : 28,
                                   wrap: true,
-                                class_name: "notification-card-body-label menu",
+                                  class_name:
+                                    "notification-card-body-label menu",
                                   label: notif["body"],
                                 }),
                               ],
@@ -205,6 +279,7 @@ export default () => {
                 });
               },
             }),
+          ],
         }),
       ],
     }),

modules/notifications/index.js

@@ -17,10 +17,6 @@ export default () => {
       hexpand: true,
       setup: (self) => {
         self.hook(notifs, () => {
-          if (notifs.dnd) {
-            return [];
-          }
-
           const imageContainer = (notif) => {
             if (notif.image !== undefined) {
               return [

scss/bar/workspace.scss

@@ -3,8 +3,8 @@
 .workspaces {
   label {
     font-size: 0.2em;
-    min-width: 5em;
-    min-height: 5em;
+    min-width: 4.5em;
+    min-height: 4.5em;
     border-radius: 1.9rem * .6;
     margin: 0rem 0.5rem * .5;
     transition: 300ms * .5;
@@ -14,15 +14,15 @@
     &.occupied {
       background-color: $yellow;
       color: $yellow;
-      min-width: 5em;
-      min-height: 5em;
+      min-width: 4.5em;
+      min-height: 4.5em;
     }
 
     &.active {
       color: $sky;
       background-color: $sky;
       min-width: 11em;
-      min-height: 5em;
+      min-height: 4.5em;
     }
   }
 }

scss/main.scss

@@ -1,6 +1,6 @@
 * {
   all: unset;
-  font-family: "Ubuntu";
+  font-family: "Ubuntu Nerd Font";
   font-size: 1.2rem;
   font-weight: 600;
 }

scss/menus/menu.scss

@@ -70,22 +70,12 @@
 
     &:active {
         background-color: $sky;
-        highlight,
-        progress {
-        }
     }
 
     &:disabled {
-
-        highlight,
-        progress {
-        }
     }
 
     trough:focus {
-
-        slider {
-        }
     }
 }
 

scss/menus/notifications.scss

@@ -1,36 +1,67 @@
 @import "../colors";
 
 .notification-card-container.menu {
-  min-width: 28em;
-  min-height: 15em;
-  background: $base;
-  border: 0.2em solid $surface0; 
-  border-radius: 0.4em;
-}
-.notification-card-container-scroll.menu {
-  // background-color: $pink;
+  margin-top: 0em;
+  min-width: 26em;
+  min-height: 6em;
+  background: $mantle;
+  border: 0.2em solid $surface0; border-radius: 0.4em;
 }
 
-.window-content.notificationsmenu {
-  margin-top: -0.4em;
-  margin-right: 0.6em;
+.window-content.notificationsmenu-window {
+  margin-right: 0.50em;
+}
+
+.menu-content-container.notifications {
+  margin: 1em;
+  min-height: 4em;
+}
+
+.notification-menu-controls {
+  margin: 0em 1em;
 }
 
 .notification-card.menu {
-  border: 0em;
-  border-bottom: 0.25em solid $surface0;
-  border-radius: 0em;
-  margin: 0rem;
+  background: $crust;
+  border: 0.1em solid $surface0;
+  margin: 0em;
+}
 
-  &:first-child {
-    border-top: 0rem;
-  }
+.menu-label-container.notifications {
+  margin: 0em 0em;
+}
 
-  &:last-child {
-    border-bottom: 0rem;
-  }
+.menu-label.notifications {
+  color: $lavender;
+  margin: 0.9em 0.5em;
+  margin-bottom: 0.7em;
+}
 
-  &:not(:first-child) {
-    margin: 0rem;
+.menu-separator.notifications {
+  background-color: $surface0;
+  margin: 0em 1em;
+}
+.menu-switch.notifications:checked {
+    &:checked {
+        background: $lavender;
     }
 }
+
+.clear-notifications-button {
+  margin-right: 1em;
+  margin-top: 0.4em;
+
+  &:hover label {
+    color: $maroon;
+  }
+}
+
+.clear-notifications-label {
+  color: $lavender;
+  font-size: 0.9em;
+}
+
+.top-right-event-box_top *{
+  min-height: 0em;
+  margin-top: 2.5em;
+}

scss/menus/power.scss

@@ -19,14 +19,14 @@ window#verification .verification {
         margin-bottom: 0.4rem;
 
         .title {
-            font-size: 1.6em;
+            font-size: 1.5em;
             color: $maroon;
             margin-bottom: 0.75rem;
         }
 
         .desc {
             color: $lavender;
-            font-size: 1.1em;
+            font-size: 1em;
             margin-bottom: 0.75rem;
             padding: 1.15rem 2.25rem;
         }

scss/notifications/popups.scss

@@ -6,14 +6,14 @@
 .notification-card {
   color: $text;
   background: $mantle;
-  margin-right: 0.4rem;
-  border: 0.15rem solid $surface0;
-  min-width: 28rem;
+  margin-right: 0.45em;
+  border: 0.15em solid $surface0; 
+  min-width: 23.5em;
   min-height: 6rem;
-  border-radius: 0.4rem;
+  border-radius: 0.3em;
 
   &:not(:first-child) {
-    margin-top: 1rem;
+    margin-top: 0.85em;
   }
 }
 
@@ -23,58 +23,53 @@
 
 
 .notification-card-image-container {
-  margin: 0.75rem 0.75rem;
-  border-radius: 0.4rem;
+  margin: 0.65em 0.65em;
+  border-radius: 0.4em;
 }
 .notification-card-image {
-  border-radius: 0.4rem;
-  min-width: 3rem;
-  min-height: 3rem;
-  padding: 1rem 1rem;
+  border-radius: 0.4em;
+  min-width: 2.5em;
+  min-height: 2.5em;
+  padding: 0.85em 0.85em;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
 }
 
 .notification-card-content {
-  min-width: 3.5rem;
-  min-height: 3.5rem;
-  padding: 0.6rem 0.6rem;
+  min-width: 2.9em;
+  min-height: 2.9em;
+  padding: 0.5em 0.5em;
   margin-right: 1rem;
 }
 
 .notification-card-content.noimg {
-  margin-left: 1.5rem;
-  margin-top: .2rem;
-}
-
-.notification-card-appname-label {
-  font-size: 0.9rem;
-  color: $pink;
+  margin-left: 1.3em;
+  margin-top: .15em;
 }
 
 .notification-card-header-label {
-  font-size: 1.15rem;
-  margin-bottom: 0.5rem;
+  font-size: 0.95em;
+  margin-bottom: 0.5em;
   color: $lavender;
 }
 
 .notification-card-body-label {
-  font-size: 1rem;
+  font-size: 0.84em;
   font-weight: 600;
 }
 
 .notification-card-actions {
-  margin-top: 1rem;
-  margin-bottom: 0.5rem;
+  margin-top: 0.95em;
+  margin-bottom: 0.4em;
 }
 
 .notification-action-buttons {
   color: $lavender;
   background: $surface0;
-  min-width: 6rem;
-  min-height: 2rem;
-  border-radius: 0.2rem;
+  min-width: 4em;
+  min-height: 1.65em;
+  border-radius: 0.2em;
 
   &:not(:last-child) {
     margin-right: 2rem;
@@ -86,18 +81,18 @@
 }
 
 .notification-icon {
-  margin-bottom: 0.6rem;
-  font-size: 1.5rem;
+  margin-bottom: 0.4em;
+  font-size: 1.3em;
 }
 
 .close-notification-button {
   background: $red;
   color: $crust;
-  min-width: 2.5rem;
-  border-radius: 0rem 0.35rem 0.35rem 0rem;
+  min-width: 2.1em;
+  border-radius: 0rem 0.35em 0.35em 0em;
 
   label {
-    font-size: 1.7rem;
+    font-size: 1.5em;
   }
 
   &:hover {

style.css

@@ -1,6 +1,6 @@
 * {
   all: unset;
-  font-family: "Ubuntu";
+  font-family: "Ubuntu Nerd Font";
   font-size: 1.2rem;
   font-weight: 600;
 }
@@ -329,8 +329,8 @@ spinner:checked {
 
 .workspaces label {
   font-size: 0.2em;
-  min-width: 5em;
-  min-height: 5em;
+  min-width: 4.5em;
+  min-height: 4.5em;
   border-radius: 1.14rem;
   margin: 0rem 0.25rem;
   transition: 150ms;
@@ -340,14 +340,14 @@ spinner:checked {
 .workspaces label.occupied {
   background-color: #f9e2af;
   color: #f9e2af;
-  min-width: 5em;
-  min-height: 5em;
+  min-width: 4.5em;
+  min-height: 4.5em;
 }
 .workspaces label.active {
   color: #89dceb;
   background-color: #89dceb;
   min-width: 11em;
-  min-height: 5em;
+  min-height: 4.5em;
 }
 
 .workspaces label:not(:first-child) {
@@ -612,13 +612,13 @@ window#verification .verification .text-box {
   margin-bottom: 0.4rem;
 }
 window#verification .verification .text-box .title {
-  font-size: 1.6em;
+  font-size: 1.5em;
   color: #eba0ac;
   margin-bottom: 0.75rem;
 }
 window#verification .verification .text-box .desc {
   color: #b4befe;
-  font-size: 1.1em;
+  font-size: 1em;
   margin-bottom: 0.75rem;
   padding: 1.15rem 2.25rem;
 }
@@ -1038,32 +1038,68 @@ image {
   box-shadow: none;
 }
 .notification-card-container.menu {
-  min-width: 28em;
-  min-height: 15em;
-  background: #1e1e2e;
+  margin-top: 0em;
+  min-width: 26em;
+  min-height: 6em;
+  background: #181825;
   border: 0.2em solid #313244;
   border-radius: 0.4em;
 }
 
-.window-content.notificationsmenu {
-  margin-top: -0.4em;
-  margin-right: 0.6em;
+.window-content.notificationsmenu-window {
+  margin-right: 0.5em;
+}
+
+.menu-content-container.notifications {
+  margin: 1em;
+  min-height: 4em;
+}
+
+.notification-menu-controls {
+  margin: 0em 1em;
 }
 
 .notification-card.menu {
-  border: 0em;
-  border-bottom: 0.25em solid #313244;
-  border-radius: 0em;
-  margin: 0rem;
+  background: #11111b;
+  border: 0.1em solid #313244;
+  margin: 0em;
 }
-.notification-card.menu:first-child {
-  border-top: 0rem;
+
+.menu-label-container.notifications {
+  margin: 0em 0em;
 }
-.notification-card.menu:last-child {
-  border-bottom: 0rem;
+
+.menu-label.notifications {
+  color: #b4befe;
+  margin: 0.9em 0.5em;
+  margin-bottom: 0.7em;
 }
-.notification-card.menu:not(:first-child) {
-  margin: 0rem;
+
+.menu-separator.notifications {
+  background-color: #313244;
+  margin: 0em 1em;
+}
+
+.menu-switch.notifications:checked:checked {
+  background: #b4befe;
+}
+
+.clear-notifications-button {
+  margin-right: 1em;
+  margin-top: 0.4em;
+}
+.clear-notifications-button:hover label {
+  color: #eba0ac;
+}
+
+.clear-notifications-label {
+  color: #b4befe;
+  font-size: 0.9em;
+}
+
+.top-right-event-box_top * {
+  min-height: 0em;
+  margin-top: 2.5em;
 }
 
 .notification-card-container {
@@ -1073,14 +1109,14 @@ image {
 .notification-card {
   color: #cdd6f4;
   background: #181825;
-  margin-right: 0.4rem;
-  border: 0.15rem solid #313244;
-  min-width: 28rem;
+  margin-right: 0.45em;
+  border: 0.15em solid #313244;
+  min-width: 23.5em;
   min-height: 6rem;
-  border-radius: 0.4rem;
+  border-radius: 0.3em;
 }
 .notification-card:not(:first-child) {
-  margin-top: 1rem;
+  margin-top: 0.85em;
 }
 
 .notification-card-container {
@@ -1088,59 +1124,54 @@ image {
 }
 
 .notification-card-image-container {
-  margin: 0.75rem 0.75rem;
-  border-radius: 0.4rem;
+  margin: 0.65em 0.65em;
+  border-radius: 0.4em;
 }
 
 .notification-card-image {
-  border-radius: 0.4rem;
-  min-width: 3rem;
-  min-height: 3rem;
-  padding: 1rem 1rem;
+  border-radius: 0.4em;
+  min-width: 2.5em;
+  min-height: 2.5em;
+  padding: 0.85em 0.85em;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
 }
 
 .notification-card-content {
-  min-width: 3.5rem;
-  min-height: 3.5rem;
-  padding: 0.6rem 0.6rem;
+  min-width: 2.9em;
+  min-height: 2.9em;
+  padding: 0.5em 0.5em;
   margin-right: 1rem;
 }
 
 .notification-card-content.noimg {
-  margin-left: 1.5rem;
-  margin-top: 0.2rem;
-}
-
-.notification-card-appname-label {
-  font-size: 0.9rem;
-  color: #f5c2e7;
+  margin-left: 1.3em;
+  margin-top: 0.15em;
 }
 
 .notification-card-header-label {
-  font-size: 1.15rem;
-  margin-bottom: 0.5rem;
+  font-size: 0.95em;
+  margin-bottom: 0.5em;
   color: #b4befe;
 }
 
 .notification-card-body-label {
-  font-size: 1rem;
+  font-size: 0.84em;
   font-weight: 600;
 }
 
 .notification-card-actions {
-  margin-top: 1rem;
-  margin-bottom: 0.5rem;
+  margin-top: 0.95em;
+  margin-bottom: 0.4em;
 }
 
 .notification-action-buttons {
   color: #b4befe;
   background: #313244;
-  min-width: 6rem;
-  min-height: 2rem;
-  border-radius: 0.2rem;
+  min-width: 4em;
+  min-height: 1.65em;
+  border-radius: 0.2em;
 }
 .notification-action-buttons:not(:last-child) {
   margin-right: 2rem;
@@ -1150,18 +1181,18 @@ image {
 }
 
 .notification-icon {
-  margin-bottom: 0.6rem;
-  font-size: 1.5rem;
+  margin-bottom: 0.4em;
+  font-size: 1.3em;
 }
 
 .close-notification-button {
   background: #f38ba8;
   color: #11111b;
-  min-width: 2.5rem;
-  border-radius: 0rem 0.35rem 0.35rem 0rem;
+  min-width: 2.1em;
+  border-radius: 0rem 0.35em 0.35em 0em;
 }
 .close-notification-button label {
-  font-size: 1.7rem;
+  font-size: 1.5em;
 }
 .close-notification-button:hover {
   background: #eba0ac;