Skip to content

Commit

Permalink
Use slot for mushroom-button icon (#1347)
Browse files Browse the repository at this point in the history
  • Loading branch information
@piitaya
piitaya authored Jan 31, 2024
1 parent 9d8118a commit d6fe338
Show file tree
Hide file tree
Showing 13 changed files with 70 additions and 60 deletions.
6 changes: 4 additions & 2 deletions src/cards/alarm-control-panel-card/alarm-control-panel-card.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,10 +204,12 @@ export class AlarmControlPanelCard extends MushroomBaseCard implements LovelaceC
${actions.map(
(action) => html`
<mushroom-button
.icon=${alarmPanelIconAction(action.state)}
@click=${(e) => this._onTap(e, action.state)}
.disabled=${!isActionEnabled}
></mushroom-button>
>
<ha-icon .icon=${alarmPanelIconAction(action.state)}>
</ha-icon>
</mushroom-button>
`
)}
</mushroom-button-group>
Expand Down
7 changes: 3 additions & 4 deletions src/cards/climate-card/climate-card.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,10 +248,9 @@ export class ClimateCard extends MushroomBaseCard implements LovelaceCard {
return html`
${otherControls.map(
(ctrl) => html`
<mushroom-button
.icon=${CONTROLS_ICONS[ctrl]}
@click=${(e) => this._onControlTap(ctrl, e)}
></mushroom-button>
<mushroom-button @click=${(e) => this._onControlTap(ctrl, e)}>
<ha-icon .icon=${CONTROLS_ICONS[ctrl]}></ha-icon>
</mushroom-button>
`
)}
`;
Expand Down
14 changes: 9 additions & 5 deletions src/cards/cover-card/controls/cover-buttons-control.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,10 +65,11 @@ export class CoverButtonsControl extends LitElement {
${supportsFeature(this.entity, COVER_SUPPORT_OPEN)
? html`
<mushroom-button
.icon=${computeOpenIcon(this.entity)}
.disabled=${!isAvailable(this.entity) || this.openDisabled}
@click=${this._onOpenTap}
></mushroom-button>
>
<ha-icon .icon=${computeOpenIcon(this.entity)}></ha-icon>
</mushroom-button>
`
: undefined}
${supportsFeature(this.entity, COVER_SUPPORT_STOP)
Expand All @@ -77,16 +78,19 @@ export class CoverButtonsControl extends LitElement {
icon="mdi:stop"
.disabled=${!isAvailable(this.entity)}
@click=${this._onStopTap}
></mushroom-button>
>
<ha-icon icon="mdi:stop"></ha-icon>
</mushroom-button>
`
: undefined}
${supportsFeature(this.entity, COVER_SUPPORT_CLOSE)
? html`
<mushroom-button
.icon=${computeCloseIcon(this.entity)}
.disabled=${!isAvailable(this.entity) || this.closedDisabled}
@click=${this._onCloseTap}
></mushroom-button>
>
<ha-icon .icon=${computeCloseIcon(this.entity)}></ha-icon>
</mushroom-button>
`
: undefined}
</mushroom-button-group>
Expand Down
13 changes: 7 additions & 6 deletions src/cards/cover-card/cover-card.ts
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -234,19 +233,21 @@ export class CoverCard extends MushroomBaseCard implements LovelaceCard {
<mushroom-button
.icon=${CONTROLS_ICONS[this._nextControl]}
@click=${this._onNextControlTap}
/>
>
<ha-icon .icon=${CONTROLS_ICONS[this._nextControl]}></ha-icon>
</mushroom-button>
`;
}

private renderActiveControl(stateObj: HassEntity, layout?: Layout) {
private renderActiveControl(stateObj: CoverEntity, layout?: Layout) {
switch (this._activeControl) {
case "buttons_control":
return html`
<mushroom-cover-buttons-control
.hass=${this.hass}
.entity=${stateObj}
.fill=${layout !== "horizontal"}
/>
></mushroom-cover-buttons-control>
`;
case "position_control": {
const color = getStateColor(stateObj as CoverEntity);
Expand All @@ -260,7 +261,7 @@ export class CoverCard extends MushroomBaseCard implements LovelaceCard {
.entity=${stateObj}
@current-change=${this.onCurrentPositionChange}
style=${styleMap(sliderStyle)}
/>
></mushroom-cover-position-control>
`;
}
case "tilt_position_control": {
Expand All @@ -274,7 +275,7 @@ export class CoverCard extends MushroomBaseCard implements LovelaceCard {
.hass=${this.hass}
.entity=${stateObj}
style=${styleMap(sliderStyle)}
/>
></mushroom-cover-tilt-position-control>
`;
}
default:
Expand Down
9 changes: 7 additions & 2 deletions src/cards/fan-card/controls/fan-oscillate-control.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,15 @@ export class FanPercentageControl extends LitElement {
return html`
<mushroom-button
class=${classMap({ active: oscillating })}
.icon=${"mdi:sync"}
@click=${this._onTap}
.disabled=${!active}
/>
>
<ha-icon
.icon=${oscillating
? "mdi:arrow-oscillating"
: "mdi:arrow-oscillating-off"}
></ha-icon>
</mushroom-button>
`;
}

Expand Down
7 changes: 3 additions & 4 deletions src/cards/light-card/light-card.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -261,10 +261,9 @@ export class LightCard extends MushroomBaseCard implements LovelaceCard {
return html`
${otherControls.map(
(ctrl) => html`
<mushroom-button
.icon=${CONTROLS_ICONS[ctrl]}
@click=${(e) => this._onControlTap(ctrl, e)}
/>
<mushroom-button @click=${(e) => this._onControlTap(ctrl, e)}>
<ha-icon .icon=${CONTROLS_ICONS[ctrl]}></ha-icon>
</mushroom-button>
`
)}
`;
Expand Down
7 changes: 4 additions & 3 deletions src/cards/lock-card/controls/lock-buttons-control.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -73,14 +73,15 @@ export class LockButtonsControl extends LitElement {
>${LOCK_BUTTONS.filter((item) => item.isVisible(this.entity)).map(
(item) => html`
<mushroom-button
.icon=${item.icon}
.entry=${item}
.title=${item.title
? customLocalize(`editor.card.lock.${item.title}`)
: ""}
.disabled=${!isAvailable(this.entity) || item.isDisabled(this.entity)}
@click=${this.callService}
></mushroom-button>
>
<ha-icon .icon=${item.icon}></ha-icon>
</mushroom-button>
`
)}</mushroom-button-group
>
Expand Down
10 changes: 4 additions & 6 deletions src/cards/media-player-card/controls/media-player-media-control.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -34,11 +34,9 @@ export class MediaPlayerMediaControls extends LitElement {
<mushroom-button-group .fill=${this.fill} ?rtl=${rtl}>
${controls.map(
(control) => html`
<mushroom-button
.icon=${control.icon}
.action=${control.action}
@click=${this._handleClick}
></mushroom-button>
<mushroom-button .action=${control.action} @click=${this._handleClick}>
<ha-icon .icon=${control.icon}></ha-icon>
</mushroom-button>
`
)}
</mushroom-button-group>
Expand Down
18 changes: 12 additions & 6 deletions src/cards/media-player-card/controls/media-player-volume-control.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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[];

Expand Down Expand Up @@ -97,21 +97,25 @@ export class MediaPlayerVolumeControls extends LitElement {
? html`
<mushroom-button
.action=${"volume_mute"}
.icon=${this.entity.attributes.is_volume_muted
? "mdi:volume-off"
: "mdi:volume-high"}
.disabled=${!isAvailable(this.entity) || isOff(this.entity)}
@click=${this.handleClick}
></mushroom-button>
>
<ha-icon
.icon=${this.entity.attributes.is_volume_muted
? "mdi:volume-off"
: "mdi:volume-high"}
></ha-icon>
</mushroom-button>
`
: undefined}
${displayVolumeButtons
? html`
<mushroom-button
.action=${"volume_down"}
icon="mdi:volume-minus"
.disabled=${!isAvailable(this.entity) || isOff(this.entity)}
@click=${this.handleClick}
>
<ha-icon icon="mdi:volume-minus"></ha-icon
></mushroom-button>
`
: undefined}
Expand All @@ -122,6 +126,8 @@ export class MediaPlayerVolumeControls extends LitElement {
icon="mdi:volume-plus"
.disabled=${!isAvailable(this.entity) || isOff(this.entity)}
@click=${this.handleClick}
>
<ha-icon icon="mdi:volume-plus"></ha-icon
></mushroom-button>
`
: undefined}
Expand Down
7 changes: 3 additions & 4 deletions src/cards/media-player-card/media-player-card.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,10 +219,9 @@ export class MediaPlayerCard extends MushroomBaseCard implements LovelaceCard {
return html`
${otherControls.map(
(ctrl) => html`
<mushroom-button
.icon=${CONTROLS_ICONS[ctrl]}
@click=${(e) => this._onControlTap(ctrl, e)}
/>
<mushroom-button @click=${(e) => this._onControlTap(ctrl, e)}>
<ha-icon .icon=${CONTROLS_ICONS[ctrl]}></ha-icon>
</mushroom-button>
`
)}
`;
Expand Down
18 changes: 7 additions & 11 deletions src/cards/update-card/controls/update-buttons-control.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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", {
Expand Down Expand Up @@ -53,16 +53,12 @@ export class UpdateButtonsControl extends LitElement {

return html`
<mushroom-button-group .fill=${this.fill} ?rtl=${rtl}>
<mushroom-button
icon="mdi:cancel"
.disabled=${this.skipDisabled}
@click=${this._handleSkip}
></mushroom-button>
<mushroom-button
icon="mdi:cellphone-arrow-down"
.disabled=${this.installDisabled}
@click=${this._handleInstall}
></mushroom-button>
<mushroom-button .disabled=${this.skipDisabled} @click=${this._handleSkip}>
<ha-icon icon="mdi:cancel"></ha-icon>
</mushroom-button>
<mushroom-button .disabled=${this.installDisabled} @click=${this._handleInstall}>
<ha-icon icon="mdi:cellphone-arrow-down"></ha-icon>
</mushroom-button>
</mushroom-button-group>
`;
}
Expand Down
7 changes: 4 additions & 3 deletions src/cards/vacuum-card/controls/vacuum-commands-control.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -134,11 +134,12 @@ export class CoverButtonsControl extends LitElement {
${VACUUM_BUTTONS.filter((item) => item.isVisible(this.entity, this.commands)).map(
(item) => html`
<mushroom-button
.icon=${item.icon}
.entry=${item}
.disabled=${!isAvailable(this.entity) || item.isDisabled(this.entity)}
@click=${this.callService}
></mushroom-button>
>
<ha-icon .icon=${item.icon}></ha-icon>
</mushroom-button>
`
)}
</mushroom-button-group>
Expand Down
7 changes: 3 additions & 4 deletions src/shared/button.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`
<button type="button" class="button" .title=${this.title} .disabled=${this.disabled}>
<ha-icon .icon=${this.icon} />
<slot> </slot>
</button>
`;
}
Expand Down Expand Up @@ -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);
}
`;
Expand Down

0 comments on commit d6fe338

Please sign in to comment.