Changes the layout of the current weather module, targetting indoor values (#3397)

Hi,

this PR should change the layout of the indoor values in the
current_weather module.

Since the Indoor values are being passed into the module via a
notification, I sadly do not know exactly how to write a test for this.
Can you link me an example or tell me, how I can mock indoor values into
this test?

Before:

![grafik](https://github.com/MagicMirrorOrg/MagicMirror/assets/6515818/b1b2afcc-0a35-48c3-9cf8-3e7b041c7727)

After:

![grafik](https://github.com/MagicMirrorOrg/MagicMirror/assets/6515818/311d3051-45e9-450d-afd5-c90a4d4ffd63)
This commit is contained in:
Paranoid93 2024-03-23 10:53:42 +01:00 committed by GitHub
parent 6de578edb3
commit 52cfbacd4d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 27 additions and 22 deletions

View File

@ -26,6 +26,7 @@ _This release is scheduled to be released on 2024-04-01._
- [chore] Update dependencies including electron to v28 (#3357) and node-ical - [chore] Update dependencies including electron to v28 (#3357) and node-ical
- Updated translations for estonian (#3371) - Updated translations for estonian (#3371)
- Update electron to v29 and update other dependencies - Update electron to v29 and update other dependencies
- Updated layout of current weather indoor values
### Fixed ### Fixed

View File

@ -12,8 +12,7 @@
{% if config.showWindDirection %} {% if config.showWindDirection %}
<sup> <sup>
{% if config.showWindDirectionAsArrow %} {% if config.showWindDirectionAsArrow %}
<i class="fas fa-long-arrow-alt-down" <i class="fas fa-long-arrow-alt-down" style="transform:rotate({{ current.windFromDirection }}deg)"></i>
style="transform:rotate({{ current.windFromDirection }}deg)"></i>
{% else %} {% else %}
{{ current.cardinalWindDirection() | translate }} {{ current.cardinalWindDirection() | translate }}
{% endif %} {% endif %}
@ -42,25 +41,30 @@
{% endif %} {% endif %}
</div> </div>
{% endif %} {% endif %}
<div class="large light"> <div class="large">
<span class="wi weathericon wi-{{ current.weatherType }}"></span> {% if config.showIndoorTemperature and indoor.temperature or config.showIndoorHumidity and indoor.humidity %}
<span class="bright">{{ current.temperature | roundValue | unit("temperature") | decimalSymbol }}</span> <span class="medium fas fa-home"></span>
{% if config.showHumidity === "temp" %} <span style="display: inline-block">
<span class="medium bright">{{ humidity() }}</span>
{% endif %}
</div>
<div class="normal light indoor">
{% if config.showIndoorTemperature and indoor.temperature %} {% if config.showIndoorTemperature and indoor.temperature %}
<div> <sup class="small" style="position: relative; display: block; text-align: left;">
<span class="fas fa-home"></span> <span>
<span class="bright">{{ indoor.temperature | roundValue | unit("temperature") | decimalSymbol }}</span> {{ indoor.temperature | roundValue | unit("temperature") | decimalSymbol }}
</div> </span>
</sup>
{% endif %} {% endif %}
{% if config.showIndoorHumidity and indoor.humidity %} {% if config.showIndoorHumidity and indoor.humidity %}
<div> <sub class="small" style="position: relative; display: block; text-align: left;">
<span class="fas fa-tint"></span> <span>
<span class="bright">{{ indoor.humidity | roundValue | unit("humidity") | decimalSymbol }}</span> {{ indoor.humidity | roundValue | unit("humidity") | decimalSymbol }}
</div> </span>
</sub>
{% endif %}
</span>
{% endif %}
<span class="light wi weathericon wi-{{ current.weatherType }}"></span>
<span class="light bright">{{ current.temperature | roundValue | unit("temperature") | decimalSymbol }}</span>
{% if config.showHumidity === "temp" %}
<span class="medium bright">{{ humidity() }}</span>
{% endif %} {% endif %}
</div> </div>
{% if (config.showFeelsLike or config.showPrecipitationAmount or config.showPrecipitationProbability) and not config.onlyTemp %} {% if (config.showFeelsLike or config.showPrecipitationAmount or config.showPrecipitationProbability) and not config.onlyTemp %}

View File

@ -19,7 +19,7 @@ describe("Weather module", () => {
}); });
it("should render temperature with icon", async () => { it("should render temperature with icon", async () => {
await expect(weatherFunc.getText(".weather .large.light span.bright", "1.5°")).resolves.toBe(true); await expect(weatherFunc.getText(".weather .large span.light.bright", "1.5°")).resolves.toBe(true);
}); });
it("should render feels like temperature", async () => { it("should render feels like temperature", async () => {
@ -62,7 +62,7 @@ describe("Weather module", () => {
}); });
it("should render degreeLabel for temp", async () => { it("should render degreeLabel for temp", async () => {
await expect(weatherFunc.getText(".weather .large.light span.bright", "1°C")).resolves.toBe(true); await expect(weatherFunc.getText(".weather .large span.bright.light", "1°C")).resolves.toBe(true);
}); });
it("should render degreeLabel for feels like", async () => { it("should render degreeLabel for feels like", async () => {
@ -80,7 +80,7 @@ describe("Weather module", () => {
}); });
it("should render temperatures in fahrenheit", async () => { it("should render temperatures in fahrenheit", async () => {
await expect(weatherFunc.getText(".weather .large.light span.bright", "34,7°")).resolves.toBe(true); await expect(weatherFunc.getText(".weather .large span.bright.light", "34,7°")).resolves.toBe(true);
}); });
it("should render 'feels like' in fahrenheit", async () => { it("should render 'feels like' in fahrenheit", async () => {