From bd573ec4e7e8f1382f9bbaae0e1c383c546e736e Mon Sep 17 00:00:00 2001 From: Jas Singh Date: Sat, 7 Sep 2024 13:24:30 -0700 Subject: [PATCH] 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 | 11 ++-- globals/weather.ts | 7 ++- modules/icons/weather.ts | 54 ++++++++++++++++++ .../calendar/weather/hourly/icon/index.ts | 55 +++++++++++-------- modules/menus/calendar/weather/icon/index.ts | 16 +++--- modules/menus/dashboard/profile/index.ts | 18 ++++-- modules/menus/powerDropdown/button.ts | 19 +++++-- scss/style/menus/calendar.scss | 7 ++- scss/style/menus/dashboard.scss | 15 ++++- scss/style/menus/powerdropdown.scss | 4 +- 10 files changed, 145 insertions(+), 61 deletions(-) create mode 100644 modules/icons/weather.ts diff --git a/customModules/weather/index.ts b/customModules/weather/index.ts index 2fa55e7..3183134 100644 --- 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; } diff --git a/globals/weather.ts b/globals/weather.ts index cd86084..7a0b54c 100644 --- 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; diff --git a/modules/icons/weather.ts b/modules/icons/weather.ts new file mode 100644 index 0000000..d3b6cbe --- /dev/null +++ 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: "󰼶", +}; diff --git a/modules/menus/calendar/weather/hourly/icon/index.ts b/modules/menus/calendar/weather/hourly/icon/index.ts index 0f9517b..f3b9cd7 100644 --- 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, 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, + }); + }) + + }) }; diff --git a/modules/menus/calendar/weather/icon/index.ts b/modules/menus/calendar/weather/icon/index.ts index ee74236..f5306a1 100644 --- 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) => { 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); }), - ], - }); + }) + }) }; diff --git a/modules/menus/dashboard/profile/index.ts b/modules/menus/dashboard/profile/index.ts index d2d1673..b31f218 100644 --- 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("󰤄") }), - ], + ] }), ], }); diff --git a/modules/menus/powerDropdown/button.ts b/modules/menus/powerDropdown/button.ts index ecdb85b..14d7e8b 100644 --- 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`, }), ]; }), diff --git a/scss/style/menus/calendar.scss b/scss/style/menus/calendar.scss index 67757b1..ec370e1 100644 --- 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 { diff --git a/scss/style/menus/dashboard.scss b/scss/style/menus/dashboard.scss index 6121bdc..d292038 100644 --- 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; } diff --git a/scss/style/menus/powerdropdown.scss b/scss/style/menus/powerdropdown.scss index 0fe97d2..853835c 100644 --- 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;