Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-12-20 10:48:44 +00:00
Code Activity

Fix more info entity settings bottom fade (#28437)

Browse Source 
* Use space tokens

* Fix settings bottom fade issue

* Space token

* Restore
This commit is contained in:
Aidan Timson
2025-12-08 14:05:49 +00:00
committed by GitHub
parent b6d1e65044
commit f5bd0816a8
3 changed files with 20 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/dialogs/more-info/ha-more-info-dialog.ts
View File

@@ -16,6 +16,7 @@ import type { PropertyValues } from "lit";
import { LitElement, css, html, nothing } from "lit"; import { LitElement, css, html, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators"; import { customElement, property, query, state } from "lit/decorators";
import { cache } from "lit/directives/cache"; import { cache } from "lit/directives/cache";
import { classMap } from "lit/directives/class-map";
import { keyed } from "lit/directives/keyed"; import { keyed } from "lit/directives/keyed";
import { dynamicElement } from "../../common/dom/dynamic-element-directive"; import { dynamicElement } from "../../common/dom/dynamic-element-directive";
import { fireEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event";
@@ -607,7 +608,12 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
` `
: nothing} : nothing}
</ha-dialog-header> </ha-dialog-header>
<div class="content-wrapper"> <div
class=${classMap({
"content-wrapper": true,
"settings-view": this._currView === "settings",
})}
>
${keyed( ${keyed(
this._entityId, this._entityId,
html` html`
@@ -759,6 +765,10 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
overflow: auto; overflow: auto;
} }
.content-wrapper.settings-view .fade-bottom {
bottom: var(--ha-space-18);
}
.child-view { .child-view {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

10
src/panels/config/entities/entity-registry-settings-editor.ts
View File

@@ -1525,17 +1525,17 @@ export class EntityRegistrySettingsEditor extends LitElement {
} }
ha-textfield.entityId ha-icon-button { ha-textfield.entityId ha-icon-button {
position: relative; position: relative;
right: -8px; right: calc(var(--ha-space-2) * -1);
--mdc-icon-button-size: 36px; --mdc-icon-button-size: 36px;
--mdc-icon-size: 20px; --mdc-icon-size: 20px;
color: var(--secondary-text-color); color: var(--secondary-text-color);
inset-inline-start: initial; inset-inline-start: initial;
inset-inline-end: -8px; inset-inline-end: calc(var(--ha-space-2) * -1);
direction: var(--direction); direction: var(--direction);
} }
ha-switch { ha-switch {
margin-right: 16px; margin-right: var(--ha-space-4);
margin-inline-end: 16px; margin-inline-end: var(--ha-space-4);
margin-inline-start: initial; margin-inline-start: initial;
} }
ha-settings-row ha-switch { ha-settings-row ha-switch {
@@ -1548,7 +1548,7 @@ export class EntityRegistrySettingsEditor extends LitElement {
ha-select, ha-select,
ha-area-picker { ha-area-picker {
display: block; display: block;
margin: 8px 0; margin: var(--ha-space-2) 0;
width: 100%; width: 100%;
} }
li[divider] { li[divider] {

7
src/panels/config/entities/entity-registry-settings.ts
View File

@@ -244,14 +244,15 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
display: block; display: block;
} }
.container { .container {
padding: 8px 24px 20px 24px; padding: var(--ha-space-2) var(--ha-space-6) var(--ha-space-5)
var(--ha-space-6);
} }
.buttons { .buttons {
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
padding: 16px; padding: var(--ha-space-4);
justify-content: space-between; justify-content: space-between;
padding-bottom: max(var(--safe-area-inset-bottom), 16px); padding-bottom: max(var(--safe-area-inset-bottom), var(--ha-space-4));
background-color: var(--mdc-theme-surface, #fff); background-color: var(--mdc-theme-surface, #fff);
border-top: 1px solid var(--divider-color); border-top: 1px solid var(--divider-color);
position: sticky; position: sticky;