Merge pull request #386 from kipr/reorganize-menu-bar

Reorganize menu bar buttons
kipr · Jul 25, 2022 · cb3f50b · cb3f50b
2 parents 2decb61 + 26695df
commit cb3f50b
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 53 deletions.
diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx
@@ -47,6 +47,7 @@ export const createEditorBarComponents = (
   theme: Theme, 
   messages: Message[],
   onIndentCode: () => void,
+  onDownloadCode: () => void,
   onErrorClick: (event: React.MouseEvent<HTMLDivElement>) => void
 ) => {
 
@@ -64,6 +65,16 @@ export const createEditorBarComponents = (
       </>
   }));
 
+  editorBar.push(BarComponent.create(Button, {
+    theme,
+    onClick: onDownloadCode,
+    children:
+      <>
+        <Fa icon='file-download'/>
+        {' Download'}
+      </>
+  }));
+
   messages.forEach(message => {
     switch (message.severity) {
       case 'error': {

diff --git a/src/components/Layout/Layout.ts b/src/components/Layout/Layout.ts
@@ -16,6 +16,7 @@ export interface LayoutProps extends StyleProps, ThemeProps {
   settings: Settings;
   onClearConsole: () => void;
   onIndentCode: () => void;
+  onDownloadCode: () => void;
   onSelectScene: () => void;
   editorRef: React.MutableRefObject<Editor>;
 }

diff --git a/src/components/Layout/OverlayLayout.tsx b/src/components/Layout/OverlayLayout.tsx
@@ -22,7 +22,6 @@ export interface OverlayLayoutProps extends LayoutProps {
 }
 
 interface ReduxOverlayLayoutProps {
-  onResetScene: () => void;
 }
 
 interface OverlayLayoutState {
@@ -293,8 +292,8 @@ export class OverlayLayout extends React.PureComponent<Props & ReduxOverlayLayou
       settings,
       onClearConsole,
       onIndentCode,
+      onDownloadCode,
       onSelectScene,
-      onResetScene,
       editorRef
     } = props;
 
@@ -310,9 +309,9 @@ export class OverlayLayout extends React.PureComponent<Props & ReduxOverlayLayou
       mode: Mode.Floating
     };
 
-    const editorBar = createEditorBarComponents(theme, messages, onIndentCode, this.onErrorClick_);
+    const editorBar = createEditorBarComponents(theme, messages, onIndentCode, onDownloadCode, this.onErrorClick_);
     const consoleBar = createConsoleBarComponents(theme, onClearConsole);
-    const worldBar = createWorldBarComponents(theme, onSelectScene, onResetScene);
+    const worldBar = createWorldBarComponents(theme, onSelectScene);
 
     return (
       <Container style={style} className={className}>
@@ -375,7 +374,4 @@ export class OverlayLayout extends React.PureComponent<Props & ReduxOverlayLayou
 export const OverlayLayoutRedux = connect<unknown, ReduxOverlayLayoutProps, OverlayLayoutProps, ReduxState>((state: ReduxState) => {
   return {};
 }, dispatch => ({
-  onResetScene: () => {
-    dispatch(SceneAction.RESET_SCENE);
-  }
 }), null, { forwardRef: true })(OverlayLayout);
diff --git a/src/components/Layout/SideLayout.tsx b/src/components/Layout/SideLayout.tsx
@@ -53,7 +53,6 @@ export interface SideLayoutProps extends LayoutProps {
 }
 
 interface ReduxSideLayoutProps {
-  onResetScene: () => void;
 }
 
 interface SideLayoutState {
@@ -171,8 +170,8 @@ export class SideLayout extends React.PureComponent<Props & ReduxSideLayoutProps
       settings,
       onClearConsole,
       onIndentCode,
+      onDownloadCode,
       onSelectScene,
-      onResetScene,
       editorRef,
     } = props;
 
@@ -181,9 +180,9 @@ export class SideLayout extends React.PureComponent<Props & ReduxSideLayoutProps
       sidePanelSize,
     } = this.state;
 
-    const editorBar = createEditorBarComponents(theme, messages, onIndentCode, this.onErrorClick_);
+    const editorBar = createEditorBarComponents(theme, messages, onIndentCode, onDownloadCode, this.onErrorClick_);
     const consoleBar = createConsoleBarComponents(theme, onClearConsole);
-    const worldBar = createWorldBarComponents(theme, onSelectScene, onResetScene);
+    const worldBar = createWorldBarComponents(theme, onSelectScene);
 
     let content: JSX.Element;
     switch (activePanel) {
@@ -312,7 +311,4 @@ export class SideLayout extends React.PureComponent<Props & ReduxSideLayoutProps
 export const SideLayoutRedux = connect<unknown, ReduxSideLayoutProps, SideLayoutProps, ReduxState>((state: ReduxState) => {
   return {};
 }, dispatch => ({
-  onResetScene: () => {
-    dispatch(SceneAction.RESET_SCENE);
-  }
 }), null, { forwardRef: true })(SideLayout);
diff --git a/src/components/Root.tsx b/src/components/Root.tsx
@@ -31,7 +31,7 @@ import ExceptionDialog from './ExceptionDialog';
 import SelectSceneDialog from './SelectSceneDialog';
 
 import store from '../state';
-import { RobotStateAction } from '../state/reducer';
+import { RobotStateAction, SceneAction } from '../state/reducer';
 import { Editor } from './Editor';
 
 namespace Modal {
@@ -349,6 +349,10 @@ export class Root extends React.Component<Props, State> {
     document.body.removeChild(element);
   };
 
+  private onResetWorldClick_ = () => {
+    store.dispatch(SceneAction.RESET_SCENE);
+  };
+
   private onClearConsole_ = () => {
     this.setState({
       console: StyledText.compose({ items: [] })
@@ -436,6 +440,7 @@ export class Root extends React.Component<Props, State> {
       settings,
       onClearConsole: this.onClearConsole_,
       onIndentCode: this.onIndentCode_,
+      onDownloadCode: this.onDownloadClick_,
       onSelectScene: this.onSelectSceneClick_,
       editorRef: this.editorRef,
     };
@@ -478,7 +483,7 @@ export class Root extends React.Component<Props, State> {
             onHideAll={this.onHideAll_}
             onSettingsClick={this.onModalClick_(Modal.SETTINGS)}
             onAboutClick={this.onModalClick_(Modal.ABOUT)}
-            onDownloadClick={this.onDownloadClick_}
+            onResetWorldClick={this.onResetWorldClick_}
             onRunClick={this.onRunClick_}
             onStopClick={this.onStopClick_}
             onDocumentationClick={this.onDocumentationClick}

diff --git a/src/components/SimMenu.tsx b/src/components/SimMenu.tsx
@@ -17,7 +17,7 @@ export interface MenuProps extends StyleProps, ThemeProps {
 
   onRunClick: () => void;
   onStopClick: () => void;
-  onDownloadClick: () => void;
+  onResetWorldClick: () => void;
 
   onSettingsClick: () => void;
   onAboutClick: () => void;
@@ -96,14 +96,14 @@ const Item = styled('div', (props: ThemeProps & ClickProps) => ({
   transition: 'background-color 0.2s, opacity 0.2s'
 }));
 
-const RunItem = withStyleDeep(Item, (props: ClickProps & { $running: boolean }) => ({
+const RunItem = withStyleDeep(Item, (props: ClickProps) => ({
   backgroundColor: props.disabled ? GREEN.disabled : GREEN.standard,
   ':hover': props.onClick && !props.disabled ? {
     backgroundColor: GREEN.hover
   } : {},
 }));
 
-const StopItem = withStyleDeep(Item, (props: ClickProps & { $running: boolean }) => ({
+const StopItem = withStyleDeep(Item, (props: ClickProps) => ({
   backgroundColor: props.disabled ? RED.disabled : RED.standard,
   ':hover': props.onClick && !props.disabled ? {
     backgroundColor: RED.hover
@@ -142,7 +142,7 @@ class SimMenu extends React.PureComponent<Props, State> {
       onAboutClick,
       onRunClick,
       onStopClick,
-      onDownloadClick,
+      onResetWorldClick,
       onDocumentationClick,
       onDashboardClick,
       onLogoutClick,
@@ -152,31 +152,35 @@ class SimMenu extends React.PureComponent<Props, State> {
 
     const { layoutPicker } = state;
 
-    const running = SimulatorState.isRunning(simulatorState);
+    const runOrStopItem: JSX.Element = SimulatorState.isRunning(simulatorState)
+      ? (
+        <StopItem
+          theme={theme}
+          onClick={onStopClick}
+          disabled={false}
+        >
+          <ItemIcon icon='stop' />
+          Stop
+        </StopItem>
+      ) : (
+        <RunItem
+          theme={theme}
+          onClick={SimulatorState.isStopped(simulatorState) ? onRunClick : undefined}
+          disabled={!SimulatorState.isStopped(simulatorState)}
+          style={{ borderLeft: `1px solid ${theme.borderColor}` }}
+        >
+          <ItemIcon icon='play' />
+          Run
+        </RunItem>
+      );
 
     return (
       <>
         <Container theme={theme}>
           <Logo theme={theme} onClick={onDashboardClick} src={theme.foreground === 'white' ? KIPR_LOGO_BLACK as string : KIPR_LOGO_WHITE as string}/>
 
-          <RunItem
-            theme={theme}
-            onClick={SimulatorState.isStopped(simulatorState) ? onRunClick : undefined}
-            $running={running}
-            disabled={!SimulatorState.isStopped(simulatorState)}
-            style={{ borderLeft: `1px solid ${theme.borderColor}` }}
-          >
-            <ItemIcon icon='play' /> Run
-          </RunItem>
-          <StopItem
-            theme={theme}
-            onClick={running ? onStopClick : undefined}
-            disabled={!running}
-            $running={running}
-          >
-            <ItemIcon icon='stop' /> Stop
-          </StopItem>
-          <Item theme={theme} onClick={onDownloadClick}><ItemIcon icon='file-download' /> Download</Item>
+          {runOrStopItem}
+          <Item theme={theme} onClick={onResetWorldClick}><ItemIcon icon='sync' />Reset World</Item>
 
           <Spacer style={{ borderRight: `1px solid ${theme.borderColor}` }} />
 

diff --git a/src/components/World/index.tsx b/src/components/World/index.tsx
@@ -26,10 +26,7 @@ import * as uuid from 'uuid';
 import { ReferenceFrame, Rotation, Vector3 } from '../../unit-math';
 import { Vector3 as RawVector3 } from '../../math';
 import ComboBox from '../ComboBox';
-import Scene from '../../state/State/Scene';
 import Node from '../../state/State/Scene/Node';
-import { Scenes } from '../../state/State';
-import Async from '../../state/State/Async';
 import Dict from '../../Dict';
 import Geometry from '../../state/State/Scene/Geometry';
 
@@ -38,8 +35,7 @@ import { BarComponent } from '../Widget';
 
 export const createWorldBarComponents = (
   theme: Theme, 
-  onSelectScene: () => void,
-  onResetScene: () => void
+  onSelectScene: () => void
 ) => {
   const worldBar: BarComponent<unknown>[] = [];
 
@@ -53,15 +49,6 @@ export const createWorldBarComponents = (
       </>,
   }));
 
-  worldBar.push(BarComponent.create(Button, {
-    theme,
-    onClick: onResetScene,
-    children:
-      <>
-        <Fa icon='sync' />
-        { ' Reset' }
-      </>
-  }));
   return worldBar;
 };