+
+
+
{`${this.state.weather.temp}${this.state.temp_text}`}
- )}
+ {weatherType >= 2 && (
+
+ {`${this.state.weather.temp_min}${this.state.temp_text}`}
+ {`${this.state.weather.temp_max}${this.state.temp_text}`}
+
+ )}
+
{weatherType >= 2 && (
-
- {`${this.state.weather.temp_min}${this.state.temp_text}`}
- {`${this.state.weather.temp_max}${this.state.temp_text}`}
-
+
+
+ {variables.getMessage('widgets.weather.feels_like', {
+ amount: `${this.state.weather.feels_like}${this.state.temp_text}`,
+ })}
+
+ {this.state.location}
+
)}
- {weatherType >= 2 && (
-
-
- {variables.getMessage('widgets.weather.feels_like', {
- amount: `${this.state.weather.feels_like}${this.state.temp_text}`,
- })}
-
- {this.state.location}
-
- )}
{weatherType >= 3 && (
)}
diff --git a/src/features/widgets/weather/components/Expanded.jsx b/src/features/widgets/weather/components/Expanded.jsx
new file mode 100644
index 00000000..18edb242
--- /dev/null
+++ b/src/features/widgets/weather/components/Expanded.jsx
@@ -0,0 +1,94 @@
+import { memo, useMemo } from 'react';
+
+import { WiHumidity, WiWindy, WiBarometer, WiCloud } from 'react-icons/wi';
+import { MdDisabledVisible } from 'react-icons/md';
+
+import WeatherIcon from './WeatherIcon';
+import WindDirectionIcon from './WindDirectionIcon';
+
+import { Tooltip } from 'components/Elements';
+
+const weatherTypes = {
+ cloudiness: {
+ icon: WiCloud,
+ key: 'cloudiness',
+ unit: '%',
+ title: 'modals.main.settings.sections.weather.extra_info.cloudiness',
+ },
+ windspeed: {
+ icon: WiWindy,
+ key: 'wind_speed',
+ unit: 'm/s',
+ title: 'modals.main.settings.sections.weather.extra_info.wind_speed',
+ extra: 'windDirection',
+ },
+ atmosphericpressure: {
+ icon: WiBarometer,
+ key: 'pressure',
+ unit: 'hPa',
+ title: 'modals.main.settings.sections.weather.extra_info.atmospheric_pressure',
+ },
+ weatherdescription: {
+ icon: WeatherIcon,
+ key: 'description',
+ title: 'modals.main.settings.sections.weather.extra_info.weather_description',
+ },
+ visibility: {
+ icon: MdDisabledVisible,
+ key: 'visibility',
+ unit: 'm',
+ title: 'modals.main.settings.sections.weather.extra_info.visibility',
+ },
+ humidity: {
+ icon: WiHumidity,
+ key: 'humidity',
+ unit: '%',
+ title: 'modals.main.settings.sections.weather.extra_info.humidity',
+ },
+};
+
+function Expanded({ state: { weather, icon }, weatherType, variables }) {
+ const enabled = useMemo(() => {
+ return (setting) => {
+ return (localStorage.getItem(setting) === 'true' && weatherType >= 3) || weatherType === '3';
+ };
+ }, [weatherType]);
+
+ const WeatherTooltip = ({ type }) => {
+ const { icon: Icon, key, unit, title, extra } = weatherTypes[type];
+ return (
+ enabled(type) && (
+
+
+
+ {`${weather[key]} ${unit || ''}`}
+ {extra && (
+
+
+
+ )}
+
+
+ )
+ );
+ };
+
+ const anyTooltipEnabled = Object.keys(weatherTypes).some(enabled);
+
+ return (
+ anyTooltipEnabled && (
+
+ {weatherType >= 3 && (
+
+ {variables.getMessage('widgets.weather.extra_information')}
+
+ )}
+ {Object.keys(weatherTypes).map((type) => (
+
+ ))}
+
+ )
+ );
+}
+
+export default memo(Expanded);
diff --git a/src/features/widgets/weather/WindDirectionIcon.jsx b/src/features/widgets/weather/components/WindDirectionIcon.jsx
similarity index 100%
rename from src/features/widgets/weather/WindDirectionIcon.jsx
rename to src/features/widgets/weather/components/WindDirectionIcon.jsx
diff --git a/src/features/widgets/weather/weather.scss b/src/features/widgets/weather/weather.scss
index 7e9fa554..d4d8ab03 100644
--- a/src/features/widgets/weather/weather.scss
+++ b/src/features/widgets/weather/weather.scss
@@ -10,11 +10,8 @@
cursor: initial;
user-select: none;
transition: 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
- width: auto;
- display: grid;
- place-items: center;
- justify-items: start;
- padding: 25px;
+ display: flex;
+ flex-flow: column;
&:hover {
height: auto;
@@ -22,15 +19,10 @@
}
.expanded-info {
- width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
- .tooltip {
- width: 100%;
- }
-
.tooltipTitle {
max-height: 12px;
}
@@ -39,7 +31,7 @@
.extra-info {
width: 100%;
font-size: 18px;
- gap: 40px;
+ gap: 25px;
@include themed {
color: t($weather);
@@ -62,11 +54,14 @@
}
}
-.top-weather {
- width: 100%;
+.weatherCore {
display: flex;
+ flex-flow: column;
justify-content: space-between;
- gap: 25px;
+ padding: 25px;
+ @include themed() {
+ border-bottom: 1px solid t($btn-backgroundHover);
+ }
div {
align-items: center;
@@ -75,10 +70,6 @@
svg {
font-size: 2em !important;
}
-
- span {
- font-size: 34px;
- }
}
.minmax {
@@ -88,12 +79,30 @@
}
}
+.weatherIcon {
+ display: grid;
+ align-items: center;
+}
+
+.iconAndTemps {
+ display: flex;
+ flex-flow: row;
+ width: 100%;
+ justify-content: space-between;
+ svg {
+ font-size: 2em !important;
+ }
+ span {
+ font-size: 34px;
+ }
+}
+
.expanded-info {
display: none;
font-size: 18px;
text-transform: capitalize;
gap: 10px;
- margin-top: 15px;
+ padding: 15px 25px 25px 25px;
span {
display: flex;
@@ -101,6 +110,10 @@
gap: 10px;
}
+ .tooltip {
+ width: 100%;
+ }
+
@include themed {
svg {
color: t($subColor);