Adding icon + updating docs

custom-cards · Feb 16, 2023 · 3c8ec01 · 3c8ec01
1 parent 9368010
commit 3c8ec01
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -8,7 +8,8 @@ A very simple element for picture-elements card that shows static text that supp
 | Name | Type | Default | Since | Description |
 |------|------|---------|-------|-------------|
 | type | string | **required** | v0.1 | `custom:text-action-element`
-| text | string | **required** | v0.1 | Cover entity to control.
+| text | string | **required** | v0.1 | Text to display (**EITHER** text or icon must be specified)
+| icon | string | **required** | v0.3 | Icon to display (**EITHER** icon or text must be specified)
 | entity | string |  | v0.1 | Entity that tap_action should operate on (no need to provide if you just want static text)
 | tap_action | object |  | v0.1 | See [Action](#action) 
 | state_filter | list |  | v0.1 | State based CSS filters. See [this link](https://www.home-assistant.io/lovelace/picture-elements/#how-to-use-state_filter) for usage docs.
@@ -43,6 +44,27 @@ A very simple element for picture-elements card that shows static text that supp
         action: toggle
 ```
 
+Icon with no action
+
+```yaml
+- type: picture-elements
+  image: /local/LivingRoom.jpg
+  elements:
+    - type: 'custom:text-action-element'
+      icon: mdi:television
+      style:
+        top: 40%
+        height: 15%
+        width: 23%
+        left: 53%
+        background-color: 'rgba(255, 255, 255, 0.6)'
+        border-radius: 10px
+      entity: light.livingroom
+      tap_action:
+        action: none
+```
+
+
 ## Install
 
 ### Simple install
@@ -53,7 +75,7 @@ A very simple element for picture-elements card that shows static text that supp
 
   ```yaml
   resources:
-    - url: /local/text-action-element-bundle.js?v=0.1.0
+    - url: /local/text-action-element-bundle.js?v=0.3.0
       type: module
   ```
 To do this, go to Configure UI -> Raw Config Editor and paste this under resources or use [YAML Mode](https://www.home-assistant.io/lovelace/yaml-mode/) (not recommended))
@@ -65,14 +87,14 @@ To do this, go to Configure UI -> Raw Config Editor and paste this under resourc
 2. Grab `text-action-element-bundle.js`
 
   ```console
-  $ wget https://github.com/custom-cards/text-action-element/releases/download/0.1.0/text-action-element-bundle.js
+  $ wget https://github.com/custom-cards/text-action-element/releases/download/0.3.0/text-action-element-bundle.js
   ```
 
 3. Add a reference to `text-action-element-bundle.js` inside your `ui-lovelace.yaml`.
 
   ```yaml
   resources:
-    - url: /local/text-action-element-bundle.js?v=0.1.0
+    - url: /local/text-action-element-bundle.js?v=0.3.0
       type: module
   ```
 
@@ -97,7 +119,7 @@ To do this, go to Configure UI -> Raw Config Editor and paste this under resourc
 
   ```yaml
   resources:
-    - url: /local/text-action-element-bundle.js?v=0.1.0
+    - url: /local/text-action-element-bundle.js?v=0.3.0
       type: module
   ```
 

diff --git a/package.json b/package.json
@@ -35,10 +35,10 @@
     "eslint-plugin-prettier": "^3.0.1",
     "eslint-plugin-react": "^7.12.4",
     "prettier": "^1.16.4",
-    "rollup": "^0.66.6",
+    "rollup": "^0.68.0",
     "rollup-plugin-node-resolve": "^3.4.0",
     "rollup-plugin-babel": "^4.3.2",
-    "rollup-plugin-typescript2": "^0.19.2",
+    "rollup-plugin-typescript2": "^0.19.3",
     "typescript": "^3.3.3333"
   },
   "scripts": {

diff --git a/src/text-action-element.js b/src/text-action-element.js
@@ -15,15 +15,19 @@ class HuiTextActionElement extends HassUtils.LitElement {
   }
 
   setConfig(config) {
-    if (!config.text) {
-      throw Error("Invalid Configuration: 'text' required");
+    if (!config.text && !config.icon) {
+      throw Error("Invalid Configuration: 'text' or 'icon' required");
     }
 
     this._config = config;
   }
 
   render() {
-    if (!this._config || !this.hass || !this._config.text) {
+    if (
+      !this._config ||
+      !this.hass ||
+      (!this._config.text && !this._config.icon)
+    ) {
       return HassUtils.LitHtml``;
     }
 
@@ -48,7 +52,13 @@ class HuiTextActionElement extends HassUtils.LitElement {
     return HassUtils.LitHtml`
       <div class="content" @click=${this._handleTap} 
         style="${filter}">
-        ${this._config.text}
+          ${
+            this._config.text
+              ? this._config.text
+              : HassUtils.LitHtml`
+                  <ha-icon .icon=${this._config.icon}></ha-icon>
+                `
+          }
       </div>
     `;
   }