Merge pull request 'Add layout model & style container bar' (#9) from dev-mrkbear into master

Reviewed-on: http://git.mrkbear.com/MrKBear/living-together/pulls/9

source/Component/CommandBar/CommandBar.scss

@@ -10,6 +10,7 @@ div.command-bar {
         text-align: center;
         display: flex;
         justify-content: center;
+        transition: all 100ms ease-in-out;
         color:  inherit;
         
         span.ms-Button-flexContainer i.ms-Icon {

source/Component/CommandBar/CommandBar.tsx

@@ -14,7 +14,7 @@ class CommandBar extends Component<ICommandBarProps> {
     render(): ReactNode {
         return <Theme
             className="command-bar"
-            backgroundLevel={BackgroundLevel.Level3}
+            backgroundLevel={BackgroundLevel.Level2}
             style={{ width: this.props.width }}
         >
             <div>

source/Component/Container/Container.scss

@@ -0,0 +1,126 @@
+@import "../Theme/Theme.scss";
+
+$container-header-tab-bar-height: 32px;
+
+div.app-container {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	overflow: hidden;
+	justify-content: center;
+	box-sizing: border-box;
+
+	div.drag-bar {
+		width: 0;
+		height: 0;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		div {
+			position: relative;
+			z-index: 10;
+			width: 100%;
+			height: 100%;
+			border: 4.5px solid rgba($color: #000000, $alpha: 0);
+		}
+	}
+
+	div.app-tab-header {
+		height: $container-header-tab-bar-height;
+		flex-shrink: 0;
+		display: flex;
+		user-select: none;
+		
+		div.app-tab-header-item {
+			height: 100%;
+			box-sizing: border-box;
+			display: flex;
+			border: .8px solid rgba($color: #000000, $alpha: 0);
+			justify-content: space-between;
+			align-items: stretch;
+			flex-direction: column;
+			cursor: pointer;
+
+			div.border-view {
+				position: relative;
+				display: flex;
+				justify-content: center;
+				flex-direction: row;
+				max-height: 0;
+				height: 0;
+			}
+
+			div.border-view::after {
+				content: "";
+				width: 100%;
+				box-sizing: border-box;
+				height: 32.8px;
+				border: .8px solid rgba($color: #000000, $alpha: 0);
+				transition: all 300ms ease-in-out;
+			}
+
+			div.title-view {
+				padding: 0 10px;
+				display: inline-block;
+				vertical-align: middle;
+				position: relative;
+				transition: all 300ms ease-in-out;
+				z-index: 1;
+			}
+		}
+
+		div.app-tab-header-item.active {
+			border: .8px solid blue;
+		}
+
+		div.app-tab-header-item::after {
+			content: "";
+			width: 0;
+			height: 0;
+			display: block;
+		}
+	}
+
+	div.app-panel {
+		width: 100%;
+		height: 100%;
+		box-sizing: border-box;
+		border: .8px solid rgba($color: #000000, $alpha: 0);
+	}
+
+	div.app-panel.active {
+		border: .8px solid blue !important;
+	}
+}
+
+div.dark.app-container.end-containe {
+	border: .8px solid $lt-bg-color-lvl3-dark;
+
+	div.app-tab-header-item.active,
+	div.app-tab-header-item:hover {
+		background-color: $lt-bg-color-lvl4-dark;
+		color: rgba($color: #FFFFFF, $alpha: .85);
+	}
+	
+	div.app-tab-header-item.active {
+		div.border-view::after {
+			background-color: $lt-bg-color-lvl4-dark;
+		}
+	}
+}
+
+div.light.app-container.end-containe {
+	border: .8px solid $lt-bg-color-lvl3-light;
+
+	div.app-tab-header-item.active,
+	div.app-tab-header-item:hover {
+		color: rgba($color: #000000, $alpha: .85);
+	}
+
+	div.app-tab-header-item.active {
+		div.border-view::after {
+			background-color: $lt-bg-color-lvl4-light;
+		}
+	}
+}

source/Component/Container/Container.tsx

@@ -0,0 +1,80 @@
+import { Theme, BackgroundLevel, FontLevel } from "@Component/Theme/Theme";
+import { ILayout, LayoutDirection } from "@Model/Layout";
+import { Component, ReactNode } from "react";
+import "./Container.scss";
+
+interface IContainerProps extends ILayout {
+	showBar?: boolean;
+	isRoot?: boolean;
+}
+
+function getPanelById(id: string) {
+	return <Theme className="app-panel">{id}</Theme>
+}
+
+class Container extends Component<IContainerProps> {
+
+	private renderPanel(panles: string[], showBar: boolean) {
+		return <>
+			{showBar ? 
+				<Theme
+					className="app-tab-header"
+					backgroundLevel={BackgroundLevel.Level3}
+					fontLevel={FontLevel.Level3}
+				>{
+					panles.map((panelId: string) => {
+						return <div key={panelId} className="app-tab-header-item">
+							<div className="border-view"></div>
+							<div className="title-view" >{panelId}</div>
+						</div>
+					})
+				}</Theme> : null
+			}
+			{getPanelById(panles[0])}
+		</>
+	}
+
+	private renderContainer(
+		props: IContainerProps, 
+		selfScale: number = 50, 
+		selfLayout: LayoutDirection = LayoutDirection.Y
+	) {
+
+		const items: [IContainerProps, IContainerProps] | undefined = props.items;
+		const showBar: boolean = props.showBar ?? true;
+		const panles: string[] = props.panles ?? [];
+		const layout: LayoutDirection = props.layout ?? LayoutDirection.Y;
+		const scale: number = props.scale ?? 50;
+		const isRoot: boolean = !!props.isRoot;
+
+		return <Theme
+			className={"app-container" + (panles.length > 0 && !items ? " end-containe" : "")}
+			backgroundLevel={BackgroundLevel.Level4}
+			fontLevel={FontLevel.normal}
+			style={{
+				flexDirection: layout === LayoutDirection.Y ? "column" : undefined,
+				width: isRoot ? "100%" : selfLayout === LayoutDirection.X ? `${selfScale}%` : undefined,
+				height: isRoot ? "100%" : selfLayout === LayoutDirection.Y ? `${selfScale}%` : undefined
+			}}
+		>
+			{panles.length > 0 && !items ? this.renderPanel(panles, showBar) : null}
+			{items && items[0] ? this.renderContainer(items[0], scale, layout) : null}
+			{items && items[1] ? <div className="drag-bar" style={{
+				width: layout === LayoutDirection.Y ? "100%" : 0,
+				height: layout === LayoutDirection.X ? "100%" : 0
+			}}>
+				<div style={{
+					cursor: layout === LayoutDirection.Y ? "n-resize" : "e-resize"
+				}}>
+				</div>
+			</div> : null}
+			{items && items[1] ? this.renderContainer(items[1], 100 - scale, layout) : null}
+		</Theme>
+	}
+
+	public render(): ReactNode {
+		return this.renderContainer(this.props);
+	}
+}
+
+export { Container };

source/Model/Layout.ts

@@ -0,0 +1,21 @@
+import { Emitter } from "./Emitter";
+
+enum LayoutDirection {
+	X = 1,
+	Y = 2
+}
+
+class ILayout {
+	items?: [ILayout, ILayout];
+	panles?: string[];
+	layout?: LayoutDirection;
+	scale?: number;
+}
+
+class Layout extends Emitter<{}> {
+
+	private data: ILayout = {};
+
+};
+
+export { Layout, ILayout, LayoutDirection };

source/Page/SimulatorWeb/SimulatorWeb.tsx

@@ -6,6 +6,8 @@ import { Entry } from "../Entry/Entry";
 import { StatusProvider, Status } from "@Context/Status";
 import { ClassicRenderer } from "@GLRender/ClassicRenderer";
 import { initializeIcons } from '@fluentui/font-icons-mdl2';
+import { Container } from "@Component/Container/Container";
+import { LayoutDirection } from "@Model/Layout";
 import "./SimulatorWeb.scss";
 import { CommandBar } from "@Component/CommandBar/CommandBar";
 
@@ -72,7 +74,33 @@ class SimulatorWeb extends Component {
                 height: `calc( 100% - ${45}px)`
             }}>
                 <CommandBar width={45}/>
-                <div></div>
+                <Container items={[
+                        {
+                            items: [
+                                {panles: ["Label A", "Label Aa Bb", "Label aaa"]},
+                                {
+                                    items: [{panles: ["Label b", "Label bbb"]}, {panles: ["C"]}],
+                                    scale: 80,
+                                    layout: LayoutDirection.X
+                                }
+                            ],
+                            scale: 60,
+                            layout: LayoutDirection.Y
+                        },
+                        {
+                            items: [{
+                                panles: ["Label d"]
+                            }, {
+                                items: [{panles: ["Label e", "ee"]}, {panles: ["F"]}],
+                                layout: LayoutDirection.Y
+                            }],
+                            layout: LayoutDirection.Y
+                        }
+                    ]}
+                    scale={60}
+                    layout={LayoutDirection.X}
+                    isRoot={true}
+                />
             </div>
         </Theme>
     }