fix(chip): add avatar only support

piitaya · May 10, 2022 · eacb5dc · eacb5dc
1 parent 782a5ed
commit eacb5dc
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 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/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/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,7 @@ 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);