Fix add category and add label animation (#20272)
This commit is contained in:
parent
11cf2ec39d
commit
e05595f318
|
@ -144,7 +144,11 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
|
||||||
: nothing}
|
: nothing}
|
||||||
</ha-expansion-panel>
|
</ha-expansion-panel>
|
||||||
${this.expanded
|
${this.expanded
|
||||||
? html`<ha-list-item graphic="icon" @click=${this._addCategory}>
|
? html`<ha-list-item
|
||||||
|
graphic="icon"
|
||||||
|
@click=${this._addCategory}
|
||||||
|
class="add"
|
||||||
|
>
|
||||||
<ha-svg-icon slot="graphic" .path=${mdiPlus}></ha-svg-icon>
|
<ha-svg-icon slot="graphic" .path=${mdiPlus}></ha-svg-icon>
|
||||||
${this.hass.localize("ui.panel.config.category.editor.add")}
|
${this.hass.localize("ui.panel.config.category.editor.add")}
|
||||||
</ha-list-item>`
|
</ha-list-item>`
|
||||||
|
@ -256,6 +260,7 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
|
||||||
css`
|
css`
|
||||||
:host {
|
:host {
|
||||||
border-bottom: 1px solid var(--divider-color);
|
border-bottom: 1px solid var(--divider-color);
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
:host([expanded]) {
|
:host([expanded]) {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
@ -293,6 +298,12 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
|
||||||
.warning {
|
.warning {
|
||||||
color: var(--error-color);
|
color: var(--error-color);
|
||||||
}
|
}
|
||||||
|
.add {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
`,
|
`,
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
|
@ -88,7 +88,11 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
|
||||||
: nothing}
|
: nothing}
|
||||||
</ha-expansion-panel>
|
</ha-expansion-panel>
|
||||||
${this.expanded
|
${this.expanded
|
||||||
? html`<ha-list-item graphic="icon" @click=${this._addLabel}>
|
? html`<ha-list-item
|
||||||
|
graphic="icon"
|
||||||
|
@click=${this._addLabel}
|
||||||
|
class="add"
|
||||||
|
>
|
||||||
<ha-svg-icon slot="graphic" .path=${mdiPlus}></ha-svg-icon>
|
<ha-svg-icon slot="graphic" .path=${mdiPlus}></ha-svg-icon>
|
||||||
${this.hass.localize("ui.panel.config.labels.add_label")}
|
${this.hass.localize("ui.panel.config.labels.add_label")}
|
||||||
</ha-list-item>`
|
</ha-list-item>`
|
||||||
|
@ -149,6 +153,7 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
|
||||||
haStyleScrollbar,
|
haStyleScrollbar,
|
||||||
css`
|
css`
|
||||||
:host {
|
:host {
|
||||||
|
position: relative;
|
||||||
border-bottom: 1px solid var(--divider-color);
|
border-bottom: 1px solid var(--divider-color);
|
||||||
}
|
}
|
||||||
:host([expanded]) {
|
:host([expanded]) {
|
||||||
|
@ -186,6 +191,12 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
|
||||||
--ha-label-background-color: var(--color, var(--grey-color));
|
--ha-label-background-color: var(--color, var(--grey-color));
|
||||||
--ha-label-background-opacity: 0.5;
|
--ha-label-background-opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
.add {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
`,
|
`,
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue