Merge pull request #530 from Lemoncode/feature/#494-Style-Add-new-pag…

…e-button Feature/#494 style add new page button
Lemoncode · Nov 11, 2024 · 2cb8737 · 2cb8737
2 parents 008a73c + 347b930
commit 2cb8737
Show file tree

Hide file tree

Showing 8 changed files with 143 additions and 27 deletions.
diff --git a/src/common/components/icons/index.ts b/src/common/components/icons/index.ts
@@ -11,3 +11,4 @@ export * from './paste-icon.component';
 export * from './delete-icon.component';
 export * from './pencil-icon.component';
 export * from './caret-down-icon.component';
+export * from './plus-icon.component';
diff --git a/src/common/components/icons/plus-icon.component.tsx b/src/common/components/icons/plus-icon.component.tsx
@@ -0,0 +1,16 @@
+export const PlusIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.2em"
+      height="1.2em"
+      viewBox="0 0 256 256"
+      aria-hidden="true"
+    >
+      <path
+        fill="currentColor"
+        d="M222 128a6 6 0 0 1-6 6h-82v82a6 6 0 0 1-12 0v-82H40a6 6 0 0 1 0-12h82V40a6 6 0 0 1 12 0v82h82a6 6 0 0 1 6 6"
+      />
+    </svg>
+  );
+};
diff --git a/src/pods/thumb-pages/components/thumb-page.business.ts b/src/pods/thumb-pages/components/thumb-page.business.ts
@@ -1,7 +1,10 @@
-import { ShapeModel } from '@/core/model';
+import { ShapeModel, Size } from '@/core/model';
 import { calculateCanvasBounds } from '@/pods/toolbar/components/export-button/export-button.utils';
 
