Use Sortable to move entities in entities editor

src/components/ha-sidebar-sort-styles.ts

@@ -1,77 +1,75 @@
-import { html } from "lit-element";
+import { css } from "lit-element";
 
-export const sortStyles = html`
-  <style>
-    #sortable a:nth-of-type(2n) paper-icon-item {
-      animation-name: keyframes1;
-      animation-iteration-count: infinite;
-      transform-origin: 50% 10%;
-      animation-delay: -0.75s;
-      animation-duration: 0.25s;
-    }
+export const sortableStyles = css`
+  #sortable a:nth-of-type(2n) paper-icon-item {
+    animation-name: keyframes1;
+    animation-iteration-count: infinite;
+    transform-origin: 50% 10%;
+    animation-delay: -0.75s;
+    animation-duration: 0.25s;
+  }
 
-    #sortable a:nth-of-type(2n-1) paper-icon-item {
-      animation-name: keyframes2;
-      animation-iteration-count: infinite;
-      animation-direction: alternate;
-      transform-origin: 30% 5%;
-      animation-delay: -0.5s;
-      animation-duration: 0.33s;
-    }
+  #sortable a:nth-of-type(2n-1) paper-icon-item {
+    animation-name: keyframes2;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    transform-origin: 30% 5%;
+    animation-delay: -0.5s;
+    animation-duration: 0.33s;
+  }
 
-    #sortable {
-      outline: none;
-      display: flex;
-      flex-direction: column;
-    }
-
-    .sortable-ghost {
-      opacity: 0.4;
-    }
+  #sortable {
+    outline: none;
+    display: flex;
+    flex-direction: column;
+  }
 
-    .sortable-fallback {
-      opacity: 0;
-    }
+  .sortable-ghost {
+    opacity: 0.4;
+  }
 
-    @keyframes keyframes1 {
-      0% {
-        transform: rotate(-1deg);
-        animation-timing-function: ease-in;
-      }
+  .sortable-fallback {
+    opacity: 0;
+  }
 
-      50% {
-        transform: rotate(1.5deg);
-        animation-timing-function: ease-out;
-      }
+  @keyframes keyframes1 {
+    0% {
+      transform: rotate(-1deg);
+      animation-timing-function: ease-in;
     }
 
-    @keyframes keyframes2 {
-      0% {
-        transform: rotate(1deg);
-        animation-timing-function: ease-in;
-      }
-
-      50% {
-        transform: rotate(-1.5deg);
-        animation-timing-function: ease-out;
-      }
+    50% {
+      transform: rotate(1.5deg);
+      animation-timing-function: ease-out;
     }
+  }
 
-    .hide-panel {
-      display: none;
-      position: absolute;
-      right: 8px;
+  @keyframes keyframes2 {
+    0% {
+      transform: rotate(1deg);
+      animation-timing-function: ease-in;
     }
 
-    :host([expanded]) .hide-panel {
-      display: inline-flex;
+    50% {
+      transform: rotate(-1.5deg);
+      animation-timing-function: ease-out;
     }
+  }
 
-    paper-icon-item.hidden-panel,
-    paper-icon-item.hidden-panel span,
-    paper-icon-item.hidden-panel ha-icon[slot="item-icon"] {
-      color: var(--secondary-text-color);
-      cursor: pointer;
-    }
-  </style>
+  .hide-panel {
+    display: none;
+    position: absolute;
+    right: 8px;
+  }
+
+  :host([expanded]) .hide-panel {
+    display: inline-flex;
+  }
+
+  paper-icon-item.hidden-panel,
+  paper-icon-item.hidden-panel span,
+  paper-icon-item.hidden-panel ha-icon[slot="item-icon"] {
+    color: var(--secondary-text-color);
+    cursor: pointer;
+  }
 `;

src/components/ha-sidebar.ts

@@ -23,7 +23,7 @@ import {
   LitElement,
   property,
   PropertyValues,
-  TemplateResult,
+  unsafeCSS,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 import { guard } from "lit-html/directives/guard";
@@ -160,7 +160,7 @@ const computePanels = memoizeOne(
 
 let Sortable;
 
-let sortStyles: TemplateResult;
+let sortStyles: CSSResult;
 
 @customElement("ha-sidebar")
 class HaSidebar extends LitElement {
@@ -228,7 +228,9 @@ class HaSidebar extends LitElement {
     }
 
     return html`
-      ${this._editMode ? sortStyles : ""}
+      <style>
+        ${sortStyles?.cssText}
+      </style>
       <div class="menu">
         ${!this.narrow
           ? html`
@@ -483,7 +485,7 @@ class HaSidebar extends LitElement {
         import("./ha-sidebar-sort-styles"),
       ]);
 
-      sortStyles = sortStylesImport.sortStyles;
+      sortStyles = sortStylesImport.sortableStyles;
 
       Sortable = sortableImport.Sortable;
       Sortable.mount(sortableImport.OnSpill);
@@ -686,7 +688,7 @@ class HaSidebar extends LitElement {
   }
 
   static get styles(): CSSResult[] {
-    return [
+    const styles = [
       haStyleScrollbar,
       css`
         :host {
@@ -962,6 +964,8 @@ class HaSidebar extends LitElement {
         }
       `,
     ];
+
+    return styles;
   }
 }
 

src/panels/lovelace/components/hui-entity-editor.ts

@@ -19,7 +19,7 @@ import Sortable, {
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/entity/ha-entity-picker";
 import "../../../components/ha-icon-button";
-import { sortStyles } from "../../../components/ha-sidebar-sort-styles";
+import { sortableStyles } from "../../../components/ha-sidebar-sort-styles";
 import { HomeAssistant } from "../../../types";
 import { EditorTarget } from "../editor/types";
 import { EntityConfig } from "../entity-rows/types";
@@ -52,7 +52,6 @@ export class HuiEntityEditor extends LitElement {
     }
 
     return html`
-      ${sortStyles}
       <h3>
         ${this.label ||
         this.hass!.localize("ui.panel.lovelace.editor.card.generic.entities") +
@@ -167,20 +166,23 @@ export class HuiEntityEditor extends LitElement {
     fireEvent(this, "entities-changed", { entities: newConfigEntities });
   }
 
-  static get styles(): CSSResult {
-    return css`
-      .entity {
-        display: flex;
-        align-items: center;
-      }
-      .entity ha-svg-icon {
-        padding-right: 8px;
-        cursor: move;
-      }
-      .entity ha-entity-picker {
-        flex-grow: 1;
-      }
-    `;
+  static get styles(): CSSResult[] {
+    return [
+      sortableStyles,
+      css`
+        .entity {
+          display: flex;
+          align-items: center;
+        }
+        .entity ha-svg-icon {
+          padding-right: 8px;
+          cursor: move;
+        }
+        .entity ha-entity-picker {
+          flex-grow: 1;
+        }
+      `,
+    ];
   }
 }