Rebuild commond bar component
This commit is contained in:
parent
ec3aaa5e3a
commit
23ebbeb120
@ -1,3 +1,5 @@
|
||||
@import "../Theme/Theme.scss";
|
||||
|
||||
div.command-bar {
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
@ -5,32 +7,53 @@ div.command-bar {
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
button.ms-Button.command-button {
|
||||
div.command-button {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 100ms ease-in-out;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
|
||||
span.ms-Button-flexContainer i.ms-Icon {
|
||||
font-size: 25px;
|
||||
i {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
div.command-button-loading {
|
||||
|
||||
div.ms-Spinner-circle {
|
||||
border-width: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.ms-Button.command-button.on-end {
|
||||
div.command-button.on-end {
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
div.command-bar.dark button.ms-Button.command-button.active,
|
||||
div.command-bar.dark button.ms-Button.command-button:hover {
|
||||
div.command-bar.dark div.command-button div.command-button-loading div.ms-Spinner-circle {
|
||||
border-top-color: rgba($color: #FFFFFF, $alpha: .9);
|
||||
border-left-color: rgba($color: #FFFFFF, $alpha: .4);
|
||||
border-bottom-color: rgba($color: #FFFFFF, $alpha: .4);
|
||||
border-right-color: rgba($color: #FFFFFF, $alpha: .4);
|
||||
}
|
||||
|
||||
div.command-bar.light div.command-button div.command-button-loading div.ms-Spinner-circle {
|
||||
border-top-color: rgba($color: #000000, $alpha: .9);
|
||||
border-left-color: rgba($color: #000000, $alpha: .4);
|
||||
border-bottom-color: rgba($color: #000000, $alpha: .4);
|
||||
border-right-color: rgba($color: #000000, $alpha: .4);
|
||||
}
|
||||
|
||||
div.command-bar.dark div.command-button.active,
|
||||
div.command-bar.dark div.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 {
|
||||
div.command-bar.light div.command-button.active,
|
||||
div.command-bar.light div.command-button:hover {
|
||||
background-color: rgba($color: #000000, $alpha: .08);
|
||||
color: rgba($color: #000000, $alpha: 1);
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Component, ReactNode } from "react";
|
||||
import { DirectionalHint, IconButton } from "@fluentui/react";
|
||||
import { Component, ReactNode, FunctionComponent } from "react";
|
||||
import { DirectionalHint, Icon, Spinner } from "@fluentui/react";
|
||||
import { useSetting, IMixinSettingProps } from "@Context/Setting";
|
||||
import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
|
||||
import { BackgroundLevel, Theme } from "@Component/Theme/Theme";
|
||||
@ -18,23 +18,28 @@ interface IRenderButtonParameter {
|
||||
iconName?: string;
|
||||
click?: () => void;
|
||||
active?: boolean;
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
||||
interface ICommandBarState {
|
||||
isSaveRunning: boolean;
|
||||
}
|
||||
|
||||
function getRenderButton(param: IRenderButtonParameter): ReactNode {
|
||||
const CommandButton: FunctionComponent<IRenderButtonParameter> = (param) => {
|
||||
return <LocalizationTooltipHost
|
||||
i18nKey={param.i18NKey}
|
||||
directionalHint={DirectionalHint.rightCenter}
|
||||
>
|
||||
<IconButton
|
||||
<div
|
||||
style={{ height: COMMAND_BAR_WIDTH }}
|
||||
iconProps={{ iconName: param.iconName }}
|
||||
onClick={ param.click }
|
||||
onClick={ param.isLoading ? undefined : param.click }
|
||||
className={"command-button on-end" + (param.active ? " active" : "")}
|
||||
/>
|
||||
>
|
||||
{param.isLoading ?
|
||||
<Spinner className="command-button-loading"/> :
|
||||
<Icon iconName={param.iconName}/>
|
||||
}
|
||||
</div>
|
||||
</LocalizationTooltipHost>
|
||||
}
|
||||
@useSetting
|
||||
@ -68,78 +73,84 @@ class CommandBar extends Component<IMixinSettingProps & IMixinStatusProps, IComm
|
||||
}}
|
||||
/>
|
||||
|
||||
{getRenderButton({
|
||||
iconName: "Save",
|
||||
i18NKey: "Command.Bar.Save.Info",
|
||||
click: () => {
|
||||
<CommandButton
|
||||
iconName="Save"
|
||||
i18NKey="Command.Bar.Save.Info"
|
||||
isLoading={this.state.isSaveRunning}
|
||||
click={() => {
|
||||
this.setState({
|
||||
isSaveRunning: true
|
||||
});
|
||||
}
|
||||
})}
|
||||
}}
|
||||
/>
|
||||
|
||||
{getRenderButton({
|
||||
iconName: this.props.status?.actuator.start() ? "Pause" : "Play",
|
||||
i18NKey: "Command.Bar.Play.Info",
|
||||
click: () => this.props.status ? this.props.status.actuator.start(
|
||||
<CommandButton
|
||||
iconName={this.props.status?.actuator.start() ? "Pause" : "Play"}
|
||||
i18NKey="Command.Bar.Play.Info"
|
||||
click={() => this.props.status ? this.props.status.actuator.start(
|
||||
!this.props.status.actuator.start()
|
||||
) : undefined
|
||||
})}
|
||||
) : undefined}
|
||||
/>
|
||||
|
||||
{getRenderButton({
|
||||
iconName: "HandsFree", i18NKey: "Command.Bar.Drag.Info",
|
||||
active: mouseMod === MouseMod.Drag,
|
||||
click: () => this.props.status ? this.props.status.setMouseMod(MouseMod.Drag) : undefined
|
||||
})}
|
||||
<CommandButton
|
||||
iconName="HandsFree"
|
||||
i18NKey="Command.Bar.Drag.Info"
|
||||
active={mouseMod === MouseMod.Drag}
|
||||
click={() => this.props.status ? this.props.status.setMouseMod(MouseMod.Drag) : undefined}
|
||||
/>
|
||||
|
||||
{getRenderButton({
|
||||
iconName: "TouchPointer", i18NKey: "Command.Bar.Select.Info",
|
||||
active: mouseMod === MouseMod.click,
|
||||
click: () => this.props.status ? this.props.status.setMouseMod(MouseMod.click) : undefined
|
||||
})}
|
||||
<CommandButton
|
||||
iconName="TouchPointer"
|
||||
i18NKey="Command.Bar.Select.Info"
|
||||
active={mouseMod === MouseMod.click}
|
||||
click={() => this.props.status ? this.props.status.setMouseMod(MouseMod.click) : undefined}
|
||||
/>
|
||||
|
||||
{getRenderButton({
|
||||
iconName: "WebAppBuilderFragmentCreate",
|
||||
i18NKey: "Command.Bar.Add.Group.Info",
|
||||
click: () => {
|
||||
<CommandButton
|
||||
iconName="WebAppBuilderFragmentCreate"
|
||||
i18NKey="Command.Bar.Add.Group.Info"
|
||||
click={() => {
|
||||
this.props.status ? this.props.status.newGroup() : undefined;
|
||||
}
|
||||
})}
|
||||
}}
|
||||
/>
|
||||
|
||||
{getRenderButton({
|
||||
iconName: "ProductVariant",
|
||||
i18NKey: "Command.Bar.Add.Range.Info",
|
||||
click: () => {
|
||||
<CommandButton
|
||||
iconName="ProductVariant"
|
||||
i18NKey="Command.Bar.Add.Range.Info"
|
||||
click={() => {
|
||||
this.props.status ? this.props.status.newRange() : undefined;
|
||||
}
|
||||
})}
|
||||
}}
|
||||
/>
|
||||
|
||||
{getRenderButton({
|
||||
iconName: "Running",
|
||||
i18NKey: "Command.Bar.Add.Behavior.Info",
|
||||
click: () => {
|
||||
<CommandButton
|
||||
iconName="Running"
|
||||
i18NKey="Command.Bar.Add.Behavior.Info"
|
||||
click={() => {
|
||||
this.props.status?.popup.showPopup(BehaviorPopup, {});
|
||||
}
|
||||
})}
|
||||
}}
|
||||
/>
|
||||
|
||||
{getRenderButton({
|
||||
iconName: "Tag",
|
||||
i18NKey: "Command.Bar.Add.Tag.Info",
|
||||
click: () => {
|
||||
<CommandButton
|
||||
iconName="Tag"
|
||||
i18NKey="Command.Bar.Add.Tag.Info"
|
||||
click={() => {
|
||||
this.props.status ? this.props.status.newLabel() : undefined;
|
||||
}
|
||||
})}
|
||||
}}
|
||||
/>
|
||||
|
||||
{getRenderButton({ iconName: "Camera", i18NKey: "Command.Bar.Camera.Info" })}
|
||||
<CommandButton
|
||||
iconName="Camera"
|
||||
i18NKey="Command.Bar.Camera.Info"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
{getRenderButton({
|
||||
iconName: "Settings",
|
||||
i18NKey: "Command.Bar.Setting.Info",
|
||||
click: () => {
|
||||
<CommandButton
|
||||
iconName="Settings"
|
||||
i18NKey="Command.Bar.Setting.Info"
|
||||
click={() => {
|
||||
this.props.status?.popup.showPopup(SettingPopup, {});
|
||||
}
|
||||
})}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Theme>
|
||||
}
|
||||
|
||||
@ -64,7 +64,7 @@ async function fileChecker(status: Status, file?: File) {
|
||||
const loadFunc = () => {
|
||||
|
||||
// 进行转换
|
||||
let errorMessage = status.archive.load(status.model, fileReader.result as string, file.name);
|
||||
let errorMessage = status.archive.load(status.model, fileReader.result as string, file.name, file.path);
|
||||
if (errorMessage) {
|
||||
status.popup.showPopup(ConfirmPopup, {
|
||||
infoI18n: "Popup.Load.Save.Error.Parse",
|
||||
|
||||
@ -29,7 +29,7 @@ const ArchiveSaveDownloadView: FunctionComponent<IFileInfo & ICallBackProps> = f
|
||||
setTimeout(() => {
|
||||
download(file, props.fileName, "text/json");
|
||||
props.then();
|
||||
}, 10);
|
||||
}, 100);
|
||||
}
|
||||
|
||||
useEffect(() => { runner() }, []);
|
||||
@ -44,6 +44,7 @@ function ArchiveSaveFsView(props) {
|
||||
|
||||
const runner = async () => {
|
||||
const file = await props.fileData();
|
||||
setTimeout(() => {
|
||||
if (props.electron) {
|
||||
props.electron.fileSave(
|
||||
file,
|
||||
@ -53,6 +54,7 @@ function ArchiveSaveFsView(props) {
|
||||
props.fileUrl
|
||||
);
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
const saveEvent = ({name, url, success} : {name: string, url: string, success: boolean}) => {
|
||||
|
||||
@ -266,6 +266,7 @@ class Archive extends Emitter<IArchiveEvent> {
|
||||
this.fileName = name;
|
||||
this.isSaved = true;
|
||||
this.isNewFile = false;
|
||||
this.fileUrl = url;
|
||||
this.emit("fileSave", this);
|
||||
};
|
||||
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import { Component, ReactNode } from "react";
|
||||
import { DndProvider } from 'react-dnd'
|
||||
import { HTML5Backend } from 'react-dnd-html5-backend'
|
||||
import { SettingProvider, Setting, Platform } from "@Context/Setting";
|
||||
import { Theme, BackgroundLevel, FontLevel } from "@Component/Theme/Theme";
|
||||
import { ISimulatorAPI } from "@Electron/SimulatorAPI";
|
||||
@ -9,10 +11,10 @@ import { initializeIcons } from '@fluentui/font-icons-mdl2';
|
||||
import { RootContainer } from "@Component/Container/RootContainer";
|
||||
import { LayoutDirection } from "@Context/Layout";
|
||||
import { CommandBar } from "@Component/CommandBar/CommandBar";
|
||||
import { LoadFile } from "@Component/LoadFile/LoadFile";
|
||||
import { HeaderBar } from "@Component/HeaderBar/HeaderBar";
|
||||
import { Popup } from "@Component/Popup/Popup";
|
||||
import { Entry } from "../Entry/Entry";
|
||||
import { Group } from "@Model/Group";
|
||||
import "./SimulatorDesktop.scss";
|
||||
|
||||
initializeIcons("./font-icon/");
|
||||
@ -89,7 +91,9 @@ class SimulatorDesktop extends Component {
|
||||
return <SettingProvider value={this.setting}>
|
||||
<StatusProvider value={this.status}>
|
||||
<ElectronProvider value={this.electron}>
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
{this.renderContent()}
|
||||
</DndProvider>
|
||||
</ElectronProvider>
|
||||
</StatusProvider>
|
||||
</SettingProvider>
|
||||
@ -102,6 +106,7 @@ class SimulatorDesktop extends Component {
|
||||
fontLevel={FontLevel.Level3}
|
||||
>
|
||||
<Popup/>
|
||||
<LoadFile>
|
||||
<HeaderBar height={35}/>
|
||||
<div className="app-root-space" style={{
|
||||
height: `calc( 100% - ${35}px)`
|
||||
@ -109,6 +114,7 @@ class SimulatorDesktop extends Component {
|
||||
<CommandBar/>
|
||||
<RootContainer/>
|
||||
</div>
|
||||
</LoadFile>
|
||||
</Theme>
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user