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

Picture glance: Use icon button instead of icon with button styles. (#5977)

Browse Source
This commit is contained in:
Bram Kragten 2020-05-22 15:36:43 +02:00 committed by GitHub
parent 6bb3b84377
commit 0a128db269
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/panels/lovelace/cards/hui-picture-glance-card.ts
View File

@ -17,7 +17,7 @@ import { computeStateDisplay } from "../../../common/entity/compute_state_displa
import { computeStateName } from "../../../common/entity/compute_state_name"; import { computeStateName } from "../../../common/entity/compute_state_name";
import { stateIcon } from "../../../common/entity/state_icon"; import { stateIcon } from "../../../common/entity/state_icon";
import "../../../components/ha-card"; import "../../../components/ha-card";
import "../../../components/ha-icon"; import "../../../components/ha-icon-button";
import { ActionHandlerEvent } from "../../../data/lovelace"; import { ActionHandlerEvent } from "../../../data/lovelace";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import { actionHandler } from "../common/directives/action-handler-directive"; import { actionHandler } from "../common/directives/action-handler-directive";
@ -240,15 +240,16 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
return html` return html`
<div class="wrapper"> <div class="wrapper">
<ha-icon <ha-icon-button
@action=${this._handleAction} @action=${this._handleAction}
.actionHandler=${actionHandler({ .actionHandler=${actionHandler({
hasHold: hasAction(entityConf.hold_action), hasHold: hasAction(entityConf.hold_action),
hasDoubleClick: hasAction(entityConf.double_tap_action), hasDoubleClick: hasAction(entityConf.double_tap_action),
})} })}
tabindex=${ifDefined( tabindex=${ifDefined(
hasAction(entityConf.tap_action) ? "0" : undefined !hasAction(entityConf.tap_action) ? "-1" : undefined
)} )}
.disabled=${!hasAction(entityConf.tap_action)}
.config=${entityConf} .config=${entityConf}
class=${classMap({ class=${classMap({
"state-on": !STATES_OFF.has(stateObj.state), "state-on": !STATES_OFF.has(stateObj.state),
@ -261,7 +262,7 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
this.hass!.language this.hass!.language
)} )}
`} `}
></ha-icon> ></ha-icon-button>
${this._config!.show_state !== true && entityConf.show_state !== true ${this._config!.show_state !== true && entityConf.show_state !== true
? html` <div class="state"></div> ` ? html` <div class="state"></div> `
: html` : html`
@ -326,19 +327,15 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
margin-left: 8px; margin-left: 8px;
} }
ha-icon { ha-icon-button {
cursor: pointer; --mdc-icon-button-size: 40px;
--disabled-text-color: currentColor;
color: #a9a9a9; color: #a9a9a9;
} }
ha-icon.state-on { ha-icon-button.state-on {
color: white; color: white;
} }
ha-icon:focus {
outline: none;
background: var(--divider-color);
border-radius: 100%;
}
.state { .state {
display: block; display: block;
font-size: 12px; font-size: 12px;