From c94d5ae051628bd33e46f92931a0f9da6d80ef53 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Wed, 31 Jan 2024 09:45:14 +0100 Subject: [PATCH] Use slot for mushroom-button icon --- .../alarm-control-panel-card.ts | 6 ++++-- src/cards/climate-card/climate-card.ts | 7 +++---- .../controls/cover-buttons-control.ts | 14 +++++++++----- src/cards/cover-card/cover-card.ts | 13 +++++++------ .../fan-card/controls/fan-oscillate-control.ts | 9 +++++++-- src/cards/light-card/light-card.ts | 7 +++---- .../lock-card/controls/lock-buttons-control.ts | 7 ++++--- .../controls/media-player-media-control.ts | 10 ++++------ .../controls/media-player-volume-control.ts | 18 ++++++++++++------ .../media-player-card/media-player-card.ts | 7 +++---- .../controls/update-buttons-control.ts | 18 +++++++----------- .../controls/vacuum-commands-control.ts | 7 ++++--- src/shared/button.ts | 7 +++---- 13 files changed, 70 insertions(+), 60 deletions(-) diff --git a/src/cards/alarm-control-panel-card/alarm-control-panel-card.ts b/src/cards/alarm-control-panel-card/alarm-control-panel-card.ts index 9e5eaf83a..9cd4dc462 100644 --- a/src/cards/alarm-control-panel-card/alarm-control-panel-card.ts +++ b/src/cards/alarm-control-panel-card/alarm-control-panel-card.ts @@ -204,10 +204,12 @@ export class AlarmControlPanelCard extends MushroomBaseCard implements LovelaceC ${actions.map( (action) => html` this._onTap(e, action.state)} .disabled=${!isActionEnabled} - > + > + + + ` )} diff --git a/src/cards/climate-card/climate-card.ts b/src/cards/climate-card/climate-card.ts index 802c712e1..72b2f4c7f 100644 --- a/src/cards/climate-card/climate-card.ts +++ b/src/cards/climate-card/climate-card.ts @@ -248,10 +248,9 @@ export class ClimateCard extends MushroomBaseCard implements LovelaceCard { return html` ${otherControls.map( (ctrl) => html` - this._onControlTap(ctrl, e)} - > + this._onControlTap(ctrl, e)}> + + ` )} `; diff --git a/src/cards/cover-card/controls/cover-buttons-control.ts b/src/cards/cover-card/controls/cover-buttons-control.ts index 9a1dc539a..ff2480c54 100644 --- a/src/cards/cover-card/controls/cover-buttons-control.ts +++ b/src/cards/cover-card/controls/cover-buttons-control.ts @@ -65,10 +65,11 @@ export class CoverButtonsControl extends LitElement { ${supportsFeature(this.entity, COVER_SUPPORT_OPEN) ? html` + > + + ` : undefined} ${supportsFeature(this.entity, COVER_SUPPORT_STOP) @@ -77,16 +78,19 @@ export class CoverButtonsControl extends LitElement { icon="mdi:stop" .disabled=${!isAvailable(this.entity)} @click=${this._onStopTap} - > + > + + ` : undefined} ${supportsFeature(this.entity, COVER_SUPPORT_CLOSE) ? html` + > + + ` : undefined} diff --git a/src/cards/cover-card/cover-card.ts b/src/cards/cover-card/cover-card.ts index 1b6af1eb5..7c26bfc96 100644 --- a/src/cards/cover-card/cover-card.ts +++ b/src/cards/cover-card/cover-card.ts @@ -1,4 +1,3 @@ -import { HassEntity } from "home-assistant-js-websocket"; import { css, CSSResultGroup, html, nothing, PropertyValues, TemplateResult } from "lit"; import { customElement, state } from "lit/decorators.js"; import { classMap } from "lit/directives/class-map.js"; @@ -234,11 +233,13 @@ export class CoverCard extends MushroomBaseCard implements LovelaceCard { + > + + `; } - private renderActiveControl(stateObj: HassEntity, layout?: Layout) { + private renderActiveControl(stateObj: CoverEntity, layout?: Layout) { switch (this._activeControl) { case "buttons_control": return html` @@ -246,7 +247,7 @@ export class CoverCard extends MushroomBaseCard implements LovelaceCard { .hass=${this.hass} .entity=${stateObj} .fill=${layout !== "horizontal"} - /> + > `; case "position_control": { const color = getStateColor(stateObj as CoverEntity); @@ -260,7 +261,7 @@ export class CoverCard extends MushroomBaseCard implements LovelaceCard { .entity=${stateObj} @current-change=${this.onCurrentPositionChange} style=${styleMap(sliderStyle)} - /> + > `; } case "tilt_position_control": { @@ -274,7 +275,7 @@ export class CoverCard extends MushroomBaseCard implements LovelaceCard { .hass=${this.hass} .entity=${stateObj} style=${styleMap(sliderStyle)} - /> + > `; } default: diff --git a/src/cards/fan-card/controls/fan-oscillate-control.ts b/src/cards/fan-card/controls/fan-oscillate-control.ts index c6926b1bb..fc928fe98 100644 --- a/src/cards/fan-card/controls/fan-oscillate-control.ts +++ b/src/cards/fan-card/controls/fan-oscillate-control.ts @@ -29,10 +29,15 @@ export class FanPercentageControl extends LitElement { return html` + > + + `; } diff --git a/src/cards/light-card/light-card.ts b/src/cards/light-card/light-card.ts index be32e66c3..a2153d801 100644 --- a/src/cards/light-card/light-card.ts +++ b/src/cards/light-card/light-card.ts @@ -261,10 +261,9 @@ export class LightCard extends MushroomBaseCard implements LovelaceCard { return html` ${otherControls.map( (ctrl) => html` - this._onControlTap(ctrl, e)} - /> + this._onControlTap(ctrl, e)}> + + ` )} `; diff --git a/src/cards/lock-card/controls/lock-buttons-control.ts b/src/cards/lock-card/controls/lock-buttons-control.ts index c627b6f92..d21bab6c6 100644 --- a/src/cards/lock-card/controls/lock-buttons-control.ts +++ b/src/cards/lock-card/controls/lock-buttons-control.ts @@ -54,7 +54,7 @@ export class LockButtonsControl extends LitElement { @property({ attribute: false }) public entity!: LockEntity; - @property() public fill: boolean = false; + @property({ type: Boolean }) public fill: boolean = false; private callService(e: CustomEvent) { e.stopPropagation(); @@ -73,14 +73,15 @@ export class LockButtonsControl extends LitElement { >${LOCK_BUTTONS.filter((item) => item.isVisible(this.entity)).map( (item) => html` + > + + ` )} diff --git a/src/cards/media-player-card/controls/media-player-media-control.ts b/src/cards/media-player-card/controls/media-player-media-control.ts index cda8ec7d7..5466c7433 100644 --- a/src/cards/media-player-card/controls/media-player-media-control.ts +++ b/src/cards/media-player-card/controls/media-player-media-control.ts @@ -17,7 +17,7 @@ export class MediaPlayerMediaControls extends LitElement { @property({ attribute: false }) public controls!: MediaPlayerMediaControl[]; - @property() public fill: boolean = false; + @property({ type: Boolean }) public fill: boolean = false; private _handleClick(e: MouseEvent): void { e.stopPropagation(); @@ -34,11 +34,9 @@ export class MediaPlayerMediaControls extends LitElement { ${controls.map( (control) => html` - + + + ` )} diff --git a/src/cards/media-player-card/controls/media-player-volume-control.ts b/src/cards/media-player-card/controls/media-player-volume-control.ts index 5db98c119..91841dd28 100644 --- a/src/cards/media-player-card/controls/media-player-volume-control.ts +++ b/src/cards/media-player-card/controls/media-player-volume-control.ts @@ -31,7 +31,7 @@ export class MediaPlayerVolumeControls extends LitElement { @property({ attribute: false }) public entity!: MediaPlayerEntity; - @property() public fill: boolean = false; + @property({ type: Boolean }) public fill: boolean = false; @property({ attribute: false }) public controls!: MediaPlayerVolumeControl[]; @@ -97,21 +97,25 @@ export class MediaPlayerVolumeControls extends LitElement { ? html` + > + + ` : undefined} ${displayVolumeButtons ? html` + ` : undefined} @@ -122,6 +126,8 @@ export class MediaPlayerVolumeControls extends LitElement { icon="mdi:volume-plus" .disabled=${!isAvailable(this.entity) || isOff(this.entity)} @click=${this.handleClick} + > + ` : undefined} diff --git a/src/cards/media-player-card/media-player-card.ts b/src/cards/media-player-card/media-player-card.ts index f7b8b7239..3526058e9 100644 --- a/src/cards/media-player-card/media-player-card.ts +++ b/src/cards/media-player-card/media-player-card.ts @@ -219,10 +219,9 @@ export class MediaPlayerCard extends MushroomBaseCard implements LovelaceCard { return html` ${otherControls.map( (ctrl) => html` - this._onControlTap(ctrl, e)} - /> + this._onControlTap(ctrl, e)}> + + ` )} `; diff --git a/src/cards/update-card/controls/update-buttons-control.ts b/src/cards/update-card/controls/update-buttons-control.ts index 0ee6e8101..bf7665fac 100644 --- a/src/cards/update-card/controls/update-buttons-control.ts +++ b/src/cards/update-card/controls/update-buttons-control.ts @@ -17,7 +17,7 @@ export class UpdateButtonsControl extends LitElement { @property({ attribute: false }) public entity!: UpdateEntity; - @property() public fill: boolean = false; + @property({ type: Boolean }) public fill: boolean = false; private _handleInstall(): void { this.hass.callService("update", "install", { @@ -53,16 +53,12 @@ export class UpdateButtonsControl extends LitElement { return html` - - + + + + + + `; } diff --git a/src/cards/vacuum-card/controls/vacuum-commands-control.ts b/src/cards/vacuum-card/controls/vacuum-commands-control.ts index 546ec2701..ee689eca8 100644 --- a/src/cards/vacuum-card/controls/vacuum-commands-control.ts +++ b/src/cards/vacuum-card/controls/vacuum-commands-control.ts @@ -116,7 +116,7 @@ export class CoverButtonsControl extends LitElement { @property({ attribute: false }) public commands!: VacuumCommand[]; - @property() public fill: boolean = false; + @property({ type: Boolean }) public fill: boolean = false; private callService(e: CustomEvent) { e.stopPropagation(); @@ -134,11 +134,12 @@ export class CoverButtonsControl extends LitElement { ${VACUUM_BUTTONS.filter((item) => item.isVisible(this.entity, this.commands)).map( (item) => html` + > + + ` )} diff --git a/src/shared/button.ts b/src/shared/button.ts index 326dd61fb..20cbbff53 100644 --- a/src/shared/button.ts +++ b/src/shared/button.ts @@ -3,14 +3,13 @@ import { property, customElement } from "lit/decorators.js"; @customElement("mushroom-button") export class Button extends LitElement { - @property() public icon: string = ""; @property() public title: string = ""; @property({ type: Boolean }) public disabled: boolean = false; protected render(): TemplateResult { return html` `; } @@ -47,12 +46,12 @@ export class Button extends LitElement { cursor: not-allowed; background-color: var(--bg-color-disabled); } - .button ha-icon { + .button ::slotted(*) { --mdc-icon-size: var(--control-icon-size); color: var(--icon-color); pointer-events: none; } - .button:disabled ha-icon { + .button:disabled ::slotted(*) { color: var(--icon-color-disabled); } `;