Update sortable styling (#19169)

home-assistant · Dec 28, 2023 · 7983556 · 7983556
1 parent 1916dff
commit 7983556
Show file tree

Hide file tree

Showing 11 changed files with 160 additions and 138 deletions.
diff --git a/src/dialogs/area-filter/area-filter-dialog.ts b/src/dialogs/area-filter/area-filter-dialog.ts
@@ -207,7 +207,8 @@ export class DialogAreaFilter
           color: var(--disabled-text-color);
         }
         .handle {
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
         }
         .actions {
           display: flex;

diff --git a/src/panels/config/automation/action/ha-automation-action.ts b/src/panels/config/automation/action/ha-automation-action.ts
@@ -319,7 +319,8 @@ export default class HaAutomationAction extends LitElement {
           overflow: hidden;
         }
         .handle {
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
           padding: 12px;
         }
         .handle ha-svg-icon {

diff --git a/src/panels/config/automation/action/types/ha-automation-action-choose.ts b/src/panels/config/automation/action/types/ha-automation-action-choose.ts
@@ -543,7 +543,8 @@ export class HaChooseAction extends LitElement implements ActionElement {
           padding: 0 16px 16px 16px;
         }
         .handle {
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
           padding: 12px;
         }
         .handle ha-svg-icon {

diff --git a/src/panels/config/automation/condition/ha-automation-condition.ts b/src/panels/config/automation/condition/ha-automation-condition.ts
@@ -358,7 +358,8 @@ export default class HaAutomationCondition extends LitElement {
           overflow: hidden;
         }
         .handle {
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
           padding: 12px;
         }
         .handle ha-svg-icon {

diff --git a/src/panels/config/automation/trigger/ha-automation-trigger.ts b/src/panels/config/automation/trigger/ha-automation-trigger.ts
@@ -298,7 +298,8 @@ export default class HaAutomationTrigger extends LitElement {
           overflow: hidden;
         }
         .handle {
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
           padding: 12px;
         }
         .handle ha-svg-icon {

diff --git a/src/panels/config/helpers/forms/ha-input_select-form.ts b/src/panels/config/helpers/forms/ha-input_select-form.ts
@@ -285,7 +285,8 @@ class HaInputSelectForm extends LitElement {
           margin-bottom: 8px;
         }
         .handle {
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
           padding-right: 12px;
         }
         .handle ha-svg-icon {

diff --git a/src/panels/lovelace/cards/hui-todo-list-card.ts b/src/panels/lovelace/cards/hui-todo-list-card.ts
@@ -57,6 +57,7 @@ import { findEntities } from "../common/find-entities";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { TodoListCardConfig } from "./types";
+import { sortableStyles } from "../../../resources/ha-sortable-style";
 
 @customElement("hui-todo-list-card")
 export class HuiTodoListCard extends LitElement implements LovelaceCard {
@@ -619,161 +620,165 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
   }
 
   static get styles(): CSSResultGroup {
-    return css`
-      ha-card {
-        height: 100%;
-        box-sizing: border-box;
-      }
+    return [
+      sortableStyles,
+      css`
+        ha-card {
+          height: 100%;
+          box-sizing: border-box;
+        }
 
-      .has-header {
-        padding-top: 0;
-      }
+        .has-header {
+          padding-top: 0;
+        }
 
-      .addRow {
-        padding: 16px;
-        padding-bottom: 0;
-        position: relative;
-      }
+        .addRow {
+          padding: 16px;
+          padding-bottom: 0;
+          position: relative;
+        }
 
-      .addRow ha-icon-button {
-        position: absolute;
-        right: 16px;
-        inset-inline-start: initial;
-        inset-inline-end: 16px;
-      }
+        .addRow ha-icon-button {
+          position: absolute;
+          right: 16px;
+          inset-inline-start: initial;
+          inset-inline-end: 16px;
+        }
 
-      .addRow,
-      .header {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-      }
+        .addRow,
+        .header {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+        }
 
-      .header {
-        padding-left: 30px;
-        padding-right: 16px;
-        padding-inline-start: 30px;
-        padding-inline-end: 16px;
-        margin-top: 8px;
-        justify-content: space-between;
-        direction: var(--direction);
-      }
+        .header {
+          padding-left: 30px;
+          padding-right: 16px;
+          padding-inline-start: 30px;
+          padding-inline-end: 16px;
+          margin-top: 8px;
+          justify-content: space-between;
+          direction: var(--direction);
+        }
 
-      .header span {
-        color: var(--primary-text-color);
-        font-weight: 500;
-      }
+        .header span {
+          color: var(--primary-text-color);
+          font-weight: 500;
+        }
 
-      .empty {
-        padding: 16px 32px;
-      }
+        .empty {
+          padding: 16px 32px;
+        }
 
-      .item {
-        margin-top: 8px;
-      }
+        .item {
+          margin-top: 8px;
+        }
 
-      ha-check-list-item {
-        --mdc-list-item-meta-size: 56px;
-        min-height: 56px;
-        height: auto;
-      }
+        ha-check-list-item {
+          --mdc-list-item-meta-size: 56px;
+          min-height: 56px;
+          height: auto;
+        }
 
-      ha-check-list-item.multiline {
-        align-items: flex-start;
-        --check-list-item-graphic-margin-top: 8px;
-      }
+        ha-check-list-item.multiline {
+          align-items: flex-start;
+          --check-list-item-graphic-margin-top: 8px;
+        }
 
-      .row {
-        display: flex;
-        justify-content: space-between;
-      }
+        .row {
+          display: flex;
+          justify-content: space-between;
+        }
 
-      .multiline .column {
-        display: flex;
-        flex-direction: column;
-        margin-top: 18px;
-        margin-bottom: 12px;
-      }
+        .multiline .column {
+          display: flex;
+          flex-direction: column;
+          margin-top: 18px;
+          margin-bottom: 12px;
+        }
 
-      .completed .summary {
-        text-decoration: line-through;
-      }
+        .completed .summary {
+          text-decoration: line-through;
+        }
 
-      .description,
-      .due {
-        font-size: 12px;
-        color: var(--secondary-text-color);
-      }
+        .description,
+        .due {
+          font-size: 12px;
+          color: var(--secondary-text-color);
+        }
 
-      .description {
-        white-space: initial;
-        overflow: hidden;
-        display: -webkit-box;
-        -webkit-line-clamp: 3;
-        line-clamp: 3;
-        -webkit-box-orient: vertical;
-      }
+        .description {
+          white-space: initial;
+          overflow: hidden;
+          display: -webkit-box;
+          -webkit-line-clamp: 3;
+          line-clamp: 3;
+          -webkit-box-orient: vertical;
+        }
 
-      .description p {
-        margin: 0;
-      }
+        .description p {
+          margin: 0;
+        }
 
-      .description a {
-        color: var(--primary-color);
-      }
+        .description a {
+          color: var(--primary-color);
+        }
 
-      .due {
-        display: flex;
-        align-items: center;
-      }
+        .due {
+          display: flex;
+          align-items: center;
+        }
 
-      .due ha-svg-icon {
-        margin-right: 4px;
-        --mdc-icon-size: 14px;
-      }
+        .due ha-svg-icon {
+          margin-right: 4px;
+          --mdc-icon-size: 14px;
+        }
 
-      .due.overdue {
-        color: var(--warning-color);
-      }
+        .due.overdue {
+          color: var(--warning-color);
+        }
 
-      .completed .due.overdue {
-        color: var(--secondary-text-color);
-      }
+        .completed .due.overdue {
+          color: var(--secondary-text-color);
+        }
 
-      .handle {
-        cursor: move;
-        height: 24px;
-        padding: 16px 4px;
-      }
+        .handle {
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
+          height: 24px;
+          padding: 16px 4px;
+        }
 
-      .deleteItemButton {
-        position: relative;
-        left: 8px;
-      }
+        .deleteItemButton {
+          position: relative;
+          left: 8px;
+        }
 
-      ha-textfield {
-        flex-grow: 1;
-      }
+        ha-textfield {
+          flex-grow: 1;
+        }
 
-      .divider {
-        height: 1px;
-        background-color: var(--divider-color);
-        margin: 10px 0;
-      }
+        .divider {
+          height: 1px;
+          background-color: var(--divider-color);
+          margin: 10px 0;
+        }
 
-      .clearall {
-        cursor: pointer;
-      }
+        .clearall {
+          cursor: pointer;
+        }
 
-      .todoList {
-        display: block;
-        padding: 8px;
-      }
+        .todoList {
+          display: block;
+          padding: 8px;
+        }
 
-      .warning {
-        color: var(--error-color);
-      }
-    `;
+        .warning {
+          color: var(--error-color);
+        }
+      `,
+    ];
   }
 }
 

diff --git a/src/panels/lovelace/components/hui-entity-editor.ts b/src/panels/lovelace/components/hui-entity-editor.ts
@@ -181,7 +181,8 @@ export class HuiEntityEditor extends LitElement {
         }
         .entity .handle {
           padding-right: 8px;
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
           padding-inline-end: 8px;
           padding-inline-start: initial;
           direction: var(--direction);

diff --git a/src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts b/src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts
@@ -460,7 +460,8 @@ export class HuiCardFeaturesEditor extends LitElement {
         }
         .feature .handle {
           padding-right: 8px;
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
           padding-inline-end: 8px;
           padding-inline-start: initial;
           direction: var(--direction);

diff --git a/src/panels/lovelace/editor/hui-entities-card-row-editor.ts b/src/panels/lovelace/editor/hui-entities-card-row-editor.ts
@@ -243,7 +243,8 @@ export class HuiEntitiesCardRowEditor extends LitElement {
 
         .entity .handle {
           padding-right: 8px;
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
           padding-inline-end: 8px;
           padding-inline-start: initial;
           direction: var(--direction);