jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update button card styles (#19591)

Browse Source
This commit is contained in:
Bram Kragten 2024-01-31 18:48:58 +01:00 committed by GitHub
parent 95920ba710
commit 939b3a8092
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 27 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/panels/lovelace/cards/hui-button-card.ts
View File

@ -191,6 +191,8 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
@blur=${this.handleRippleBlur} @blur=${this.handleRippleBlur}
@mousedown=${this.handleRippleActivate} @mousedown=${this.handleRippleActivate}
@mouseup=${this.handleRippleDeactivate} @mouseup=${this.handleRippleDeactivate}
@mouseenter=${this.handleRippleMouseEnter}
@mouseleave=${this.handleRippleMouseLeave}
@touchstart=${this.handleRippleActivate} @touchstart=${this.handleRippleActivate}
@touchend=${this.handleRippleDeactivate} @touchend=${this.handleRippleDeactivate}
@touchcancel=${this.handleRippleDeactivate} @touchcancel=${this.handleRippleDeactivate}
@ -204,6 +206,9 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
tabindex=${ifDefined( tabindex=${ifDefined(
hasAction(this._config.tap_action) ? "0" : undefined hasAction(this._config.tap_action) ? "0" : undefined
)} )}
style=${styleMap({
"--state-color": colored ? this._computeColor(stateObj) : undefined,
})}
> >
${this._config.show_icon ${this._config.show_icon
? html` ? html`
@ -217,7 +222,6 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
.hass=${this.hass} .hass=${this.hass}
.stateObj=${stateObj} .stateObj=${stateObj}
style=${styleMap({ style=${styleMap({
color: colored ? this._computeColor(stateObj) : undefined,
filter: colored ? stateColorBrightness(stateObj) : undefined, filter: colored ? stateColorBrightness(stateObj) : undefined,
height: this._config.icon_height height: this._config.icon_height
? this._config.icon_height ? this._config.icon_height
@ -280,23 +284,37 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
this._rippleHandlers.startPress(evt); this._rippleHandlers.startPress(evt);
} }
@eventOptions({ passive: true })
private handleRippleDeactivate() { private handleRippleDeactivate() {
this._rippleHandlers.endPress(); this._rippleHandlers.endPress();
} }
@eventOptions({ passive: true })
private handleRippleFocus() { private handleRippleFocus() {
this._rippleHandlers.startFocus(); this._rippleHandlers.startFocus();
} }
@eventOptions({ passive: true })
private handleRippleBlur() { private handleRippleBlur() {
this._rippleHandlers.endFocus(); this._rippleHandlers.endFocus();
} }
@eventOptions({ passive: true })
private handleRippleMouseEnter() {
this._rippleHandlers.startHover();
}
@eventOptions({ passive: true })
private handleRippleMouseLeave() {
this._rippleHandlers.endHover();
}
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return [ return [
iconColorCSS, iconColorCSS,
css` css`
ha-card { ha-card {
--mdc-ripple-color: var(--state-color);
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -318,9 +336,11 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
ha-state-icon { ha-state-icon {
width: 40%; width: 40%;
height: auto; height: auto;
color: var(--paper-item-icon-color, #44739e); max-height: 80%;
color: var(--state-color, var(--paper-item-icon-color, #44739e));
--mdc-icon-size: 100%; --mdc-icon-size: 100%;
--state-inactive-color: var(--paper-item-icon-color, #44739e); --state-inactive-color: var(--paper-item-icon-color, #44739e);
transition: transform 180ms ease-in-out;
} }
ha-state-icon + span { ha-state-icon + span {
@ -332,6 +352,11 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
outline: none; outline: none;
} }
:host(:focus-visible) ha-state-icon,
:host(:active) ha-state-icon {
transform: scale(1.2);
}
.state { .state {
font-size: 0.9rem; font-size: 0.9rem;
color: var(--secondary-text-color); color: var(--secondary-text-color);