Elgato_dark/idraw
1
0
Fork 0
mirror of https://github.com/idrawjs/idraw synced 2026-05-24 10:08:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: improve idraw design layout

Browse source
This commit is contained in:
chenshenhai 2023-06-03 22:00:21 +08:00
parent 58d9953eb1
commit 6a56b29f6f
2 changed files with 6 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
packages/design/src/modules/dashboard/index.tsx
View file

@ -6,12 +6,12 @@ import { Header } from '../header';
import { Sketch } from '../sketch';
import type { CSSProperties } from 'react';
import { createPrefixName } from '../../css';
import { HEADER_HEIGHT } from './layout';
import SplitPane from '../split-pane';
const modName = 'mod-dashboard';
const leftSiderDefaultWidth = 240;
const rightSiderDefaultWidth = 200;
const headerHeight = 36;
const prefixName = createPrefixName(modName);
@ -48,10 +48,10 @@ export const Dashboard = (props: DashboardProps) => {
return (
<div className={classnames(prefixName(), className)} style={{ ...style, ...{ width, height, padding: 0 } }}>
<div className={prefixName('header')} style={{ height: HEADER_HEIGHT }}>
<div className={prefixName('header')} style={{ height: headerHeight }}>
<Header />
</div>
<div className={prefixName('content')} style={{ top: HEADER_HEIGHT }}>
<div className={prefixName('content')} style={{ top: headerHeight }}>
<SplitPane
split="vertical"
defaultSize={centerWidth + rightWidth}
@ -67,12 +67,10 @@ export const Dashboard = (props: DashboardProps) => {
width: centerWidth + rightWidth
}}
>
<div>
<PanelLayer className={prefixName('left')} />
</div>
<div>{openLeftSider && <PanelLayer className={prefixName('left')} />}</div>
<div style={{ width: centerWidth + rightWidth, display: 'flex', flexDirection: 'row' }}>
<Sketch className={prefixName('center')} width={centerWidth} height={height - HEADER_HEIGHT} />
<div className={prefixName('right')} style={{ width: rightWidth, height: height - HEADER_HEIGHT }}>
<Sketch className={prefixName('center')} width={centerWidth} height={height - headerHeight} />
<div className={prefixName('right')} style={{ width: rightWidth, height: height - headerHeight }}>
Right
</div>
</div>

1
packages/design/src/modules/dashboard/layout.ts
View file

@ -1 +0,0 @@
export const HEADER_HEIGHT = 36;