From 7983556f98da3bb2fb346fe20862b84d4722c8b5 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Thu, 28 Dec 2023 15:32:49 +0100 Subject: [PATCH] Update sortable styling (#19169) --- src/dialogs/area-filter/area-filter-dialog.ts | 3 +- .../automation/action/ha-automation-action.ts | 3 +- .../types/ha-automation-action-choose.ts | 3 +- .../condition/ha-automation-condition.ts | 3 +- .../trigger/ha-automation-trigger.ts | 3 +- .../helpers/forms/ha-input_select-form.ts | 3 +- .../lovelace/cards/hui-todo-list-card.ts | 259 +++++++++--------- .../lovelace/components/hui-entity-editor.ts | 3 +- .../hui-card-features-editor.ts | 3 +- .../editor/hui-entities-card-row-editor.ts | 3 +- src/resources/ha-sortable-style.ts | 12 +- 11 files changed, 160 insertions(+), 138 deletions(-) diff --git a/src/dialogs/area-filter/area-filter-dialog.ts b/src/dialogs/area-filter/area-filter-dialog.ts index 0a62bfbf275b..2dc7cacadcb2 100644 --- 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 index c75237a2c00f..dca4bab6acde 100644 --- 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 index 9051fbb75cd0..5c0ee0763790 100644 --- 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 index 7f38b7bb2b7c..27364b92a3ed 100644 --- 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 index d95e9d292497..90467f61e0b8 100644 --- 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 index e65f951e4bb2..e8be0fe50418 100644 --- 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 index 6c8e75e3b1f9..3352f7a42b43 100644 --- 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 index 42aed25312af..22ac4f8aa08d 100644 --- 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 index e7d44e092247..49290ba57102 100644 --- 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 index 8e06e231af7b..231305a1a3aa 100644 --- 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); diff --git a/src/resources/ha-sortable-style.ts b/src/resources/ha-sortable-style.ts index 8c7a5ded7c7b..a1fcfe920900 100644 --- a/src/resources/ha-sortable-style.ts +++ b/src/resources/ha-sortable-style.ts @@ -34,14 +34,22 @@ export const sortableStyles = css` .sortable-fallback { display: none; + opacity: 0; } .sortable-ghost { + border: 2px solid var(--primary-color); + background: rgba(var(--rgb-primary-color), 0.25); + border-radius: 4px; opacity: 0.4; } - .sortable-fallback { - opacity: 0; + .sortable-drag { + border-radius: 4px; + opacity: 1; + background: var(--card-background-color); + box-shadow: 0px 4px 8px 3px #00000026; + cursor: grabbing; } @keyframes keyframes1 {