diff --git a/web/src/components/ShareMemoImageDialog.tsx b/web/src/components/ShareMemoImageDialog.tsx index 35a83312..db140bca 100644 --- 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) => { @@ -28,6 +33,7 @@ const ShareMemoImageDialog: React.FC = (props: Props) => { const [state, setState] = useState({ memoAmount: 0, shortcutImgUrl: "", + memoVisibility: propsMemo.visibility, }); const loadingState = useLoading(); const memoElRef = useRef(null); @@ -64,7 +70,7 @@ const ShareMemoImageDialog: React.FC = (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) => { 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 ( <>
@@ -104,13 +134,8 @@ const ShareMemoImageDialog: React.FC = (props: Props) => {
-
-

- {state.shortcutImgUrl ? t("message.click-to-save-the-image") + " 👇" : t("message.generating-the-screenshot")} -

-
- {state.shortcutImgUrl !== "" && } + {state.shortcutImgUrl !== "" && } {memo.createdAtStr}
@@ -126,6 +151,30 @@ const ShareMemoImageDialog: React.FC = (props: Props) => {
+
+
+ +
+
+
+
+ + {t("common.image")} +
+
+
+
+ + {t("common.link")} +
+
+
+
); diff --git a/web/src/less/share-memo-image-dialog.less b/web/src/less/share-memo-image-dialog.less index dcef0274..dc4d29f1 100644 --- 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; + } + } + } + } } } } diff --git a/web/src/locales/en.json b/web/src/locales/en.json index 3f71959b..38e200e1 100644 --- 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.", diff --git a/web/src/locales/fr.json b/web/src/locales/fr.json index 250d816d..4d32e439 100644 --- 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.", diff --git a/web/src/locales/vi.json b/web/src/locales/vi.json index 7f495ea0..75c81403 100644 --- 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ệ.", diff --git a/web/src/locales/zh.json b/web/src/locales/zh.json index 9294c641..46fb3dab 100644 --- 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": "无效的资源文件名",