Merge pull request #28 from jacksonkasi1/dev

Bug fixed and UX/UI improved.
jacksonkasi1 · Oct 13, 2024 · c74ec5b · c74ec5b
2 parents 985acce + 74fc68b
commit c74ec5b
Show file tree

Hide file tree

Showing 26 changed files with 497 additions and 145 deletions.
diff --git a/plugin/package.json b/plugin/package.json
@@ -10,8 +10,10 @@
     "file-saver": "^2.0.5",
     "jszip": "^3.10.1",
     "preact": ">=10",
+    "rc-tooltip": "^6.2.1",
     "react-beautiful-dnd": "^13.1.1",
     "react-flip-toolkit": "^7.2.4",
+    "react-tooltip": "^5.28.0",
     "use-debounce": "^10.0.3",
     "zustand": "^4.5.5"
   },

diff --git a/plugin/pnpm-lock.yaml b/plugin/pnpm-lock.yaml
diff --git a/plugin/src/assets/Icons/CopyIcon.tsx b/plugin/src/assets/Icons/CopyIcon.tsx
@@ -40,17 +40,13 @@ const CopyIcon: preact.FunctionComponent<CopyIconProps> = ({
 }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    fill="none"
+    fill={color}
     viewBox="0 0 24 24"
-    strokeWidth={1.5}
-    stroke={color}
-    strokeLinecap="round"
-    strokeLinejoin="round"
     className={cn('size-6', className)}
     width={width}
     height={height}
   >
-    <path d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184" />
+    <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m0 16H8V7h11z" />
   </svg>
 );
 

diff --git a/plugin/src/assets/Icons/DownloadIcon.tsx b/plugin/src/assets/Icons/DownloadIcon.tsx
@@ -42,7 +42,7 @@ const DownloadIcon: preact.FunctionComponent<DownloadIconProps> = ({
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
     viewBox="0 0 24 24"
-    strokeWidth={1.5}
+    strokeWidth={2}
     stroke={color}
     strokeLinecap="round"
     strokeLinejoin="round"

diff --git a/plugin/src/components/files-footer/HistoryFooterBody.tsx b/plugin/src/components/files-footer/HistoryFooterBody.tsx
@@ -6,10 +6,16 @@ import {
   Container,
   Text,
   IconChevronUp32,
-  IconChevronDown32,
   Divider,
   VerticalSpace,
+  IconInfo32,
+  IconCircleInfo16,
 } from '@create-figma-plugin/ui';
+
+// ** import custom ui components
+import Tooltip from '@/components/ui/tooltip';
+
+// ** import sub-pages
 import HistoryPage from '@/pages/HistoryPage';
 
 // Props for HistoryFooterBody
@@ -37,11 +43,33 @@ const HistoryFooterBody = ({
           className="flex items-center justify-between h-10 cursor-pointer"
           onClick={() => handleFilesFooterToggle(!isExpanded)} // Toggle expansion state
         >
-          <Text>
-            <Bold>History</Bold>
-          </Text>
+          <div className="flex items-center justify-center gap-1">
+            <Text>
+              <Bold>History</Bold>
+            </Text>
+            {isExpanded && (
+              <Tooltip
+                id="history-tooltip"
+                content={
+                  <span>
+                    You can save a maximum of <strong>1000 files</strong> in history.
+                  </span>
+                }
+                place="bottom"
+              >
+                <IconCircleInfo16 />
+              </Tooltip>
+            )}
+          </div>
+
           <button className="rounded-sm text-primary-text">
-            {isExpanded ? <IconChevronDown32 /> : <IconChevronUp32 />}
+            {isExpanded ? (
+              <Text>
+                <span className="cursor-pointer text-danger hover:danger-hover">Close</span>
+              </Text>
+            ) : (
+              <IconChevronUp32 />
+            )}
           </button>
         </div>
       </Container>

diff --git a/plugin/src/components/files-footer/export-option/PdfExportOption.tsx b/plugin/src/components/files-footer/export-option/PdfExportOption.tsx
@@ -56,6 +56,9 @@ const PdfExportOption = ({ onHeightChange }: PdfExportOptionProps) => {
     if (currentPage === 'upload') {
       setAssetsExportType(AssetsExportType.MULTI);
     }
+    if(pdfPassword) {
+      setRequirePassword(true);
+    }
   }, [currentPage]);
 
   const handlePdfFormatChange = (event: JSX.TargetedEvent<HTMLInputElement>) => {
@@ -78,7 +81,7 @@ const PdfExportOption = ({ onHeightChange }: PdfExportOptionProps) => {
 
   const handleRequirePasswordChange = (newValue: boolean) => {
     setRequirePassword(newValue);
-    if (!newValue) {
+    if (!newValue && pdfPassword) {
       setPdfPassword('');
     }
     // Notify parent when password protection is toggled

diff --git a/plugin/src/components/files-footer/index.tsx b/plugin/src/components/files-footer/index.tsx
@@ -113,6 +113,13 @@ const FilesFooter = () => {
     }
 
     try {
+
+      if(AssetsExportType.SINGLE && nodeIdsToExport.length < 2) {
+        console.warn(formatWarningMessage('Please select at least two images to export.'));
+        notify.warn('Please select at least two images to export.');
+        return;
+      }
+
       if (nodeIdsToExport.length === 0) {
         console.warn(formatWarningMessage('Please select at least one image to export.'));
         notify.warn('Please select at least one image to export.');