github
/
ha-frontend
mirror of https://github.com/home-assistant/frontend
1
Fork 0
Code Releases Activity

Update style of more info style (#20322) 

* Set more info border radius to 36px

* Use control button for alarm more info
This commit is contained in:
Paul Bottein 2024-04-02 15:05:21 +02:00 committed by GitHub
parent 912d2cbd79
commit a5d7043ce4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
16 changed files with 36 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
gallery/src/pages/components/ha-control-select.ts
View File

@ -187,7 +187,7 @@ export class DemoHaControlSelect extends LitElement {
--mdc-icon-size: 24px;
--control-select-color: var(--state-fan-active-color);
--control-select-thickness: 130px;
--control-select-border-radius: 48px;
--control-select-border-radius: 36px;
}
.vertical-selects {
height: 300px;

2
gallery/src/pages/components/ha-control-slider.ts
View File

@ -151,7 +151,7 @@ export class DemoHaBarSlider extends LitElement {
--control-slider-background: #ffcf4c;
--control-slider-background-opacity: 0.2;
--control-slider-thickness: 130px;
--control-slider-border-radius: 48px;
--control-slider-border-radius: 36px;
}
.vertical-sliders {
height: 300px;

2
gallery/src/pages/components/ha-control-switch.ts
View File

@ -118,7 +118,7 @@ export class DemoHaControlSwitch extends LitElement {
--control-switch-on-color: var(--green-color);
--control-switch-off-color: var(--red-color);
--control-switch-thickness: 130px;
--control-switch-border-radius: 48px;
--control-switch-border-radius: 36px;
--control-switch-padding: 6px;
--mdc-icon-size: 24px;
}

2
src/dialogs/more-info/components/lights/light-color-temp-picker.ts
View File

@ -190,7 +190,7 @@ class LightColorTempPicker extends LitElement {
max-height: 320px;
min-height: 200px;
--control-slider-thickness: 130px;
--control-slider-border-radius: 48px;
--control-slider-border-radius: 36px;
--control-slider-color: var(--primary-color);
--control-slider-background: -webkit-linear-gradient(
top,

26
src/dialogs/more-info/controls/more-info-alarm_control_panel.ts
View File

@ -1,9 +1,8 @@
import { mdiShieldOff } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import { stateColorCss } from "../../../common/entity/state_color";
import "../../../components/ha-outlined-button";
import "../../../components/ha-control-button";
import "../../../components/ha-state-icon";
import { AlarmControlPanelEntity } from "../../../data/alarm_control_panel";
import "../../../state-control/alarm_control_panel/ha-state-control-alarm_control_panel-modes";
@ -57,15 +56,10 @@ class MoreInfoAlarmControlPanel extends LitElement {
${["triggered", "arming", "pending"].includes(this.stateObj.state)
? html`
<div class="status">
<span></span>
<div class="icon">
<ha-state-icon .hass=${this.hass} .stateObj=${this.stateObj}>
</ha-state-icon>
</div>
<ha-outlined-button @click=${this._disarm}>
${this.hass.localize("ui.card.alarm_control_panel.disarm")}
<ha-svg-icon slot="icon" .path=${mdiShieldOff}></ha-svg-icon>
</ha-outlined-button>
</div>
`
: html`
@ -76,7 +70,15 @@ class MoreInfoAlarmControlPanel extends LitElement {
</ha-state-control-alarm_control_panel-modes>
`}
</div>
<span></span>
<div>
${["triggered", "arming", "pending"].includes(this.stateObj.state)
? html`
<ha-control-button @click=${this._disarm} class="disarm">
${this.hass.localize("ui.card.alarm_control_panel.disarm")}
</ha-control-button>
`
: nothing}
</div>
`;
}
@ -127,8 +129,12 @@ class MoreInfoAlarmControlPanel extends LitElement {
transition: background-color 180ms ease-in-out;
opacity: 0.2;
}
.status ha-outlined-button {
margin-top: 32px;
ha-control-button.disarm {
height: 60px;
min-width: 130px;
max-width: 200px;
margin: 0 auto;
--control-button-border-radius: 24px;
}
`,
];

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

@ -170,7 +170,7 @@ class MoreInfoLock extends LitElement {
--control-button-border-radius: 24px;
}
.open-button {
width: 100px;
width: 130px;
--control-button-background-color: var(--state-color);
}
.open-button.confirm {

2
src/state-control/alarm_control_panel/ha-state-control-alarm_control_panel-modes.ts
View File

@ -129,7 +129,7 @@ export class HaStateControlAlarmControlPanelModes extends LitElement {
max-height: max(320px, var(--modes-count, 1) * 80px);
min-height: max(200px, var(--modes-count, 1) * 80px);
--control-select-thickness: 130px;
--control-select-border-radius: 48px;
--control-select-border-radius: 36px;
--control-select-color: var(--primary-color);
--control-select-background: var(--disabled-color);
--control-select-background-opacity: 0.2;

2
src/state-control/cover/ha-state-control-cover-position.ts
View File

@ -75,7 +75,7 @@ export class HaStateControlCoverPosition extends LitElement {
max-height: 320px;
min-height: 200px;
--control-slider-thickness: 130px;
--control-slider-border-radius: 48px;
--control-slider-border-radius: 36px;
--control-slider-color: var(--primary-color);
--control-slider-background: var(--disabled-color);
--control-slider-background-opacity: 0.2;

2
src/state-control/cover/ha-state-control-cover-tilt-position.ts
View File

@ -112,7 +112,7 @@ export class HaStateControlInfoCoverTiltPosition extends LitElement {
max-height: 320px;
min-height: 200px;
--control-slider-thickness: 130px;
--control-slider-border-radius: 48px;
--control-slider-border-radius: 36px;
--control-slider-color: var(--primary-color);
--control-slider-background: var(--disabled-color);
--control-slider-background-opacity: 0.2;

4
src/state-control/cover/ha-state-control-cover-toggle.ts
View File

@ -142,7 +142,7 @@ export class HaStateControlCoverToggle extends LitElement {
max-height: 320px;
min-height: 200px;
--control-switch-thickness: 130px;
--control-switch-border-radius: 48px;
--control-switch-border-radius: 36px;
--control-switch-padding: 6px;
--mdc-icon-size: 24px;
}
@ -159,7 +159,7 @@ export class HaStateControlCoverToggle extends LitElement {
ha-control-button {
flex: 1;
width: 100%;
--control-button-border-radius: 48px;
--control-button-border-radius: 36px;
--mdc-icon-size: 24px;
}
ha-control-button.active {

4
src/state-control/fan/ha-state-control-fan-speed.ts
View File

@ -142,7 +142,7 @@ export class HaStateControlFanSpeed extends LitElement {
max-height: 320px;
min-height: 200px;
--control-slider-thickness: 130px;
--control-slider-border-radius: 48px;
--control-slider-border-radius: 36px;
--control-slider-color: var(--primary-color);
--control-slider-background: var(--disabled-color);
--control-slider-background-opacity: 0.2;
@ -153,7 +153,7 @@ export class HaStateControlFanSpeed extends LitElement {
max-height: 320px;
min-height: 200px;
--control-select-thickness: 130px;
--control-select-border-radius: 48px;
--control-select-border-radius: 36px;
--control-select-color: var(--primary-color);
--control-select-background: var(--disabled-color);
--control-select-background-opacity: 0.2;

4
src/state-control/ha-state-control-toggle.ts
View File

@ -133,7 +133,7 @@ export class HaStateControlToggle extends LitElement {
max-height: 320px;
min-height: 200px;
--control-switch-thickness: 130px;
--control-switch-border-radius: 48px;
--control-switch-border-radius: 36px;
--control-switch-padding: 6px;
--mdc-icon-size: 24px;
}
@ -150,7 +150,7 @@ export class HaStateControlToggle extends LitElement {
ha-control-button {
flex: 1;
width: 100%;
--control-button-border-radius: 48px;
--control-button-border-radius: 36px;
--mdc-icon-size: 24px;
}
ha-control-button.active {

2
src/state-control/light/ha-state-control-light-brightness.ts
View File

@ -89,7 +89,7 @@ export class HaStateControlLightBrightness extends LitElement {
max-height: 320px;
min-height: 200px;
--control-slider-thickness: 130px;
--control-slider-border-radius: 48px;
--control-slider-border-radius: 36px;
--control-slider-color: var(--primary-color);
--control-slider-background: var(--disabled-color);
--control-slider-background-opacity: 0.2;

4
src/state-control/lock/ha-state-control-lock-toggle.ts
View File

@ -167,7 +167,7 @@ export class HaStateControlLockToggle extends LitElement {
max-height: 320px;
min-height: 200px;
--control-switch-thickness: 130px;
--control-switch-border-radius: 48px;
--control-switch-border-radius: 36px;
--control-switch-padding: 6px;
--mdc-icon-size: 24px;
}
@ -187,7 +187,7 @@ export class HaStateControlLockToggle extends LitElement {
ha-control-button {
flex: 1;
width: 100%;
--control-button-border-radius: 48px;
--control-button-border-radius: 36px;
--mdc-icon-size: 24px;
}
ha-control-button.active {

2
src/state-control/valve/ha-state-control-valve-position.ts
View File

@ -71,7 +71,7 @@ export class HaStateControlValvePosition extends LitElement {
max-height: 320px;
min-height: 200px;
--control-slider-thickness: 130px;
--control-slider-border-radius: 48px;
--control-slider-border-radius: 36px;
--control-slider-color: var(--primary-color);
--control-slider-background: var(--disabled-color);
--control-slider-background-opacity: 0.2;

4
src/state-control/valve/ha-state-control-valve-toggle.ts
View File

@ -142,7 +142,7 @@ export class HaStateControlValveToggle extends LitElement {
max-height: 320px;
min-height: 200px;
--control-switch-thickness: 130px;
--control-switch-border-radius: 48px;
--control-switch-border-radius: 36px;
--control-switch-padding: 6px;
--mdc-icon-size: 24px;
}
@ -159,7 +159,7 @@ export class HaStateControlValveToggle extends LitElement {
ha-control-button {
flex: 1;
width: 100%;
--control-button-border-radius: 48px;
--control-button-border-radius: 36px;
--mdc-icon-size: 24px;
}
ha-control-button.active {