Add style container bar
This commit is contained in:
parent
7cd501c780
commit
68b63423cb
@ -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 {
|
||||
|
||||
@ -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>
|
||||
|
||||
115
source/Component/Container/Container.scss
Normal file
115
source/Component/Container/Container.scss
Normal file
@ -0,0 +1,115 @@
|
||||
@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.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.border-view::after {
|
||||
background-color: $lt-bg-color-lvl4-dark;
|
||||
}
|
||||
}
|
||||
|
||||
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 {
|
||||
background-color: $lt-bg-color-lvl4-light;
|
||||
color: rgba($color: #000000, $alpha: .85);
|
||||
}
|
||||
|
||||
div.app-tab-header-item.active {
|
||||
div.border-view::after {
|
||||
background-color: $lt-bg-color-lvl4-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
79
source/Component/Container/Container.tsx
Normal file
79
source/Component/Container/Container.tsx
Normal file
@ -0,0 +1,79 @@
|
||||
import Theme, { BackgroundLevel, FontLevel } from "@Component/Theme/Theme";
|
||||
import { Component, ReactNode } from "react";
|
||||
import "./Container.scss";
|
||||
|
||||
enum ContaineLayout {
|
||||
X = 1,
|
||||
Y = 2
|
||||
}
|
||||
|
||||
interface IContainerProps {
|
||||
items?: [IContainerProps, IContainerProps];
|
||||
showBar?: boolean;
|
||||
panles?: string[];
|
||||
layout?: ContaineLayout;
|
||||
scale?: number;
|
||||
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: ContaineLayout = ContaineLayout.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 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 === ContaineLayout.Y ? "column" : undefined,
|
||||
width: isRoot ? "100%" : selfLayout === ContaineLayout.X ? `${selfScale}%` : undefined,
|
||||
height: isRoot ? "100%" : selfLayout === ContaineLayout.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] ? this.renderContainer(items[1], 100 - scale, layout) : null}
|
||||
</Theme>
|
||||
}
|
||||
|
||||
public render(): ReactNode {
|
||||
return this.renderContainer(this.props);
|
||||
}
|
||||
}
|
||||
|
||||
export { Container, ContaineLayout };
|
||||
@ -6,6 +6,7 @@ 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 "./SimulatorWeb.scss";
|
||||
import { CommandBar } from "@Component/CommandBar/CommandBar";
|
||||
|
||||
@ -72,7 +73,33 @@ class SimulatorWeb extends Component {
|
||||
height: `calc( 100% - ${45}px)`
|
||||
}}>
|
||||
<CommandBar width={45}/>
|
||||
<div></div>
|
||||
<Container items={[
|
||||
{
|
||||
items: [
|
||||
{panles: ["A", "Aa Bb", "aaa"]},
|
||||
{
|
||||
items: [{panles: ["b", "Bb", "bbb"]}, {panles: ["c", "cc", "ccc"]}],
|
||||
scale: 80,
|
||||
layout: ContaineLayout.X
|
||||
}
|
||||
],
|
||||
scale: 60,
|
||||
layout: ContaineLayout.Y
|
||||
},
|
||||
{
|
||||
items: [{
|
||||
panles: ["d"]
|
||||
}, {
|
||||
items: [{panles: ["e", "ee"]}, {panles: ["f", "ff", "fff"]}],
|
||||
layout: ContaineLayout.Y
|
||||
}],
|
||||
layout: ContaineLayout.Y
|
||||
}
|
||||
]}
|
||||
scale={60}
|
||||
layout={ContaineLayout.X}
|
||||
isRoot={true}
|
||||
/>
|
||||
</div>
|
||||
</Theme>
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user