Merge pull request #160 from tj57/main

Cover card - option to change the up/down button icon
Clooos · Nov 18, 2023 · faf180d · faf180d
2 parents 88fdda0 + 809e8ce
commit faf180d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -273,6 +273,8 @@ This card allows you to control your covers.
 | `name` | string | Optional | Any string | A name for your cover, if not defined it will display the entity name |
 | `icon_open` | string | Optional | Any `mdi:` icon | An icon for your open cover, if not defined it will display the default open cover icon |
 | `icon_close` | string | Optional | Any `mdi:` icon | An icon for your closed cover, if not defined it will display the default closed cover icon |
+| `icon_up` | string | Optional | Any `mdi:` icon | An icon for your open cover button, if not defined it will display the default open cover icon |
+| `icon_down` | string | Optional | Any `mdi:` icon | An icon for your close cover button, if not defined it will display the default close cover icon |
 | `open_service` | string | Optional | Any service or script | A service to open your cover, default to `cover.open_cover` |
 | `stop_service` | string | Optional | Any service or script | A service to stop your cover, default to `cover.stop_cover` |
 | `close_service` | string | Optional | Any service or script | A service to close your cover, default to `cover.close_cover` |

diff --git a/src/bubble-card.js b/src/bubble-card.js
@@ -1083,6 +1083,8 @@ class BubbleCard extends HTMLElement {
                 const openCover = !this.config.open_service ? 'cover.open_cover' : this.config.open_service;
                 const closeCover = !this.config.close_service ? 'cover.close_cover' : this.config.close_service;
                 const stopCover = !this.config.stop_service ? 'cover.stop_cover' : this.config.stop_service;
+                const iconUp = this.config.icon_up ? this.config.icon_up : "mdi:arrow-up";
+                const iconDown = this.config.icon_down ? this.config.icon_down : "mdi:arrow-down";
                 icon = hass.states[this.config.entity].state === 'open' ? iconOpen : iconClosed;
                 formatedState = this.config.entity ? hass.formatEntityState(hass.states[this.config.entity]) : '';
 
@@ -1110,13 +1112,13 @@ class BubbleCard extends HTMLElement {
                         </div>
                         <div class="buttons-container">
                             <button class="button open">
-                                <ha-icon icon="mdi:arrow-up"></ha-icon>
+                                <ha-icon icon="${iconUp}"></ha-icon>
                             </button>
                             <button class="button stop">
                                 <ha-icon icon="mdi:stop"></ha-icon>
                             </button>
                             <button class="button close">
-                                <ha-icon icon="mdi:arrow-down"></ha-icon>
+                                <ha-icon icon="${iconDown}"></ha-icon>
                             </button>
                         </div>
                     `
@@ -1366,6 +1368,14 @@ class BubbleCardEditor extends LitElement {
         return this._config.icon_close || '';
     }
 
+    get _icon_down() {
+        return this._config.icon_down || '';
+    }
+
+    get _icon_up() {
+        return this._config.icon_up || '';
+    }
+
     get _open_service() {
         return this._config.open_service || 'cover.open_cover';
     }
@@ -1656,6 +1666,8 @@ class BubbleCardEditor extends LitElement {
                     ></ha-textfield>
                     ${this.makeDropdown("Optional - Open icon", "icon_open")}
                     ${this.makeDropdown("Optional - Closed icon", "icon_close")}
+                    ${this.makeDropdown("Optional - Arrow down icon", "icon_down")}
+                    ${this.makeDropdown("Optional - Arrow up icon", "icon_up")}
                     ${this.makeVersion()}
                 </div>
             `;