From 8cb96759651455927bc86c7ac10088371ed4ac6e Mon Sep 17 00:00:00 2001
From: boojack <imrealleonardo@gmail.com>
Date: Tue, 28 Jun 2022 21:56:06 +0800
Subject: [PATCH] chore: download image by one click (#94)

chore: download image by clicking
---
 web/public/icons/download.svg               |  1 +
 web/src/components/PreviewImageDialog.tsx   | 20 ++++++++++++++++----
 web/src/components/ShareMemoImageDialog.tsx | 11 +++++++++--
 web/src/less/preview-image-dialog.less      | 12 ++++++++----
 4 files changed, 34 insertions(+), 10 deletions(-)
 create mode 100644 web/public/icons/download.svg

diff --git a/web/public/icons/download.svg b/web/public/icons/download.svg
new file mode 100644
index 000000000..4726effda
--- /dev/null
+++ b/web/public/icons/download.svg
@@ -0,0 +1 @@
+<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
diff --git a/web/src/components/PreviewImageDialog.tsx b/web/src/components/PreviewImageDialog.tsx
index fa254f4aa..734bd4ca6 100644
--- a/web/src/components/PreviewImageDialog.tsx
+++ b/web/src/components/PreviewImageDialog.tsx
@@ -1,4 +1,5 @@
 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>
diff --git a/web/src/components/ShareMemoImageDialog.tsx b/web/src/components/ShareMemoImageDialog.tsx
index 44459a523..8856d1818 100644
--- a/web/src/components/ShareMemoImageDialog.tsx
+++ b/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>
diff --git a/web/src/less/preview-image-dialog.less b/web/src/less/preview-image-dialog.less
index d041a2ff9..51c78688c 100644
--- a/web/src/less/preview-image-dialog.less
+++ b/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;
+        }
       }
     }