chore: merge mushroom 1.8.3 (#12)

* Update Vietnamese translation (piitaya#448) * Update vi.json * Change "Chip" to "chip" * feat(humidifier): add humidifier support (piitaya#346) * feat(humidifier): card * feat(humidifier): improve card * fix: view name * fix: humidity live * fix: MushroomBaseElement * fix: clean unused dependencies * fix: hacard * fix: collapsible controls * fix: remove buttons control * fix: remove buttons control * fix(humidifier): some fixes (piitaya#451) * fix: remove console.log * feat(media-player): show volume next to state when not unavailable/unknown/off (piitaya#374) * Show volume next to state * Revert "Show volume next to state" This reverts commit c40e32f. Undo due to suggestion from @acesyde * Reworked volume state based on feedback Co-authored-by: Paul Bottein <paul.bottein@gmail.com> * feat(media-player): add option to display volume level (piitaya#452) * chore: bump deps (piitaya#453) * 1.8.0 * Update README.md * Update German translation (piitaya#458) * Update de.json * Update de.json * Update de.json * Update zh-Hant.json (piitaya#455) * Update alarm card documentation according to piitaya#376 (piitaya#459) * Allow customizing badge, button, shape, slider sizes (piitaya#464) * Allow customizing badge, button, shape, slider sizes * Add --shape-avatar-size * feat(themes): improve css variables (piitaya#466) * fix(chip): fix avatar size for chip * fix(chip): add avatar only support (piitaya#468) * fix(actions): allow scroll within actions (piitaya#469) * Fix strict error handling in templates (piitaya#472) * Update German translation (piitaya#474) * Update de.json * Update de.json * Update de.json * Update de.json * 1.8.1 * Update README to reflect recent UI changes in HA 2022.5 (piitaya#470) * fix(ios): fix button size on ios * 1.8.2 * Update Italian translation (piitaya#478) Added humidity control translation Added show volume translation * 1.8.3 * update for new css variables Co-authored-by: redphx <96280+redphx@users.noreply.github.com> Co-authored-by: Pierre-Emmanuel Mercier <acesyde@gmail.com> Co-authored-by: Paul Bottein <paul.bottein@gmail.com> Co-authored-by: madmurl0c <42262826+madmurl0c@users.noreply.github.com> Co-authored-by: steffenrapp <88974099+steffenrapp@users.noreply.github.com> Co-authored-by: rhuba8324 <53090204+rhuba8324@users.noreply.github.com> Co-authored-by: Julien Ehrhart <julien.ehrhart@live.com> Co-authored-by: Franck Nijhof <git@frenck.dev> Co-authored-by: Doryx <81909485+doryxbirb@users.noreply.github.com>
ulic75 · May 12, 2022 · 69685b3 · 69685b3
1 parent 8fa4eee
commit 69685b3
Show file tree

Hide file tree

Showing 23 changed files with 123 additions and 55 deletions.
diff --git a/.hass_dev/views/chips-view.yaml b/.hass_dev/views/chips-view.yaml
@@ -70,6 +70,15 @@ cards:
             entity: sensor.outside_temperature
             icon: mdi:tree
             icon_color: green
+      - type: custom:mushroom-chips-card
+        chips:
+          - type: entity
+            entity: person.anne_therese
+            use_entity_picture: true
+          - type: entity
+            entity: person.anne_therese
+            use_entity_picture: true
+            content_info: none
   - type: vertical-stack
     title: Light chips
     cards:

diff --git a/README.md b/README.md
@@ -11,7 +11,7 @@
 
 ## What is mushroom ?
 
-Mushroom is a collection of cards for [Home Assistant][home-assistant] Lovelace UI.
+Mushroom is a collection of cards for [Home Assistant][home-assistant] Dashboard UI.
 
 Mushroom mission is to propose easy to use components to build your [Home Assistant][home-assistant] dashboard.
 
@@ -43,9 +43,9 @@ Mushroom is available in [HACS][hacs] (Home Assistant Community Store).
 
 1. Download `mushroom.js` file from the [latest-release].
 2. Put `mushroom.js` file into your `config/www` folder.
-3. Add reference to `mushroom.js` in Lovelace. There's two way to do that:
-    - **Using UI:** _Configuration_ → _Lovelace Dashboards_ → _Resources Tab_ → Click Plus button → Set _Url_ as `/local/mushroom.js` → Set _Resource type_ as `JavaScript Module`.
-      **Note:** If you do not see the Resources Tab, you will need to enable _Advanced Mode_ in your _User Profile_
+3. Add reference to `mushroom.js` in Dashboard. There's two way to do that:
+    - **Using UI:** _Settings_ → _Dashboards_ → _More Options icon_ → _Resources_ → _Add Resource_ → Set _Url_ as `/local/mushroom.js` → Set _Resource type_ as `JavaScript Module`.
+      **Note:** If you do not see the Resources menu, you will need to enable _Advanced Mode_ in your _User Profile_
     - **Using YAML:** Add following code to `lovelace` section.
         ```yaml
         resources:
@@ -55,10 +55,10 @@ Mushroom is available in [HACS][hacs] (Home Assistant Community Store).
 
 ## Usage
 
-All the Mushroom cards can be configured using Lovelace UI editor.
+All the Mushroom cards can be configured using Dashboard UI editor.
 
-1. In Lovelace UI, click 3 dots in top left corner.
-2. Click _Configure UI_.
+1. In Dashboard UI, click 3 dots in top right corner.
+2. Click _Edit Dashboard_.
 3. Click Plus button to add a new card.
 4. Find one of the _Custom: Mushroom_ card in the list.
 
@@ -79,6 +79,7 @@ Different cards are available for differents entities :
 -   🧹 [Vacuum card](docs/cards/vacuum.md)
 -   📺 [Media card](docs/cards/media-player.md)
 -   🔒 [Lock card](docs/cards/lock.md)
+-   💧 [Humidifier card](docs/cards/humidifier.md)
 
 Cards on the todo list :
 
@@ -122,12 +123,9 @@ Server will start on port `5000`.
 
 Once both Home Assistant and mushroom are running, you have to add a resource to Home Assistant UI:
 
--   Go on your profile
--   Enable `Advanced mode`
--   Then go to Lovelace resources
--   Add the ressource `http://localhost:5000/mushroom.js`:
-
-    _Configuration_ → _Lovelace Dashboards_ → _Resources Tab_ → Click Plus button → Set _Url_ as `http://localhost:5000/mushroom.js` → Set _Resource type_ as `JavaScript Module`.
+-   Enable `Advanced Mode` in your profile page
+-   Go to Dashboard Resources and add the ressource `http://localhost:5000/mushroom.js`:  
+    _Settings_ → _Dashboards_ → _More Options icon_ → _Resources_ → _Add Resource_ → Set _URL_ as `http://localhost:5000/mushroom.js` → Set _Resource type_ as `JavaScript Module`.
 
 ### Build
 
@@ -144,7 +142,7 @@ npm run build
 3. Import your file into the [`localize.ts file`](https://github.com/piitaya/lovelace-mushroom/blob/main/src/localize.ts) and add your language in the `languages` record.
 4. Don't forget to test locally with the development server by choosing the language with the Home Assistant UI in your profile.
 
-### Credits
+## Credits
 
 The design is inspired by [7ahang’s work][7ahang] on Behance and [Ui Lovelace Minimalist][ui-lovelace-minimalist].
 

diff --git a/docs/cards/alarm.md b/docs/cards/alarm.md
@@ -20,6 +20,7 @@ All the options are available in the lovelace editor but you can use `yaml` if y
 | `fill_container`    | boolean | `false`                        | Fill container or not. Useful when card is in a grid, vertical or horizontal layout |
 | `hide_state`        | boolean | `false`                        | Hide the entity state                                                               |
 | `states`            | list    | `["armed_home", "armed_away"]` | List of arm states to display                                                       |
+| `show_keypad`       | boolean | `false`                        | Show the keypad                                                                     |
 | `tap_action`        | action  | `more-info`                    | Home assistant action to perform on tap                                             |
 | `hold_action`       | action  | `more-info`                    | Home assistant action to perform on hold                                            |
 | `double_tap_action` | action  | `more-info`                    | Home assistant action to perform on double_tap                                      |
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mushroom-cards",
-  "version": "1.8.0",
+  "version": "1.8.3",
   "description": "",
   "main": "index.js",
   "scripts": {

diff --git a/src/cards/chips-card/chips/entity-chip.ts b/src/cards/chips-card/chips/entity-chip.ts
@@ -93,7 +93,8 @@ export class EntityChip extends LitElement implements LovelaceChip {
                     hasHold: hasAction(this._config.hold_action),
                     hasDoubleClick: hasAction(this._config.double_tap_action),
                 })}
-                avatar=${picture}
+                .avatar=${picture}
+                .avatarOnly=${picture && !content}
             >
                 ${!picture ? this.renderIcon(icon, iconColor, active) : null}
                 ${content ? html`<span>${content}</span>` : null}

diff --git a/src/cards/chips-card/chips/template-chip.ts b/src/cards/chips-card/chips/template-chip.ts
@@ -167,6 +167,7 @@ export class TemplateChip extends LitElement implements LovelaceChip {
                         user: this.hass.user!.name,
                         entity: this._config.entity,
                     },
+                    strict: true,
                 }
             );
             this._unsubRenderTemplates.set(key, sub);

