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

Fix expand icon for entries and sub entries (#25955)

Browse Source
This commit is contained in:
Paul Bottein 2025-06-26 19:21:15 +02:00
parent 76509d8bd4
commit caaec7d34d
No known key found for this signature in database
2 changed files with 21 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/panels/config/integrations/ha-config-entry-row.ts
View File

@ -1,7 +1,6 @@
import { import {
mdiAlertCircle, mdiAlertCircle,
mdiChevronDown, mdiChevronDown,
mdiChevronUp,
mdiCogOutline, mdiCogOutline,
mdiDelete, mdiDelete,
mdiDevices, mdiDevices,
@ -58,6 +57,7 @@ import { showConfigEntrySystemOptionsDialog } from "../../../dialogs/config-entr
import { showConfigFlowDialog } from "../../../dialogs/config-flow/show-dialog-config-flow"; import { showConfigFlowDialog } from "../../../dialogs/config-flow/show-dialog-config-flow";
import { showOptionsFlowDialog } from "../../../dialogs/config-flow/show-dialog-options-flow"; import { showOptionsFlowDialog } from "../../../dialogs/config-flow/show-dialog-options-flow";
import { showSubConfigFlowDialog } from "../../../dialogs/config-flow/show-dialog-sub-config-flow"; import { showSubConfigFlowDialog } from "../../../dialogs/config-flow/show-dialog-sub-config-flow";
import { haStyle } from "../../../resources/styles";
import type { HomeAssistant } from "../../../types"; import type { HomeAssistant } from "../../../types";
import { documentationUrl } from "../../../util/documentation-url"; import { documentationUrl } from "../../../util/documentation-url";
import { fileDownload } from "../../../util/file_download"; import { fileDownload } from "../../../util/file_download";
@ -69,7 +69,6 @@ import {
import "./ha-config-entry-device-row"; import "./ha-config-entry-device-row";
import { renderConfigEntryError } from "./ha-config-integration-page"; import { renderConfigEntryError } from "./ha-config-integration-page";
import "./ha-config-sub-entry-row"; import "./ha-config-sub-entry-row";
import { haStyle } from "../../../resources/styles";
@customElement("ha-config-entry-row") @customElement("ha-config-entry-row")
class HaConfigEntryRow extends LitElement { class HaConfigEntryRow extends LitElement {
@ -178,8 +177,8 @@ class HaConfigEntryRow extends LitElement {
> >
${subEntries.length || ownDevices.length ${subEntries.length || ownDevices.length
? html`<ha-icon-button ? html`<ha-icon-button
class="expand-button" class="expand-button ${classMap({ expanded: this._expanded })}"
.path=${this._expanded ? mdiChevronDown : mdiChevronUp} .path=${mdiChevronDown}
slot="start" slot="start"
@click=${this._toggleExpand} @click=${this._toggleExpand}
></ha-icon-button>` ></ha-icon-button>`
@ -410,15 +409,15 @@ class HaConfigEntryRow extends LitElement {
<ha-md-list-item <ha-md-list-item
@click=${this._toggleOwnDevices} @click=${this._toggleOwnDevices}
type="button" type="button"
class="toggle-devices-row ${this._devicesExpanded class="toggle-devices-row ${classMap({
? "expanded" expanded: this._devicesExpanded,
: ""}" })}"
> >
<ha-icon-button <ha-icon-button
class="expand-button" class="expand-button ${classMap({
.path=${this._devicesExpanded expanded: this._devicesExpanded,
? mdiChevronDown })}"
: mdiChevronUp} .path=${mdiChevronDown}
slot="start" slot="start"
> >
</ha-icon-button> </ha-icon-button>
@ -742,6 +741,10 @@ class HaConfigEntryRow extends LitElement {
css` css`
.expand-button { .expand-button {
margin: 0 -12px; margin: 0 -12px;
transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.expand-button.expanded {
transform: rotate(180deg);
} }
ha-md-list { ha-md-list {
border: 1px solid var(--divider-color); border: 1px solid var(--divider-color);

10
src/panels/config/integrations/ha-config-sub-entry-row.ts
View File

@ -1,6 +1,5 @@
import { import {
mdiChevronDown, mdiChevronDown,
mdiChevronUp,
mdiCogOutline, mdiCogOutline,
mdiDelete, mdiDelete,
mdiDevices, mdiDevices,
@ -10,6 +9,7 @@ import {
} from "@mdi/js"; } from "@mdi/js";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import type { ConfigEntry, SubEntry } from "../../../data/config_entries"; import type { ConfigEntry, SubEntry } from "../../../data/config_entries";
import { deleteSubEntry } from "../../../data/config_entries"; import { deleteSubEntry } from "../../../data/config_entries";
import type { DeviceRegistryEntry } from "../../../data/device_registry"; import type { DeviceRegistryEntry } from "../../../data/device_registry";
@ -56,8 +56,8 @@ class HaConfigSubEntryRow extends LitElement {
> >
${devices.length || services.length ${devices.length || services.length
? html`<ha-icon-button ? html`<ha-icon-button
class="expand-button" class="expand-button ${classMap({ expanded: this._expanded })}"
.path=${this._expanded ? mdiChevronDown : mdiChevronUp} .path=${mdiChevronDown}
slot="start" slot="start"
@click=${this._toggleExpand} @click=${this._toggleExpand}
></ha-icon-button>` ></ha-icon-button>`
@ -239,6 +239,10 @@ class HaConfigSubEntryRow extends LitElement {
static styles = css` static styles = css`
.expand-button { .expand-button {
margin: 0 -12px; margin: 0 -12px;
transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.expand-button.expanded {
transform: rotate(180deg);
} }
ha-md-list { ha-md-list {
border: 1px solid var(--divider-color); border: 1px solid var(--divider-color);