Unify toolbox drag and drop reorder behavior
All checks were successful
Deploy Sokko G / deploy (push) Successful in 7s
All checks were successful
Deploy Sokko G / deploy (push) Successful in 7s
This commit is contained in:
parent
a6d35c6e6b
commit
1879b245fb
17 changed files with 1258 additions and 929 deletions
|
|
@ -148,6 +148,8 @@
|
|||
}
|
||||
|
||||
.toolbox-card {
|
||||
--reorder-drop-shadow: var(--shadow-sm);
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-height: 292px;
|
||||
|
|
@ -225,24 +227,6 @@
|
|||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.toolbox-card.is-dragging {
|
||||
cursor: grabbing;
|
||||
opacity: 0.58;
|
||||
transform: scale(0.99);
|
||||
}
|
||||
|
||||
.toolbox-card.is-drop-target {
|
||||
box-shadow:
|
||||
var(--shadow-sm),
|
||||
inset 3px 0 0 rgba(246, 196, 83, 0.82);
|
||||
}
|
||||
|
||||
.toolbox-card.is-drop-target.drop-after {
|
||||
box-shadow:
|
||||
var(--shadow-sm),
|
||||
inset -3px 0 0 rgba(246, 196, 83, 0.82);
|
||||
}
|
||||
|
||||
.toolbox-page {
|
||||
display: flex;
|
||||
min-height: calc(100vh - 68px - var(--space-8) - var(--space-12));
|
||||
|
|
|
|||
|
|
@ -423,6 +423,8 @@
|
|||
}
|
||||
|
||||
.module {
|
||||
--reorder-drop-shadow: var(--shadow-sm);
|
||||
|
||||
position: relative;
|
||||
contain: paint;
|
||||
overflow: hidden;
|
||||
|
|
@ -459,23 +461,33 @@
|
|||
linear-gradient(180deg, transparent 0 30%, rgba(139, 92, 246, 0.08) 42%, rgba(139, 92, 246, 0.32) 72%, rgba(196, 181, 253, 0.5) 100%);
|
||||
}
|
||||
|
||||
.module.is-dragging {
|
||||
[data-reorder-target="item"].is-dragging,
|
||||
[data-reorder-target="group"].is-dragging {
|
||||
cursor: grabbing;
|
||||
opacity: 0.58;
|
||||
transform: scale(0.99);
|
||||
}
|
||||
|
||||
.module.is-drop-target {
|
||||
[data-reorder-target="item"][data-reorder-orientation="vertical"].is-drop-target,
|
||||
[data-reorder-target="group"][data-reorder-orientation="vertical"].is-drop-target {
|
||||
border-color: rgba(246, 196, 83, 0.72);
|
||||
box-shadow:
|
||||
var(--shadow-sm),
|
||||
inset 0 3px 0 rgba(246, 196, 83, 0.8);
|
||||
box-shadow: var(--reorder-drop-shadow, none), inset 0 3px 0 rgba(246, 196, 83, 0.8);
|
||||
}
|
||||
|
||||
.module.is-drop-target.drop-after {
|
||||
box-shadow:
|
||||
var(--shadow-sm),
|
||||
inset 0 -3px 0 rgba(246, 196, 83, 0.8);
|
||||
[data-reorder-target="item"][data-reorder-orientation="vertical"].is-drop-target.drop-after,
|
||||
[data-reorder-target="group"][data-reorder-orientation="vertical"].is-drop-target.drop-after {
|
||||
box-shadow: var(--reorder-drop-shadow, none), inset 0 -3px 0 rgba(246, 196, 83, 0.8);
|
||||
}
|
||||
|
||||
[data-reorder-target="item"][data-reorder-orientation="horizontal"].is-drop-target,
|
||||
[data-reorder-target="group"][data-reorder-orientation="horizontal"].is-drop-target {
|
||||
border-color: rgba(246, 196, 83, 0.72);
|
||||
box-shadow: var(--reorder-drop-shadow, none), inset 3px 0 0 rgba(246, 196, 83, 0.86);
|
||||
}
|
||||
|
||||
[data-reorder-target="item"][data-reorder-orientation="horizontal"].is-drop-target.drop-after,
|
||||
[data-reorder-target="group"][data-reorder-orientation="horizontal"].is-drop-target.drop-after {
|
||||
box-shadow: var(--reorder-drop-shadow, none), inset -3px 0 0 rgba(246, 196, 83, 0.86);
|
||||
}
|
||||
|
||||
.module header {
|
||||
|
|
@ -1857,31 +1869,6 @@ textarea:focus {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.task-planner-uncategorized-drop-zone {
|
||||
padding: 9px 12px;
|
||||
border: 1px dashed rgba(165, 180, 252, 0.22);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(15, 23, 42, 0.26);
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 900;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.task-planner-uncategorized-drop-zone.is-drop-target {
|
||||
border-color: rgba(246, 196, 83, 0.72);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(246, 196, 83, 0.08), transparent 56%),
|
||||
rgba(15, 23, 42, 0.34);
|
||||
color: var(--color-accent-gold);
|
||||
box-shadow: inset 0 3px 0 rgba(246, 196, 83, 0.8);
|
||||
}
|
||||
|
||||
.task-planner-uncategorized-drop-zone.is-drop-target.drop-after {
|
||||
box-shadow: inset 0 -3px 0 rgba(246, 196, 83, 0.8);
|
||||
}
|
||||
|
||||
.task-planner-category-boundary-drop-zone {
|
||||
min-height: 10px;
|
||||
border: 1px dashed rgba(165, 180, 252, 0.16);
|
||||
|
|
@ -1987,21 +1974,6 @@ textarea:focus {
|
|||
rgba(5, 7, 17, 0.36);
|
||||
}
|
||||
|
||||
.task-planner-item.is-dragging {
|
||||
cursor: grabbing;
|
||||
opacity: 0.58;
|
||||
transform: scale(0.99);
|
||||
}
|
||||
|
||||
.task-planner-item.is-drop-target {
|
||||
border-color: rgba(246, 196, 83, 0.72);
|
||||
box-shadow: inset 0 3px 0 rgba(246, 196, 83, 0.8);
|
||||
}
|
||||
|
||||
.task-planner-item.is-drop-target.drop-after {
|
||||
box-shadow: inset 0 -3px 0 rgba(246, 196, 83, 0.8);
|
||||
}
|
||||
|
||||
.task-planner-line {
|
||||
display: grid;
|
||||
grid-template-columns: 30px 24px minmax(0, 1fr) 134px auto auto;
|
||||
|
|
@ -2486,33 +2458,6 @@ textarea:focus {
|
|||
gap: 6px;
|
||||
}
|
||||
|
||||
.combos-root-drop-zone {
|
||||
display: none;
|
||||
padding: 9px 12px;
|
||||
border: 1px dashed rgba(165, 180, 252, 0.22);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(15, 23, 42, 0.26);
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 900;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.combos-root-drop-zone.is-visible,
|
||||
.combos-root-drop-zone.is-drop-target {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.combos-root-drop-zone.is-drop-target {
|
||||
border-color: rgba(246, 196, 83, 0.72);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(246, 196, 83, 0.08), transparent 56%),
|
||||
rgba(15, 23, 42, 0.34);
|
||||
color: var(--color-accent-gold);
|
||||
box-shadow: inset 0 3px 0 rgba(246, 196, 83, 0.8);
|
||||
}
|
||||
|
||||
.combos-category-boundary-drop-zone {
|
||||
min-height: 6px;
|
||||
border-radius: 999px;
|
||||
|
|
@ -2546,24 +2491,6 @@ textarea:focus {
|
|||
grid-template-columns: 30px minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.combo-card.is-dragging,
|
||||
.combos-category.is-dragging {
|
||||
cursor: grabbing;
|
||||
opacity: 0.58;
|
||||
transform: scale(0.99);
|
||||
}
|
||||
|
||||
.combo-card.is-drop-target,
|
||||
.combos-category.is-drop-target {
|
||||
border-color: rgba(246, 196, 83, 0.72);
|
||||
box-shadow: inset 0 3px 0 rgba(246, 196, 83, 0.8);
|
||||
}
|
||||
|
||||
.combo-card.is-drop-target.drop-after,
|
||||
.combos-category.is-drop-target.drop-after {
|
||||
box-shadow: inset 0 -3px 0 rgba(246, 196, 83, 0.8);
|
||||
}
|
||||
|
||||
.combo-drag-handle {
|
||||
align-self: start;
|
||||
}
|
||||
|
|
@ -2971,9 +2898,10 @@ button.combo-input-token.combo-input-mouse {
|
|||
}
|
||||
|
||||
.counter-item {
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
padding: 12px 52px 12px 12px;
|
||||
border: 1px solid rgba(165, 180, 252, 0.12);
|
||||
border-radius: var(--radius-md);
|
||||
background:
|
||||
|
|
@ -2981,6 +2909,22 @@ button.combo-input-token.combo-input-mouse {
|
|||
rgba(7, 10, 24, 0.42);
|
||||
}
|
||||
|
||||
.counter-drag-handle {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
display: inline-grid;
|
||||
width: 34px;
|
||||
min-width: 34px;
|
||||
min-height: 34px;
|
||||
place-items: center;
|
||||
padding: 0;
|
||||
color: var(--color-text-muted);
|
||||
cursor: grab;
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.counter-item > div:first-child {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
|
|
@ -3340,10 +3284,29 @@ button.combo-input-token.combo-input-mouse {
|
|||
grid-template-columns: minmax(0, 1fr) 34px;
|
||||
}
|
||||
|
||||
.timer-entry.has-drag-handle {
|
||||
grid-template-columns: 30px minmax(0, 1fr) 34px;
|
||||
}
|
||||
|
||||
.tool-split-entry-list li.is-editing > .timer-entry.has-single-action {
|
||||
grid-template-columns: auto minmax(0, 1fr) 34px;
|
||||
}
|
||||
|
||||
.tool-split-entry-list li.is-editing > .timer-entry.has-drag-handle {
|
||||
grid-template-columns: 30px auto minmax(0, 1fr) 34px;
|
||||
}
|
||||
|
||||
.timer-drag-handle {
|
||||
width: 30px;
|
||||
min-width: 30px;
|
||||
min-height: 36px;
|
||||
padding: 0;
|
||||
color: var(--color-text-muted);
|
||||
cursor: grab;
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.timer-inline-reset {
|
||||
width: 26px;
|
||||
min-width: 26px;
|
||||
|
|
@ -3428,6 +3391,25 @@ button.combo-input-token.combo-input-mouse {
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
.calculator-entry.has-drag-handle {
|
||||
grid-template-columns: 30px minmax(0, 1fr) 34px 34px;
|
||||
}
|
||||
|
||||
.tool-split-entry-list li.is-editing > .calculator-entry.has-drag-handle {
|
||||
grid-template-columns: 30px auto minmax(0, 1fr) 34px 34px;
|
||||
}
|
||||
|
||||
.calculator-drag-handle {
|
||||
width: 30px;
|
||||
min-width: 30px;
|
||||
min-height: 36px;
|
||||
padding: 0;
|
||||
color: var(--color-text-muted);
|
||||
cursor: grab;
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.calculator-form label span,
|
||||
.calculator-result span,
|
||||
.tool-split-root-button {
|
||||
|
|
@ -4073,7 +4055,7 @@ button.combo-input-token.combo-input-mouse {
|
|||
|
||||
.link-item {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
grid-template-columns: 34px minmax(0, 1fr) auto;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
|
|
@ -4082,6 +4064,17 @@ button.combo-input-token.combo-input-mouse {
|
|||
background: rgba(7, 10, 24, 0.42);
|
||||
}
|
||||
|
||||
.link-drag-handle {
|
||||
width: 34px;
|
||||
min-width: 34px;
|
||||
min-height: 34px;
|
||||
padding: 0;
|
||||
color: var(--color-text-muted);
|
||||
cursor: grab;
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.link-item a {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
|
|
@ -4116,6 +4109,12 @@ button.combo-input-token.combo-input-mouse {
|
|||
min-height: 40px;
|
||||
}
|
||||
|
||||
.link-item .link-drag-handle {
|
||||
width: 34px;
|
||||
min-width: 34px;
|
||||
min-height: 34px;
|
||||
}
|
||||
|
||||
.dropzone {
|
||||
display: grid;
|
||||
min-height: 74px;
|
||||
|
|
@ -4327,18 +4326,8 @@ button.combo-input-token.combo-input-mouse {
|
|||
background: rgba(5, 7, 17, 0.38);
|
||||
}
|
||||
|
||||
.images figure.is-dragging {
|
||||
opacity: 0.42;
|
||||
}
|
||||
|
||||
.images figure.is-drop-target {
|
||||
border-color: rgba(246, 196, 83, 0.72);
|
||||
box-shadow: 0 0 0 1px rgba(246, 196, 83, 0.26), 0 0 18px rgba(246, 196, 83, 0.12);
|
||||
}
|
||||
|
||||
.images figure.is-drop-target.drop-after {
|
||||
border-color: rgba(112, 89, 255, 0.82);
|
||||
box-shadow: 0 0 0 1px rgba(164, 124, 255, 0.3), 0 0 18px rgba(112, 89, 255, 0.16);
|
||||
.images figure {
|
||||
--reorder-drop-shadow: 0 0 18px rgba(246, 196, 83, 0.12);
|
||||
}
|
||||
|
||||
.image-drag-handle {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue