Add support for custom colors per condition (#54)

* type and readme * add more to readme * start plumbing colors down to components * render style block, more plumbing * more work on plumbing, some type fixes * fix typing error * make partly cloudy a light blue instead of gray * Validate colors * fix logic error * improved ci for branches * Fix commonjs import, make styles more specific * Improve types, clean up readme, change partlycloudy color * fix indentation * Try out automatic localization * reference correct commit action tag * [Auto] Adding updated localization files Files changed:\nM src/localize/languages/de.json M src/localize/languages/es.json M src/localize/languages/fr.json M src/localize/languages/nb.json M src/localize/languages/pl.json M src/localize/languages/pt.json * Move translation to its own workflow * do not fail job when no translation is needed * 3.0.0-beta.0 * pull version from package.json instead of const.ts
decompil3d · Jul 11, 2022 · d1f17f3 · d1f17f3
1 parent afc1a66
commit d1f17f3
Show file tree

Hide file tree

Showing 20 changed files with 373 additions and 145 deletions.
diff --git a/.github/workflows/build.yml → .github/workflows/main.yml b/.github/workflows/build.yml → .github/workflows/main.yml
@@ -4,9 +4,6 @@ on:
   push:
     branches:
       - main
-  pull_request:
-    branches:
-      - main
 
 jobs:
   build:

diff --git a/.github/workflows/non-main.yml b/.github/workflows/non-main.yml
@@ -0,0 +1,27 @@
+name: 'Build non-main'
+
+on:
+  push:
+    branches-ignore:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Build
+        run: |
+          cd /home/runner/work/lovelace-hourly-weather/lovelace-hourly-weather
+          npm ci
+          npm run build
+      - name: Save artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: hourly-weather.js
+          retention-days: 5
+          path: /home/runner/work/lovelace-hourly-weather/lovelace-hourly-weather/dist/hourly-weather.js
diff --git a/.github/workflows/translate.yml b/.github/workflows/translate.yml
@@ -0,0 +1,40 @@
+name: 'Translate strings'
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  translate:
+    name: translate
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Install localization package
+        run: npm install -g i18n-auto-translation #-msnyder
+
+      - name: Translate files
+        id: translate
+        uses: msnyder-msft/[email protected]
+        with:
+            provider: 'google-official'
+            subscriptionKey: '${{ secrets.TRANSLATOR_SUBSCRIPTION_KEY }}'
+            filePath: './src/localize/languages/en.json'
+            from: 'en'
+            to: 'de,es,fr,nb,pl,pt'
+            debug: false
+
+      - name: Get current branch name
+        id: branch_name
+        run: echo ::set-output name=current_branch::${GITHUB_REF#refs/*/}
+
+      - name: Commit changes
+        uses: devops-infra/[email protected]
+        continue-on-error: true
+        with:
+            github_token: '${{ secrets.GITHUB_TOKEN }}'
+            commit_prefix: '[Auto] '
+            commit_message: 'Adding updated localization files'
+            force: false
+            target_branch: ${{steps.vars.branch_name.current_branch}}
diff --git a/README.md b/README.md
@@ -49,8 +49,8 @@ This card is focused on displaying hourly weather data. If you try selecting a w
 forecasts, it will show a warning. I've tested with the OpenWeatherMap integration using the `onecall_hourly` mode and
 that works very well.
 
-> ℹ️ NOTE: If your selected weather entity provides forecasts in increments of greater than one hour at a time, each segment
-> of the bar will be for one segment, not one hour.
+> ℹ️ NOTE: If your selected weather entity provides forecasts in increments of greater than one hour at a time, each
+> segment of the bar will be for one segment, not one hour.
 
 If you already use OpenWeatherMap for daily data, you can add a second integration of the same
 component for hourly -- just adjust the latitude or longitude a tiny bit (i.e. change the last decimal by 1).
@@ -65,6 +65,7 @@ Otherwise, the integration may complain of a duplicate unique ID.
 | name              | string | **Optional** | Card name                                    | `Hourly Weather`    |
 | icons             | bool   | **Optional** | Whether to show icons instead of text labels | `false`             |
 | num_hours         | number | **Optional** | Number of hours to show (even integer >= 2)  | `12`                |
+| colors            | object | **Optional** | Set colors for all or some conditions        |                     |
 | tap_action        | object | **Optional** | Action to take on tap                        | `action: more-info` |
 | hold_action       | object | **Optional** | Action to take on hold                       | `none`              |
 | double_tap_action | object | **Optional** | Action to take on double tap                 | `none`              |
@@ -81,6 +82,41 @@ Otherwise, the integration may complain of a duplicate unique ID.
 | haptic          | string | **Optional** | Haptic feedback _success, warning, failure, light, medium, heavy, selection_                       | `none`      |
 | repeat          | number | **Optional** | How often to repeat the `hold_action` in milliseconds.                                             | `none`      |
 
+## Color Options
+
+`colors` is specified as an object containing one or more of the keys listed below and values that are valid CSS
+colors. Invalid color values will be discarded and will trigger a warning.
+
+Some conditions will default to whatever the value is of some other condition. For example, `fog` will default to
+whatever `cloudy` is.
+
+| Key               | Default                |
+| ----------------- | ---------------------- |
+| `clear-night`     | `#000`                 |
+| `cloudy`          | `#777`                 |
+| `fog`             | same as `cloudy`       |
+| `hail`            | `#2b5174`              |
+| `lightning`       | same as `rainy`        |
+| `lightning-rainy` | same as `rainy`        |
+| `partlycloudy`    | `#b3dbff`              |
+| `pouring`         | same as `rainy`        |
+| `rainy`           | `#44739d`              |
+| `snowy`           | `#fff`                 |
+| `snowy-rainy`     | same as `partlycloudy` |
+| `sunny`           | `#90cbff`              |
+| `windy`           | same as `sunny`        |
+| `windy-variant`   | same as `sunny`        |
+| `exceptional`     | `#ff9d00`              |
+
+### Sample colors configuration
+
+```yaml
+colors:
+  sunny: '#bbccee' # note that hex colors must be quoted
+  snowy-rainy: rgba(255, 255, 255, 0.8) # rgba works (and hsla too)
+  exceptional: red # as do valid CSS color names
+```
+
 [commits-shield]: https://img.shields.io/github/commit-activity/y/decompil3d/lovelace-hourly-weather.svg?style=for-the-badge
 [commits]: https://github.com/decompil3d/lovelace-hourly-weather/commits/master
 [devcontainer]: https://code.visualstudio.com/docs/remote/containers
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,9 +4,6 @@ on: @@
       push:
         branches:
           - main
-      pull_request:
-        branches:
-          - main
     jobs:
       build:
@@ Expand Down @@