Add layout model
This commit is contained in:
parent
68b63423cb
commit
1238bb71bd
@ -10,6 +10,22 @@ div.app-container {
|
||||
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;
|
||||
@ -85,10 +101,6 @@ div.dark.app-container.end-containe {
|
||||
div.app-tab-header-item:hover {
|
||||
background-color: $lt-bg-color-lvl4-dark;
|
||||
color: rgba($color: #FFFFFF, $alpha: .85);
|
||||
|
||||
div.border-view::after {
|
||||
background-color: $lt-bg-color-lvl4-dark;
|
||||
}
|
||||
}
|
||||
|
||||
div.app-tab-header-item.active {
|
||||
@ -103,7 +115,6 @@ div.light.app-container.end-containe {
|
||||
|
||||
div.app-tab-header-item.active,
|
||||
div.app-tab-header-item:hover {
|
||||
background-color: $lt-bg-color-lvl4-light;
|
||||
color: rgba($color: #000000, $alpha: .85);
|
||||
}
|
||||
|
||||
|
||||
@ -1,18 +1,10 @@
|
||||
import Theme, { BackgroundLevel, FontLevel } from "@Component/Theme/Theme";
|
||||
import { Theme, BackgroundLevel, FontLevel } from "@Component/Theme/Theme";
|
||||
import { ILayout, LayoutDirection } from "@Model/Layout";
|
||||
import { Component, ReactNode } from "react";
|
||||
import "./Container.scss";
|
||||
|
||||
enum ContaineLayout {
|
||||
X = 1,
|
||||
Y = 2
|
||||
}
|
||||
|
||||
interface IContainerProps {
|
||||
items?: [IContainerProps, IContainerProps];
|
||||
interface IContainerProps extends ILayout {
|
||||
showBar?: boolean;
|
||||
panles?: string[];
|
||||
layout?: ContaineLayout;
|
||||
scale?: number;
|
||||
isRoot?: boolean;
|
||||
}
|
||||
|
||||
@ -45,13 +37,13 @@ class Container extends Component<IContainerProps> {
|
||||
private renderContainer(
|
||||
props: IContainerProps,
|
||||
selfScale: number = 50,
|
||||
selfLayout: ContaineLayout = ContaineLayout.Y
|
||||
selfLayout: LayoutDirection = LayoutDirection.Y
|
||||
) {
|
||||
|
||||
const items: [IContainerProps, IContainerProps] | undefined = props.items;
|
||||
const showBar: boolean = props.showBar ?? true;
|
||||
const panles: string[] = props.panles ?? [];
|
||||
const layout: ContaineLayout = props.layout ?? ContaineLayout.Y;
|
||||
const layout: LayoutDirection = props.layout ?? LayoutDirection.Y;
|
||||
const scale: number = props.scale ?? 50;
|
||||
const isRoot: boolean = !!props.isRoot;
|
||||
|
||||
@ -60,13 +52,22 @@ class Container extends Component<IContainerProps> {
|
||||
backgroundLevel={BackgroundLevel.Level4}
|
||||
fontLevel={FontLevel.normal}
|
||||
style={{
|
||||
flexDirection: layout === ContaineLayout.Y ? "column" : undefined,
|
||||
width: isRoot ? "100%" : selfLayout === ContaineLayout.X ? `${selfScale}%` : undefined,
|
||||
height: isRoot ? "100%" : selfLayout === ContaineLayout.Y ? `${selfScale}%` : undefined
|
||||
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>
|
||||
}
|
||||
@ -76,4 +77,4 @@ class Container extends Component<IContainerProps> {
|
||||
}
|
||||
}
|
||||
|
||||
export { Container, ContaineLayout };
|
||||
export { Container };
|
||||
21
source/Model/Layout.ts
Normal file
21
source/Model/Layout.ts
Normal file
@ -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 };
|
||||
@ -6,7 +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, ContaineLayout } from "@Component/Container/Container";
|
||||
import { Container } from "@Component/Container/Container";
|
||||
import { LayoutDirection } from "@Model/Layout";
|
||||
import "./SimulatorWeb.scss";
|
||||
import { CommandBar } from "@Component/CommandBar/CommandBar";
|
||||
|
||||
@ -76,28 +77,28 @@ class SimulatorWeb extends Component {
|
||||
<Container items={[
|
||||
{
|
||||
items: [
|
||||
{panles: ["A", "Aa Bb", "aaa"]},
|
||||
{panles: ["Label A", "Label Aa Bb", "Label aaa"]},
|
||||
{
|
||||
items: [{panles: ["b", "Bb", "bbb"]}, {panles: ["c", "cc", "ccc"]}],
|
||||
items: [{panles: ["Label b", "Label bbb"]}, {panles: ["C"]}],
|
||||
scale: 80,
|
||||
layout: ContaineLayout.X
|
||||
layout: LayoutDirection.X
|
||||
}
|
||||
],
|
||||
scale: 60,
|
||||
layout: ContaineLayout.Y
|
||||
layout: LayoutDirection.Y
|
||||
},
|
||||
{
|
||||
items: [{
|
||||
panles: ["d"]
|
||||
panles: ["Label d"]
|
||||
}, {
|
||||
items: [{panles: ["e", "ee"]}, {panles: ["f", "ff", "fff"]}],
|
||||
layout: ContaineLayout.Y
|
||||
items: [{panles: ["Label e", "ee"]}, {panles: ["F"]}],
|
||||
layout: LayoutDirection.Y
|
||||
}],
|
||||
layout: ContaineLayout.Y
|
||||
layout: LayoutDirection.Y
|
||||
}
|
||||
]}
|
||||
scale={60}
|
||||
layout={ContaineLayout.X}
|
||||
layout={LayoutDirection.X}
|
||||
isRoot={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user