Merge pull request #516 from Lemoncode/feature/#493--multipage-docs]-…

…style-thumbnail-rectagle-and-higlight-selected

add style thumbnail rectangle and highlight selected

src/pods/thumb-pages/components/thumb-page.module.css

@@ -0,0 +1,11 @@
+.container {
+  width: '200px';
+  height: '180px';
+  border: 3px solid;
+  border-color: black;
+  border-radius: 5px;
+  position: 'relative';
+  background-color: white;
+  margin-top: 10px;
+  padding: 5px;
+}

src/pods/thumb-pages/components/thumb-page.tsx

@@ -7,6 +7,7 @@ import { createRef, useRef } from 'react';
 import { Layer, Stage } from 'react-konva';
 import { ThumbPageContextMenu } from './context-menu';
 import { useContextMenu } from '../use-context-menu-thumb.hook';
+import classes from './thumb-page.module.css';
 
 interface Props {
   pageIndex: number;
@@ -26,7 +27,7 @@ export const ThumbPage: React.FunctionComponent<Props> = props => {
     width: bounds.x + bounds.width,
     height: bounds.y + bounds.height,
   };
-  const scaleFactorX = 250 / canvasSize.width;
+  const scaleFactorX = 200 / canvasSize.width;
   const scaleFactorY = 180 / canvasSize.height;
   const finalScale = Math.min(scaleFactorX, scaleFactorY);
 
@@ -40,16 +41,11 @@ export const ThumbPage: React.FunctionComponent<Props> = props => {
   return (
     <>
       <div
-        style={{
-          width: '250px',
-          height: '180px',
-          border: '1px solid red',
-          position: 'relative',
-        }}
+        className={classes.container}
         onClick={() => onSetActivePage(page.id)}
         onContextMenu={handleShowContextMenu}
       >
-        <Stage width={250} height={180} scaleX={finalScale} scaleY={finalScale}>
+        <Stage width={200} height={180} scaleX={finalScale} scaleY={finalScale}>
           <Layer>
             {shapes.map(shape => {
               if (!fakeShapeRefs.current[shape.id]) {

src/pods/thumb-pages/thumb-pages.module.css

@@ -7,3 +7,11 @@
   flex-wrap: wrap;
   flex-direction: column;
 }
+
+.activeThumb {
+  background-color: rgb(41, 41, 235);
+}
+
+.activeText {
+  color: white;
+}

src/pods/thumb-pages/thumb-pages.pod.tsx

@@ -8,34 +8,45 @@ export const ThumbPagesPod: React.FC = () => {
   const [pageTitleBeingEdited, setPageTitleBeingEdited] = React.useState<
     number | null
   >(null);
+  const [activePageId, setActivePageId] = React.useState<string | null>(null);
 
   const handleAddNewPage = () => {
     addNewPage();
   };
 
   const handleSetActivePage = (pageId: string) => {
     setActivePage(pageId);
+    setActivePageId(pageId);
   };
 
   return (
     <div className={classes.container}>
       {fullDocument.pages.map((page, index) => (
         <React.Fragment key={page.id}>
-          <ThumbPage
-            pageIndex={index}
-            onSetActivePage={handleSetActivePage}
-            setPageTitleBeingEdited={setPageTitleBeingEdited}
-          />
-          {pageTitleBeingEdited === index ? (
-            <PageTitleInlineEdit
+          <div
+            className={`${classes.container} ${
+              page.id === activePageId ? classes.activeThumb : ''
+            }`}
+          >
+            <ThumbPage
               pageIndex={index}
+              onSetActivePage={handleSetActivePage}
               setPageTitleBeingEdited={setPageTitleBeingEdited}
             />
-          ) : (
-            <div onDoubleClick={() => setPageTitleBeingEdited(index)}>
-              {page.name}
-            </div>
-          )}
+            {pageTitleBeingEdited === index ? (
+              <PageTitleInlineEdit
+                pageIndex={index}
+                setPageTitleBeingEdited={setPageTitleBeingEdited}
+              />
+            ) : (
+              <div
+                onDoubleClick={() => setPageTitleBeingEdited(index)}
+                className={page.id === activePageId ? classes.activeText : ''}
+              >
+                {page.name}
+              </div>
+            )}
+          </div>
         </React.Fragment>
       ))}
       <button onClick={handleAddNewPage}>Add new page</button>