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

Update sortable styling (#19169)

Browse Source
This commit is contained in:
Bram Kragten 2023-12-28 15:32:49 +01:00 committed by GitHub
parent 1916dff57b
commit 7983556f98
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 160 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -207,7 +207,8 @@ export class DialogAreaFilter
color: var(--disabled-text-color); color: var(--disabled-text-color);
} }
.handle { .handle {
cursor: move; cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
} }
.actions { .actions {
display: flex; display: flex;

3
src/panels/config/automation/action/ha-automation-action.ts
View File

@ -319,7 +319,8 @@ export default class HaAutomationAction extends LitElement {
overflow: hidden; overflow: hidden;
} }
.handle { .handle {
cursor: move; cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
padding: 12px; padding: 12px;
} }
.handle ha-svg-icon { .handle ha-svg-icon {

3
src/panels/config/automation/action/types/ha-automation-action-choose.ts
View File

@ -543,7 +543,8 @@ export class HaChooseAction extends LitElement implements ActionElement {
padding: 0 16px 16px 16px; padding: 0 16px 16px 16px;
} }
.handle { .handle {
cursor: move; cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
padding: 12px; padding: 12px;
} }
.handle ha-svg-icon { .handle ha-svg-icon {

3
src/panels/config/automation/condition/ha-automation-condition.ts
View File

@ -358,7 +358,8 @@ export default class HaAutomationCondition extends LitElement {
overflow: hidden; overflow: hidden;
} }
.handle { .handle {
cursor: move; cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
padding: 12px; padding: 12px;
} }
.handle ha-svg-icon { .handle ha-svg-icon {

3
src/panels/config/automation/trigger/ha-automation-trigger.ts
View File

@ -298,7 +298,8 @@ export default class HaAutomationTrigger extends LitElement {
overflow: hidden; overflow: hidden;
} }
.handle { .handle {
cursor: move; cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
padding: 12px; padding: 12px;
} }
.handle ha-svg-icon { .handle ha-svg-icon {

3
src/panels/config/helpers/forms/ha-input_select-form.ts
View File

@ -285,7 +285,8 @@ class HaInputSelectForm extends LitElement {
margin-bottom: 8px; margin-bottom: 8px;
} }
.handle { .handle {
cursor: move; cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
padding-right: 12px; padding-right: 12px;
} }
.handle ha-svg-icon { .handle ha-svg-icon {

259
src/panels/lovelace/cards/hui-todo-list-card.ts
View File

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

3
src/panels/lovelace/components/hui-entity-editor.ts
View File

@ -181,7 +181,8 @@ export class HuiEntityEditor extends LitElement {
} }
.entity .handle { .entity .handle {
padding-right: 8px; padding-right: 8px;
cursor: move; cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
padding-inline-end: 8px; padding-inline-end: 8px;
padding-inline-start: initial; padding-inline-start: initial;
direction: var(--direction); direction: var(--direction);

3
src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts
View File

@ -460,7 +460,8 @@ export class HuiCardFeaturesEditor extends LitElement {
} }
.feature .handle { .feature .handle {
padding-right: 8px; padding-right: 8px;
cursor: move; cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
padding-inline-end: 8px; padding-inline-end: 8px;
padding-inline-start: initial; padding-inline-start: initial;
direction: var(--direction); direction: var(--direction);

3
src/panels/lovelace/editor/hui-entities-card-row-editor.ts
View File

@ -243,7 +243,8 @@ export class HuiEntitiesCardRowEditor extends LitElement {
.entity .handle { .entity .handle {
padding-right: 8px; padding-right: 8px;
cursor: move; cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
padding-inline-end: 8px; padding-inline-end: 8px;
padding-inline-start: initial; padding-inline-start: initial;
direction: var(--direction); direction: var(--direction);

12
src/resources/ha-sortable-style.ts
View File

@ -34,14 +34,22 @@ export const sortableStyles = css`
.sortable-fallback { .sortable-fallback {
display: none; display: none;
opacity: 0;
} }
.sortable-ghost { .sortable-ghost {
border: 2px solid var(--primary-color);
background: rgba(var(--rgb-primary-color), 0.25);
border-radius: 4px;
opacity: 0.4; opacity: 0.4;
} }
.sortable-fallback { .sortable-drag {
opacity: 0; border-radius: 4px;
opacity: 1;
background: var(--card-background-color);
box-shadow: 0px 4px 8px 3px #00000026;
cursor: grabbing;
} }
@keyframes keyframes1 { @keyframes keyframes1 {