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.
This commit is contained in:
Jas Singh
2024-09-07 13:24:30 -07:00
committed by GitHub
parent 5373c106d2
commit bd573ec4e7
10 changed files with 145 additions and 61 deletions

View File

@@ -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,
});
})
})
};

View File

@@ -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);
}),
],
});
})
})
};

View File

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

View File

@@ -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`,
}),
];
}),