MrKBear/living-together
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add command bar

Browse Source
This commit is contained in:
MrKBear
2022-02-25 23:15:30 +08:00
parent ab9a7e6003
commit 57b13b551f
6 changed files with 99 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
source/Component/CommandBar/CommandBar.scss
+37 -1
View File
@@ -1,3 +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
+50 -4
View File
@@ -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>
}
}