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

Fix add category and add label animation (#20272)

This commit is contained in:
Paul Bottein 2024-03-29 16:09:10 +01:00 committed by GitHub
parent 11cf2ec39d
commit e05595f318
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 24 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/ha-filter-categories.ts
View File

@ -144,7 +144,11 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
: nothing}
</ha-expansion-panel>
${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>
${this.hass.localize("ui.panel.config.category.editor.add")}
</ha-list-item>`
@ -256,6 +260,7 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
css`
:host {
border-bottom: 1px solid var(--divider-color);
position: relative;
}
:host([expanded]) {
flex: 1;
@ -293,6 +298,12 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
.warning {
color: var(--error-color);
}
.add {
position: absolute;
bottom: 0;
right: 0;
left: 0;
}
`,
];
}

13
src/components/ha-filter-labels.ts
View File

@ -88,7 +88,11 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
: nothing}
</ha-expansion-panel>
${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>
${this.hass.localize("ui.panel.config.labels.add_label")}
</ha-list-item>`
@ -149,6 +153,7 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
haStyleScrollbar,
css`
:host {
position: relative;
border-bottom: 1px solid var(--divider-color);
}
:host([expanded]) {
@ -186,6 +191,12 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
--ha-label-background-color: var(--color, var(--grey-color));
--ha-label-background-opacity: 0.5;
}
.add {
position: absolute;
bottom: 0;
right: 0;
left: 0;
}
`,
];
}