From 57b13b551fcca4aedde258c7bf596eb2307cb6c7 Mon Sep 17 00:00:00 2001
From: MrKBear <mrkbear@qq.com>
Date: Fri, 25 Feb 2022 23:15:30 +0800
Subject: [PATCH] Add command bar

---
 source/Component/CommandBar/CommandBar.scss | 38 ++++++++++++++-
 source/Component/CommandBar/CommandBar.tsx  | 54 +++++++++++++++++++--
 source/Component/HeaderBar/HeaderBar.scss   | 10 ++--
 source/Component/Theme/Theme.scss           |  2 +-
 source/Page/SimulatorWeb/SimulatorWeb.scss  |  2 +-
 source/Page/SimulatorWeb/SimulatorWeb.tsx   |  7 ++-
 6 files changed, 99 insertions(+), 14 deletions(-)

diff --git a/source/Component/CommandBar/CommandBar.scss b/source/Component/CommandBar/CommandBar.scss
index 2f15c4d..dbd174a 100644
--- a/source/Component/CommandBar/CommandBar.scss
+++ b/source/Component/CommandBar/CommandBar.scss
@@ -1,3 +1,39 @@
 div.command-bar {
     height: 100%;
-}
\ No newline at end of file
+    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);
+}
diff --git a/source/Component/CommandBar/CommandBar.tsx b/source/Component/CommandBar/CommandBar.tsx
index 8ec5dac..64c4dbe 100644
--- a/source/Component/CommandBar/CommandBar.tsx
+++ b/source/Component/CommandBar/CommandBar.tsx
@@ -1,19 +1,65 @@
 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 
+        return <Theme
             className="command-bar"
-            backgroundLevel={BackgroundLevel.Level2}
+            backgroundLevel={BackgroundLevel.Level3}
             style={{ width: this.props.width }}
         >
-        </Theme>    
+            <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>
     }
 }
 
diff --git a/source/Component/HeaderBar/HeaderBar.scss b/source/Component/HeaderBar/HeaderBar.scss
index 38ec8cf..0150667 100644
--- a/source/Component/HeaderBar/HeaderBar.scss
+++ b/source/Component/HeaderBar/HeaderBar.scss
@@ -1,5 +1,5 @@
 div.header-bar {
-    padding: 0 10px;
+    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;
-        vertical-align: text-bottom;
-        padding-right: 5px;
+        font-size: 25px;
+        vertical-align: middle;
+        padding-right: 8px;
     }
 
     div.ms-TooltipHost {
-        padding: 0 5px;
+        padding: 0 8px;
         overflow: hidden;
         flex-shrink: 1;
         
diff --git a/source/Component/Theme/Theme.scss b/source/Component/Theme/Theme.scss
index a4b95b8..ce09e98 100644
--- a/source/Component/Theme/Theme.scss
+++ b/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;
 
diff --git a/source/Page/SimulatorWeb/SimulatorWeb.scss b/source/Page/SimulatorWeb/SimulatorWeb.scss
index 512d170..f3035ac 100644
--- a/source/Page/SimulatorWeb/SimulatorWeb.scss
+++ b/source/Page/SimulatorWeb/SimulatorWeb.scss
@@ -1,7 +1,7 @@
 div.app-root {
     width: 100%;
     height: 100%;
-    position: absolute;
+    position: fixed;
     overflow: hidden;
 
     div.app-root-space {
diff --git a/source/Page/SimulatorWeb/SimulatorWeb.tsx b/source/Page/SimulatorWeb/SimulatorWeb.tsx
index 286e430..4d54aaf 100644
--- a/source/Page/SimulatorWeb/SimulatorWeb.tsx
+++ b/source/Page/SimulatorWeb/SimulatorWeb.tsx
@@ -9,7 +9,7 @@ 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 {
     
@@ -68,8 +68,11 @@ class SimulatorWeb extends Component {
             fontLevel={FontLevel.Level3}
         >
             <HeaderBar height={45}/>
-            <div className="app-root-space">
+            <div className="app-root-space" style={{
+                height: `calc( 100% - ${45}px)`
+            }}>
                 <CommandBar width={45}/>
+                <div></div>
             </div>
         </Theme>
     }