Improve history style (#5)

Reviewed-on: https://git.siklos-chaneru.duckdns.org/Siklos/svg-layout-designer-react/pulls/5

src/App.tsx

@@ -21,6 +21,7 @@ export interface IHistoryState {
 interface IAppState {
   isSidebarOpen: boolean,
   isSVGSidebarOpen: boolean,
+  isHistoryOpen: boolean,
   configuration: Configuration,
   history: Array<IHistoryState>,
   historyCurrentStep: 0
@@ -34,6 +35,7 @@ class App extends React.Component<IAppProps> {
     this.state = {
       isSidebarOpen: true,
       isSVGSidebarOpen: false,
+      isHistoryOpen: false,
       configuration: {
         AvailableContainers: [],
         AvailableSymbols: [],
@@ -110,6 +112,15 @@ class App extends React.Component<IAppProps> {
     } as IAppState);
   }
 
+  /**
+   * Toggle the elements
+   */
+  public ToggleHistory() {
+    this.setState({
+      isHistoryOpen: !this.state.isHistoryOpen
+    } as IAppState);
+  }
+
   /**
    * Select a container
    * @param container Selected container
@@ -293,20 +304,45 @@ class App extends React.Component<IAppProps> {
           onClick={() => this.ToggleSidebar()}
           buttonOnClick={(type: string) => this.AddContainer(type)}
         />
-        <button className='fixed z-10 top-4 left-4 text-lg bg-blue-200 hover:bg-blue-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg' onClick={() => this.ToggleSidebar()}>&#9776; Components</button>
+        <button
+          className='fixed z-10 top-4 left-4 text-lg bg-blue-200 hover:bg-blue-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg'
+          onClick={() => this.ToggleSidebar()}
+        >
+          &#9776; Components
+        </button>
+
         <ElementsSidebar
           MainContainer={current.MainContainer}
           SelectedContainer={current.SelectedContainer}
           isOpen={this.state.isSVGSidebarOpen}
+          isHistoryOpen={this.state.isHistoryOpen}
           onClick={() => this.ToggleElementsSidebar()}
           onPropertyChange={(key: string, value: string) => this.OnPropertyChange(key, value)}
           selectContainer={(container: ContainerModel) => this.SelectContainer(container)}
         />
-        <button className='fixed z-10 top-4 right-12 text-lg bg-slate-200 hover:bg-slate-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg' onClick={() => this.ToggleElementsSidebar()}>&#9776; Elements</button>
+        <button
+          className='fixed z-10 top-4 right-12 text-lg bg-slate-200 hover:bg-slate-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg'
+          onClick={() => this.ToggleElementsSidebar()}
+        >
+          &#9776; Elements
+        </button>
+
+        <History
+          history={this.state.history}
+          historyCurrentStep={this.state.historyCurrentStep}
+          isOpen={this.state.isHistoryOpen}
+          onClick={() => this.ToggleHistory()}
+          jumpTo={(move) => { this.jumpTo(move); }}
+        />
+        <button
+          className='fixed z-10 top-4 right-72 text-lg bg-slate-200 hover:bg-slate-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg'
+          onClick={() => this.ToggleHistory()}>
+            &#9776; History
+        </button>
+
         <SVG selected={current.SelectedContainer}>
           { current.MainContainer }
         </SVG>
-        <History history={this.state.history} jumpTo={(move) => { this.jumpTo(move); }} />
       </div>
     );
   }