diff --git a/src/cards/cover-card/cover-card-editor.ts b/src/cards/cover-card/cover-card-editor.ts
@@ -26,6 +26,7 @@ const computeSchema = memoizeOne((icon?: string): HaFormSchema[] => [
         type: "grid",
         name: "",
         schema: [
+            { name: "layout", selector: { "mush-layout": {} } },
             { name: "fill_container", selector: { boolean: {} } },
             { name: "hide_state", selector: { boolean: {} } },
         ],

diff --git a/src/cards/template-card/template-card.ts b/src/cards/template-card/template-card.ts
@@ -210,6 +210,7 @@ export class TemplateCard extends MushroomBaseElement implements LovelaceCard {
                         user: this.hass.user!.name,
                         entity: this._config.entity,
                     },
+                    strict: true,
                 }
             );
             this._unsubRenderTemplates.set(key, sub);

diff --git a/src/cards/title-card/title-card.ts b/src/cards/title-card/title-card.ts
@@ -135,6 +135,7 @@ export class TitleCard extends MushroomBaseElement implements LovelaceCard {
                         config: this._config,
                         user: this.hass.user!.name,
                     },
+                    strict: true,
                 }
             );
             this._unsubRenderTemplates.set(key, sub);

diff --git a/src/shared/badge-icon.ts b/src/shared/badge-icon.ts
@@ -23,15 +23,16 @@ export class BadgeIcon extends LitElement {
                 display: flex;
                 align-items: center;
                 justify-content: center;
-                line-height: 10px;
-                width: 16px;
-                height: 16px;
-                border-radius: 50%;
+                line-height: 0;
+                width: var(--badge-size);
+                height: var(--badge-size);
+                font-size: var(--badge-size);
+                border-radius: var(--badge-border-radius);
                 background-color: var(--main-color);
                 transition: background-color 280ms ease-in-out;
             }
             .badge ha-icon {
-                --mdc-icon-size: 12px;
+                --mdc-icon-size: var(--badge-icon-size);
                 color: var(--icon-color);
             }
         `;

diff --git a/src/shared/button.ts b/src/shared/button.ts
@@ -22,8 +22,8 @@ export class Button extends LitElement {
                 --icon-color-disabled: rgb(var(--rgb-disabled));
                 --bg-color: rgba(var(--rgb-primary-text-color), 0.05);
                 --bg-color-disabled: rgba(var(--rgb-disabled), 0.2);
-                width: 42px;
-                height: 42px;
+                height: var(--control-height);
+                width: calc(var(--control-height) * var(--control-button-ratio));
                 flex: none;
             }
             .button {
@@ -37,13 +37,18 @@ export class Button extends LitElement {
                 border: none;
                 background-color: var(--bg-color);
                 transition: background-color 280ms ease-in-out;
+                font-size: var(--control-height);
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+                line-height: 0;
             }
             .button:disabled {
                 cursor: not-allowed;
                 background-color: var(--bg-color-disabled);
             }
             .button ha-icon {
-                --mdc-icon-size: 20px;
+                --mdc-icon-size: var(--control-icon-size);
                 color: var(--icon-color);
                 pointer-events: none;
             }

diff --git a/src/shared/chip.ts b/src/shared/chip.ts
@@ -1,6 +1,5 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { property, customElement } from "lit/decorators.js";
-import { animations } from "../utils/entity-styles";
 
 @customElement("mushroom-chip")
 export class BadgeIcon extends LitElement {
@@ -10,13 +9,19 @@ export class BadgeIcon extends LitElement {
 
     @property() public avatar: string = "";
 
+    @property() public avatarOnly: boolean = false;
+
     protected render(): TemplateResult {
         return html`
             <ha-card class="chip">
                 ${this.avatar ? html` <img class="avatar" src=${this.avatar} /> ` : null}
