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>
     );
   }

src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -6,6 +6,7 @@ import { IContainerModel, getDepth, MakeIterator } from '../SVG/Elements/Contain
 interface IElementsSidebarProps {
   MainContainer: IContainerModel | null,
   isOpen: boolean,
+  isHistoryOpen: boolean
   SelectedContainer: IContainerModel | null,
   onClick: () => void,
   onPropertyChange: (key: string, value: string) => void,
@@ -25,7 +26,12 @@ export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
   }
 
   public render() {
-    const isOpenClasses = this.props.isOpen ? 'right-0' : '-right-64';
+    let isOpenClasses = '-right-64';
+    if (this.props.isOpen) {
+      isOpenClasses = this.props.isHistoryOpen
+        ? 'right-64'
+        : 'right-0';
+    }
 
     const containerRows: React.ReactNode[] = [];
     this.iterateChilds((container: IContainerModel) => {

src/Components/History/History.tsx

@@ -3,27 +3,60 @@ import { IHistoryState } from '../../App';
 
 interface IHistoryProps {
   history: IHistoryState[],
+  historyCurrentStep: number,
+  isOpen: boolean,
+  onClick: () => void,
   jumpTo: (move: number) => void
 }
 
 export class History extends React.Component<IHistoryProps> {
   public render() {
+    const isOpenClasses = this.props.isOpen ? 'right-0' : '-right-64';
+
     const states = this.props.history.map((step, move) => {
       const desc = move
-        ? `Go back at turn n°${move}`
+        ? `Go to modification n°${move}`
-        : 'Go back at the beginning';
+        : 'Go to the beginning';
 
+      const isCurrent = move === this.props.historyCurrentStep;
+
+      const selectedClass = isCurrent
+        ? 'bg-blue-500 hover:bg-blue-600'
+        : 'bg-slate-500 hover:bg-slate-700';
+
+      const isCurrentText = isCurrent
+        ? ' (current)'
+        : '';
       return (
-        <li key={move}>
+
-          <button onClick={() => this.props.jumpTo(move)}>{desc}</button>
+        <button
-        </li>
+          key={move}
+          onClick={() => this.props.jumpTo(move)}
+          className={
+            `w-full elements-sidebar-row whitespace-pre 
+            text-left text-sm font-medium transition-all ${selectedClass}`
+          }
+        >
+          {desc}{isCurrentText}
+        </button>
       );
     });
 
+    // recent first
+    states.reverse();
+
     return (
-      <div>
+      <div className={`fixed flex flex-col bg-slate-400 text-white transition-all h-screen w-64 overflow-y-auto z-20 ${isOpenClasses}`}>
+        <button className='close-button bg-slate-500 hover:bg-slate-700 justify-start' onClick={this.props.onClick}>
+          &times; Close
+        </button>
+        <div className='bg-slate-600 sidebar-row'>
+          History
+        </div>
+        <div className='overflow-y-auto overflow-x-hidden text-slate-300 flex-grow divide-y divide-solid divide-slate-600'>
           { states }
         </div>
+      </div>
     );
   }
 }