Skip to content

Commit 460315d

Browse files
Vaggelis-ArgVaggelis-Arg
committed
new layout proposal with tabs
Signed-off-by: Evangelos Argyropoulos <vag.argyropoulos@gmail.com>
1 parent d4a1405 commit 460315d

File tree

2 files changed

+103
-218
lines changed

2 files changed

+103
-218
lines changed

‎src/pages/MainContainer.tsx‎

Lines changed: 102 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ const MainContainer = () => {
6464
isPreviewVisible,
6565
isProblemPanelVisible,
6666
isModelCollapsed,
67+
isTemplateCollapsed,
6768
isDataCollapsed,
6869
toggleModelCollapse,
6970
toggleDataCollapse,
@@ -80,9 +81,12 @@ const MainContainer = () => {
8081
}));
8182

8283
const [, setLoading] = useState(true);
83-
84-
// tabbed editor state (default: TemplateMark active)
85-
const [activeEditorTab, setActiveEditorTab] = useState<'model'|'template'|'data'>('template');
84+
85+
// Calculate dynamic panel sizes based on collapse states
86+
const collapsedCount = [isModelCollapsed, isTemplateCollapsed, isDataCollapsed].filter(Boolean).length;
87+
const expandedCount = 3 - collapsedCount;
88+
const collapsedSize = 5;
89+
const expandedSize = expandedCount > 0 ? (100 - (collapsedCount * collapsedSize)) / expandedCount : 33;
8690

