feat: share memo dialog (#618)

* feat: new share dialog * update * update * update * update
2025-06-05 22:09:59 +02:00 · 2022-11-28 21:20:35 +08:00
parent b67a37453d
commit 12b81781b9
6 changed files with 109 additions and 16 deletions
--- a/web/src/components/ShareMemoImageDialog.tsx
+++ b/web/src/components/ShareMemoImageDialog.tsx
@@ -1,15 +1,19 @@
-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>
    </>
  );
--- a/web/src/less/share-memo-image-dialog.less
+++ b/web/src/less/share-memo-image-dialog.less
@@ -1,6 +1,6 @@
 .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;
+            }
+          }
+        }
+      }
    }
  }
 }
--- a/web/src/locales/en.json
+++ b/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.",
--- a/web/src/locales/fr.json
+++ b/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.",
--- a/web/src/locales/vi.json
+++ b/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ệ.",
--- a/web/src/locales/zh.json
+++ b/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": "无效的资源文件名",