Use icon image where available #4721
Conversation
|
How do we know if something is installed in the store ? |
| @@ -17,21 +18,44 @@ class HassioCardContent extends LitElement { | |||
| @property() public hass!: HomeAssistant; | |||
| @property() public title!: string; | |||
| @property() public description?: string; | |||
| @property({ type: Boolean }) public available?: boolean; | |||
| @property({ type: Boolean }) public available: boolean = true; | |||
| @property({ type: Boolean }) public updateAvailable: boolean = false; | |||
There was a problem hiding this comment.
Since this is a generic card (personally not a fan, too many different permutations we're trying to support in 1 card), all properties to this card should be named after how they impact the look of the card and not what they represent in the specific use case that caused them to be added.
There was a problem hiding this comment.
How about creating a base card, and a add-on card that extends it?
Good question, there is the obvious "it's your system, you should know what you have installed" |
|
Maybe a blue line on the top of the card? (but with position absolute, not border, becaus we don't want to increase height of the card or mis-align the text) |
|
Should that be limited to the store view only? |
|
Yes |
|
Updated store screenshot to reflect the addition of the blue bar on installed add-ons |
| .iconImage=${ha105pluss && addon.icon | ||
| ? `/api/hassio/addons/${addon.slug}/icon` | ||
| : undefined} | ||
| ?showBlueTopbar=${addon.installed} |
There was a problem hiding this comment.
It's always faster to go via properties. Only use attributes if the value never changes.
| ?showBlueTopbar=${addon.installed} | |
| .showBlueTopbar=${addon.installed} |
| private _addonTapped(ev: any): void { | ||
| navigate(this, `/hassio/addon/${ev.currentTarget.addon.slug}`); | ||
| } | ||
|
|
||
| private _openStore(): void { | ||
| navigate(this, "/hassio/store"); | ||
| } | ||
|
|
||
| private get _computeHA105plus(): boolean { |
There was a problem hiding this comment.
Personally not a fan of getters when doing computation. It's only 1 call here so it's ok.
| ? "hassio:arrow-up-bold-circle" | ||
| : "hassio:puzzle"} | ||
| .iconTitle=${addon.state !== "started" | ||
| ? "Add-on is stopped" |
There was a problem hiding this comment.
Do we have i18n strings for this?
There was a problem hiding this comment.
Not yet, it's on my list to create PR's (one pr section, to keep it small) to have that for all stings (that make sense) under hassio/src
|
Should we combine the update available and installed indication, I think it is weird that we have 2 different styles to indicate something. Why not have a orange line? |
|
I think that's a great idea. We can use secondary color if an update is available. |
Proposed change
From: https://twitter.com/andreadonno/status/1218074534936563712?s=20
I tried to add a dot in the bottom corner of the icon to indicate the started/stopped statuses, but the images come in every shape possible and it did not look that great, using grayscale always works.
Baloob mentioned and "Update pening" bage on twitter, but that had some issues with jumping text, and when the title was long it should drop the title/go over multiple lines, I think a little dot in the corner is sufficient.
Screenshots 馃摲
Overview
Add-on store
Add-on not startet/not available
Add-on has an update pending
"old" overview (for refrence)
"old" add-on store (for refrence)
Type of change
Additional information
Checklist
If user exposed functionality or configuration variables are added/changed: