Update the media menu - move time stamp to tooltip

modules/bar/bar.js

@@ -18,6 +18,7 @@ const closeAllMenus = () => {
   App.closeWindow("audiomenu");
   App.closeWindow("networkmenu");
   App.closeWindow("mediamenu");
+  App.closeWindow("calendarmenu");
 }
 
 // layout of the bar

modules/bar/clock/index.js

@@ -1,3 +1,5 @@
+import { closeAllMenus } from "../bar.js";
+
 const date = Variable("", {
   poll: [1000, 'date "+󰃭  %a %b %d    %I:%M:%S %p"'],
 });
@@ -10,7 +12,10 @@ const Clock = () => {
     }),
     isVisible: true,
     props: {
-      on_primary_click: () => App.toggleWindow("calendarmenu"),
+      on_primary_click: () => {
+        closeAllMenus();
+        App.toggleWindow("calendarmenu");
+      },
     },
   };
 };

modules/menus/media/index.js

@@ -107,6 +107,7 @@ export default () => {
                                 children: [
                                   Widget.Label({
                                     truncate: "end",
+                                    max_width_chars: 21,
                                     wrap: true,
                                     class_name:
                                       "media-indicator-current-song-name-label",
@@ -249,45 +250,11 @@ export default () => {
                             class_name: "media-indicator-current-progress-bar",
                             hexpand: true,
                             children: [
-                              Widget.Label({
-                                class_name: "media-indicator-time current",
-                                vpack: "center",
-                                setup: (self) => {
-                                  function update() {
-                                    const curHour = Math.floor(
-                                      curPlayer.position / 3600,
-                                    );
-                                    const curMin = Math.floor(
-                                      (curPlayer.position % 3600) / 60,
-                                    );
-                                    const curSec = Math.floor(
-                                      curPlayer.position % 60,
-                                    );
-
-                                    if (
-                                      typeof curPlayer.position === "number" &&
-                                      curPlayer.position >= 0
-                                    ) {
-                                      // WARN: These nested ternaries are absolutely disgusting lol
-                                      self.label = `${
-                                        curHour > 0
-                                          ? (curHour < 10
-                                              ? "0" + curHour
-                                              : curHour) + ":"
-                                          : ""
-                                      }${curMin < 10 ? "0" + curMin : curMin}:${curSec < 10 ? "0" + curSec : curSec}`;
-                                    } else {
-                                      self.label = `00:00`;
-                                    }
-                                  }
-                                  self.poll(1000, update);
-                                  self.hook(curPlayer, update);
-                                },
-                              }),
                               Widget.Box({
                                 hexpand: true,
                                 child: Widget.Slider({
                                   hexpand: true,
+                                  tooltip_text: "yoyo",
                                   class_name: "menu-slider media progress",
                                   draw_value: false,
                                   on_change: ({ value }) =>
@@ -312,38 +279,40 @@ export default () => {
                                     self.hook(curPlayer, update);
                                     self.hook(curPlayer, update, "position");
                                     self.poll(1000, update);
+
+                                    function updateTooltip() {
+                                      const curHour = Math.floor(
+                                        curPlayer.position / 3600,
+                                      );
+                                      const curMin = Math.floor(
+                                        (curPlayer.position % 3600) / 60,
+                                      );
+                                      const curSec = Math.floor(
+                                        curPlayer.position % 60,
+                                      );
+
+                                      if (
+                                        typeof curPlayer.position ===
+                                          "number" &&
+                                        curPlayer.position >= 0
+                                      ) {
+                                        // WARN: These nested ternaries are absolutely disgusting lol
+                                        self.tooltip_text = `${
+                                          curHour > 0
+                                            ? (curHour < 10
+                                                ? "0" + curHour
+                                                : curHour) + ":"
+                                            : ""
+                                        }${curMin < 10 ? "0" + curMin : curMin}:${curSec < 10 ? "0" + curSec : curSec}`;
+                                      } else {
+                                        self.tooltip_text = `00:00`;
+                                      }
+                                    }
+                                    self.poll(1000, updateTooltip);
+                                    self.hook(curPlayer, updateTooltip);
                                   },
                                 }),
                               }),
-                              Widget.Label({
-                                class_name: "media-indicator-time total",
-                                setup: (self) => {
-                                  const update = () => {
-                                    const totalSeconds = curPlayer.length;
-                                    const curHour = Math.floor(
-                                      totalSeconds / 3600,
-                                    );
-                                    const curMin = Math.floor(
-                                      (totalSeconds % 3600) / 60,
-                                    );
-                                    const curSec = Math.floor(
-                                      totalSeconds % 60,
-                                    );
-
-                                    self.label = `${
-                                      curHour > 0
-                                        ? (curHour < 10
-                                            ? "0" + curHour
-                                            : curHour) + ":"
-                                        : ""
-                                    }${curMin < 10 ? "0" + curMin : curMin}:${
-                                      curSec < 10 ? "0" + curSec : curSec
-                                    }`;
-                                  };
-
-                                  self.hook(curPlayer, update);
-                                },
-                              }),
                             ],
                           }),
                         ],

scss/bar/workspace.scss

@@ -21,7 +21,7 @@
     &.active {
       color: $pink;
       background-color: $pink;
-      min-width: 11em;
+      min-width: 14em;
       min-height: 4.5em;
     }
   }

scss/menus/media.scss

@@ -1,7 +1,7 @@
 @import "../colors";
 
 .media-indicator-container {
-  min-width: 40rem;
+  min-width: 35rem;
   min-height: 10rem;
   background: $mantle;
   border: 0.13em solid $surface0; 
@@ -17,17 +17,13 @@
   border: 0.2em solid $surface0; 
   background-color: $surface0;
   border-radius: 0.25em;
-  min-width: 8.3em;
+  min-width: 8.5em;
-  min-height: 8.3em;
+  min-height: 8.5em;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
 }
 
-.media-indicator-right-section {
-  margin-left: 2rem;
-}
-
 .media-indicator-current-song-name {
   margin-bottom: 0.75rem;
 }
@@ -38,7 +34,7 @@
 
 .media-indicator-current-song-name-label {
   color: $lavender;
-  font-size: 1.4em;
+  font-size: 1.35em;
 }
 
 .media-indicator-current-song-author-label {
@@ -60,21 +56,6 @@
   margin: 0rem 0.5rem;
 }
 
-.media-indicator-time {
-  color: $overlay2;
-  font-size: 0.8em;
-  font-weight: 800;
-  margin-top: 0.9rem;
-
-  &.total {
-    margin-left: 1.2rem;
-  }
-
-  &.current {
-    margin-right: 1.2rem;
-  }
-}
-
 .media-indicator-control-button {
   background: $lavender;
   color: $crust;
@@ -107,7 +88,7 @@ image {
 .menu-slider.media.progress {
   margin-top: 1rem;
   min-height: 2em;
-  min-width: 15em;
+  min-width: 12em;
 
   trough {
     background: $base;

scss/menus/notifications.scss

@@ -4,7 +4,7 @@
   margin-top: 0em;
   min-width: 26em;
   min-height: 6em;
-  background: $mantle;
+  background: $crust;
   border: 0.13em solid $surface0; border-radius: 0.4em;
 }
 
@@ -24,7 +24,7 @@
 }
 
 .notification-card.menu {
-  background: $crust;
+  background: $base;
   border: 0.1em solid $surface0;
   margin: 0em;
 }

style.css

@@ -346,7 +346,7 @@ spinner:checked {
 .workspaces label.active {
   color: #f5c2e7;
   background-color: #f5c2e7;
-  min-width: 11em;
+  min-width: 14em;
   min-height: 4.5em;
 }
 
@@ -916,7 +916,7 @@ window#powermenu .powermenu.box {
 }
 
 .media-indicator-container {
-  min-width: 40rem;
+  min-width: 35rem;
   min-height: 10rem;
   background: #181825;
   border: 0.13em solid #313244;
@@ -932,17 +932,13 @@ window#powermenu .powermenu.box {
   border: 0.2em solid #313244;
   background-color: #313244;
   border-radius: 0.25em;
-  min-width: 8.3em;
+  min-width: 8.5em;
-  min-height: 8.3em;
+  min-height: 8.5em;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
 }
 
-.media-indicator-right-section {
-  margin-left: 2rem;
-}
-
 .media-indicator-current-song-name {
   margin-bottom: 0.75rem;
 }
@@ -953,7 +949,7 @@ window#powermenu .powermenu.box {
 
 .media-indicator-current-song-name-label {
   color: #b4befe;
-  font-size: 1.4em;
+  font-size: 1.35em;
 }
 
 .media-indicator-current-song-author-label {
@@ -975,19 +971,6 @@ window#powermenu .powermenu.box {
   margin: 0rem 0.5rem;
 }
 
-.media-indicator-time {
-  color: #9399b2;
-  font-size: 0.8em;
-  font-weight: 800;
-  margin-top: 0.9rem;
-}
-.media-indicator-time.total {
-  margin-left: 1.2rem;
-}
-.media-indicator-time.current {
-  margin-right: 1.2rem;
-}
-
 .media-indicator-control-button {
   background: #b4befe;
   color: #11111b;
@@ -1015,7 +998,7 @@ image {
 .menu-slider.media.progress {
   margin-top: 1rem;
   min-height: 2em;
-  min-width: 15em;
+  min-width: 12em;
 }
 .menu-slider.media.progress trough {
   background: #1e1e2e;
@@ -1046,7 +1029,7 @@ image {
   margin-top: 0em;
   min-width: 26em;
   min-height: 6em;
-  background: #181825;
+  background: #11111b;
   border: 0.13em solid #313244;
   border-radius: 0.4em;
 }
@@ -1067,7 +1050,7 @@ image {
 }
 
 .notification-card.menu {
-  background: #11111b;
+  background: #1e1e2e;
   border: 0.1em solid #313244;
   margin: 0em;
 }