-export const calculateScaleBasedOnBounds = (shapes: ShapeModel[]) => {
+export const calculateScaleBasedOnBounds = (
+  shapes: ShapeModel[],
+  divSize: Size
+) => {
   const bounds = calculateCanvasBounds(shapes);
   const canvasSizeRough = {
     width: bounds.x + bounds.width,
@@ -13,8 +16,8 @@ export const calculateScaleBasedOnBounds = (shapes: ShapeModel[]) => {
     height: canvasSizeRough.height > 600 ? canvasSizeRough.height : 600,
   };
 
-  const scaleFactorX = 200 / canvasSize.width;
-  const scaleFactorY = 180 / canvasSize.height;
+  const scaleFactorX = divSize.width / canvasSize.width;
+  const scaleFactorY = divSize.height / canvasSize.height;
   return Math.min(scaleFactorX, scaleFactorY);
 };
 

diff --git a/src/pods/thumb-pages/components/thumb-page.module.css b/src/pods/thumb-pages/components/thumb-page.module.css
@@ -1,14 +1,14 @@
 .container {
-  width: '200px';
-  height: '180px';
-  border: 3px solid;
+  width: 100%;
+  flex: 1;
+  border: 1px solid;
   border-color: black;
-  border-radius: 5px;
+  border-radius: 3px;
   position: relative;
   background-color: white;
-  margin-top: 10px;
-  padding: 5px;
-  padding-bottom: 0px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .icon-container > svg {
@@ -17,15 +17,10 @@
   right: 8px;
   width: 12px;
   height: 12px;
+
   cursor: pointer;
 }
 
 .icon-container > svg:hover {
   background-color: var(--primary-100);
-  position: absolute;
-  bottom: 8px;
-  right: 8px;
-  width: 12px;
-  height: 12px;
-  cursor: pointer;
 }
diff --git a/src/pods/thumb-pages/components/thumb-page.tsx b/src/pods/thumb-pages/components/thumb-page.tsx
@@ -1,4 +1,4 @@
-import { ShapeRefs } from '@/core/model';
+import { ShapeRefs, Size } from '@/core/model';
 import { useCanvasContext } from '@/core/providers';
 import { renderShapeComponent } from '@/pods/canvas/shape-renderer';
 import { KonvaEventObject } from 'konva/lib/Node';
@@ -9,6 +9,7 @@ import { ThumbPageContextMenu } from './context-menu';
 import { useContextMenu } from '../use-context-menu-thumb.hook';
 import { CaretDown } from '@/common/components/icons';
 import classes from './thumb-page.module.css';
+import React from 'react';
 
 interface Props {
   pageIndex: number;
@@ -23,7 +24,39 @@ export const ThumbPage: React.FunctionComponent<Props> = props => {
   const shapes = page.shapes;
   const fakeShapeRefs = useRef<ShapeRefs>({});
 
-  const finalScale = calculateScaleBasedOnBounds(shapes);
+  const [finalScale, setFinalScale] = React.useState<number>(1);
+  const [canvasSize, setCanvasSize] = React.useState<Size>({
+    width: 1,
+    height: 1,
+  });
+
+  const divRef = useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    const newCanvaSize = {
+      width: divRef.current?.clientWidth || 1,
+      height: divRef.current?.clientHeight || 1,
+    };
+
+    window.addEventListener('resize', () => {
+      setCanvasSize({
+        width: divRef.current?.clientWidth || 1,
+        height: divRef.current?.clientHeight || 1,
+      });
+    });
+
+    setCanvasSize(newCanvaSize);
+    setFinalScale(calculateScaleBasedOnBounds(shapes, newCanvaSize));
+
+    return () => {
+      window.removeEventListener('resize', () => {
+        setCanvasSize({
+          width: divRef.current?.clientWidth || 1,
+          height: divRef.current?.clientHeight || 1,
+        });
+      });
+    };
+  }, [divRef.current, shapes]);
 
   const {
     showContextMenu,
@@ -35,11 +68,17 @@ export const ThumbPage: React.FunctionComponent<Props> = props => {
   return (
     <>
       <div
+        ref={divRef}
         className={classes.container}
         onClick={() => onSetActivePage(page.id)}
         onContextMenu={handleShowContextMenu}
       >
-        <Stage width={200} height={180} scaleX={finalScale} scaleY={finalScale}>
+        <Stage
+          width={canvasSize.width}
+          height={canvasSize.height}
+          scaleX={finalScale}
+          scaleY={finalScale}
+        >
           <Layer>
             {shapes.map(shape => {
               if (!fakeShapeRefs.current[shape.id]) {

diff --git a/src/pods/thumb-pages/thumb-pages.module.css b/src/pods/thumb-pages/thumb-pages.module.css
@@ -1,17 +1,68 @@
 .container {
   display: flex;
-  padding: var(--space-md);
-  gap: var(--space-md);
+  padding: var(--space-s);
+  gap: var(--space-s);
   align-items: center;
   justify-content: center;
-  flex-wrap: wrap;
   flex-direction: column;
 }
 
+.thumb {
+  width: 100%;
+  height: 240px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: cubic-bezier(1, 0, 0, 1) 0.3s 1 normal thumb;
+}
 .activeThumb {
-  background-color: rgb(41, 41, 235);
+  width: 100%;
+  height: 240px;
+  background-color: var(--primary-100);
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: ease 0.3s 1 normal thumb;
+}
+
+/* .activeText {
+  color: white;
+} */
+
+.addButton {
+  margin-top: var(--space-md);
+  margin-bottom: var(--space-md);
+  border: 1px solid var(--primary-700);
+  background-color: transparent;
+  width: 35px;
+  height: 35px;
+  border-radius: 100%;
+  font-size: var(--fs-lg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.3s;
+  cursor: pointer;
 }
 
-.activeText {
+.addButton:hover {
+  background-color: var(--primary-700);
   color: white;
 }
+
+@keyframes thumb {
+  0% {
+    height: 0;
+    width: 0;
+    opacity: 0;
+  }
+  15% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+    width: 100%;
+    height: 240px;
+  }
+}
diff --git a/src/pods/thumb-pages/thumb-pages.pod.tsx b/src/pods/thumb-pages/thumb-pages.pod.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import classes from './thumb-pages.module.css';
 import { useCanvasContext } from '@/core/providers';
 import { PageTitleInlineEdit, ThumbPage } from './components';
+import { PlusIcon } from '@/common/components/icons';
 
 export const ThumbPagesPod: React.FC = () => {
   const { fullDocument, addNewPage, setActivePage, getActivePage } =
@@ -24,7 +25,9 @@ export const ThumbPagesPod: React.FC = () => {
         <React.Fragment key={page.id}>
           <div
             className={`${classes.container} ${
-              page.id === getActivePage().id ? classes.activeThumb : ''
+              page.id === getActivePage().id
+                ? classes.activeThumb
+                : classes.thumb
             }`}
           >
             <ThumbPage
@@ -50,7 +53,14 @@ export const ThumbPagesPod: React.FC = () => {
           </div>
         </React.Fragment>
       ))}
-      <button onClick={handleAddNewPage}>Add new page</button>
+      <button
+        className={classes.addButton}
+        onClick={handleAddNewPage}
+        title="add new page"
+        aria-label="add new page"
+      >
+        <PlusIcon />
+      </button>
     </div>
   );
 };
diff --git a/src/scenes/main.module.css b/src/scenes/main.module.css
@@ -16,6 +16,7 @@
 
 .container {
   overflow-y: auto;
+  position: relative;
 }
 .container[open] {
   flex: 1;