feat: share memo dialog (#618)

* feat: new share dialog

* update

* update

* update

* update

web/src/components/ShareMemoImageDialog.tsx

-import { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { userService } from "../services";
+import copy from "copy-to-clipboard";
+import { toLower } from "lodash";
 import toImage from "../labs/html2image";
-import { ANIMATION_DURATION } from "../helpers/consts";
+import { ANIMATION_DURATION, VISIBILITY_SELECTOR_ITEMS } from "../helpers/consts";
 import * as utils from "../helpers/utils";
 import { getMemoStats } from "../helpers/api";
+import { memoService, userService } from "../services";
 import useLoading from "../hooks/useLoading";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
+import toastHelper from "./Toast";
 import MemoContent from "./MemoContent";
 import MemoResources from "./MemoResources";
+import Selector from "./common/Selector";
 import "../less/share-memo-image-dialog.less";
 
 interface Props extends DialogProps {
@@ -19,6 +23,7 @@ interface Props extends DialogProps {
 interface State {
   memoAmount: number;
   shortcutImgUrl: string;
+  memoVisibility: string;
 }
 
 const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
@@ -28,6 +33,7 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
   const [state, setState] = useState<State>({
     memoAmount: 0,
     shortcutImgUrl: "",
+    memoVisibility: propsMemo.visibility,
   });
   const loadingState = useLoading();
   const memoElRef = useRef<HTMLDivElement>(null);
@@ -64,7 +70,7 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
       }
 
       toImage(memoElRef.current, {
-        backgroundColor: "#eaeaea",
+        backgroundColor: "#f4f4f5",
         pixelRatio: window.devicePixelRatio * 2,
       })
         .then((url) => {
@@ -92,6 +98,30 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
     a.click();
   };
 
+  const handleCopyLinkBtnClick = () => {
+    copy(`${window.location.origin}/m/${memo.id}`);
+    toastHelper.success(t("message.succeed-copy-content"));
+  };
+
+  const memoVisibilityOptionSelectorItems = VISIBILITY_SELECTOR_ITEMS.map((item) => {
+    return {
+      value: item.value,
+      text: t(`memo.visibility.${toLower(item.value)}`),
+    };
+  });
+
+  const handleMemoVisibilityOptionChanged = async (value: string) => {
+    const visibilityValue = value as Visibility;
+    setState({
+      ...state,
+      memoVisibility: visibilityValue,
+    });
+    await memoService.patchMemo({
+      id: memo.id,
+      visibility: visibilityValue,
+    });
+  };
+
   return (
     <>
       <div className="dialog-header-container">
@@ -104,13 +134,8 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
         </button>
       </div>
       <div className="dialog-content-container">
-        <div className={`tip-words-container ${state.shortcutImgUrl ? "finish" : "loading"}`}>
-          <p className="tip-text">
-            {state.shortcutImgUrl ? t("message.click-to-save-the-image") + " 👇" : t("message.generating-the-screenshot")}
-          </p>
-        </div>
         <div className="memo-container" ref={memoElRef}>
-          {state.shortcutImgUrl !== "" && <img className="memo-shortcut-img" onClick={handleDownloadBtnClick} src={state.shortcutImgUrl} />}
+          {state.shortcutImgUrl !== "" && <img className="memo-shortcut-img" src={state.shortcutImgUrl} />}
           <span className="time-text">{memo.createdAtStr}</span>
           <div className="memo-content-wrapper">
             <MemoContent content={memo.content} displayConfig={{ enableExpand: false }} />
@@ -126,6 +151,30 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
             <img className="logo-img" src="/logo.webp" alt="" />
           </div>
         </div>
+        <div className="share-actions-container">
+          <div className="visibility-selector">
+            <Selector
+              className="visibility-selector"
+              value={state.memoVisibility}
+              dataSource={memoVisibilityOptionSelectorItems}
+              handleValueChanged={handleMemoVisibilityOptionChanged}
+            />
+          </div>
+          <div className="share-btns-container">
+            <div className="buttons-wrapper">
+              <div className="share-btn share-image-btn" onClick={handleDownloadBtnClick}>
+                <Icon.Download className="icon-img" />
+                <span>{t("common.image")}</span>
+              </div>
+            </div>
+            <div className="buttons-wrapper">
+              <div className="share-btn share-link-btn" onClick={handleCopyLinkBtnClick}>
+                <Icon.Link className="icon-img" />
+                <span>{t("common.link")}</span>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </>
   );

web/src/less/share-memo-image-dialog.less

 .share-memo-image-dialog {
   > .dialog-container {
-    @apply w-96 p-0 bg-gray-200;
+    @apply w-96 p-0 bg-zinc-100;
 
     > .dialog-header-container {
       @apply py-2 pt-4 px-4 pl-6 mb-0 bg-white rounded-t-lg;
@@ -58,7 +58,7 @@
         }
 
         > .watermark-container {
-          @apply flex flex-row justify-between items-center w-full py-3 px-6;
+          @apply flex flex-row justify-between items-center w-full py-2 px-6;
 
           > .normal-text {
             @apply w-full flex flex-row justify-start items-center text-sm leading-6 text-gray-500;
@@ -85,6 +85,38 @@
           }
         }
       }
+
+      .share-actions-container{
+        @apply flex justify-between px-4 py-3 mb-0 bg-white w-full rounded-b-lg border-t;
+
+        > .visibility-selector{
+          @apply  w-36;
+
+          > .selector-wrapper{
+            @apply h-10;
+          }
+        }
+
+        > .share-btns-container{
+          @apply flex justify-end;
+
+          > .buttons-wrapper {
+          @apply flex flex-row justify-start items-center;
+
+            > .share-btn{
+            @apply text-sm cursor-pointer px-3 py-2 rounded flex flex-row justify-center items-center border bg-gray-50 hover:bg-gray-100;
+
+              > .icon-img {
+              @apply w-4 h-auto mr-1;
+              }
+            }
+
+            > .share-image-btn {
+            @apply mr-3;
+            }
+          }
+        }
+      }
     }
   }
 }

web/src/locales/en.json

@@ -43,7 +43,9 @@
     "changed": "changed",
     "update-on": "Update on",
     "fold": "Fold",
-    "expand": "Expand"
+    "expand": "Expand",
+    "image": "Image",
+    "link": "Link"
   },
   "slogan": "An open-source, self-hosted memo hub for knowledge management and collaboration.",
   "auth": {
@@ -194,6 +196,7 @@
     "private-only": "This memo is private only.",
     "copied": "Copied",
     "succeed-copy-content": "Succeed to copy content to clipboard.",
+    "succeed-copy-link": "Succeed to copy link to clipboard.",
     "change-resource-filename": "Change resource filename",
     "resource-filename-updated": "Resource filename changed.",
     "invalid-resource-filename": "Invalid filename.",

web/src/locales/fr.json

@@ -43,7 +43,9 @@
     "changed": "modifié",
     "update-on": "Mise à jour sur",
     "fold": "Plier",
-    "expand": "Développer"
+    "expand": "Développer",
+    "image": "Image",
+    "link": "Link"
   },
   "slogan": "Un hub de mémos open source et auto-hébergé pour la gestion des connaissances et la collaboration.",
   "auth": {
@@ -189,6 +191,7 @@
     "private-only": "Ce mémo est uniquement privé.",
     "copied": "Copié",
     "succeed-copy-content": "La copie dans le presse-papiers a été effectuée avec succès",
+    "succeed-copy-link": "Succeed to copy link to clipboard.",
     "change-resource-filename": "Changer le nom du fichier de ressources",
     "resource-filename-updated": "Le nom de fichier de la ressource a changé.",
     "invalid-resource-filename": "Nom de fichier invalide.",

web/src/locales/vi.json

@@ -43,7 +43,9 @@
     "changed": "đã thay đổi",
     "update-on": "Cập nhật",
     "fold": "Fold",
-    "expand": "Expand"
+    "expand": "Expand",
+    "image": "Image",
+    "link": "Link"
   },
   "slogan": "An open-source, self-hosted memo hub for knowledge management and collaboration.",
   "auth": {
@@ -188,6 +190,7 @@
     "private-only": "Memo này có trạng thái riêng tư.",
     "copied": "Đã sao chép",
     "succeed-copy-content": "Đã sao chép nội dung memo thành công.",
+    "succeed-copy-link": "Succeed to copy link to clipboard.",
     "change-resource-filename": "Thay đổi tên tệp tài nguyên",
     "resource-filename-updated": "Tên tệp tài nguyên đã thay đổi.",
     "invalid-resource-filename": "Tên tệp không hợp lệ.",

web/src/locales/zh.json

@@ -43,7 +43,9 @@
     "changed": "已更改",
     "update-on": "更新于",
     "fold": "折叠",
-    "expand": "展开"
+    "expand": "展开",
+    "image": "图片",
+    "link": "链接"
   },
   "slogan": "An open-source, self-hosted memo hub for knowledge management and collaboration.",
   "auth": {
@@ -194,6 +196,7 @@
     "private-only": "此 Memo 仅自己可见",
     "copied": "已复制",
     "succeed-copy-content": "复制内容到剪贴板成功。",
+    "succeed-copy-link": "复制链接到剪贴板成功。",
     "change-resource-filename": "更改资源文件名",
     "resource-filename-updated": "资源文件名更改成功。",
     "invalid-resource-filename": "无效的资源文件名",