Skip to content

Commit

Permalink
Adding icon + updating docs
Browse files Browse the repository at this point in the history
  • Loading branch information
yosilevy committed Feb 16, 2023
1 parent 9368010 commit 3c8ec01
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 11 deletions.
32 changes: 27 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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
Expand All @@ -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))
Expand All @@ -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
```

Expand All @@ -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
```

Expand Down
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
18 changes: 14 additions & 4 deletions src/text-action-element.js
Original file line number Diff line number Diff line change
Expand Up @@ -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``;
}

Expand All @@ -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>
`;
}
Expand Down

0 comments on commit 3c8ec01

Please sign in to comment.