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.

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 weatherModule = module({
-    const networkModule = module({
+        textIcon: Utils.merge([globalWeatherVar.bind("value")], (wthr) => {
-        icon: Utils.merge([globalWeatherVar.bind("value")], (wthr) => {
+            const weatherStatusIcon = getWeatherStatusTextIcon(wthr);
-            const weatherStatusIcon = getWeatherStatusIcon(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;
 }
 
 

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 getWeatherStatusTextIcon = (wthr: Weather) => {
-export const getWeatherStatusIcon = (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;

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: "󰼶",
+};

modules/menus/calendar/weather/hourly/icon/index.ts

@@ -1,17 +1,12 @@
 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({
+    const getIconQuery = (wthr: Weather) => {
-        class_name: "hourly-weather-icon",
-        icon: theWeather.bind("value").as((w) => {
-            if (!Object.keys(w).length) {
-                return "-";
-            }
 
-            const nextEpoch = getNextEpoch(w);
+        const nextEpoch = getNextEpoch(wthr);
-            const weatherAtEpoch = w.forecast.forecastday[0].hour.find(
+        const weatherAtEpoch = wthr.forecast.forecastday[0].hour.find(
             (h) => h.time_epoch === nextEpoch,
         );
 
@@ -25,8 +20,22 @@ export const HourlyIcon = (theWeather: Variable<Weather>, getNextEpoch: any) =>
         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,
             });
+        })
+
+    })
 };

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: [
+        child: Widget.Label({
-            Widget.Icon({
+            class_name: "calendar-menu-weather today icon txt-icon",
-                class_name: "calendar-menu-weather today icon",
+            label: theWeather.bind("value").as((w) => {
-                icon: theWeather.bind("value").as((v) => {
+                return getWeatherStatusTextIcon(w);
-                    return getWeatherStatusIcon(v);
             }),
-            }),
+        })
-        ],
+    })
-    });
 };

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("󰤄")
                     }),
-                ],
+                ]
             }),
         ],
     });

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({
+                        Widget.Label({
-                            icon: icons.powermenu[action],
+                            label: powerIconMap[action],
-                            className: `power-button-icon ${action}-icon`,
+                            className: `power-button-icon ${action}-icon txt-icon`,
                         }),
                         Widget.Label({
                             hpack: "center",
@@ -46,9 +53,9 @@ export const PowerButton = (action: PowerOptions) => {
                     ];
                 }
                 return [
-                    Widget.Icon({
+                    Widget.Label({
-                        icon: icons.powermenu[action],
+                        label: powerIconMap[action],
-                        className: `power-button-icon ${action}-icon no-label`,
+                        className: `power-button-icon ${action}-icon no-label txt-icon`,
                     }),
                 ];
             }),

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 {

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;
       }
 

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;