Improve toolbox reorder and checklist editing UX
All checks were successful
Deploy Sokko G / deploy (push) Successful in 8s
All checks were successful
Deploy Sokko G / deploy (push) Successful in 8s
This commit is contained in:
parent
1e4ac4259b
commit
8eb622e05d
11 changed files with 695 additions and 140 deletions
|
|
@ -470,13 +470,35 @@
|
|||
|
||||
[data-reorder-target="item"][data-reorder-orientation="vertical"].is-drop-target,
|
||||
[data-reorder-target="group"][data-reorder-orientation="vertical"].is-drop-target {
|
||||
position: relative;
|
||||
border-color: rgba(246, 196, 83, 0.72);
|
||||
box-shadow: var(--reorder-drop-shadow, none), inset 0 3px 0 rgba(246, 196, 83, 0.8);
|
||||
box-shadow: var(--reorder-drop-shadow, none);
|
||||
}
|
||||
|
||||
[data-reorder-target="item"][data-reorder-orientation="vertical"].is-drop-target::before,
|
||||
[data-reorder-target="group"][data-reorder-orientation="vertical"].is-drop-target::before {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 3px;
|
||||
border-radius: var(--radius-pill);
|
||||
background: rgba(246, 196, 83, 0.9);
|
||||
box-shadow: 0 0 12px rgba(246, 196, 83, 0.24);
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
[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);
|
||||
box-shadow: var(--reorder-drop-shadow, none);
|
||||
}
|
||||
|
||||
[data-reorder-target="item"][data-reorder-orientation="vertical"].is-drop-target.drop-after::before,
|
||||
[data-reorder-target="group"][data-reorder-orientation="vertical"].is-drop-target.drop-after::before {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
[data-reorder-target="item"][data-reorder-orientation="horizontal"].is-drop-target,
|
||||
|
|
@ -1441,7 +1463,12 @@ textarea:focus {
|
|||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.checklist-section-header > div {
|
||||
.checklist-section-header > h3 {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.checklist-section-actions {
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
|
|
@ -1454,18 +1481,22 @@ textarea:focus {
|
|||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.checklist-gender-symbol {
|
||||
display: inline-block;
|
||||
margin-left: 3px;
|
||||
color: currentColor;
|
||||
font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Noto Sans Symbols", "Apple Symbols", sans-serif;
|
||||
font-size: 1.18em;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
text-shadow:
|
||||
0 0 0 currentColor,
|
||||
0 0 4px rgba(246, 196, 83, 0.22);
|
||||
transform: translateY(1px);
|
||||
.checklist-section-title-input {
|
||||
width: 100%;
|
||||
min-height: 30px;
|
||||
padding: 5px 8px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-md);
|
||||
background: transparent;
|
||||
color: var(--color-accent-gold);
|
||||
font: inherit;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.checklist-section-title-input:hover,
|
||||
.checklist-section-title-input:focus {
|
||||
border-color: rgba(246, 196, 83, 0.34);
|
||||
background: rgba(21, 26, 48, 0.34);
|
||||
}
|
||||
|
||||
.checklist-section.is-complete .checklist-section-header h3 {
|
||||
|
|
@ -1473,7 +1504,12 @@ textarea:focus {
|
|||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.checklist-section-header > div > span {
|
||||
.checklist-section.is-complete .checklist-section-title-input {
|
||||
color: var(--color-text-muted);
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.checklist-section-actions > span {
|
||||
flex: 0 0 auto;
|
||||
padding: 3px 9px;
|
||||
border: 1px solid rgba(246, 196, 83, 0.22);
|
||||
|
|
@ -1573,15 +1609,29 @@ textarea:focus {
|
|||
list-style: none;
|
||||
}
|
||||
|
||||
.checklist-category-boundary-drop-zone {
|
||||
min-height: 10px;
|
||||
border: 1px dashed rgba(165, 180, 252, 0.16);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(15, 23, 42, 0.12);
|
||||
}
|
||||
|
||||
.checklist-category-boundary-drop-zone.is-drop-target {
|
||||
border-color: rgba(246, 196, 83, 0.72);
|
||||
background: rgba(246, 196, 83, 0.08);
|
||||
box-shadow: inset 0 0 0 1px rgba(246, 196, 83, 0.24);
|
||||
}
|
||||
|
||||
.checklist-item {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 42px;
|
||||
grid-template-columns: 1fr 42px 42px;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.checklist-item-main {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: 30px auto minmax(0, 1fr);
|
||||
min-height: 42px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
|
@ -1591,11 +1641,129 @@ textarea:focus {
|
|||
background: rgba(5, 7, 17, 0.44);
|
||||
}
|
||||
|
||||
.checklist-item-main:hover {
|
||||
border-color: rgba(196, 181, 253, 0.22);
|
||||
background: rgba(10, 13, 30, 0.54);
|
||||
}
|
||||
|
||||
.checklist-item-main.is-editing {
|
||||
grid-template-columns: 30px auto minmax(96px, 1fr) minmax(84px, 0.45fr);
|
||||
}
|
||||
|
||||
.checklist-drag-handle {
|
||||
display: inline-grid;
|
||||
width: 30px;
|
||||
min-width: 30px;
|
||||
min-height: 30px;
|
||||
place-items: center;
|
||||
padding: 0;
|
||||
border: 1px solid rgba(165, 180, 252, 0.1);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(21, 26, 48, 0.76);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: grab;
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.checklist-drag-handle .ui-icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.checklist-drag-handle:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.checklist-section.is-drop-target {
|
||||
border-color: rgba(246, 196, 83, 0.72);
|
||||
}
|
||||
|
||||
.checklist-item.is-dragging .checklist-item-main {
|
||||
opacity: 0.58;
|
||||
}
|
||||
|
||||
.checklist-label-input,
|
||||
.checklist-category-input {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
min-height: 30px;
|
||||
padding: 5px 8px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-md);
|
||||
background: transparent;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.checklist-category-input {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.checklist-label-input:hover,
|
||||
.checklist-label-input:focus,
|
||||
.checklist-category-input:hover,
|
||||
.checklist-category-input:focus {
|
||||
border-color: rgba(246, 196, 83, 0.34);
|
||||
background: rgba(21, 26, 48, 0.42);
|
||||
}
|
||||
|
||||
.checklist-item-summary {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
justify-content: flex-start;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--color-text-primary);
|
||||
text-align: left;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.checklist-item-summary:hover {
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.checklist-item-summary span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
font-weight: 700;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.checklist-edit-button {
|
||||
display: inline-grid;
|
||||
width: 40px;
|
||||
min-width: 40px;
|
||||
min-height: 40px;
|
||||
place-items: center;
|
||||
padding: 0;
|
||||
border: 1px solid rgba(165, 180, 252, 0.1);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(21, 26, 48, 0.76);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.checklist-edit-button .ui-icon {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
.checklist input[type="checkbox"] {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.checklist-item.is-complete .checklist-item-main > span {
|
||||
.checklist-item.is-complete .checklist-label-input {
|
||||
color: var(--color-text-muted);
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.checklist-item.is-complete .checklist-item-summary span {
|
||||
color: var(--color-text-muted);
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
|
@ -1946,11 +2114,10 @@ textarea:focus {
|
|||
|
||||
.task-planner-category-section.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-category-section.is-drop-target.drop-after {
|
||||
box-shadow: inset 0 -3px 0 rgba(246, 196, 83, 0.8);
|
||||
border-color: rgba(246, 196, 83, 0.72);
|
||||
}
|
||||
|
||||
.task-planner-item {
|
||||
|
|
@ -2459,15 +2626,16 @@ textarea:focus {
|
|||
}
|
||||
|
||||
.combos-category-boundary-drop-zone {
|
||||
min-height: 6px;
|
||||
border-radius: 999px;
|
||||
min-height: 10px;
|
||||
border: 1px dashed rgba(165, 180, 252, 0.16);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(15, 23, 42, 0.12);
|
||||
}
|
||||
|
||||
.combos-category-boundary-drop-zone.is-drop-target {
|
||||
min-height: 12px;
|
||||
border: 1px dashed rgba(246, 196, 83, 0.72);
|
||||
background: rgba(246, 196, 83, 0.12);
|
||||
box-shadow: inset 0 2px 0 rgba(246, 196, 83, 0.74);
|
||||
background: rgba(246, 196, 83, 0.08);
|
||||
box-shadow: inset 0 0 0 1px rgba(246, 196, 83, 0.24);
|
||||
}
|
||||
|
||||
.combos-list {
|
||||
|
|
@ -3736,6 +3904,8 @@ button.combo-input-token.combo-input-mouse {
|
|||
.tool-split-root-button:hover,
|
||||
.tool-split-action-button:hover:not(:disabled),
|
||||
.checklist-qty-controls button:hover,
|
||||
.checklist-drag-handle:hover,
|
||||
.checklist-edit-button:hover,
|
||||
.tool-split-entry > button:not(.tool-split-entry-summary, .tool-split-entry-value, .danger):hover,
|
||||
.counter-actions button:not(.danger):hover,
|
||||
.link-item button:not(.danger):hover,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue