Moku/Work
1
0
Fork 0
Code Issues Pull Requests Activity

Feat: Add draggable shell trees

Browse Source
This commit is contained in:
MangoPig
2026-06-21 12:31:47 +01:00
parent 14ac0f46de
commit eac4fb423e
4 changed files with 1412 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
Frontend/src/components/shell/ProjectSelector/ProjectSelector.module.scss
View File

@@ -9,6 +9,15 @@
justify-items: center;
}
.rootDragMode {
user-select: none;
cursor: grabbing;
}
.rootDragMode .treeItem {
cursor: grabbing;
}
.trigger {
width: 100%;
min-width: 0;
@@ -197,6 +206,43 @@
padding: 0;
}
.treeEmptySlot {
min-height: calc(var(--control-size-lg) - var(--space-2));
padding-left: calc(var(--space-3) + (var(--tree-depth, 0) * var(--space-4)));
border-radius: var(--radius-lg);
border: 1px dashed color-mix(in srgb, var(--color-border) 38%, transparent);
opacity: 0.35;
}
.treeInputRow {
width: 100%;
min-width: 0;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: var(--space-2);
min-height: calc(var(--control-size-lg) - var(--space-2));
padding: var(--space-2) var(--space-3);
padding-left: calc(var(--space-3) + (var(--tree-depth, 0) * var(--space-4)));
border: 1px solid color-mix(in srgb, var(--color-border) 42%, transparent);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--color-surface) 94%, transparent);
}
.treeInput {
width: 100%;
min-width: 0;
border: 0;
background: transparent;
color: var(--color-text);
font: inherit;
outline: none;
}
.treeInput::placeholder {
color: var(--color-text-muted);
}
.treeItem {
width: 100%;
min-width: 0;
@@ -215,20 +261,43 @@
background 160ms var(--easing-standard),
color 160ms var(--easing-standard),
border-color 160ms var(--easing-standard),
box-shadow 160ms var(--easing-standard),
transform 180ms var(--easing-standard);
text-align: left;
}
.treeItem:hover,
.treeItem:focus-visible {
background: var(--color-surface-hover);
background: color-mix(in srgb, var(--color-surface-hover) 80%, var(--color-accent-soft) 20%);
color: var(--color-text);
box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
}
.treeItemFolder {
color: var(--color-text);
}
.treeItemDragging {
opacity: 0.45;
transform: scale(0.985);
box-shadow: none;
}
.treeItemDropBefore {
box-shadow: inset 0 2px 0 color-mix(in srgb, var(--color-accent-strong) 78%, transparent);
}
.treeItemDropAfter {
box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--color-accent-strong) 78%, transparent);
}
.treeItemDropInside {
border-color: color-mix(in srgb, var(--color-accent-strong) 55%, transparent);
background: color-mix(in srgb, var(--color-accent-soft) 36%, var(--color-surface));
color: var(--color-text);
box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
}
.folderChevron {
color: var(--color-text-muted);
transition: transform 160ms var(--easing-standard);