Reworked audio menu styling

2024-06-28 21:44:56 -07:00
parent 52731236e9
commit 78496ae98a
13 changed files with 407 additions and 230 deletions
--- a/modules/menus/DropdownMenu.js
+++ b/modules/menus/DropdownMenu.js
@@ -43,7 +43,7 @@ export default ({
  child,
  layout = "center",
  transition,
-  minWidth = 375,
+  minWidth = 400,
  minHeight = 200,
  exclusivity = "ignore",
  fixed = false,
--- a/modules/menus/audio/index.js
+++ b/modules/menus/audio/index.js
@@ -19,7 +19,6 @@ export default () => {
      }
      return Widget.Button({
        class_name: `menu-button audio playback ${device}`,
-        cursor: "pointer",
        on_primary_click: () => (audio.speaker = device),
        child: Widget.Box({
          children: [
@@ -70,6 +69,32 @@ export default () => {
    });
  };

+  const getIcon = (audioVol, isMuted) => {
+    const speakerIcons = {
+      101: "audio-volume-overamplified-symbolic",
+      66: "audio-volume-high-symbolic",
+      34: "audio-volume-medium-symbolic",
+      1: "audio-volume-low-symbolic",
+      0: "audio-volume-muted-symbolic",
+    };
+
+    const inputIcons = {
+      66: "microphone-sensitivity-high-symbolic",
+      34: "microphone-sensitivity-medium-symbolic",
+      1: "microphone-sensitivity-low-symbolic",
+      0: "microphone-disabled-symbolic",
+    };
+
+    const icon = isMuted
+      ? 0
+      : [101, 66, 34, 1, 0].find((threshold) => threshold <= audioVol * 100);
+
+    return {
+      spkr: speakerIcons[icon],
+      mic: inputIcons[icon],
+    };
+  };
+
  const renderInputDevices = (inputDevices) => {
    if (!inputDevices.length) {
      return [
@@ -88,7 +113,6 @@ export default () => {
    }
    return inputDevices.map((device) => {
      return Widget.Button({
-        cursor: "pointer",
        on_primary_click: () => (audio.microphone = device),
        class_name: `menu-button audio input ${device}`,
        child: Widget.Box({
@@ -142,32 +166,57 @@ export default () => {

  const renderActivePlayback = () => {
    return [
-      Widget.Label({
-        class_name: "menu-active playback",
-        truncate: "end",
-        expand: true,
-        wrap: true,
-        label: audio.bind("speaker").as((v) => v.description || ""),
-      }),
      Widget.Box({
        class_name: "menu-slider-container playback",
        children: [
-          Widget.Label({
-            class_name: "menu-active-icon playback",
-            label: audio.speaker
-              .bind("volume")
-              .as((v) => `${v === 0 ? "󰖁" : "󰕾"}`),
+          Widget.Button({
+            vexpand: false,
+            vpack: "end",
+            setup: (self) => {
+              self.hook(audio, () => {
+                const spkr = audio.speaker;
+                const className = `menu-active-button playback ${spkr.is_muted ? "muted" : ""}`;
+                return (self.class_name = className);
+              });
+            },
+            on_primary_click: () =>
+              (audio.speaker.is_muted = !audio.speaker.is_muted),
+            child: Widget.Icon({
+              class_name: "menu-active-icon playback",
+              setup: (self) => {
+                self.hook(audio, () => {
+                  self.icon = getIcon(
+                    audio.speaker.volume,
+                    audio.speaker.is_muted,
+                  )["spkr"];
+                });
+              },
+            }),
          }),
-          Widget.Slider({
-            value: audio["speaker"].bind("volume"),
-            class_name: "menu-active-slider menu-slider playback",
-            draw_value: false,
-            hexpand: true,
-            min: 0,
-            max: 1,
-            onChange: ({ value }) => (audio.speaker.volume = value),
+          Widget.Box({
+            vertical: true,
+            children: [
+              Widget.Label({
+                class_name: "menu-active playback",
+                hpack: "start",
+                truncate: "end",
+                expand: true,
+                wrap: true,
+                label: audio.bind("speaker").as((v) => v.description || ""),
+              }),
+              Widget.Slider({
+                value: audio["speaker"].bind("volume"),
+                class_name: "menu-active-slider menu-slider playback",
+                draw_value: false,
+                hexpand: true,
+                min: 0,
+                max: 1,
+                onChange: ({ value }) => (audio.speaker.volume = value),
+              }),
+            ],
          }),
          Widget.Label({
+            vpack: "end",
            class_name: "menu-active-percentage playback",
            label: audio.speaker
              .bind("volume")
@@ -180,32 +229,57 @@ export default () => {

  const renderActiveInput = () => {
    return [
-      Widget.Label({
-        class_name: "menu-active input",
-        truncate: "end",
-        wrap: true,
-        label: audio.bind("microphone").as((v) => v.description || ""),
-      }),
      Widget.Box({
        class_name: "menu-slider-container input",
        children: [
-          Widget.Label({
-            class_name: "menu-active-icon input",
-            label: audio.microphone
-              .bind("volume")
-              .as((v) => `${v === 0 ? "󰍭" : "󰍬"}`),
+          Widget.Button({
+            vexpand: false,
+            vpack: "end",
+            setup: (self) => {
+              self.hook(audio, () => {
+                const mic = audio.microphone;
+                const className = `menu-active-button input ${mic.is_muted ? "muted" : ""}`;
+                return (self.class_name = className);
+              });
+            },
+            on_primary_click: () =>
+              (audio.microphone.is_muted = !audio.microphone.is_muted),
+            child: Widget.Icon({
+              class_name: "menu-active-icon input",
+              setup: (self) => {
+                self.hook(audio, () => {
+                  self.icon = getIcon(
+                    audio.microphone.volume,
+                    audio.microphone.is_muted,
+                  )["mic"];
+                });
+              },
+            }),
          }),
-          Widget.Slider({
-            value: audio.microphone.bind("volume").as((v) => v),
-            class_name: "menu-active-slider menu-slider inputs",
-            draw_value: false,
-            hexpand: true,
-            min: 0,
-            max: 1,
-            onChange: ({ value }) => (audio.microphone.volume = value),
+          Widget.Box({
+            vertical: true,
+            children: [
+              Widget.Label({
+                class_name: "menu-active input",
+                hpack: "start",
+                truncate: "end",
+                wrap: true,
+                label: audio.bind("microphone").as((v) => v.description || ""),
+              }),
+              Widget.Slider({
+                value: audio.microphone.bind("volume").as((v) => v),
+                class_name: "menu-active-slider menu-slider inputs",
+                draw_value: false,
+                hexpand: true,
+                min: 0,
+                max: 1,
+                onChange: ({ value }) => (audio.microphone.volume = value),
+              }),
+            ],
          }),
          Widget.Label({
            class_name: "menu-active-percentage input",
+            vpack: "end",
            label: audio.microphone
              .bind("volume")
              .as((v) => `${Math.floor(v * 100)}%`),
@@ -220,74 +294,111 @@ export default () => {
    transition: "crossfade",
    child: Widget.Box({
      class_name: "menu-items",
+      hpack: "fill",
+      hexpand: true,
      child: Widget.Box({
        vertical: true,
+        hpack: "fill",
+        hexpand: true,
        class_name: "menu-items-container",
        children: [
          Widget.Box({
-            class_name: "menu-dropdown-label-container",
-            hpack: "start",
-            children: [
-              Widget.Label({
-                class_name: "menu-dropdown-label audio",
-                label: "Audio",
-              }),
-            ],
-          }),
-          Widget.Separator({
-            class_name: "menu-separator",
-          }),
-          Widget.Box({
-            class_name: "menu-active-container playback",
-            vertical: true,
-            children: renderActivePlayback(),
-          }),
-          Widget.Box({
-            class_name: "menu-active-container input",
-            vertical: true,
-            children: renderActiveInput(),
-          }),
-          Widget.Separator({
-            class_name: "menu-separator",
-          }),
-          Widget.Box({
-            class_name: "menu-container playback",
+            class_name: "menu-section-container volume",
            vertical: true,
            children: [
              Widget.Box({
-                class_name: "menu-label-container",
+                class_name: "menu-label-container volume",
+                hpack: "fill",
                child: Widget.Label({
-                  class_name: "menu-label audio playback",
-                  label: "Playback Devices",
-                  hpack: "start",
+                  class_name: "menu-label audio volume",
+                  hexpand: true,
+                  hpack: "center",
+                  label: "Volume",
                }),
              }),
              Widget.Box({
+                class_name: "menu-items-section selected",
                vertical: true,
-                children: audio.bind("speakers").as((v) => renderPlaybacks(v)),
+                children: [
+                  Widget.Box({
+                    class_name: "menu-active-container playback",
+                    vertical: true,
+                    children: renderActivePlayback(),
+                  }),
+                  Widget.Box({
+                    class_name: "menu-active-container input",
+                    vertical: true,
+                    children: renderActiveInput(),
+                  }),
+                ],
              }),
            ],
          }),
-          Widget.Separator({
-            class_name: "menu-separator",
-          }),
          Widget.Box({
-            class_name: "menu-container input",
+            class_name: "menu-section-container playback",
            vertical: true,
            children: [
              Widget.Box({
-                class_name: "menu-label-container",
+                class_name: "menu-label-container playback",
+                hpack: "fill",
                child: Widget.Label({
-                  class_name: "menu-label audio input",
-                  hpack: "start",
+                  class_name: "menu-label audio playback",
+                  hexpand: true,
+                  hpack: "center",
+                  label: "Playback Devices",
+                }),
+              }),
+              Widget.Box({
+                class_name: "menu-items-section playback",
+                vertical: true,
+                children: [
+                  Widget.Box({
+                    class_name: "menu-container playback",
+                    vertical: true,
+                    children: [
+                      Widget.Box({
+                        vertical: true,
+                        children: audio
+                          .bind("speakers")
+                          .as((v) => renderPlaybacks(v)),
+                      }),
+                    ],
+                  }),
+                ],
+              }),
+            ],
+          }),
+          Widget.Box({
+            class_name: "menu-section-container input",
+            vertical: true,
+            children: [
+              Widget.Box({
+                class_name: "menu-label-container playback",
+                hpack: "fill",
+                child: Widget.Label({
+                  class_name: "menu-label audio playback",
+                  hexpand: true,
+                  hpack: "center",
                  label: "Input Devices",
                }),
              }),
              Widget.Box({
+                class_name: "menu-items-section input",
                vertical: true,
-                children: audio
-                  .bind("microphones")
-                  .as((v) => renderInputDevices(v)),
+                children: [
+                  Widget.Box({
+                    class_name: "menu-container input",
+                    vertical: true,
+                    children: [
+                      Widget.Box({
+                        vertical: true,
+                        children: audio
+                          .bind("microphones")
+                          .as((v) => renderInputDevices(v)),
+                      }),
+                    ],
+                  }),
+                ],
              }),
            ],
          }),
--- a/modules/menus/bluetooth/index.js
+++ b/modules/menus/bluetooth/index.js
@@ -222,9 +222,6 @@ export default () => {
    return Widget.Box({
      vertical: true,
      children: [
-        Widget.Separator({
-          class_name: "menu-separator",
-        }),
        Widget.Box({
          class_name: "menu-container bluetooth",
          children: [
@@ -347,9 +344,6 @@ export default () => {
              }),
            ],
          }),
-          Widget.Separator({
-            class_name: "menu-separator",
-          }),
          Widget.Box({
            vertical: true,
            children: bluetooth.bind("enabled").as((isOn) =>
--- a/modules/menus/calendar/index.js
+++ b/modules/menus/calendar/index.js
@@ -137,7 +137,9 @@ const WeatherWidget = () => {
            `curl "https://api.weatherapi.com/v1/forecast.json?key=${keyRing.weatherapi}&q=93722&days=1&aqi=no&alerts=no"`,
          )
            .then((res) => {
-              theWeather.value = JSON.parse(res);
+              if (typeof res === "string") {
+                theWeather.value = JSON.parse(res);
+              }
            })
            .catch((err) => {
              console.error(`Failed to fetch weather: ${err}`);
@@ -294,7 +296,7 @@ const WeatherWidget = () => {
                   * the hours left in the day are less than 4 (aka spilling into the next day),
                   * then rewind to contain the prediction within the current day.
                   */
-                  if (curHour > 20) {
+                  if (curHour > 19) {
                    const hoursToRewind = curHour - 19;
                    nextEpoch =
                      3600 * hoursFromNow +
--- a/modules/menus/network/index.js
+++ b/modules/menus/network/index.js
@@ -24,9 +24,6 @@ export default () => {
              }),
            ],
          }),
-          Widget.Separator({
-            class_name: "menu-separator",
-          }),
          Widget.Box({
            class_name: "menu-label-container network",
            child: Widget.Label({
@@ -239,9 +236,6 @@ export default () => {
              });
            },
          }),
-          Widget.Separator({
-            class_name: "menu-separator",
-          }),
          Widget.Box({
            children: [
              Widget.Box({
--- a/modules/menus/notifications/index.js
+++ b/modules/menus/notifications/index.js
@@ -52,29 +52,23 @@ export default () => {
                      },
                    }),
                    Widget.Box({
-                      children: notifs.bind("notifications").as((n) => {
-                        if (n.length > 0) {
-                          return [
-                            Widget.Separator({
-                              hpack: "center",
-                              vexpand: true,
-                              vertical: true,
-                              class_name:
-                                "menu-separator notification-controls",
-                            }),
-                            Widget.Button({
-                              class_name: "clear-notifications-button",
-                              tooltip_text: "Clear Notifications",
-                              on_primary_click: () => notifs.clear(),
-                              child: Widget.Label({
-                                class_name: "clear-notifications-label",
-                                label: "",
-                              }),
-                            }),
-                          ];
-                        }
-                        return [];
-                      }),
+                      children: [
+                        Widget.Separator({
+                          hpack: "center",
+                          vexpand: true,
+                          vertical: true,
+                          class_name: "menu-separator notification-controls",
+                        }),
+                        Widget.Button({
+                          class_name: "clear-notifications-button",
+                          tooltip_text: "Clear Notifications",
+                          on_primary_click: () => notifs.clear(),
+                          child: Widget.Label({
+                            class_name: "clear-notifications-label",
+                            label: "",
+                          }),
+                        }),
+                      ],
                    }),
                  ],
                }),