feat: init workbench

Author: wewoor

src/workbench/index.tsx

@@ -1,12 +1,53 @@
 import * as React from 'react';
+import SplitPane from 'react-split-pane';
+
+import { prefixClaName } from '@/common/className';
+import { APP_PREFIX } from '@/common/const';
 
 import Sidebar from './sidebar';
+import MenuBar from './menuBar';
+import ActivityBar from './activityBar';
+import StatusBar from './statusBar';
+import Editor from './editor';
+import Panel from './panel';
+
+import './workbench.scss';
+
+const MainBench: React.FunctionComponent = function(props: any) {
+    return (
+        <div className={prefixClaName('mainBench')}>{props.children}</div>
+    );
+};
 
-export const Workbench: React.SFC = function() {
+export const Workbench: React.FunctionComponent = function() {
     return (
-        <div>
-            <Sidebar />
-            Workbench
+        <div className={APP_PREFIX + ' center'}>
+            <div className={prefixClaName('workbench')}>
+                <MenuBar />
+                <ActivityBar />
+                <MainBench>
+                    <SplitPane
+                        split={'vertical'}
+                        minSize={246}
+                        maxSize={-246}
+                        primary="first"
+                        allowResize={true}
+                    >
+                        <Sidebar />
+                        <SplitPane
+                            primary="first"
+                            split="horizontal"
+                            defaultSize={'70%'}
+                            maxSize={-1}
+                            allowResize={true}
+                        >
+                            <Editor />
+                            <Panel/>
+                        </SplitPane>
+                    </SplitPane>
+                </MainBench>
+            </div>
+            <StatusBar />
         </div>
     );
 };

src/workbench/style.scss src/workbench/layout.tsx

@@ -0,0 +1,77 @@
+@import '@/style/const.scss';
+@import '@/style/main.scss';
+
+.#{$prefix}-workbench {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    padding-bottom: 22px;
+    // TODO temp style, just for development
+    background-color: #252526;
+    color: #ccc;
+}
+
+.#{$prefix}-mainBench {
+    width: auto;
+    height: auto;
+    top: 0;
+    left: 48px;
+    right: 0;
+    position: absolute;
+    bottom: 22px;
+
+    .Resizer {
+        background: #000;
+        opacity: 0.2;
+        z-index: 1;
+        -moz-box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        -moz-background-clip: padding;
+        -webkit-background-clip: padding;
+        background-clip: padding-box;
+    }
+
+    .Resizer:hover {
+        -webkit-transition: all 2s ease;
+        transition: all 2s ease;
+    }
+
+    .Resizer.horizontal {
+        height: 11px;
+        margin: -5px 0;
+        border-top: 5px solid rgba(255, 255, 255, 0);
+        border-bottom: 5px solid rgba(255, 255, 255, 0);
+        cursor: row-resize;
+        width: 100%;
+    }
+
+    .Resizer.horizontal:hover {
+        border-top: 5px solid rgba(0, 0, 0, 0.5);
+        border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+    }
+
+    .Resizer.vertical {
+        width: 11px;
+        margin: 0 -5px;
+        border-left: 5px solid rgba(255, 255, 255, 0);
+        border-right: 5px solid rgba(255, 255, 255, 0);
+        cursor: col-resize;
+    }
+
+    .Resizer.vertical:hover {
+        border-left: 5px solid rgba(0, 0, 0, 0.5);
+        border-right: 5px solid rgba(0, 0, 0, 0.5);
+    }
+
+    .Resizer.disabled {
+        cursor: not-allowed;
+    }
+
+    .Resizer.disabled:hover {
+        border-color: transparent;
+    }
+}