-                <div class="content">
-                    <slot></slot>
-                </div>
+                ${!this.avatarOnly
+                    ? html`
+                          <div class="content">
+                              <slot></slot>
+                          </div>
+                      `
+                    : null}
             </ha-card>
         `;
     }
@@ -30,6 +35,8 @@ export class BadgeIcon extends LitElement {
             .chip {
                 box-sizing: border-box;
                 height: var(--chip-height);
+                min-width: var(--chip-height);
+                font-size: var(--chip-height);
                 width: auto;
                 border-radius: var(--chip-border-radius);
                 display: flex;
@@ -55,7 +62,6 @@ export class BadgeIcon extends LitElement {
                 align-items: center;
                 justify-content: center;
                 height: 100%;
-                font-size: calc(var(--chip-height) * 0.3);
                 padding: var(--chip-padding);
                 line-height: 0;
             }
@@ -76,11 +82,11 @@ export class BadgeIcon extends LitElement {
                 color: var(--text-color);
             }
             ::slotted(*:not(:last-child)) {
-                margin-right: 0.5em;
+                margin-right: 0.15em;
             }
             :host([rtl]) ::slotted(*:not(:last-child)) {
                 margin-right: initial;
-                margin-left: 0.5em;
+                margin-left: 0.15em;
             }
         `;
     }

