From b097fb0d2fb702491b004019d0f299bfbcbe0065 Mon Sep 17 00:00:00 2001 From: shmyga Date: Sat, 11 Jul 2026 16:05:41 +0300 Subject: [PATCH] feat(weather): inline weather svg icons --- gallery/easel/route/view/weather/__init__.py | 3 ++- gallery/easel/route/view/weather/filters.py | 25 +++++++++++++++++++ .../route/view/weather/templates/weather.html | 7 +++--- .../lib/weather-icons/icons/wi-wind-deg.svg | 2 +- .../lib/weather-icons/sass/_variables.scss | 1 + ...ns-colors.scss => _weather-icons-svg.scss} | 21 +++++++++++++--- .../lib/weather-icons/sass/weather-icons.scss | 2 +- 7 files changed, 51 insertions(+), 10 deletions(-) rename static/src/lib/weather-icons/sass/{_weather-icons-colors.scss => _weather-icons-svg.scss} (74%) diff --git a/gallery/easel/route/view/weather/__init__.py b/gallery/easel/route/view/weather/__init__.py index e4ea4f8..e35235d 100644 --- a/gallery/easel/route/view/weather/__init__.py +++ b/gallery/easel/route/view/weather/__init__.py @@ -12,7 +12,7 @@ from gallery.sketch.weather.model import WeatherResponse from ..common.utils.tag import TagType, TagUtil from ..common.utils.template import build_templates -from .filters import cloudness_icon, wind_direction_icon +from .filters import cloudness_icon, weather_icon_svg, wind_direction_icon def context_procesor(request: AppRequest) -> dict: @@ -26,6 +26,7 @@ templates = build_templates( { "wind_direction_icon": wind_direction_icon, "cloudness_icon": cloudness_icon, + "weather_icon_svg": weather_icon_svg, }, context_procesor, ) diff --git a/gallery/easel/route/view/weather/filters.py b/gallery/easel/route/view/weather/filters.py index a7122fc..84f311a 100644 --- a/gallery/easel/route/view/weather/filters.py +++ b/gallery/easel/route/view/weather/filters.py @@ -1,5 +1,7 @@ import datetime +from markupsafe import Markup + from gallery.sketch.weather.model import ( Cloudness, Precipitation, @@ -7,6 +9,7 @@ from gallery.sketch.weather.model import ( WindDirection, WindDirectionDeg, ) +from gallery.util import root_path def wind_direction_icon(wind_direction_deg: float) -> str: @@ -54,3 +57,25 @@ def cloudness_icon(sky: Sky, date: datetime.datetime, period: str) -> list[str]: main_icon = f"{day_prefix}-{main_icon}" icons = [main_icon] return icons + + +class WeatherIconBundle: + def __init__(self): + self._icon_path = root_path / "static/dist/weather-icons/icons" + self._cache = {} + + def _load_icon(self, icon: str) -> Markup: + icon_file = self._icon_path / f"wi-{icon}.svg" + return Markup(icon_file.read_text()) + + def get(self, icon: str) -> Markup: + if icon not in self._cache: + self._cache[icon] = self._load_icon(icon) + return self._cache[icon] + + +WEATHER_ICON_BUNDLE = WeatherIconBundle() + + +def weather_icon_svg(icon: str) -> Markup: + return WEATHER_ICON_BUNDLE.get(icon) diff --git a/gallery/easel/route/view/weather/templates/weather.html b/gallery/easel/route/view/weather/templates/weather.html index 0b1c43c..ae0f607 100644 --- a/gallery/easel/route/view/weather/templates/weather.html +++ b/gallery/easel/route/view/weather/templates/weather.html @@ -66,8 +66,8 @@ data-bs-toggle="tooltip" data-bs-title="{{ value.sky }}"> {% for icon in value.sky | cloudness_icon(value.date, response.period) %} - - +
{{ icon | weather_icon_svg }}
{% endfor %} {% endfor %} @@ -103,7 +103,8 @@ -
+
{{ 'wind-deg' | weather_icon_svg }}
{% endfor %} diff --git a/static/src/lib/weather-icons/icons/wi-wind-deg.svg b/static/src/lib/weather-icons/icons/wi-wind-deg.svg index 282f5e8..5b989eb 100644 --- a/static/src/lib/weather-icons/icons/wi-wind-deg.svg +++ b/static/src/lib/weather-icons/icons/wi-wind-deg.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/static/src/lib/weather-icons/sass/_variables.scss b/static/src/lib/weather-icons/sass/_variables.scss index 61dedac..6b91e88 100644 --- a/static/src/lib/weather-icons/sass/_variables.scss +++ b/static/src/lib/weather-icons/sass/_variables.scss @@ -7,6 +7,7 @@ $weather-icons-colors: ( "moon": #4A4B43, "lightning": red, "snow": white, + "wind": #0d6efd, ) !default; $weather-icons-included: ( "wi-cloud", diff --git a/static/src/lib/weather-icons/sass/_weather-icons-colors.scss b/static/src/lib/weather-icons/sass/_weather-icons-svg.scss similarity index 74% rename from static/src/lib/weather-icons/sass/_weather-icons-colors.scss rename to static/src/lib/weather-icons/sass/_weather-icons-svg.scss index 8859d5b..225c87f 100644 --- a/static/src/lib/weather-icons/sass/_weather-icons-colors.scss +++ b/static/src/lib/weather-icons/sass/_weather-icons-svg.scss @@ -1,15 +1,13 @@ @use "variables"; -weather-icon { +weather-icon, +.wi-svg { display: flex; width: 3rem; > svg { path { fill: gray; - stroke: variables.$weather-icons-stroke-color; - stroke-width: 0.5; - //paint-order: stroke; } @each $type, $color in variables.$weather-icons-colors { path[id="#{$type}"] { @@ -20,4 +18,19 @@ weather-icon { } } } + + &.wi-border { + > svg path { + stroke: variables.$weather-icons-stroke-color; + stroke-width: 0.5; + //paint-order: stroke; + } + } + + &.wi-s { + width: 2.5rem; + } + &.wi-l { + width: 3.5rem; + } } diff --git a/static/src/lib/weather-icons/sass/weather-icons.scss b/static/src/lib/weather-icons/sass/weather-icons.scss index a4d243e..fbd2674 100644 --- a/static/src/lib/weather-icons/sass/weather-icons.scss +++ b/static/src/lib/weather-icons/sass/weather-icons.scss @@ -2,4 +2,4 @@ @use "weather-icons-base"; @use "weather-icons-list"; @use "weather-wind-aliases"; -@use "weather-icons-colors"; +@use "weather-icons-svg";