mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-15 21:36:36 +00:00
Use dynamic weather domain icon + icon alignment fix weather more-info (#12781)
This commit is contained in:
parent
85ad6619b7
commit
ffc4ca5b56
@ -29,7 +29,8 @@ import {
|
||||
mdiWeatherNight,
|
||||
} from "@mdi/js";
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
import { updateIsInstalling, UpdateEntity } from "../../data/update";
|
||||
import { UpdateEntity, updateIsInstalling } from "../../data/update";
|
||||
import { weatherIcon } from "../../data/weather";
|
||||
/**
|
||||
* Return the icon to be used for a domain.
|
||||
*
|
||||
@ -101,6 +102,15 @@ export const domainIconWithoutDefault = (
|
||||
? mdiCheckCircleOutline
|
||||
: mdiCloseCircleOutline;
|
||||
|
||||
case "input_datetime":
|
||||
if (!stateObj?.attributes.has_date) {
|
||||
return mdiClock;
|
||||
}
|
||||
if (!stateObj.attributes.has_time) {
|
||||
return mdiCalendar;
|
||||
}
|
||||
break;
|
||||
|
||||
case "lock":
|
||||
switch (compareState) {
|
||||
case "unlocked":
|
||||
@ -138,15 +148,6 @@ export const domainIconWithoutDefault = (
|
||||
break;
|
||||
}
|
||||
|
||||
case "input_datetime":
|
||||
if (!stateObj?.attributes.has_date) {
|
||||
return mdiClock;
|
||||
}
|
||||
if (!stateObj.attributes.has_time) {
|
||||
return mdiCalendar;
|
||||
}
|
||||
break;
|
||||
|
||||
case "sun":
|
||||
return stateObj?.state === "above_horizon"
|
||||
? FIXED_DOMAIN_ICONS[domain]
|
||||
@ -158,6 +159,9 @@ export const domainIconWithoutDefault = (
|
||||
? mdiPackageDown
|
||||
: mdiPackageUp
|
||||
: mdiPackage;
|
||||
|
||||
case "weather":
|
||||
return weatherIcon(stateObj?.state);
|
||||
}
|
||||
|
||||
if (domain in FIXED_DOMAIN_ICONS) {
|
||||
|
@ -2,9 +2,21 @@ import {
|
||||
mdiAlertCircleOutline,
|
||||
mdiGauge,
|
||||
mdiWaterPercent,
|
||||
mdiWeatherCloudy,
|
||||
mdiWeatherFog,
|
||||
mdiWeatherHail,
|
||||
mdiWeatherLightning,
|
||||
mdiWeatherLightningRainy,
|
||||
mdiWeatherNight,
|
||||
mdiWeatherNightPartlyCloudy,
|
||||
mdiWeatherPartlyCloudy,
|
||||
mdiWeatherPouring,
|
||||
mdiWeatherRainy,
|
||||
mdiWeatherSnowy,
|
||||
mdiWeatherSnowyRainy,
|
||||
mdiWeatherSunny,
|
||||
mdiWeatherWindy,
|
||||
mdiWeatherWindyVariant,
|
||||
} from "@mdi/js";
|
||||
import {
|
||||
HassEntityAttributeBase,
|
||||
@ -57,7 +69,21 @@ export const weatherSVGs = new Set<string>([
|
||||
]);
|
||||
|
||||
export const weatherIcons = {
|
||||
"clear-night": mdiWeatherNight,
|
||||
cloudy: mdiWeatherCloudy,
|
||||
exceptional: mdiAlertCircleOutline,
|
||||
fog: mdiWeatherFog,
|
||||
hail: mdiWeatherHail,
|
||||
lightning: mdiWeatherLightning,
|
||||
"lightning-rainy": mdiWeatherLightningRainy,
|
||||
partlycloudy: mdiWeatherPartlyCloudy,
|
||||
pouring: mdiWeatherPouring,
|
||||
rainy: mdiWeatherRainy,
|
||||
snowy: mdiWeatherSnowy,
|
||||
"snowy-rainy": mdiWeatherSnowyRainy,
|
||||
sunny: mdiWeatherSunny,
|
||||
windy: mdiWeatherWindy,
|
||||
"windy-variant": mdiWeatherWindyVariant,
|
||||
};
|
||||
|
||||
export const weatherAttrIcons = {
|
||||
@ -437,6 +463,13 @@ export const getWeatherStateIcon = (
|
||||
return undefined;
|
||||
};
|
||||
|
||||
export const weatherIcon = (state?: string, nightTime?: boolean): string =>
|
||||
!state
|
||||
? undefined
|
||||
: nightTime && state === "partlycloudy"
|
||||
? mdiWeatherNightPartlyCloudy
|
||||
: weatherIcons[state];
|
||||
|
||||
const DAY_IN_MILLISECONDS = 86400000;
|
||||
|
||||
export const isForecastHourly = (
|
||||
|
@ -1,23 +1,9 @@
|
||||
import {
|
||||
mdiAlertCircleOutline,
|
||||
mdiEye,
|
||||
mdiGauge,
|
||||
mdiThermometer,
|
||||
mdiWaterPercent,
|
||||
mdiWeatherCloudy,
|
||||
mdiWeatherFog,
|
||||
mdiWeatherHail,
|
||||
mdiWeatherLightning,
|
||||
mdiWeatherLightningRainy,
|
||||
mdiWeatherNight,
|
||||
mdiWeatherPartlyCloudy,
|
||||
mdiWeatherPouring,
|
||||
mdiWeatherRainy,
|
||||
mdiWeatherSnowy,
|
||||
mdiWeatherSnowyRainy,
|
||||
mdiWeatherSunny,
|
||||
mdiWeatherWindy,
|
||||
mdiWeatherWindyVariant,
|
||||
} from "@mdi/js";
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
import {
|
||||
@ -37,27 +23,10 @@ import {
|
||||
getWeatherUnit,
|
||||
getWind,
|
||||
isForecastHourly,
|
||||
weatherIcons,
|
||||
} from "../../../data/weather";
|
||||
import { HomeAssistant } from "../../../types";
|
||||
|
||||
const weatherIcons = {
|
||||
"clear-night": mdiWeatherNight,
|
||||
cloudy: mdiWeatherCloudy,
|
||||
exceptional: mdiAlertCircleOutline,
|
||||
fog: mdiWeatherFog,
|
||||
hail: mdiWeatherHail,
|
||||
lightning: mdiWeatherLightning,
|
||||
"lightning-rainy": mdiWeatherLightningRainy,
|
||||
partlycloudy: mdiWeatherPartlyCloudy,
|
||||
pouring: mdiWeatherPouring,
|
||||
rainy: mdiWeatherRainy,
|
||||
snowy: mdiWeatherSnowy,
|
||||
"snowy-rainy": mdiWeatherSnowyRainy,
|
||||
sunny: mdiWeatherSunny,
|
||||
windy: mdiWeatherWindy,
|
||||
"windy-variant": mdiWeatherWindyVariant,
|
||||
};
|
||||
|
||||
@customElement("more-info-weather")
|
||||
class MoreInfoWeather extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
@ -235,6 +204,7 @@ class MoreInfoWeather extends LitElement {
|
||||
return css`
|
||||
ha-svg-icon {
|
||||
color: var(--paper-item-icon-color);
|
||||
margin-left: 8px;
|
||||
}
|
||||
.section {
|
||||
margin: 16px 0 8px 0;
|
||||
|
Loading…
x
Reference in New Issue
Block a user