From df30304d0025b6221c288eb95747237bcd2e684f Mon Sep 17 00:00:00 2001
From: boojack <stevenlgtm@gmail.com>
Date: Sun, 9 Apr 2023 11:38:30 +0800
Subject: [PATCH] chore: update share memo buttons (#1498)

---
 web/src/components/Memo.tsx            | 17 ----------
 web/src/components/ShareMemoDialog.tsx | 46 ++++++++++++++++----------
 web/src/less/share-memo-dialog.less    |  2 +-
 web/src/locales/en.json                |  5 +--
 4 files changed, 32 insertions(+), 38 deletions(-)

diff --git a/web/src/components/Memo.tsx b/web/src/components/Memo.tsx
index f4a2dcf9..818a6b62 100644
--- a/web/src/components/Memo.tsx
+++ b/web/src/components/Memo.tsx
@@ -1,4 +1,3 @@
-import copy from "copy-to-clipboard";
 import dayjs from "dayjs";
 import { memo, useEffect, useRef, useState } from "react";
 import { toast } from "react-hot-toast";
@@ -12,7 +11,6 @@ import MemoContent from "./MemoContent";
 import MemoResources from "./MemoResources";
 import showShareMemo from "./ShareMemoDialog";
 import showPreviewImageDialog from "./PreviewImageDialog";
-import showEmbedMemoDialog from "./EmbedMemoDialog";
 import showChangeMemoCreatedTsDialog from "./ChangeMemoCreatedTsDialog";
 import "@/less/memo.less";
 
@@ -58,15 +56,6 @@ const Memo: React.FC<Props> = (props: Props) => {
     navigate(`/m/${memo.id}`);
   };
 
-  const handleShowEmbedMemoDialog = () => {
-    showEmbedMemoDialog(memo.id);
-  };
-
-  const handleCopyLink = () => {
-    copy(`${window.location.origin}/m/${memo.id}`);
-    toast.success(t("message.succeed-copy-link"));
-  };
-
   const handleTogglePinMemoBtnClick = async () => {
     try {
       if (memo.pinned) {
@@ -253,15 +242,9 @@ const Memo: React.FC<Props> = (props: Props) => {
                     />
                   </Tooltip>
                 </div>
-                <span className="btn" onClick={handleCopyLink}>
-                  {t("memo.copy-link")}
-                </span>
                 <span className="btn" onClick={handleViewMemoDetailPage}>
                   {t("memo.view-detail")}
                 </span>
-                <span className="btn" onClick={handleShowEmbedMemoDialog}>
-                  {t("memo.embed")}
-                </span>
                 <span className="btn text-orange-500" onClick={handleArchiveMemoClick}>
                   {t("common.archive")}
                 </span>
diff --git a/web/src/components/ShareMemoDialog.tsx b/web/src/components/ShareMemoDialog.tsx
index 77498941..def2982b 100644
--- a/web/src/components/ShareMemoDialog.tsx
+++ b/web/src/components/ShareMemoDialog.tsx
@@ -15,6 +15,7 @@ import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
 import MemoContent from "./MemoContent";
 import MemoResources from "./MemoResources";
+import showEmbedMemoDialog from "./EmbedMemoDialog";
 import "@/less/share-memo-dialog.less";
 
 interface Props extends DialogProps {
@@ -96,6 +97,10 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
       });
   };
 
+  const handleShowEmbedMemoDialog = () => {
+    showEmbedMemoDialog(memo.id);
+  };
+
   const handleCopyLinkBtnClick = () => {
     copy(`${window.location.origin}/m/${memo.id}`);
     toast.success(t("message.succeed-copy-link"));
@@ -121,14 +126,15 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
 
   return (
     <>
-      <div className="dialog-header-container py-3 px-4 pl-6 !mb-0 rounded-t-lg">
+      <div className="dialog-header-container py-3 px-4 !mb-0 rounded-t-lg">
         <p className="">{t("common.share")} Memo</p>
         <button className="btn close-btn" onClick={handleCloseBtnClick}>
           <Icon.X className="icon-img" />
         </button>
       </div>
       <div className="dialog-content-container w-full flex flex-col justify-start items-start relative">
-        <div className="px-4 pb-3 border-b w-full flex flex-row justify-between items-center">
+        <div className="px-4 pb-3 w-full flex flex-row justify-start items-center">
+          <span className="text-sm mr-2">{t("common.visibility")}:</span>
           <Select
             className="!min-w-[10rem] w-auto text-sm"
             value={state.memoVisibility}
@@ -144,24 +150,28 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
               </Option>
             ))}
           </Select>
-          <div className="flex flex-row justify-end items-center">
-            <button disabled={createLoadingState.isLoading} className="btn-normal h-8 mr-2" onClick={handleDownloadBtnClick}>
-              {createLoadingState.isLoading ? (
-                <Icon.Loader className="w-4 h-auto sm:mr-1 animate-spin" />
-              ) : (
-                <Icon.Download className="w-4 h-auto sm:mr-1" />
-              )}
-              <span className="hidden sm:block">{t("common.image")}</span>
-            </button>
-            <button className="btn-normal h-8" onClick={handleCopyLinkBtnClick}>
-              <Icon.Link className="w-4 h-auto sm:mr-1" />
-              <span className="hidden sm:block">{t("common.link")}</span>
-            </button>
-          </div>
         </div>
-        <div className="w-full rounded-lg overflow-clip">
+        <div className="px-4 pb-3 w-full flex flex-row justify-start items-center space-x-2">
+          <button disabled={createLoadingState.isLoading} className="btn-normal h-8" onClick={handleDownloadBtnClick}>
+            {createLoadingState.isLoading ? (
+              <Icon.Loader className="w-4 h-auto mr-1 animate-spin" />
+            ) : (
+              <Icon.Download className="w-4 h-auto mr-1" />
+            )}
+            {t("common.image")}
+          </button>
+          <button className="btn-normal h-8" onClick={handleShowEmbedMemoDialog}>
+            <Icon.Code className="w-4 h-auto mr-1" />
+            {t("memo.embed")}
+          </button>
+          <button className="btn-normal h-8" onClick={handleCopyLinkBtnClick}>
+            <Icon.Link className="w-4 h-auto mr-1" />
+            {t("common.link")}
+          </button>
+        </div>
+        <div className="w-full rounded-lg border-t overflow-clip">
           <div
-            className="w-96 max-w-full h-auto select-none relative flex flex-col justify-start items-start bg-white dark:bg-zinc-800"
+            className="w-full h-auto select-none relative flex flex-col justify-start items-start bg-white dark:bg-zinc-800"
             ref={memoElRef}
           >
             <span className="w-full px-6 pt-5 pb-2 text-sm text-gray-500">{memo.createdAtStr}</span>
diff --git a/web/src/less/share-memo-dialog.less b/web/src/less/share-memo-dialog.less
index ca0427b6..48fc1601 100644
--- a/web/src/less/share-memo-dialog.less
+++ b/web/src/less/share-memo-dialog.less
@@ -1,5 +1,5 @@
 .share-memo-dialog {
   > .dialog-container {
-    @apply w-96 max-w-full p-0 bg-white dark:bg-zinc-800;
+    @apply w-112 max-w-full p-0 bg-white dark:bg-zinc-800;
   }
 }
diff --git a/web/src/locales/en.json b/web/src/locales/en.json
index 217affed..fccf7929 100644
--- a/web/src/locales/en.json
+++ b/web/src/locales/en.json
@@ -51,7 +51,8 @@
     "preview": "Preview",
     "rename": "Rename",
     "clear": "Clear",
-    "name": "Name"
+    "name": "Name",
+    "visibility": "Visibility"
   },
   "router": {
     "back-to-home": "Back to Home"
@@ -76,7 +77,7 @@
   "memo": {
     "view-detail": "View Detail",
     "copy-link": "Copy Link",
-    "embed": "Embed memo",
+    "embed": "Embed",
     "archived-memos": "Archived Memos",
     "no-archived-memos": "No archived memos.",
     "fetching-data": "fetching data...",