chore: download image by one click (#94)

chore: download image by clicking

web/public/icons/download.svg

+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M11 40q-1.2 0-2.1-.9Q8 38.2 8 37v-7.15h3V37h26v-7.15h3V37q0 1.2-.9 2.1-.9.9-2.1.9Zm13-7.65-9.65-9.65 2.15-2.15 6 6V8h3v18.55l6-6 2.15 2.15Z"/></svg>
\ No newline at end of file

web/src/components/PreviewImageDialog.tsx

 import { showDialog } from "./Dialog";
+import * as utils from "../helpers/utils";
 import "../less/preview-image-dialog.less";
 
 interface Props extends DialogProps {
@@ -10,12 +11,23 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrl }: Props) => {
     destroy();
   };
 
+  const handleDownloadBtnClick = () => {
+    const a = document.createElement("a");
+    a.href = imgUrl;
+    a.download = `memos-${utils.getDateTimeString(Date.now())}.png`;
+    a.click();
+  };
+
   return (
     <>
-      <button className="btn close-btn" onClick={handleCloseBtnClick}>
-        <img className="icon-img" src="/icons/close.svg" />
-      </button>
-
+      <div className="btns-container">
+        <button className="btn" onClick={handleCloseBtnClick}>
+          <img className="icon-img" src="/icons/close.svg" />
+        </button>
+        <button className="btn" onClick={handleDownloadBtnClick}>
+          <img className="icon-img" src="/icons/download.svg" />
+        </button>
+      </div>
       <div className="img-container">
         <img src={imgUrl} crossOrigin="anonymous" />
       </div>

web/src/components/ShareMemoImageDialog.tsx

@@ -61,6 +61,13 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
     setImgAmount(imgAmount - 1);
   };
 
+  const handleDownloadBtnClick = () => {
+    const a = document.createElement("a");
+    a.href = shortcutImgUrl;
+    a.download = `memos-${utils.getDateTimeString(Date.now())}.png`;
+    a.click();
+  };
+
   return (
     <>
       <div className="dialog-header-container">
@@ -73,11 +80,11 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
       </div>
       <div className="dialog-content-container">
         <div className={`tip-words-container ${shortcutImgUrl ? "finish" : "loading"}`}>
-          <p className="tip-text">{shortcutImgUrl ? "Right click or long press to save image 👇" : "Generating the screenshot..."}</p>
+          <p className="tip-text">{shortcutImgUrl ? "Click or press to save the image 👇" : "Generating the screenshot..."}</p>
         </div>
         <div className="memo-container" ref={memoElRef}>
           <Only when={shortcutImgUrl !== ""}>
-            <img className="memo-shortcut-img" src={shortcutImgUrl} />
+            <img className="memo-shortcut-img" onClick={handleDownloadBtnClick} src={shortcutImgUrl} />
           </Only>
           <span className="time-text">{memo.createdAtStr}</span>
           <div className="memo-content-text" dangerouslySetInnerHTML={{ __html: formatMemoContent(memo.content) }}></div>

web/src/less/preview-image-dialog.less

@@ -7,11 +7,15 @@
     @apply flex flex-col justify-center items-center relative w-full h-full p-0;
     background-color: unset;
 
-    > .close-btn {
-      @apply fixed top-8 right-8 w-8 h-8 p-1 cursor-pointer rounded opacity-90 bg-gray-300 z-10 shadow-md hover:opacity-70;
+    > .btns-container {
+      @apply fixed top-8 right-8 flex flex-col justify-start items-center;
 
-      > .icon-img {
-        @apply w-6 h-auto;
+      > .btn {
+        @apply mb-3 last:mb-0 w-8 h-8 p-1 cursor-pointer rounded opacity-90 bg-gray-300 z-10 shadow-md hover:opacity-70;
+
+        > .icon-img {
+          @apply w-6 h-auto;
+        }
       }
     }