Merge pull request 'Add command bar component' (#7) from dev-mrkbear into master

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

README.md

@@ -11,7 +11,9 @@ This is my graduation project.
 
 **Automatic compilation preview address:**
 
-Lab: https://living-together-lab.mrkbear.com
+Simulator: [living-together.mrkbear.com](https://living-together.mrkbear.com)
+
+Laboratory: [living-together-lab.mrkbear.com](https://living-together-lab.mrkbear.com)
 
 ## 1. The meaning of the topic
 

source/Component/CommandBar/CommandBar.scss

@@ -0,0 +1,39 @@
+div.command-bar {
+    height: 100%;
+    user-select: none;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    
+    button.ms-Button.command-button {
+        width: 100%;
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        color:  inherit;
+        
+        span.ms-Button-flexContainer i.ms-Icon {
+            font-size: 25px;
+        }
+    }
+
+    button.ms-Button.command-button.on-end {
+        align-self: flex-end;
+    }
+}
+
+button.ms-Button.command-button.active {
+    color: aqua !important;
+}
+
+div.command-bar.dark button.ms-Button.command-button.active,
+div.command-bar.dark button.ms-Button.command-button:hover {
+    background-color: rgba($color: #FFFFFF, $alpha: .2);
+    color: rgba($color: #FFFFFF, $alpha: 1);
+}
+
+div.command-bar.light button.ms-Button.command-button.active,
+div.command-bar.light button.ms-Button.command-button:hover {
+    background-color: rgba($color: #000000, $alpha: .08);
+    color: rgba($color: #000000, $alpha: 1);
+}

source/Component/CommandBar/CommandBar.tsx

@@ -0,0 +1,66 @@
+import { BackgroundLevel, Theme } from "@Component/Theme/Theme";
+import { IconButton } from "@fluentui/react";
+import { Component, ReactNode } from "react";
+import "./CommandBar.scss";
+
+interface ICommandBarProps {
+    width: number;
+}
+
+class CommandBar extends Component<ICommandBarProps> {
+
+    render(): ReactNode {
+        return <Theme
+            className="command-bar"
+            backgroundLevel={BackgroundLevel.Level3}
+            style={{ width: this.props.width }}
+        >
+            <div>
+                <IconButton 
+                    style={{ height: this.props.width }}
+                    iconProps={{iconName: "Save"}}
+                    className="command-button"
+                />
+                <IconButton 
+                    style={{ height: this.props.width }}
+                    iconProps={{iconName: "HandsFree"}}
+                    className="command-button"
+                />
+                <IconButton 
+                    style={{ height: this.props.width }}
+                    iconProps={{iconName: "TouchPointer"}}
+                    className="command-button"
+                />
+                <IconButton 
+                    style={{ height: this.props.width }}
+                    iconProps={{iconName: "Camera"}}
+                    className="command-button"
+                />
+                <IconButton 
+                    style={{ height: this.props.width }}
+                    iconProps={{iconName: "Play"}}
+                    className="command-button"
+                />
+                <IconButton 
+                    style={{ height: this.props.width }}
+                    iconProps={{iconName: "PlayResume"}}
+                    className="command-button"
+                />
+                <IconButton 
+                    style={{ height: this.props.width }}
+                    iconProps={{iconName: "PlayReverseResume"}}
+                    className="command-button"
+                />
+            </div>
+            <div>
+                <IconButton 
+                    style={{ height: this.props.width }}
+                    iconProps={{iconName: "Settings"}}
+                    className="command-button on-end"
+                />
+            </div>
+        </Theme>
+    }
+}
+
+export { CommandBar };

source/Component/HeaderBar/HeaderBar.scss

@@ -1,5 +1,5 @@
 div.header-bar {
-    padding: 0 20px;
+    padding: 0 3px;
     box-sizing: border-box;
     display: flex;
     align-items: center;
@@ -7,13 +7,13 @@ div.header-bar {
     user-select: none;
 
     div.title > i, div.fps-view > i {
-        font-size: larger;
+        font-size: 25px;
-        vertical-align: text-bottom;
+        vertical-align: middle;
-        padding-right: 5px;
+        padding-right: 8px;
     }
-    
+
     div.ms-TooltipHost {
-        padding: 0 5px;
+        padding: 0 8px;
         overflow: hidden;
         flex-shrink: 1;
         

source/Component/HeaderBar/HeaderBar.tsx

@@ -60,6 +60,7 @@ class HeaderBar extends Component<
             setting.on("language", this.changeListener);
         }
         if (status) {
+            status.archive.on("save", this.changeListener);
             status.model.on("loop", this.physicsFpsCalc);
             status.renderer.on("loop", this.renderFpsCalc);
         }
@@ -71,6 +72,7 @@ class HeaderBar extends Component<
             setting.off("language", this.changeListener);
         }
         if (status) {
+            status.archive.off("save", this.changeListener);
             status.model.off("loop", this.physicsFpsCalc);
             status.renderer.off("loop", this.renderFpsCalc);
         }

source/Component/Theme/Theme.scss

@@ -6,7 +6,7 @@ $lt-font-size-lvl2: $ms-font-size-18;
 $lt-font-size-lvl1: $ms-font-size-24;
 
 $lt-font-weight-normal: $ms-font-weight-regular;
-$lt-font-weight-lvl3: $ms-font-weight-semibold;
+$lt-font-weight-lvl3: $ms-font-weight-regular;
 $lt-font-weight-lvl2: $ms-font-weight-semibold;
 $lt-font-weight-lvl1: $ms-font-weight-bold;
 

source/Localization/EN-US.ts

@@ -8,6 +8,6 @@ const EN_US = {
     "Header.Bar.File.Save.Status.Saved": "Saved",
     "Header.Bar.File.Save.Status.Unsaved": "UnSaved",
     "Header.Bar.Fps": "FPS: {renderFps} | {physicsFps}",
-    "Header.Bar.Fps.Info": "The rendering frame rate ({renderFps} / fps) is on the left, and the simulation frame rate ({physicsFps} / fps) is on the right.",
+    "Header.Bar.Fps.Info": "The rendering frame rate ({renderFps} fps) is on the left, and the simulation frame rate ({physicsFps} fps) is on the right.",
 }
 export default EN_US;

source/Localization/ZH-CN.ts

@@ -8,6 +8,6 @@ const ZH_CN = {
     "Header.Bar.File.Save.Status.Saved": "已保存",
     "Header.Bar.File.Save.Status.Unsaved": "未保存",
     "Header.Bar.Fps": "帧率: {renderFps} | {physicsFps}",
-    "Header.Bar.Fps.Info": "左侧为渲染帧率 ({renderFps} / fps), 右侧为模拟帧率 ({physicsFps} / fps)。",
+    "Header.Bar.Fps.Info": "左侧为渲染帧率 ({renderFps} fps), 右侧为模拟帧率 ({physicsFps} fps)。",
 }
 export default ZH_CN;

source/Model/Archive.ts

@@ -8,7 +8,7 @@ interface IArchiveEvent {
 class Archive<
     M extends any = any,
     E extends Record<EventType, any> = {}
-> extends Emitter<E> {
+> extends Emitter<E & IArchiveEvent> {
 
     /**
      * 是否为新文件

source/Page/SimulatorWeb/SimulatorWeb.scss

@@ -1,6 +1,11 @@
 div.app-root {
     width: 100%;
     height: 100%;
-    position: absolute;
+    position: fixed;
     overflow: hidden;
+
+    div.app-root-space {
+        height: 100%;
+        display: flex;
+    }
 }

source/Page/SimulatorWeb/SimulatorWeb.tsx

@@ -1,15 +1,15 @@
 import { Component, ReactNode } from "react";
 import { SettingProvider, Setting } from "@Context/Setting";
 import { HeaderBar } from "@Component/HeaderBar/HeaderBar";
-import { Theme, FontLevel, BackgroundLevel } from "@Component/Theme/Theme";
+import { Theme, BackgroundLevel, FontLevel } from "@Component/Theme/Theme";
-import { Localization } from "@Component/Localization/Localization";
 import { Entry } from "../Entry/Entry";
 import { StatusProvider, Status } from "@Context/Status";
 import { ClassicRenderer } from "@GLRender/ClassicRenderer";
 import { initializeIcons } from '@fluentui/font-icons-mdl2';
 import "./SimulatorWeb.scss";
+import { CommandBar } from "@Component/CommandBar/CommandBar";
 
-initializeIcons();
+initializeIcons("http://cdn.mrkbear.com/fabric-cdn-prod_20210407.001/");
 
 class SimulatorWeb extends Component {
     
@@ -65,8 +65,15 @@ class SimulatorWeb extends Component {
         return <Theme 
             className="app-root"
             backgroundLevel={BackgroundLevel.Level5}
+            fontLevel={FontLevel.Level3}
         >
             <HeaderBar height={45}/>
+            <div className="app-root-space" style={{
+                height: `calc( 100% - ${45}px)`
+            }}>
+                <CommandBar width={45}/>
+                <div></div>
+            </div>
         </Theme>
     }
 }