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

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

View File

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