Updated weather and power button icons to use text-icons rather than system icons. (#232)

* Replace weather and power icons with nerdfont icons. * Update power icons for power dropdown menu.
2024-09-07 13:24:30 -07:00
parent 5373c106d2
commit bd573ec4e7
10 changed files with 145 additions and 61 deletions
--- a/customModules/weather/index.ts
+++ b/customModules/weather/index.ts
@@ -4,7 +4,7 @@ import { module } from "../module"
 import { inputHandler } from "customModules/utils";
 import Gtk from "types/@girs/gtk-3.0/gtk-3.0";
 import Button from "types/widgets/button";
-import { getWeatherStatusIcon, globalWeatherVar } from "globals/weather";
+import { getWeatherStatusTextIcon, globalWeatherVar } from "globals/weather";

 const {
    label,
@@ -17,10 +17,9 @@ const {
 } = options.bar.customModules.weather;

 export const Weather = () => {
-
-    const networkModule = module({
-        icon: Utils.merge([globalWeatherVar.bind("value")], (wthr) => {
-            const weatherStatusIcon = getWeatherStatusIcon(wthr);
+    const weatherModule = module({
+        textIcon: Utils.merge([globalWeatherVar.bind("value")], (wthr) => {
+            const weatherStatusIcon = getWeatherStatusTextIcon(wthr);
            return weatherStatusIcon;
        }),
        tooltipText: globalWeatherVar.bind("value").as(v => `Weather Status: ${v.current.condition.text}`),
@@ -59,7 +58,7 @@ export const Weather = () => {
        },
    });

-    return networkModule;
+    return weatherModule;
 }


--- a/globals/weather.ts
+++ b/globals/weather.ts
@@ -4,6 +4,7 @@ import { DEFAULT_WEATHER } from "lib/types/defaults/weather.js";
 import GLib from "gi://GLib?version=2.0"

 import icons from "../modules/icons/index.js";
+import { weatherIcons } from "modules/icons/weather.js";

 const { key, interval, location } = options.menus.clock.weather;

@@ -98,8 +99,7 @@ export const getWindConditions = (wthr: Weather, unt: UnitType) => {

 export const getRainChance = (wthr: Weather) => `${wthr.forecast.forecastday[0].day.daily_chance_of_rain}%`;

-
-export const getWeatherStatusIcon = (wthr: Weather) => {
+export const getWeatherStatusTextIcon = (wthr: Weather) => {
    let iconQuery = wthr.current.condition.text
        .trim()
        .toLowerCase()
@@ -108,6 +108,7 @@ export const getWeatherStatusIcon = (wthr: Weather) => {
    if (!wthr.current.is_day && iconQuery === "partly_cloudy") {
        iconQuery = "partly_cloudy_night";
    }
-    return icons.weather[iconQuery];
+    return weatherIcons[iconQuery];
 };
+
 globalThis["globalWeatherVar"] = globalWeatherVar;
--- a/modules/icons/weather.ts
+++ b/modules/icons/weather.ts
@@ -0,0 +1,54 @@
+export const weatherIcons = {
+    warning: "󰼯",
+    sunny: "󰖙",
+    clear: "󰖔",
+    partly_cloudy: "󰖕",
+    partly_cloudy_night: "󰼱",
+    cloudy: "󰖐",
+    overcast: "󰖕",
+    mist: "󰖑",
+    patchy_rain_nearby: "󰼳",
+    patchy_rain_possible: "󰼳",
+    patchy_snow_possible: "󰼴",
+    patchy_sleet_possible: "󰙿",
+    patchy_freezing_drizzle_possible: "󰙿",
+    thundery_outbreaks_possible: "󰙾",
+    blowing_snow: "󰼶",
+    blizzard: "󰼶",
+    fog: "󰖑",
+    freezing_fog: "󰖑",
+    patchy_light_drizzle: "󰼳",
+    light_drizzle: "󰼳",
+    freezing_drizzle: "󰙿",
+    heavy_freezing_drizzle: "󰙿",
+    patchy_light_rain: "󰼳",
+    light_rain: "󰼳",
+    moderate_rain_at_times: "󰖗",
+    moderate_rain: "󰼳",
+    heavy_rain_at_times: "󰖖",
+    heavy_rain: "󰖖",
+    light_freezing_rain: "󰙿",
+    moderate_or_heavy_freezing_rain: "󰙿",
+    light_sleet: "󰙿",
+    moderate_or_heavy_sleet: "󰙿",
+    patchy_light_snow: "󰼴",
+    light_snow: "󰼴",
+    patchy_moderate_snow: "󰼴",
+    moderate_snow: "󰼶",
+    patchy_heavy_snow: "󰼶",
+    heavy_snow: "󰼶",
+    ice_pellets: "󰖒",
+    light_rain_shower: "󰖖",
+    moderate_or_heavy_rain_shower: "󰖖",
+    torrential_rain_shower: "󰖖",
+    light_sleet_showers: "󰼵",
+    moderate_or_heavy_sleet_showers: "󰼵",
+    light_snow_showers: "󰼵",
+    moderate_or_heavy_snow_showers: "󰼵",
+    light_showers_of_ice_pellets: "󰖒",
+    moderate_or_heavy_showers_of_ice_pellets: "󰖒",
+    patchy_light_rain_with_thunder: "󰙾",
+    moderate_or_heavy_rain_with_thunder: "󰙾",
+    patchy_light_snow_with_thunder: "󰼶",
+    moderate_or_heavy_snow_with_thunder: "󰼶",
+};
--- a/modules/menus/calendar/weather/hourly/icon/index.ts
+++ b/modules/menus/calendar/weather/hourly/icon/index.ts
@@ -1,32 +1,41 @@
 import { Weather } from "lib/types/weather.js";
 import { Variable } from "types/variable.js";
-import icons from "../../../../../icons/index.js";
+import { weatherIcons } from "modules/icons/weather.js";

 export const HourlyIcon = (theWeather: Variable<Weather>, getNextEpoch: any) => {
-    return Widget.Icon({
-        class_name: "hourly-weather-icon",
-        icon: theWeather.bind("value").as((w) => {
-            if (!Object.keys(w).length) {
-                return "-";
-            }
+    const getIconQuery = (wthr: Weather) => {

-            const nextEpoch = getNextEpoch(w);
-            const weatherAtEpoch = w.forecast.forecastday[0].hour.find(
-                (h) => h.time_epoch === nextEpoch,
-            );
+        const nextEpoch = getNextEpoch(wthr);
+        const weatherAtEpoch = wthr.forecast.forecastday[0].hour.find(
+            (h) => h.time_epoch === nextEpoch,
+        );

-            let iconQuery = weatherAtEpoch?.condition.text
-                .trim()
-                .toLowerCase()
-                .replaceAll(" ", "_")
-                || "warning"
-                ;
+        let iconQuery = weatherAtEpoch?.condition.text
+            .trim()
+            .toLowerCase()
+            .replaceAll(" ", "_")
+            || "warning"
+            ;

-            if (!weatherAtEpoch?.is_day && iconQuery === "partly_cloudy") {
-                iconQuery = "partly_cloudy_night";
-            }
+        if (!weatherAtEpoch?.is_day && iconQuery === "partly_cloudy") {
+            iconQuery = "partly_cloudy_night";
+        }
+        return iconQuery;
+    }

-            return icons.weather[iconQuery];
-        }),
-    });
+    return Widget.Box({
+        hpack: "center",
+        child: theWeather.bind("value").as((w) => {
+            let weatherIcn = "-";
+
+            const iconQuery = getIconQuery(w);
+            weatherIcn = weatherIcons[iconQuery];
+            return Widget.Label({
+                hpack: "center",
+                class_name: "hourly-weather-icon txt-icon",
+                label: weatherIcn,
+            });
+        })
+
+    })
 };
--- a/modules/menus/calendar/weather/icon/index.ts
+++ b/modules/menus/calendar/weather/icon/index.ts
@@ -1,19 +1,17 @@
 import { Weather } from "lib/types/weather";
 import { Variable } from "types/variable";
-import { getWeatherStatusIcon } from "globals/weather.js";
+import { getWeatherStatusTextIcon } from "globals/weather.js";

 export const TodayIcon = (theWeather: Variable<Weather>) => {
    return Widget.Box({
        vpack: "center",
        hpack: "start",
        class_name: "calendar-menu-weather today icon container",
-        children: [
-            Widget.Icon({
-                class_name: "calendar-menu-weather today icon",
-                icon: theWeather.bind("value").as((v) => {
-                    return getWeatherStatusIcon(v);
-                }),
+        child: Widget.Label({
+            class_name: "calendar-menu-weather today icon txt-icon",
+            label: theWeather.bind("value").as((w) => {
+                return getWeatherStatusTextIcon(w);
            }),
-        ],
-    });
+        })
+    })
 };
--- a/modules/menus/dashboard/profile/index.ts
+++ b/modules/menus/dashboard/profile/index.ts
@@ -1,4 +1,3 @@
-import icons from "../../../icons/index.js";
 import powermenu from "../../power/helpers/actions.js";
 import { PowerOptions } from "lib/types/options.js";
 import GdkPixbuf from "gi://GdkPixbuf";
@@ -25,6 +24,13 @@ const Profile = () => {
        }
    };

+    const getIconForButton = (txtIcon: string) => {
+        return Widget.Label({
+            className: "txt-icon",
+            label: txtIcon
+        })
+    }
+
    return Widget.Box({
        class_name: "profiles-container",
        hpack: "fill",
@@ -69,30 +75,30 @@ const Profile = () => {
                        on_clicked: () => handleClick("shutdown"),
                        tooltip_text: "Shut Down",
                        vexpand: true,
-                        child: Widget.Icon(icons.powermenu.shutdown),
+                        child: getIconForButton("󰐥")
                    }),
                    Widget.Button({
                        class_name: "dashboard-button restart",
                        on_clicked: () => handleClick("reboot"),
                        tooltip_text: "Restart",
                        vexpand: true,
-                        child: Widget.Icon(icons.powermenu.reboot),
+                        child: getIconForButton("󰜉")
                    }),
                    Widget.Button({
                        class_name: "dashboard-button lock",
                        on_clicked: () => handleClick("logout"),
                        tooltip_text: "Log Out",
                        vexpand: true,
-                        child: Widget.Icon(icons.powermenu.logout),
+                        child: getIconForButton("󰿅")
                    }),
                    Widget.Button({
                        class_name: "dashboard-button sleep",
                        on_clicked: () => handleClick("sleep"),
                        tooltip_text: "Sleep",
                        vexpand: true,
-                        child: Widget.Icon(icons.powermenu.sleep),
+                        child: getIconForButton("󰤄")
                    }),
-                ],
+                ]
            }),
        ],
    });
--- a/modules/menus/powerDropdown/button.ts
+++ b/modules/menus/powerDropdown/button.ts
@@ -23,6 +23,13 @@ export const PowerButton = (action: PowerOptions) => {
        }
    };

+    const powerIconMap = {
+        shutdown: "󰐥",
+        reboot: "󰜉",
+        logout: "󰿅",
+        sleep: "󰤄",
+    };
+
    return Widget.Button({
        className: showLabel.bind("value").as(shwLbl => {
            return `power-menu-button ${action} ${!shwLbl ? "no-label" : ""}`;
@@ -33,9 +40,9 @@ export const PowerButton = (action: PowerOptions) => {
            children: showLabel.bind("value").as(shwLbl => {
                if (shwLbl) {
                    return [
-                        Widget.Icon({
-                            icon: icons.powermenu[action],
-                            className: `power-button-icon ${action}-icon`,
+                        Widget.Label({
+                            label: powerIconMap[action],
+                            className: `power-button-icon ${action}-icon txt-icon`,
                        }),
                        Widget.Label({
                            hpack: "center",
@@ -46,9 +53,9 @@ export const PowerButton = (action: PowerOptions) => {
                    ];
                }
                return [
-                    Widget.Icon({
-                        icon: icons.powermenu[action],
-                        className: `power-button-icon ${action}-icon no-label`,
+                    Widget.Label({
+                        label: powerIconMap[action],
+                        className: `power-button-icon ${action}-icon no-label txt-icon`,
                    }),
                ];
            }),
--- a/scss/style/menus/calendar.scss
+++ b/scss/style/menus/calendar.scss
@@ -101,9 +101,9 @@
  min-width: 3em;

  .calendar-menu-weather.today.icon {
-    image {
+    label {
      color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-icon);
-      font-size: 6em;
+      font-size: 5em;
    }
  }

@@ -164,7 +164,8 @@

 .hourly-weather-icon {
  color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-hourly-icon);
-  margin-bottom: 0.5em;
+  margin-bottom: 0.25em;
+  font-size: 1.8em;
 }

 .hourly-weather-temp {
--- a/scss/style/menus/dashboard.scss
+++ b/scss/style/menus/dashboard.scss
@@ -53,17 +53,25 @@
        margin-bottom: 0.75em;
      }

-      image {
+      label {
        color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-shortcuts-text);
-        font-size: 1.5em;
+        font-size: 1.7em;
      }

      &.shutdown {
        background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-shutdown);
+
+        label {
+          font-size: 1.9em;
+        }
      }

      &.restart {
        background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-restart);
+
+        label {
+          font-size: 1.9em;
+        }
      }

      &.lock {
@@ -92,6 +100,7 @@
        }
      }

+
    }
  }

@@ -294,7 +303,7 @@
    .stat {
      label {
        margin-right: 0.75em;
-        font-size: 1.5em;
+        font-size: 1.3em;
        min-width: 1.65em;
      }

--- a/scss/style/menus/powerdropdown.scss
+++ b/scss/style/menus/powerdropdown.scss
@@ -101,11 +101,11 @@
    }
  }

-  label {
+  label:not(.txt-icon) {
    margin-left: 1em;
  }

-  image {
+  label.txt-icon {
    min-width: 3.75rem * $bar-menus-menu-power-scaling * 0.01;
    min-height: 3.75rem * $bar-menus-menu-power-scaling * 0.01;
    background: $red;