diff --git a/frontend/src/App.vue b/frontend/src/App.vue index cf171a0..3fb1cbc 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -17,14 +17,30 @@
-
-
{{ category.label }}
-
-
- - - - {{ n.label }} +
+
+ +
+
+ + + + {{ n.label }} +
@@ -173,6 +189,18 @@ const contextMenu = ref({ }) const paneClickPosition = ref({ x: 0, y: 0 }) +const collapsedSections = ref>( + nodeCategories.reduce((acc, category) => { + acc[category.key] = false + return acc + }, {} as Record) +) + +const toggleSection = (key: string) => { + collapsedSections.value[key] = !isSectionCollapsed(key) +} + +const isSectionCollapsed = (key: string) => collapsedSections.value[key] ?? false const spawnNodeAt = (type: string, screenPoint: { x: number; y: number }) => { const position = screenToFlowCoordinate({ x: screenPoint.x, y: screenPoint.y }) @@ -442,9 +470,27 @@ html, body, #app { height: 100%; font-family: -apple-system, BlinkMacSystemFont, display: flex; flex-direction: column; flex-shrink: 0; + overflow: hidden; +} +.node-section-list { + flex: 1; + overflow-y: auto; } .node-section { padding: 16px; border-bottom: 1px solid #f0f0f0; } -.section-title { font-size: 12px; color: #999; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; } +.section-header { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + background: none; + border: none; + padding: 0; + margin: 0 0 12px; + cursor: pointer; + color: #999; +} +.section-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; } +.node-section.is-collapsed .section-title { color: #bbb; } .node-list { display: flex; flex-direction: column; gap: 8px; } .node-item { display: flex; diff --git a/frontend/src/components/nodes/DataInputNode/index.scss b/frontend/src/components/nodes/DataInputNode/index.scss index 4df2d1f..00bdef4 100644 --- a/frontend/src/components/nodes/DataInputNode/index.scss +++ b/frontend/src/components/nodes/DataInputNode/index.scss @@ -1,3 +1,7 @@ -:global(.vue-flow__node-dataInputNode) { +:global(.vue-flow__node-dataInputNode) { min-width: 200px; } + +.data-input-node__file-input { + display: none; +} diff --git a/frontend/src/components/nodes/DataInputNode/index.vue b/frontend/src/components/nodes/DataInputNode/index.vue index 85b558e..08b2774 100644 --- a/frontend/src/components/nodes/DataInputNode/index.vue +++ b/frontend/src/components/nodes/DataInputNode/index.vue @@ -1,4 +1,4 @@ -