8791
// Create distinct preview background for better visual separation
8892
const previewBackgroundColor = backgroundColor === '#ffffff'
@@ -92,161 +96,126 @@ const MainContainer = () => {
9296
const previewHeaderColor = backgroundColor === '#ffffff'
9397
? '#dbeafe' // Slightly darker blue for header in light mode
9498
: '#0f172a'; // Even darker shade for header in dark mode
99+
100+
// Create a key that changes when collapse state changes to force panel re-layout
101+
const panelKey = `${String(isModelCollapsed)}-${String(isTemplateCollapsed)}-${String(isDataCollapsed)}`;
95102

96103
return (
97104
<div className="main-container" style={{ backgroundColor }}>
98105
<PanelGroup direction="horizontal" className="main-container-panel-group"
99106
style={{ position: "fixed", width: "calc(100% - 64px)", height: "calc(100% - 64px)" }}>
100107
{isEditorsVisible && (
101108
<>
102-
<Panel defaultSize={65} minSize={30}>
109+
<Panel defaultSize={62.5} minSize={30}>
103110
<div className="main-container-editors-panel" style={{ backgroundColor }}>
104-
{/* Tab bar for editor group */}
105-
<div
106-
className={`main-container-editor-tabs ${
107-
backgroundColor === '#ffffff'
108-
? 'main-container-editor-tabs-light'
109-
: 'main-container-editor-tabs-dark'
110-
}`}
111-
>
112-
<button
113-
className={`main-container-editor-tab ${
114-
backgroundColor === '#ffffff'
115-
? 'main-container-editor-tab-light'
116-
: 'main-container-editor-tab-dark'
117-
} ${
118-
activeEditorTab === "model"
119-
? backgroundColor === '#ffffff'
120-
? 'main-container-editor-tab-active-light'
121-
: 'main-container-editor-tab-active-dark'
122-
: ''
123-
}`}
124-
onClick={() => setActiveEditorTab("model")}
125-
title="Concerto Model"
126-
>
127-
Concerto Model
128-
</button>
129-
130-
<button
131-
className={`main-container-editor-tab ${
132-
backgroundColor === '#ffffff'
133-
? 'main-container-editor-tab-light'
134-
: 'main-container-editor-tab-dark'
135-
} ${
136-
activeEditorTab === "template"
137-
? backgroundColor === '#ffffff'
138-
? 'main-container-editor-tab-active-light'
139-
: 'main-container-editor-tab-active-dark'
140-
: ''
141-
}`}
142-
onClick={() => setActiveEditorTab("template")}
143-
title="TemplateMark"
144-
>
145-
TemplateMark
146-
</button>
147-
148-
<button
149-
className={`main-container-editor-tab ${
150-
backgroundColor === '#ffffff'
151-
? 'main-container-editor-tab-light'
152-
: 'main-container-editor-tab-dark'
153-
} ${
154-
activeEditorTab === "data"
155-
? backgroundColor === '#ffffff'
156-
? 'main-container-editor-tab-active-light'
157-
: 'main-container-editor-tab-active-dark'
158-
: ''
159-
}`}
160-
onClick={() => setActiveEditorTab("data")}
161-
title="JSON Data"
162-
>
163-
JSON Data
164-
</button>
165-
166-
<div className="flex-shrink-0 ml-auto">
167-
<SampleDropdown setLoading={setLoading} />
168-
</div>
169-
</div>
170-
<div className="main-container-editors-panel-group">
171-
{activeEditorTab === "model" && (
172-
<div className="main-container-editor-section tour-concerto-model">
173-
<div className={`main-container-editor-header ${backgroundColor==='#ffffff' ? 'main-container-editor-header-light'
174-
: 'main-container-editor-header-dark' }`}>
175-
<div className="main-container-editor-header-left">
176-
<button className="collapse-button" onClick={toggleModelCollapse} style={{ color: textColor,
177-
background: 'transparent' , border: 'none' , cursor: 'pointer' , display: 'flex' , alignItems: 'center' ,
178-
padding: '4px' , marginRight: '4px' }}>
179-
{isModelCollapsed ?
180-
<MdChevronRight size={20} /> :
181-
<MdExpandMore size={20} />}
182-
</button>
111+
<PanelGroup key={panelKey} direction="vertical" className="main-container-editors-panel-group">
112+
<Panel minSize={3} maxSize={isModelCollapsed ? collapsedSize : 100} defaultSize={isModelCollapsed ? collapsedSize : expandedSize}>
113+
<div className="main-container-editor-section tour-concerto-model">
114+
<div className={`main-container-editor-header ${backgroundColor === '#ffffff' ? 'main-container-editor-header-light' : 'main-container-editor-header-dark'}`}>
115+
{/* Left side */}
116+
<div className="main-container-editor-header-left">
117+
<button
118+
className="collapse-button"
119+
onClick={toggleModelCollapse}
120+
style={{
121+
color: textColor,
122+
background: 'transparent',
123+
border: 'none',
124+
cursor: 'pointer',
125+
display: 'flex',
126+
alignItems: 'center',
127+
padding: '4px',
128+
marginRight: '4px'
129+
}}
130+
title={isModelCollapsed ? "Expand" : "Collapse"}
131+
>
132+
{isModelCollapsed ? <MdChevronRight size={20} /> : <MdExpandMore size={20} />}
133+
</button>
134+
<span>Concerto Model</span>
135+
<SampleDropdown setLoading={setLoading} />
136+
</div>
183137
</div>
138+
{!isModelCollapsed && (
139+
<div className="main-container-editor-content" style={{ backgroundColor }}>
140+
<TemplateModel />
141+
</div>
142+
)}
184143
</div>
144+
</Panel>
145+
<PanelResizeHandle className="main-container-panel-resize-handle-vertical" />
185146

186-
{!isModelCollapsed && (
187-
<div className="main-container-editor-content" style={{ backgroundColor }}>
188-
<TemplateModel />
189-
</div>
190-
)}
191-
</div>
192-
)}
193-
194-
{activeEditorTab === "template" && (
195-
<MarkdownEditorProvider>
196-
<div className="main-container-editor-section tour-template-mark">
197-
<div className={`main-container-editor-header ${backgroundColor==='#ffffff' ? 'main-container-editor-header-light'
198-
: 'main-container-editor-header-dark' }`}>
199-
<TemplateMarkdownToolbar />
147+
<Panel minSize={20}>
148+
<MarkdownEditorProvider>
149+
<div className="main-container-editor-section tour-template-mark">
150+
<div className={`main-container-editor-header ${backgroundColor === '#ffffff' ? 'main-container-editor-header-light' : 'main-container-editor-header-dark'}`}>
151+
<span>TemplateMark</span>
152+
<TemplateMarkdownToolbar />
153+
</div>
154+
<div className="main-container-editor-content" style={{ backgroundColor }}>
155+
<TemplateMarkdown />
156+
</div>
200157
</div>
158+
</MarkdownEditorProvider>
159+
</Panel>
201160

202-
<div className="main-container-editor-content" style={{ backgroundColor }}>
203-
<TemplateMarkdown />
204-
</div>
205-
</div>
206-
</MarkdownEditorProvider>
207-
)}
161+
<PanelResizeHandle className="main-container-panel-resize-handle-vertical" />
208162

209-
{activeEditorTab === "data" && (
210-
<div className="main-container-editor-section tour-json-data">
211-
<div className={`main-container-editor-header ${backgroundColor==='#ffffff' ? 'main-container-editor-header-light'
212-
: 'main-container-editor-header-dark' }`}>
213-
<div className="main-container-editor-header-left">
214-
<button className="collapse-button" onClick={toggleDataCollapse} style={{ color: textColor,
215-
background: 'transparent' , border: 'none' , cursor: 'pointer' , display: 'flex' , alignItems: 'center' ,
216-
padding: '4px' , marginRight: '4px' }}>
217-
{isDataCollapsed ?
218-
<MdChevronRight size={20} /> :
219-
<MdExpandMore size={20} />}
163+
<Panel minSize={3} maxSize={isDataCollapsed ? collapsedSize : 100} defaultSize={isDataCollapsed ? collapsedSize : expandedSize}>
164+
<div className="main-container-editor-section tour-json-data">
165+
<div className={`main-container-editor-header ${backgroundColor === '#ffffff' ? 'main-container-editor-header-light' : 'main-container-editor-header-dark'}`}>
166+
<div className="main-container-editor-header-left">
167+
<button
168+
className="collapse-button"
169+
onClick={toggleDataCollapse}
170+
style={{
171+
color: textColor,
172+
background: 'transparent',
173+
border: 'none',
174+
cursor: 'pointer',
175+
display: 'flex',
176+
alignItems: 'center',
177+
padding: '4px',
178+
marginRight: '4px'
179+
}}
180+
title={isDataCollapsed ? "Expand" : "Collapse"}
181+
>
182+
{isDataCollapsed ? <MdChevronRight size={20} /> : <MdExpandMore size={20} />}
183+
</button>
184+
<span>JSON Data</span>
185+
</div>
186+
<button
187+
onClick={handleJsonFormat}
188+
className="px-1 pt-1 border-gray-300 bg-white hover:bg-gray-200 rounded shadow-md"
189+
disabled={!jsonEditorRef.current || isDataCollapsed}
190+
title="Format JSON"
191+
>
192+
<MdFormatAlignLeft size={16} />
220193
</button>
221194
</div>
222-
223-
<button onClick={handleJsonFormat} className={`px-1 pt-1 rounded ${ backgroundColor==='#ffffff'
224-
? 'bg-white border border-gray-300 hover:bg-gray-200'
225-
: 'bg-gray-600 border border-gray-500 hover:bg-gray-500 text-white' }`} disabled={!jsonEditorRef.current ||
226-
isDataCollapsed}>
227-
<MdFormatAlignLeft size={16} />
228-
</button>
229-
</div>
230-
231-
{!isDataCollapsed && (
232-
<div className="main-container-editor-content" style={{ backgroundColor }}>
233-
<AgreementData editorRef={jsonEditorRef} />
195+
{!isDataCollapsed && (
196+
<div className="main-container-editor-content" style={{ backgroundColor }}>
197+
<AgreementData editorRef={jsonEditorRef} />
198+
</div>
199+
)}
234200
</div>
235-
)}
236-
</div>
201+
</Panel>
202+
{isProblemPanelVisible && (
203+
<>
204+
<PanelResizeHandle className="main-container-panel-resize-handle-vertical" />
205+
<Panel defaultSize={25} minSize={15}>
206+
<ProblemPanel />
207+
</Panel>
208+
</>
237209
)}
238-
239-
{isProblemPanelVisible &&
240-
<ProblemPanel />}
241-
</div>
210+
</PanelGroup>
242211
</div>
243212
</Panel>
244213
<PanelResizeHandle className="main-container-panel-resize-handle-horizontal" />
245214
</>
246215
)}
247216
{isPreviewVisible && (
248217
<>
249-
<Panel defaultSize={35} minSize={20}>
218+
<Panel defaultSize={37.5} minSize={20}>
250219
<div className="main-container-preview-panel tour-preview-panel" style={{ backgroundColor: previewBackgroundColor }}>
251220
<div className={`main-container-preview-header ${backgroundColor === '#ffffff' ? 'main-container-preview-header-light' : 'main-container-preview-header-dark'}`} style={{ backgroundColor: previewHeaderColor }}>
252221
<span>Preview</span>

‎src/styles/pages/MainContainer.css‎

Lines changed: 1 addition & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,7 @@
1111
}
1212

1313
.main-container-editors-panel-group {
14-
height: 100%;
15-
display: flex;
16-
flex-direction: column;
14+
@apply h-full;
1715
}
1816

1917
.main-container-editor-section {
@@ -95,85 +93,3 @@
9593
.collapse-button:active {
9694
@apply opacity-50;
9795
}
98-
99-
.main-container-editor-tabs {
100-
@apply flex items-center px-2 pt-2 border-b border-gray-300 shadow-sm sticky top-0 z-10;
101-
overflow-x: auto;
102-
-webkit-overflow-scrolling: touch;
103-
scrollbar-width: none;
104-
flex-wrap: wrap;
105-
}
106-
107-
.main-container-editor-tabs-light {
108-
@apply bg-slate-100;
109-
}
110-
111-
.main-container-editor-tabs-dark {
112-
@apply bg-gray-700;
113-
}
114-
115-
.main-container-editor-tabs::-webkit-scrollbar {
116-
height: 6px;
117-
}
118-
119-
.main-container-editor-tabs::-webkit-scrollbar-track {
120-
background: transparent;
121-
}
122-
123-
.main-container-editor-tabs::-webkit-scrollbar-thumb {
124-
background: rgba(0, 0, 0, 0.12);
125-
}
126-
127-
.main-container-editor-tab {
128-
@apply px-3 py-1.5 text-sm border border-transparent rounded-t-md cursor-pointer transition-colors;
129-
flex: 1 1 auto;
130-
min-width: 4rem;
131-
max-width: 8rem;
132-
padding: 0.25rem 0.5rem;
133-
font-size: clamp(0.8rem, 1.2vw, 0.875rem);
134-
text-overflow: ellipsis;
135-
white-space: nowrap;
136-
overflow: hidden;
137-
display: inline-flex;
138-
align-items: center;
139-
justify-content: center;
140-
white-space: normal;
141-
word-break: break-word;
142-
text-align: center;
143-
}
144-
145-
.main-container-editor-tab-light {
146-
@apply text-gray-600 bg-slate-100 border-gray-200;
147-
}
148-
149-
.main-container-editor-tab-dark {
150-
@apply text-gray-300 bg-gray-700 border-gray-600;
151-
}
152-
153-
.main-container-editor-tab-light:hover {
154-
@apply bg-white text-gray-800;
155-
}
156-
157-
.main-container-editor-tab-dark:hover {
158-
@apply bg-gray-600 text-white;
159-
}
160-
161-
.main-container-editor-tab-active-light {
162-
@apply bg-white text-gray-900 border-gray-200 border-b-white font-medium;
163-
}
164-
165-
.main-container-editor-tab-active-dark {
166-
@apply bg-gray-800 text-white border-gray-600 border-b-gray-800 font-medium;
167-
}
168-
169-
.main-container-editor-tab-active-light,
170-
.main-container-editor-tab-active-dark {
171-
@apply relative;
172-
}
173-
174-
.main-container-editor-tab-active-light::after,
175-
.main-container-editor-tab-active-dark::after {
176-
content: '';
177-
@apply absolute left-0 bottom-0 w-full h-0.5;
178-
background-color: #1b2540;
179-
}

0 commit comments

Comments
 (0)