T-294: move collapse toggles into the status bar
Revise the mock — toggles no longer float on the pane edges; they live in the bottom status bar, pinned to the center pane's left/right edge so each slides to the far end when its pane collapses. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.8
@@ -4,116 +4,146 @@
|
||||
"titleA": {
|
||||
"type": "Text",
|
||||
"left": 40, "top": 50,
|
||||
"text": "STATE A — both side panes open (toggles sit on center-pane edges)",
|
||||
"text": "STATE A — both panes open: toggles live in the status bar, pinned to the center-pane edges",
|
||||
"fontColor": "#c8d8f0", "fontSize": 15
|
||||
},
|
||||
"a-sidebar": {
|
||||
"type": "Rectangle",
|
||||
"left": 40, "top": 90, "width": 200, "height": 250,
|
||||
"left": 40, "top": 86, "width": 200, "height": 200,
|
||||
"fillColor": "#1a1e24", "strokeColor": "#333340", "corners": [6, 6, 6, 6]
|
||||
},
|
||||
"a-sidebar-lbl": {
|
||||
"type": "Text", "parent": "a-sidebar",
|
||||
"left": 60, "top": 105, "text": "Sidebar\n(ticket list)",
|
||||
"left": 60, "top": 100, "text": "Sidebar\n(ticket list)",
|
||||
"fontColor": "#c8d0e0", "fontSize": 13
|
||||
},
|
||||
"a-center": {
|
||||
"type": "Rectangle",
|
||||
"left": 250, "top": 90, "width": 480, "height": 250,
|
||||
"left": 250, "top": 86, "width": 480, "height": 200,
|
||||
"fillColor": "#2a3040", "strokeColor": "#333340", "corners": [6, 6, 6, 6]
|
||||
},
|
||||
"a-center-lbl": {
|
||||
"type": "Text", "parent": "a-center",
|
||||
"left": 270, "top": 105, "text": "Claude conversation (center)",
|
||||
"left": 270, "top": 100, "text": "Claude conversation (center)",
|
||||
"fontColor": "#c8d0e0", "fontSize": 13
|
||||
},
|
||||
"a-context": {
|
||||
"type": "Rectangle",
|
||||
"left": 740, "top": 90, "width": 200, "height": 250,
|
||||
"left": 740, "top": 86, "width": 200, "height": 200,
|
||||
"fillColor": "#1a1e24", "strokeColor": "#333340", "corners": [6, 6, 6, 6]
|
||||
},
|
||||
"a-context-lbl": {
|
||||
"type": "Text", "parent": "a-context",
|
||||
"left": 760, "top": 105, "text": "Context\npane",
|
||||
"left": 760, "top": 100, "text": "Context\npane",
|
||||
"fontColor": "#c8d0e0", "fontSize": 13
|
||||
},
|
||||
"a-statusbar": {
|
||||
"type": "Rectangle",
|
||||
"left": 40, "top": 292, "width": 900, "height": 28,
|
||||
"fillColor": "#15181d", "strokeColor": "#333340", "corners": [0, 0, 0, 0]
|
||||
},
|
||||
"a-status-left": {
|
||||
"type": "Text", "parent": "a-statusbar",
|
||||
"left": 56, "top": 299, "text": "main 13 skills",
|
||||
"fontColor": "#8a92a6", "fontSize": 11
|
||||
},
|
||||
"a-status-right": {
|
||||
"type": "Text", "parent": "a-statusbar",
|
||||
"left": 820, "top": 299, "text": "Output terminal",
|
||||
"fontColor": "#8a92a6", "fontSize": 11
|
||||
},
|
||||
"a-toggle-left": {
|
||||
"type": "Rectangle",
|
||||
"left": 233, "top": 200, "width": 26, "height": 30,
|
||||
"fillColor": "#2a3040", "strokeColor": "#c8d8f0", "corners": [5, 5, 5, 5]
|
||||
"left": 238, "top": 294, "width": 24, "height": 24,
|
||||
"fillColor": "#2a3040", "strokeColor": "#c8d8f0", "corners": [4, 4, 4, 4]
|
||||
},
|
||||
"a-toggle-left-icon": {
|
||||
"type": "Text", "parent": "a-toggle-left",
|
||||
"left": 240, "top": 205, "text": "<", "fontColor": "#c8d8f0", "fontSize": 16
|
||||
"left": 246, "top": 299, "text": "<", "fontColor": "#c8d8f0", "fontSize": 14
|
||||
},
|
||||
"a-toggle-right": {
|
||||
"type": "Rectangle",
|
||||
"left": 721, "top": 200, "width": 26, "height": 30,
|
||||
"fillColor": "#2a3040", "strokeColor": "#c8d8f0", "corners": [5, 5, 5, 5]
|
||||
"left": 718, "top": 294, "width": 24, "height": 24,
|
||||
"fillColor": "#2a3040", "strokeColor": "#c8d8f0", "corners": [4, 4, 4, 4]
|
||||
},
|
||||
"a-toggle-right-icon": {
|
||||
"type": "Text", "parent": "a-toggle-right",
|
||||
"left": 729, "top": 205, "text": ">", "fontColor": "#c8d8f0", "fontSize": 16
|
||||
"left": 726, "top": 299, "text": ">", "fontColor": "#c8d8f0", "fontSize": 14
|
||||
},
|
||||
"a-note-left": {
|
||||
"type": "Text",
|
||||
"left": 150, "top": 348, "text": "click -> collapse sidebar (edge slides left)",
|
||||
"left": 150, "top": 328, "text": "sits under center's left edge -> collapse sidebar",
|
||||
"fontColor": "#8a92a6", "fontSize": 11
|
||||
},
|
||||
"a-note-right": {
|
||||
"type": "Text",
|
||||
"left": 600, "top": 348, "text": "click -> collapse context (edge slides right)",
|
||||
"left": 600, "top": 328, "text": "sits under center's right edge -> collapse context",
|
||||
"fontColor": "#8a92a6", "fontSize": 11
|
||||
},
|
||||
|
||||
"titleB": {
|
||||
"type": "Text",
|
||||
"left": 40, "top": 410,
|
||||
"text": "STATE B — both collapsed: same buttons stay anchored on center edge, chevrons flip to re-open",
|
||||
"left": 40, "top": 388,
|
||||
"text": "STATE B — both collapsed: each toggle slides along the status bar to the far end as its edge moves out",
|
||||
"fontColor": "#c8d8f0", "fontSize": 15
|
||||
},
|
||||
"b-center": {
|
||||
"type": "Rectangle",
|
||||
"left": 40, "top": 450, "width": 900, "height": 250,
|
||||
"left": 40, "top": 424, "width": 900, "height": 200,
|
||||
"fillColor": "#2a3040", "strokeColor": "#333340", "corners": [6, 6, 6, 6]
|
||||
},
|
||||
"b-center-lbl": {
|
||||
"type": "Text", "parent": "b-center",
|
||||
"left": 380, "top": 465, "text": "Claude conversation — full width",
|
||||
"left": 380, "top": 438, "text": "Claude conversation — full width",
|
||||
"fontColor": "#c8d0e0", "fontSize": 13
|
||||
},
|
||||
"b-statusbar": {
|
||||
"type": "Rectangle",
|
||||
"left": 40, "top": 630, "width": 900, "height": 28,
|
||||
"fillColor": "#15181d", "strokeColor": "#333340", "corners": [0, 0, 0, 0]
|
||||
},
|
||||
"b-status-left": {
|
||||
"type": "Text", "parent": "b-statusbar",
|
||||
"left": 84, "top": 637, "text": "main 13 skills",
|
||||
"fontColor": "#8a92a6", "fontSize": 11
|
||||
},
|
||||
"b-status-right": {
|
||||
"type": "Text", "parent": "b-statusbar",
|
||||
"left": 780, "top": 637, "text": "Output terminal",
|
||||
"fontColor": "#8a92a6", "fontSize": 11
|
||||
},
|
||||
"b-toggle-left": {
|
||||
"type": "Rectangle",
|
||||
"left": 40, "top": 560, "width": 26, "height": 30,
|
||||
"fillColor": "#2a3040", "strokeColor": "#c8d8f0", "corners": [0, 5, 5, 0]
|
||||
"left": 44, "top": 632, "width": 24, "height": 24,
|
||||
"fillColor": "#2a3040", "strokeColor": "#c8d8f0", "corners": [4, 4, 4, 4]
|
||||
},
|
||||
"b-toggle-left-icon": {
|
||||
"type": "Text", "parent": "b-toggle-left",
|
||||
"left": 48, "top": 565, "text": ">", "fontColor": "#c8d8f0", "fontSize": 16
|
||||
"left": 52, "top": 637, "text": ">", "fontColor": "#c8d8f0", "fontSize": 14
|
||||
},
|
||||
"b-toggle-right": {
|
||||
"type": "Rectangle",
|
||||
"left": 914, "top": 560, "width": 26, "height": 30,
|
||||
"fillColor": "#2a3040", "strokeColor": "#c8d8f0", "corners": [5, 0, 0, 5]
|
||||
"left": 912, "top": 632, "width": 24, "height": 24,
|
||||
"fillColor": "#2a3040", "strokeColor": "#c8d8f0", "corners": [4, 4, 4, 4]
|
||||
},
|
||||
"b-toggle-right-icon": {
|
||||
"type": "Text", "parent": "b-toggle-right",
|
||||
"left": 921, "top": 565, "text": "<", "fontColor": "#c8d8f0", "fontSize": 16
|
||||
"left": 920, "top": 637, "text": "<", "fontColor": "#c8d8f0", "fontSize": 14
|
||||
},
|
||||
"b-note-left": {
|
||||
"type": "Text",
|
||||
"left": 80, "top": 595, "text": "click -> re-open sidebar",
|
||||
"left": 80, "top": 666, "text": "now at far-left -> re-open sidebar",
|
||||
"fontColor": "#8a92a6", "fontSize": 11
|
||||
},
|
||||
"b-note-right": {
|
||||
"type": "Text",
|
||||
"left": 760, "top": 595, "text": "click -> re-open context pane",
|
||||
"left": 700, "top": 666, "text": "now at far-right -> re-open context pane",
|
||||
"fontColor": "#8a92a6", "fontSize": 11
|
||||
},
|
||||
"footer": {
|
||||
"type": "Text",
|
||||
"left": 40, "top": 720,
|
||||
"text": "One control per edge, fixed to the center pane. Collapsed panes hide fully (no rail). Chevron points the way the edge travels. Mirrored left/right for parity. Each toggle = a clide verb (D-6).",
|
||||
"left": 40, "top": 700,
|
||||
"text": "Toggles live in the bottom status bar (not floating on the pane). Each is pinned to the center pane's left/right edge, so it slides to the status-bar end when its pane collapses. Mirrored for parity. Buttons call the existing sidebar.collapse / context.collapse commands; chevron reads isCollapsed.",
|
||||
"fontColor": "#8a92a6", "fontSize": 11
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 77 KiB After Width: | Height: | Size: 98 KiB |
Reference in New Issue
Block a user