Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use slot for mushroom-button icon #1347

Merged
merged 1 commit into from
Jan 31, 2024
Merged

Use slot for mushroom-button icon #1347

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions src/cards/alarm-control-panel-card/alarm-control-panel-card.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading