Added basic Calendar menu (WIP)

modules/bar/clock/index.js

@@ -9,6 +9,9 @@ const Clock = () => {
       label: date.bind(),
     }),
     isVisible: true,
+    props: {
+      on_primary_click: () => App.toggleWindow("calendarmenu"),
+    },
   };
 };
 

modules/bar/notifications/index.js

@@ -10,7 +10,7 @@ export const Notifications = () => {
         hexpand: true,
         class_name: "bar-notifications",
         child: Widget.Label({
-          hpack: "start",
+          hpack: "center",
           hexpand: true,
           class_name: "bar-notifications-label",
           setup: (self) => {

modules/menus/DropdownMenu.js

@@ -8,7 +8,6 @@ export const Padding = (name) =>
     child: Widget.Box(),
     setup: (w) => w.on("button-press-event", () => App.toggleWindow(name)),
   });
-
 const moveBoxToCursor = (self, minWidth, minHeight, fixed) => {
   globalMousePos.connect("changed", ({ value }) => {
     let monWidth = hyprland.monitors[hyprland.active.monitor.id].width;
@@ -73,6 +72,7 @@ export default ({
           moveBoxToCursor(self, minWidth, minHeight, fixed);
         },
         child: Widget.Box({
+          class_name: "dropdown-menu-container",
           css: "padding: 1px; margin: -1px;",
           child: Widget.Revealer({
             revealChild: false,

modules/menus/calendar/index.js

@@ -0,0 +1,34 @@
+import PopupWindow from "../PopupWindow.js";
+import icons from "../../icons/index.js";
+
+export default () => {
+  return PopupWindow({
+    name: "calendarmenu",
+    visible: false,
+    transition: "crossfade",
+    layout: "top-right",
+    child: Widget.Box({
+      class_name: "calendar-menu-content",
+      css: "padding: 1px; margin: -1px;",
+      vexpand: false,
+      children: [
+        Widget.Box({
+          class_name: "calendar-content-container",
+          children: [
+            Widget.Box({
+              class_name: "calendar-content-items",
+              children: [
+                Widget.Calendar({
+                  class_name: "calendar-menu-calendar",
+                  showDayNames: true,
+                  showDetails: true,
+                  showHeading: true,
+                }),
+              ],
+            }),
+          ],
+        }),
+      ],
+    }),
+  });
+};

modules/menus/main.js

@@ -5,5 +5,6 @@ import NetworkMenu from "./network/index.js";
 import BluetoothMenu from "./bluetooth/index.js";
 import MediaMenu from "./media/index.js";
 import NotificationsMenu from "./notifications/index.js";
+import CalendarMenu from "./calendar/index.js";
 
-export default [PowerMenu(), Verification(), AudioMenu(), NetworkMenu(), BluetoothMenu(), MediaMenu(), NotificationsMenu()];
+export default [PowerMenu(), Verification(), AudioMenu(), NetworkMenu(), BluetoothMenu(), MediaMenu(), NotificationsMenu(), CalendarMenu()];

modules/menus/network/index.js

@@ -398,6 +398,18 @@ export default () => {
                           });
                       }
 
+                      if (sortedNetworks.length <= 0) {
+                        return self.children = [
+                          Widget.Label({
+                            class_name: "not-found-label dim",
+                            expand: true,
+                            hpack: "center",
+                            vpack: "center",
+                            label: "No Wifi Networks Found"
+                          })
+                        ]
+                      }
+
                       return (self.children = sortedNetworks.map((accPoint) => {
                         return Widget.Box({
                           vertical: true,

modules/menus/notifications/index.js

@@ -63,6 +63,7 @@ export default () => {
                             }),
                             Widget.Button({
                               class_name: "clear-notifications-button",
+                              tooltip_text: "Clear Notifications",
                               on_primary_click: () => notifs.clear(),
                               child: Widget.Label({
                                 class_name: "clear-notifications-label",

scss/bar/bar.scss

@@ -5,8 +5,8 @@
 }
 
 .bar_item_box_visible {
-  background: $surface0;
+  background: transparentize($surface0, 0.2);
-  border-radius: 0.35rem;
+  border-radius: 0.35em;
   padding: 0.2rem 0.9rem;
   margin: 0.5rem 0.25rem;
 

scss/bar/notifications.scss

@@ -1,8 +1,7 @@
 @import "../colors";
 
 .bar-notifications-label {
-  color: $yellow;
+  color: $lavender;
   font-size: 1.3em;
   min-width: 1em;
-  margin-right: 0.15em;
 }

scss/bar/workspace.scss

@@ -8,8 +8,8 @@
     border-radius: 1.9rem * .6;
     margin: 0rem 0.5rem * .5;
     transition: 300ms * .5;
-    background-color: $mauve;
+    background-color: $sky;
-    color: $mauve;
+    color: $sky;
 
     &.occupied {
       background-color: $yellow;
@@ -19,8 +19,8 @@
     }
 
     &.active {
-      color: $sky;
+      color: $lavender;
-      background-color: $sky;
+      background-color: $lavender;
       min-width: 11em;
       min-height: 4.5em;
     }

scss/main.scss

@@ -33,6 +33,7 @@
 @import "menus/bluetooth";
 @import "menus/media";
 @import "menus/notifications";
+@import "menus/calendar";
 
 //notifications
 @import "notifications/popups";

scss/menus/calendar.scss

@@ -0,0 +1,49 @@
+@import "../colors";
+
+.calendar-content-container {
+  margin-top: 0em;
+  min-width: 16em;
+  min-height: 6em;
+  background: $mantle;
+  border: 0.13em solid $surface0; border-radius: 0.4em;
+}
+
+.window-content.calendarmenu-window {
+  margin-right: 0.50em;
+}
+
+.calendar-content-items {
+  margin: 1em;
+}
+
+.calendar-menu-calendar {
+  all: unset;
+  padding: 1em;
+  color: $text;
+
+  &:selected {
+    box-shadow: inset 0 -0.4em 0 0 $pink,
+      inset 0 -0.2em 0 0 $mantle,
+      inset 0 0 0 0.01em $mantle;
+    color: $pink;
+    border-radius: 0em;
+  }
+
+  &.header {
+    background-color: transparent;
+    color: $teal;
+  }
+
+  &.highlight {
+    border: 2em solid $pink;
+    background-color: transparent;
+    color: $pink;
+  }
+
+  &:indeterminate {
+    color: $surface2;
+  }
+
+  font-size: 1.1em;
+  padding: 0.2em;
+}

scss/menus/media.scss

@@ -4,7 +4,7 @@
   min-width: 40rem;
   min-height: 10rem;
   background: $mantle;
-  border: 0.25rem solid $surface0; 
+  border: 0.13em solid $surface0; 
   border-radius: 0.4rem;
 }
 
@@ -82,12 +82,6 @@
   min-width: 2em;
   border-radius: 0.2rem;
 
-  tooltip {
-    min-width: 10rem;
-    min-height: 10rem;
-    background: red;
-  }
-
   &.disabled {
     background: $surface0;
   }
@@ -122,7 +116,7 @@ image {
     highlight,
     progress {
       min-height: 1rem;
-      background: $pink;
+      background: $lavender;
       border-radius: 0.3rem;
     }
   }

scss/menus/menu.scss

@@ -79,6 +79,10 @@
     }
 }
 
+tooltip label {
+    font-size: 0.9em;
+}
+
 .menu-separator {
     min-height: .1rem;
     margin: .6rem 0rem;
@@ -87,7 +91,7 @@
 
 .menu-items {
     background: $mantle;
-    border: .25rem solid $surface0;
+    border: .13em solid $surface0;
     border-radius: .5rem;
     min-width: 375px;
     color: $text;
@@ -184,3 +188,12 @@
 .menu-item-box {
     margin-bottom: 0.5rem;
 }
+.dropdown-menu-container {
+    // margin: 1.5em;
+    // box-shadow: 0 0 0.6em $mantle;
+}
+
+.top-right-event-box_top *{
+  min-height: 0em;
+  margin-top: 2.5em;
+}

scss/menus/notifications.scss

@@ -5,7 +5,7 @@
   min-width: 26em;
   min-height: 6em;
   background: $mantle;
-  border: 0.2em solid $surface0; border-radius: 0.4em;
+  border: 0.13em solid $surface0; border-radius: 0.4em;
 }
 
 .window-content.notificationsmenu-window {
@@ -67,8 +67,3 @@
   color: $red;
   font-size: 1.5em;
 }
-
-.top-right-event-box_top *{
-  min-height: 0em;
-  margin-top: 2.5em;
-}

style.css

@@ -334,8 +334,8 @@ spinner:checked {
   border-radius: 1.14rem;
   margin: 0rem 0.25rem;
   transition: 150ms;
-  background-color: #cba6f7;
+  background-color: #89dceb;
-  color: #cba6f7;
+  color: #89dceb;
 }
 .workspaces label.occupied {
   background-color: #f9e2af;
@@ -344,8 +344,8 @@ spinner:checked {
   min-height: 4.5em;
 }
 .workspaces label.active {
-  color: #89dceb;
+  color: #b4befe;
-  background-color: #89dceb;
+  background-color: #b4befe;
   min-width: 11em;
   min-height: 4.5em;
 }
@@ -389,10 +389,9 @@ spinner:checked {
 }
 
 .bar-notifications-label {
-  color: #f9e2af;
+  color: #b4befe;
   font-size: 1.3em;
   min-width: 1em;
-  margin-right: 0.15em;
 }
 
 .bar-power_label {
@@ -405,8 +404,8 @@ spinner:checked {
 }
 
 .bar_item_box_visible {
-  background: #313244;
+  background: rgba(49, 50, 68, 0.8);
-  border-radius: 0.35rem;
+  border-radius: 0.35em;
   padding: 0.2rem 0.9rem;
   margin: 0.5rem 0.25rem;
 }
@@ -485,6 +484,10 @@ spinner:checked {
 .menu-switch:active {
   background-color: #89dceb;
 }
+tooltip label {
+  font-size: 0.9em;
+}
+
 .menu-separator {
   min-height: 0.1rem;
   margin: 0.6rem 0rem;
@@ -493,7 +496,7 @@ spinner:checked {
 
 .menu-items {
   background: #181825;
-  border: 0.25rem solid #313244;
+  border: 0.13em solid #313244;
   border-radius: 0.5rem;
   min-width: 375px;
   color: #cdd6f4;
@@ -591,6 +594,11 @@ spinner:checked {
   margin-bottom: 0.5rem;
 }
 
+.top-right-event-box_top * {
+  min-height: 0em;
+  margin-top: 2.5em;
+}
+
 window#powermenu,
 window#verification {
   background-color: rgba(0, 0, 0, 0.4);
@@ -909,7 +917,7 @@ window#powermenu .powermenu.box {
   min-width: 40rem;
   min-height: 10rem;
   background: #181825;
-  border: 0.25rem solid #313244;
+  border: 0.13em solid #313244;
   border-radius: 0.4rem;
 }
 
@@ -985,11 +993,6 @@ window#powermenu .powermenu.box {
   min-width: 2em;
   border-radius: 0.2rem;
 }
-.media-indicator-control-button tooltip {
-  min-width: 10rem;
-  min-height: 10rem;
-  background: red;
-}
 .media-indicator-control-button.disabled {
   background: #313244;
 }
@@ -1019,7 +1022,7 @@ image {
 .menu-slider.media.progress trough highlight,
 .menu-slider.media.progress trough progress {
   min-height: 1rem;
-  background: #f5c2e7;
+  background: #b4befe;
   border-radius: 0.3rem;
 }
 .menu-slider.media.progress slider {
@@ -1042,7 +1045,7 @@ image {
   min-width: 26em;
   min-height: 6em;
   background: #181825;
-  border: 0.2em solid #313244;
+  border: 0.13em solid #313244;
   border-radius: 0.4em;
 }
 
@@ -1103,9 +1106,46 @@ image {
   font-size: 1.5em;
 }
 
-.top-right-event-box_top * {
+.calendar-content-container {
-  min-height: 0em;
+  margin-top: 0em;
-  margin-top: 2.5em;
+  min-width: 16em;
+  min-height: 6em;
+  background: #181825;
+  border: 0.13em solid #313244;
+  border-radius: 0.4em;
+}
+
+.window-content.calendarmenu-window {
+  margin-right: 0.5em;
+}
+
+.calendar-content-items {
+  margin: 1em;
+}
+
+.calendar-menu-calendar {
+  all: unset;
+  padding: 1em;
+  color: #cdd6f4;
+  font-size: 1.1em;
+  padding: 0.2em;
+}
+.calendar-menu-calendar:selected {
+  box-shadow: inset 0 -0.4em 0 0 #f5c2e7, inset 0 -0.2em 0 0 #181825, inset 0 0 0 0.01em #181825;
+  color: #f5c2e7;
+  border-radius: 0em;
+}
+.calendar-menu-calendar.header {
+  background-color: transparent;
+  color: #94e2d5;
+}
+.calendar-menu-calendar.highlight {
+  border: 2em solid #f5c2e7;
+  background-color: transparent;
+  color: #f5c2e7;
+}
+.calendar-menu-calendar:indeterminate {
+  color: #585b70;
 }
 
 .notification-card-container {