Improve history style (#5)

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

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,26 +3,59 @@ 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 back at the beginning';
+        ? `Go to modification n°${move}`
+        : '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>
-        </li>
+
+        <button
+          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>
-        { states }
+      <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>
     );
   }