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

Move disabled items always to the bottom, only change color of text, … (#18814)

Browse Source 
* Move disabled items always to the bottom, only change color of text, dont drag disabled items

* Don't allow to drag hidden items

---------

Co-authored-by: Paul Bottein <paul.bottein@gmail.com>
This commit is contained in:
Bram Kragten 2023-11-30 14:37:10 +01:00 committed by GitHub
parent 60ff4fdc1f
commit 75f18aa69b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/dialogs/area-filter/area-filter-dialog.ts
View File

@ -73,6 +73,7 @@ export class DialogAreaFilter
animation: 150, animation: 150,
fallbackClass: "sortable-fallback", fallbackClass: "sortable-fallback",
handle: ".handle", handle: ".handle",
draggable: ".draggable",
onChoose: (evt: SortableEvent) => { onChoose: (evt: SortableEvent) => {
(evt.item as any).placeholder = (evt.item as any).placeholder =
document.createComment("sort-placeholder"); document.createComment("sort-placeholder");
@ -98,9 +99,11 @@ export class DialogAreaFilter
if (ev.oldIndex === ev.newIndex) return; if (ev.oldIndex === ev.newIndex) return;
const areas = this._areas.concat(); const areas = this._areas.concat();
const nonHiddenAreas = areas.filter((ar) => !this._hidden.includes(ar));
const newIndex = Math.min(ev.newIndex!, nonHiddenAreas.length - 1);
const option = areas.splice(ev.oldIndex!, 1)[0]; const option = areas.splice(ev.oldIndex!, 1)[0];
areas.splice(ev.newIndex!, 0, option); areas.splice(newIndex, 0, option);
this._areas = areas; this._areas = areas;
} }
@ -128,16 +131,21 @@ export class DialogAreaFilter
const name = this.hass!.areas[area]?.name || area; const name = this.hass!.areas[area]?.name || area;
return html` return html`
<ha-list-item <ha-list-item
class=${classMap({ hidden: !isVisible })} class=${classMap({
hidden: !isVisible,
draggable: isVisible,
})}
hasMeta hasMeta
graphic="icon" graphic="icon"
noninteractive noninteractive
> >
<ha-svg-icon ${isVisible
class="handle" ? html`<ha-svg-icon
.path=${mdiDrag} class="handle"
slot="graphic" .path=${mdiDrag}
></ha-svg-icon> slot="graphic"
></ha-svg-icon>`
: nothing}
${name} ${name}
<ha-icon-button <ha-icon-button
tabindex="0" tabindex="0"
@ -177,6 +185,11 @@ export class DialogAreaFilter
hidden.push(area); hidden.push(area);
} }
this._hidden = hidden; this._hidden = hidden;
const nonHiddenAreas = this._areas.filter(
(ar) => !this._hidden.includes(ar)
);
const hiddenAreas = this._areas.filter((ar) => this._hidden.includes(ar));
this._areas = [...nonHiddenAreas, ...hiddenAreas];
} }
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
@ -193,7 +206,7 @@ export class DialogAreaFilter
overflow: visible; overflow: visible;
} }
.hidden { .hidden {
opacity: 0.3; color: var(--disabled-text-color);
} }
.handle { .handle {
cursor: grab; cursor: grab;