diff --git a/src/shared/dual-slider.ts b/src/shared/dual-slider.ts
@@ -229,7 +229,7 @@ export class SliderItem extends LitElement {
             .container {
                 display: flex;
                 flex-direction: row;
-                height: 42px;
+                height: var(--control-height);
             }
             .slider {
                 position: relative;

diff --git a/src/shared/shape-avatar.ts b/src/shared/shape-avatar.ts
@@ -25,8 +25,8 @@ export class ShapePicture extends LitElement {
             }
             .container {
                 position: relative;
-                width: 42px;
-                height: 42px;
+                width: var(--icon-size);
+                height: var(--icon-size);
                 flex: none;
                 display: flex;
                 align-items: center;

diff --git a/src/shared/shape-icon.ts b/src/shared/shape-icon.ts
@@ -32,13 +32,13 @@ export class ShapeIcon extends LitElement {
                 --shape-color-disabled: rgba(var(--rgb-disabled), 0.2);
                 --shape-animation: none;
                 --shape-outline-color: transparent;
-                --shape-outline-size: 1px;
                 flex: none;
             }
             .shape {
                 position: relative;
-                width: 42px;
-                height: 42px;
+                width: var(--icon-size);
+                height: var(--icon-size);
+                font-size: var(--icon-size);
                 border-radius: var(--icon-border-radius);
                 display: flex;
                 align-items: center;
@@ -48,11 +48,11 @@ export class ShapeIcon extends LitElement {
                 transition-duration: 280ms;
                 transition-timing-function: ease-out;
                 animation: var(--shape-animation);
-                box-shadow: 0 0 0 var(--shape-outline-size) var(--shape-outline-color);
+                box-shadow: 0 0 0 1px var(--shape-outline-color);
             }
             .shape ha-icon {
                 display: flex;
-                --mdc-icon-size: 20px;
+                --mdc-icon-size: var(--icon-symbol-size);
                 color: var(--icon-color);
                 transition: color 280ms ease-in-out;
                 animation: var(--icon-animation);

diff --git a/src/shared/slider.ts b/src/shared/slider.ts
@@ -174,7 +174,7 @@ export class SliderItem extends LitElement {
             .container {
                 display: flex;
                 flex-direction: row;
-                height: 42px;
+                height: var(--control-height);
             }
             .slider {
                 position: relative;

diff --git a/src/shared/state-value.ts b/src/shared/state-value.ts
@@ -14,16 +14,17 @@ export class StateValue extends LitElement {
             :host {
                 --text-color: var(--primary-text-color);
                 --bg-color: rgba(var(--rgb-primary-text-color), 0.05);
-                width: 42px;
-                height: 42px;
+                font-size: var(--control-height);
+                height: var(--control-height);
+                width: calc(var(--control-height) * var(--control-button-ratio));
                 flex: none;
             }
             .value {
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 color: var(--text-color);
-                font-size: 16px;
+                font-size: 0.38em;
                 font-weight: bold;
                 height: 100%;
                 width: 100%;

diff --git a/src/translations/de.json b/src/translations/de.json
@@ -40,6 +40,7 @@
                 "hide_icon": "Icon ausblenden?",
                 "icon_color": "Icon-Farbe",
                 "layout": "Layout",
+                "fill_container": "Container ausfüllen",
                 "primary_info": "Primäre Information",
                 "secondary_info": "Sekundäre Information",
                 "content_info": "Inhalt",
@@ -62,6 +63,9 @@
                 "show_buttons_control": "Schaltflächensteuerung?",
                 "show_position_control": "Positionssteuerung?"
             },
+            "alarm_control_panel": {
+                "show_keypad": "Keypad anzeigen"
+            },
             "template": {
                 "primary": "Primäre Information",
                 "secondary": "Sekundäre Information",
@@ -89,6 +93,7 @@
             "media-player": {
                 "use_media_info": "Medieninfos verwenden",
                 "use_media_artwork": "Mediengrafik verwenden",
+                "show_volume_level": "Lautstärke-Level anzeigen",
                 "media_controls": "Mediensteuerung",
                 "media_controls_list": {
                     "on_off": "Ein/Aus",
@@ -100,15 +105,18 @@
                 },
                 "volume_controls": "Lautstärkesteuerung",
                 "volume_controls_list": {
-                    "volume_buttons": "Lautstärke Buttons",
-                    "volume_set": "Lautstärke Level",
+                    "volume_buttons": "Lautstärke-Buttons",
+                    "volume_set": "Lautstärke-Level",
                     "volume_mute": "Stumm"
                 }
             },
             "lock": {
                 "lock": "Verriegeln",
                 "unlock": "Entriegeln",
                 "open": "Öffnen"
+            },
+            "humidifier": {
+                "show_target_humidity_control": "Luftfeuchtigkeitssteuerung?"
             }
         },
         "chip": {