Skip to content

Commit 1330185

Browse files
franknoirotfranknoirot
committed
Restyle layout to not have panes overlay stream
1 parent 53f41bc commit 1330185

File tree

5 files changed

+101
-71
lines changed

5 files changed

+101
-71
lines changed

‎src/App.tsx

Lines changed: 46 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -265,53 +265,57 @@ export function App() {
265265
<CommandBarOpenButton />
266266
<ShareButton />
267267
</AppHeader>
268-
<Toolbar />
269268
</div>
270269
<ModalContainer />
271-
<ModelingSidebar />
272-
<EngineStream pool={pool} authToken={authToken} />
273-
{/* <CamToggle /> */}
274-
<section className="absolute bottom-2 right-2 flex flex-col items-end gap-3 pointer-events-none">
275-
<UnitsMenu />
276-
<Gizmo />
270+
<section className="flex flex-1">
271+
<ModelingSidebar />
272+
<div className="relative z-0 flex flex-col flex-1 items-center">
273+
<Toolbar />
274+
<EngineStream pool={pool} authToken={authToken} />
275+
<div className="absolute bottom-2 right-2 flex flex-col items-end gap-3 pointer-events-none">
276+
<UnitsMenu />
277+
<Gizmo />
278+
</div>
279+
</div>
277280
</section>
278-
</div>
279-
<StatusBar
280-
globalItems={[
281-
networkHealthStatus,
282-
...(isDesktop() ? [networkMachineStatus] : []),
283-
...defaultGlobalStatusBarItems({ location, filePath }),
284-
]}
285-
localItems={[
286-
...(getSettings().app.showDebugPanel.current
287-
? ([
288-
{
289-
id: 'modeling-state',
290-
element: 'text',
291-
label:
292-
modelingState.value instanceof Object
293-
? (xStateValueToString(modelingState.value) ?? '')
294-
: modelingState.value,
295-
toolTip: {
296-
children: 'The current state of the modeler',
281+
{/* <CamToggle /> */}
282+
<StatusBar
283+
globalItems={[
284+
networkHealthStatus,
285+
...(isDesktop() ? [networkMachineStatus] : []),
286+
...defaultGlobalStatusBarItems({ location, filePath }),
287+
]}
288+
localItems={[
289+
...(getSettings().app.showDebugPanel.current
290+
? ([
291+
{
292+
id: 'modeling-state',
293+
element: 'text',
294+
label:
295+
modelingState.value instanceof Object
296+
? (xStateValueToString(modelingState.value) ?? '')
297+
: modelingState.value,
298+
toolTip: {
299+
children: 'The current state of the modeler',
300+
},
297301
},
298-
},
299-
] satisfies StatusBarItemType[])
300-
: []),
301-
{
302-
id: 'selection',
303-
element: 'text',
304-
label:
305-
getSelectionTypeDisplayText(
306-
modelingState.context.selectionRanges
307-
) ?? 'No selection',
308-
toolTip: {
309-
children: 'Currently selected geometry',
302+
] satisfies StatusBarItemType[])
303+
: []),
304+
{
305+
id: 'selection',
306+
element: 'text',
307+
label:
308+
getSelectionTypeDisplayText(
309+
modelingState.context.selectionRanges
310+
) ?? 'No selection',
311+
toolTip: {
312+
children: 'Currently selected geometry',
313+
},
310314
},
311-
},
312-
...defaultLocalStatusBarItems,
313-
]}
314-
/>
315+
...defaultLocalStatusBarItems,
316+
]}
317+
/>
318+
</div>
315319
</div>
316320
)
317321
}

‎src/Toolbar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,7 @@ export function Toolbar({
203203
<menu
204204
data-current-mode={currentMode}
205205
data-onboarding-id="toolbar"
206-
className="z-[19] max-w-full whitespace-nowrap rounded-b px-2 py-1 bg-chalkboard-10 dark:bg-chalkboard-90 relative border border-chalkboard-30 dark:border-chalkboard-80 border-t-0 shadow-sm"
206+
className="z-[19] max-w-full whitespace-nowrap rounded-b px-2 py-1 mx-auto bg-chalkboard-10 dark:bg-chalkboard-90 relative border border-chalkboard-30 dark:border-chalkboard-80 border-t-0 shadow-sm"
207207
>
208208
<ul
209209
{...props}

‎src/components/ModelingSidebar/ModelingPane.module.css

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,27 @@
11
.panel {
2-
@apply relative z-0 rounded-r max-w-full flex-auto;
2+
@apply relative z-0 max-w-full flex-auto;
33
display: grid;
44
grid-template-rows: auto 1fr;
5-
@apply bg-chalkboard-10/50 focus-within:bg-chalkboard-10/90 backdrop-blur-sm border border-chalkboard-30;
5+
@apply bg-chalkboard-10 border-chalkboard-30;
66
scroll-margin-block-start: 41px;
77
}
88

9+
.panel:not(:first-child) {
10+
@apply border-t;
11+
}
12+
913
.header::before,
1014
.header::-webkit-details-marker {
1115
display: none;
1216
}
1317

1418
:global(.dark) .panel {
15-
@apply bg-chalkboard-100/50 focus-within:bg-chalkboard-100/90 backdrop-blur-[3px] border-chalkboard-80;
19+
@apply bg-chalkboard-100 border-chalkboard-80;
1620
}
1721

1822
.header {
19-
@apply z-10 relative rounded-tr;
20-
@apply flex h-[41px] items-center justify-between gap-2 px-2;
23+
@apply z-10 relative;
24+
@apply flex items-center justify-between gap-2 py-1 px-2;
2125
@apply text-xs select-none text-chalkboard-90;
2226
@apply bg-chalkboard-10 border-b border-chalkboard-30;
2327
}

‎src/components/ModelingSidebar/ModelingPane.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ export const ModelingPaneHeader = ({
3232
{icon && (
3333
<ActionIcon
3434
icon={icon}
35-
className="p-1"
3635
size="sm"
3736
iconClassName="!text-chalkboard-80 dark:!text-chalkboard-30"
3837
bgClassName="!bg-transparent"

‎src/components/ModelingSidebar/ModelingSidebar.tsx

Lines changed: 45 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import type { IconDefinition } from '@fortawesome/free-solid-svg-icons'
22
import { Resizable } from 're-resizable'
3-
import type { MouseEventHandler } from 'react'
3+
import type { HTMLProps, MouseEventHandler } from 'react'
44
import { useCallback, useContext, useEffect, useMemo } from 'react'
55
import { useHotkeys } from 'react-hotkeys-hook'
66

77
import { useAppState } from '@src/AppState'
88
import { ActionIcon } from '@src/components/ActionIcon'
9-
import type { CustomIconName } from '@src/components/CustomIcon'
9+
import { CustomIcon, type CustomIconName } from '@src/components/CustomIcon'
1010
import { MachineManagerContext } from '@src/components/MachineManagerProvider'
1111
import { ModelingPane } from '@src/components/ModelingSidebar/ModelingPane'
1212
import type {
@@ -218,33 +218,39 @@ export function ModelingSidebar() {
218218

219219
return (
220220
<Resizable
221-
className={`group flex-1 flex flex-col z-10 my-2 pr-1 ${pointerEventsCssClass}`}
221+
className={`group z-10 flex flex-col ${pointerEventsCssClass} ${context.store?.openPanes.length ? undefined : '!w-auto'}`}
222222
defaultSize={{
223-
width: '550px',
223+
width: context.store?.openPanes.length ? '550px' : undefined,
224224
height: 'auto',
225225
}}
226-
minWidth={200}
226+
minWidth={context.store?.openPanes.length ? 200 : undefined}
227227
maxWidth={window.innerWidth - 10}
228228
handleWrapperClass="sidebar-resize-handles"
229-
handleClasses={{
230-
right:
231-
(context.store?.openPanes.length === 0 ? 'hidden ' : 'block ') +
232-
'translate-x-1/2 hover:bg-chalkboard-10 hover:dark:bg-chalkboard-110 bg-transparent transition-colors duration-75 transition-ease-out delay-100 ',
233-
left: 'hidden',
234-
top: 'hidden',
235-
topLeft: 'hidden',
236-
topRight: 'hidden',
237-
bottom: 'hidden',
238-
bottomLeft: 'hidden',
239-
bottomRight: 'hidden',
229+
enable={{
230+
right: true,
231+
top: false,
232+
bottom: false,
233+
left: false,
234+
topRight: false,
235+
bottomRight: false,
236+
bottomLeft: false,
237+
topLeft: false,
238+
}}
239+
handleComponent={{
240+
right: (
241+
<ResizeHandle
242+
className={
243+
context.store?.openPanes.length === 0 ? 'hidden ' : 'block '
244+
}
245+
/>
246+
),
240247
}}
241248
>
242-
<div id="app-sidebar" className="flex flex-row h-full">
249+
<div id="app-sidebar" className="flex flex-row flex-1">
243250
<ul
244251
className={
245-
(context.store?.openPanes.length === 0 ? 'rounded-r ' : '') +
246-
'relative z-[2] pointer-events-auto p-0 col-start-1 col-span-1 h-fit w-fit flex flex-col ' +
247-
'bg-chalkboard-10 border border-solid border-chalkboard-30 dark:bg-chalkboard-90 dark:border-chalkboard-80 group-focus-within:border-primary dark:group-focus-within:border-chalkboard-50 shadow-sm '
252+
'relative pointer-events-auto p-0 col-start-1 col-span-1 flex flex-col ' +
253+
'bg-chalkboard-10 border-r border-chalkboard-30 dark:bg-chalkboard-90 dark:border-chalkboard-80 '
248254
}
249255
>
250256
<ul
@@ -294,7 +300,7 @@ export function ModelingSidebar() {
294300
<ul
295301
id="pane-section"
296302
className={
297-
'ml-[-1px] col-start-2 col-span-1 flex flex-col items-stretch gap-2 ' +
303+
'ml-[-1px] col-start-2 col-span-1 flex flex-col items-stretch border-x border-chalkboard-30 dark:border-chalkboard-80 ' +
298304
(context.store?.openPanes.length >= 1 ? `w-full` : `hidden`)
299305
}
300306
>
@@ -360,7 +366,7 @@ function ModelingPaneButton({
360366
data-onboarding-id={`${paneConfig.id}-pane-button`}
361367
>
362368
<button
363-
className="group pointer-events-auto flex items-center justify-center border-transparent dark:border-transparent disabled:!border-transparent p-0 m-0 rounded-sm !outline-0 focus-visible:border-primary"
369+
className="group pointer-events-auto flex items-center justify-center border-transparent dark:border-transparent disabled:!border-transparent p-0 m-0 rounded-sm !outline-0"
364370
onClick={onClick}
365371
name={paneConfig.sidebarName}
366372
data-testid={paneConfig.id + SIDEBAR_BUTTON_SUFFIX}
@@ -430,3 +436,20 @@ function ModelingPaneButton({
430436
</div>
431437
)
432438
}
439+
440+
function ResizeHandle(props: HTMLProps<HTMLDivElement>) {
441+
return (
442+
<div
443+
{...props}
444+
className={'group/grip absolute inset-0 ' + props.className}
445+
>
446+
<div
447+
className={
448+
'hidden group-hover/grip:block py-1 absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 rounded-sm w-fit group-hover/grip:bg-chalkboard-30 group-hover/grip:dark:bg-chalkboard-70 bg-transparent transition-colors border border-transparent group-hover/grip:border-chalkboard-40 dark:group-hover/grip:border-chalkboard-90 duration-75 transition-ease-out delay-100'
449+
}
450+
>
451+
<CustomIcon className="w-5 -mx-0.5 rotate-90" name="sixDots" />
452+
</div>
453+
</div>
454+
)
455+
}

0 commit comments

Comments
 (0)