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

Use ha-outlined icon button in lock more info (#17339)

Browse Source
This commit is contained in:
Paul Bottein 2023-07-18 17:18:05 +02:00 committed by GitHub
parent d323db8479
commit 1250eac11b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/ha-outlined-icon-button.ts
View File

@ -23,6 +23,7 @@ export class HaOutlinedIconButton extends IconButton {
--md-sys-color-on-surface: var(--secondary-text-color); --md-sys-color-on-surface: var(--secondary-text-color);
--md-sys-color-on-surface-variant: var(--secondary-text-color); --md-sys-color-on-surface-variant: var(--secondary-text-color);
--md-sys-color-on-surface-rgb: var(--rgb-secondary-text-color); --md-sys-color-on-surface-rgb: var(--rgb-secondary-text-color);
--md-sys-color-outline: var(--secondary-text-color);
} }
:host([no-ripple]) .outlined { :host([no-ripple]) .outlined {
--md-ripple-focus-opacity: 0; --md-ripple-focus-opacity: 0;

21
src/dialogs/more-info/controls/more-info-lock.ts
View File

@ -1,4 +1,3 @@
import "@material/web/iconbutton/outlined-icon-button";
import { mdiDoorOpen, mdiLock, mdiLockOff } from "@mdi/js"; import { mdiDoorOpen, mdiLock, mdiLockOff } from "@mdi/js";
import { CSSResultGroup, LitElement, css, html, nothing } from "lit"; import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
@ -7,6 +6,7 @@ import { domainIcon } from "../../../common/entity/domain_icon";
import { stateColorCss } from "../../../common/entity/state_color"; import { stateColorCss } from "../../../common/entity/state_color";
import { supportsFeature } from "../../../common/entity/supports-feature"; import { supportsFeature } from "../../../common/entity/supports-feature";
import "../../../components/ha-attributes"; import "../../../components/ha-attributes";
import "../../../components/ha-outlined-icon-button";
import { UNAVAILABLE } from "../../../data/entity"; import { UNAVAILABLE } from "../../../data/entity";
import { import {
LockEntity, LockEntity,
@ -82,7 +82,7 @@ class MoreInfoLock extends LitElement {
<div class="buttons"> <div class="buttons">
${supportsOpen ${supportsOpen
? html` ? html`
<md-outlined-icon-button <ha-outlined-icon-button
.disabled=${this.stateObj.state === UNAVAILABLE} .disabled=${this.stateObj.state === UNAVAILABLE}
.title=${this.hass.localize( .title=${this.hass.localize(
"ui.dialogs.more_info_control.lock.open" "ui.dialogs.more_info_control.lock.open"
@ -93,12 +93,12 @@ class MoreInfoLock extends LitElement {
@click=${this._open} @click=${this._open}
> >
<ha-svg-icon .path=${mdiDoorOpen}></ha-svg-icon> <ha-svg-icon .path=${mdiDoorOpen}></ha-svg-icon>
</md-outlined-icon-button> </ha-outlined-icon-button>
` `
: nothing} : nothing}
${isJammed ${isJammed
? html` ? html`
<md-outlined-icon-button <ha-outlined-icon-button
.title=${this.hass.localize( .title=${this.hass.localize(
"ui.dialogs.more_info_control.lock.lock" "ui.dialogs.more_info_control.lock.lock"
)} )}
@ -108,8 +108,8 @@ class MoreInfoLock extends LitElement {
@click=${this._lock} @click=${this._lock}
> >
<ha-svg-icon .path=${mdiLock}></ha-svg-icon> <ha-svg-icon .path=${mdiLock}></ha-svg-icon>
</md-outlined-icon-button> </ha-outlined-icon-button>
<md-outlined-icon-button <ha-outlined-icon-button
.title=${this.hass.localize( .title=${this.hass.localize(
"ui.dialogs.more_info_control.lock.unlock" "ui.dialogs.more_info_control.lock.unlock"
)} )}
@ -119,7 +119,7 @@ class MoreInfoLock extends LitElement {
@click=${this._unlock} @click=${this._unlock}
> >
<ha-svg-icon .path=${mdiLockOff}></ha-svg-icon> <ha-svg-icon .path=${mdiLockOff}></ha-svg-icon>
</md-outlined-icon-button> </ha-outlined-icon-button>
` `
: nothing} : nothing}
</div> </div>
@ -140,13 +140,6 @@ class MoreInfoLock extends LitElement {
return [ return [
moreInfoControlStyle, moreInfoControlStyle,
css` css`
md-outlined-icon-button {
--ha-icon-display: block;
--md-sys-color-on-surface: var(--secondary-text-color);
--md-sys-color-on-surface-variant: var(--secondary-text-color);
--md-sys-color-on-surface-rgb: var(--rgb-secondary-text-color);
--md-sys-color-outline: var(--secondary-text-color);
}
@keyframes pulse { @keyframes pulse {
0% { 0% {
opacity: 1; opacity: 1;