aiden
/
memos
mirror of https://github.com/usememos/memos
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: update memo visibility display (#1485)

Browse Source
pull/1490/head
boojack 2 years ago committed by GitHub
parent 204c03e772
commit 8cdc662745
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 71 additions and 164 deletions
Show Stats Download Patch File Download Diff File

10
web/src/components/Memo.tsx
Unescape Escape View File

@ -60,11 +60,6 @@ const Memo: React.FC<Props> = (props: Props) => {
showEmbedMemoDialog(memo.id); showEmbedMemoDialog(memo.id);
}; };
const handleCopyContent = () => {
copy(memo.content);
toast.success(t("message.succeed-copy-content"));
};
const handleCopyLink = () => { const handleCopyLink = () => {
copy(`${window.location.origin}/m/${memo.id}`); copy(`${window.location.origin}/m/${memo.id}`);
toast.success(t("message.succeed-copy-link")); toast.success(t("message.succeed-copy-link"));
@ -210,7 +205,7 @@ const Memo: React.FC<Props> = (props: Props) => {
className={`status-text ${memo.visibility.toLocaleLowerCase()}`} className={`status-text ${memo.visibility.toLocaleLowerCase()}`}
onClick={() => handleMemoVisibilityClick(memo.visibility)} onClick={() => handleMemoVisibilityClick(memo.visibility)}
> >
{t(`visibility.${memo.visibility}`)} {t(`memo.visibility.${memo.visibility.toLowerCase()}`)}
</span> </span>
)} )}
</div> </div>
@ -235,9 +230,6 @@ const Memo: React.FC<Props> = (props: Props) => {
<span className="tip-text">{t("common.share")}</span> <span className="tip-text">{t("common.share")}</span>
</div> </div>
</div> </div>
<span className="btn" onClick={handleCopyContent}>
{t("memo.copy")}
</span>
<span className="btn" onClick={handleCopyLink}> <span className="btn" onClick={handleCopyLink}>
{t("memo.copy-link")} {t("memo.copy-link")}
</span> </span>

12
web/src/components/SearchBar.tsx
Unescape Escape View File

@ -1,15 +1,13 @@
import { useEffect, useState, useRef } from "react"; import { useEffect, useState, useRef } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import useDebounce from "@/hooks/useDebounce"; import useDebounce from "@/hooks/useDebounce";
import { useFilterStore, useDialogStore, useLayoutStore } from "@/store/module"; import { useFilterStore, useDialogStore } from "@/store/module";
import { resolution } from "@/utils/layout";
import Icon from "./Icon"; import Icon from "./Icon";
const SearchBar = () => { const SearchBar = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const filterStore = useFilterStore(); const filterStore = useFilterStore();
const dialogStore = useDialogStore(); const dialogStore = useDialogStore();
const layoutStore = useLayoutStore();
const [queryText, setQueryText] = useState(""); const [queryText, setQueryText] = useState("");
const inputRef = useRef<HTMLInputElement>(null); const inputRef = useRef<HTMLInputElement>(null);
@ -39,14 +37,6 @@ const SearchBar = () => {
setQueryText(text === undefined ? "" : text); setQueryText(text === undefined ? "" : text);
}, [filterStore.state.text]); }, [filterStore.state.text]);
useEffect(() => {
if (layoutStore.state.showHomeSidebar) {
if (window.innerWidth < resolution.sm) {
inputRef.current?.focus();
}
}
}, [layoutStore.state.showHomeSidebar]);
useDebounce( useDebounce(
() => { () => {
filterStore.setTextFilter(queryText.length === 0 ? undefined : queryText); filterStore.setTextFilter(queryText.length === 0 ? undefined : queryText);

84
web/src/components/ShareMemoDialog.tsx
Unescape Escape View File

@ -23,7 +23,8 @@ interface Props extends DialogProps {
interface State { interface State {
memoAmount: number; memoAmount: number;
memoVisibility: string; memoVisibility: Visibility;
showQRCode: boolean;
} }
const ShareMemoDialog: React.FC<Props> = (props: Props) => { const ShareMemoDialog: React.FC<Props> = (props: Props) => {
@ -37,6 +38,7 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
const [state, setState] = useState<State>({ const [state, setState] = useState<State>({
memoAmount: 0, memoAmount: 0,
memoVisibility: propsMemo.visibility, memoVisibility: propsMemo.visibility,
showQRCode: true,
}); });
const createLoadingState = useLoading(false); const createLoadingState = useLoading(false);
const loadingState = useLoading(); const loadingState = useLoading();
@ -50,11 +52,8 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
useEffect(() => { useEffect(() => {
getMemoStats(user.id) getMemoStats(user.id)
.then(({ data: { data } }) => { .then(({ data: { data } }) => {
setState((state) => { setPartialState({
return { memoAmount: data.length,
...state,
memoAmount: data.length,
};
}); });
loadingState.setFinish(); loadingState.setFinish();
}) })
@ -63,6 +62,13 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
}); });
}, []); }, []);
const setPartialState = (partialState: Partial<State>) => {
setState({
...state,
...partialState,
});
};
const handleCloseBtnClick = () => { const handleCloseBtnClick = () => {
destroy(); destroy();
}; };
@ -104,8 +110,7 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
const handleMemoVisibilityOptionChanged = async (value: string) => { const handleMemoVisibilityOptionChanged = async (value: string) => {
const visibilityValue = value as Visibility; const visibilityValue = value as Visibility;
setState({ setPartialState({
...state,
memoVisibility: visibilityValue, memoVisibility: visibilityValue,
}); });
await memoStore.patchMemo({ await memoStore.patchMemo({
@ -116,39 +121,14 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
return ( return (
<> <>
<div className="dialog-header-container"> <div className="dialog-header-container py-3 px-4 pl-6 !mb-0 rounded-t-lg">
<p className="title-text">{t("common.share")} Memo</p> <p className="">{t("common.share")} Memo</p>
<button className="btn close-btn" onClick={handleCloseBtnClick}> <button className="btn close-btn" onClick={handleCloseBtnClick}>
<Icon.X className="icon-img" /> <Icon.X className="icon-img" />
</button> </button>
</div> </div>
<div className="dialog-content-container"> <div className="dialog-content-container w-full flex flex-col justify-start items-start relative">
<div className="memo-container" ref={memoElRef}> <div className="px-4 pb-3 border-b w-full flex flex-row justify-between items-center">
<span className="time-text">{memo.createdAtStr}</span>
<div className="memo-content-wrapper">
<MemoContent content={memo.content} showFull={true} />
<MemoResources resourceList={memo.resourceList} />
</div>
<div className="watermark-container">
<div className="logo-container">
<img className="h-10 w-auto rounded-lg" src={`${systemStatus.customizedProfile.logoUrl || "/logo.webp"}`} alt="" />
</div>
<div className="userinfo-container">
<span className="name-text">{user.nickname || user.username}</span>
<span className="usage-text">
{state.memoAmount} MEMOS / {createdDays} DAYS
</span>
</div>
<QRCodeSVG
value={`${window.location.origin}/m/${memo.id}`}
size={40}
bgColor={"#F3F4F6"}
fgColor={"#4B5563"}
includeMargin={false}
/>
</div>
</div>
<div className="px-4 py-3 w-full flex flex-row justify-between items-center">
<Select <Select
className="!min-w-[10rem] w-auto text-sm" className="!min-w-[10rem] w-auto text-sm"
value={state.memoVisibility} value={state.memoVisibility}
@ -179,6 +159,36 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
</button> </button>
</div> </div>
</div> </div>
<div className="w-full rounded-lg 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"
ref={memoElRef}
>
<span className="w-full px-6 pt-5 pb-2 text-sm text-gray-500">{memo.createdAtStr}</span>
<div className="w-full px-6 text-base pb-4">
<MemoContent content={memo.content} showFull={true} />
<MemoResources className="!grid-cols-2" resourceList={memo.resourceList} />
</div>
<div className="flex flex-row justify-between items-center w-full bg-gray-100 dark:bg-zinc-700 py-4 px-6">
<div className="mr-2">
<img className="h-10 w-auto rounded-lg" src={`${systemStatus.customizedProfile.logoUrl || "/logo.webp"}`} alt="" />
</div>
<div className="w-auto grow truncate flex mr-2 flex-col justify-center items-start">
<span className="w-full text-sm truncate font-bold text-gray-600 dark:text-gray-300">{user.nickname || user.username}</span>
<span className="text-xs text-gray-400">
{state.memoAmount} MEMOS / {createdDays} DAYS
</span>
</div>
<QRCodeSVG
value={`${window.location.origin}/m/${memo.id}`}
size={40}
bgColor={"#F3F4F6"}
fgColor={"#4B5563"}
includeMargin={false}
/>
</div>
</div>
</div>
</div> </div>
</> </>
); );

4
web/src/less/memo-editor.less
Unescape Escape View File

@ -121,10 +121,10 @@
@apply h-8; @apply h-8;
> .current-value-container { > .current-value-container {
@apply rounded-full; @apply rounded-full px-3;
> .value-text { > .value-text {
@apply text-sm w-full; @apply text-sm w-full mr-1;
} }
} }
} }

2
web/src/less/memo.less
Unescape Escape View File

@ -34,7 +34,7 @@
} }
> .status-text { > .status-text {
@apply text-sm cursor-pointer ml-2 rounded border px-1; @apply text-xs cursor-pointer ml-2 rounded border px-1;
&.public { &.public {
@apply border-green-600 text-green-600; @apply border-green-600 text-green-600;

79
web/src/less/share-memo-dialog.less
Unescape Escape View File

@ -1,84 +1,5 @@
.share-memo-dialog { .share-memo-dialog {
> .dialog-container { > .dialog-container {
@apply w-96 max-w-full p-0 bg-white dark:bg-zinc-800; @apply w-96 max-w-full p-0 bg-white dark:bg-zinc-800;
> .dialog-header-container {
@apply py-3 px-4 pl-6 mb-0 rounded-t-lg border-b dark:border-b-zinc-600;
}
> .dialog-content-container {
@apply w-full flex flex-col justify-start items-start relative;
min-height: 128px;
> .tip-words-container {
@apply w-full flex flex-col justify-center items-start border-b px-6 py-0 pb-2;
> .tip-text {
@apply text-sm text-gray-500;
}
&.loading {
> .tip-text {
animation: 1s linear 1s infinite alternate breathing;
}
}
@keyframes breathing {
from {
opacity: 1;
}
to {
opacity: 0.4;
}
}
}
> .memo-container {
@apply w-96 max-w-full h-auto select-none relative flex flex-col justify-start items-start bg-white dark:bg-zinc-800;
> .memo-shortcut-img {
@apply absolute top-0 left-0 w-full h-auto z-10;
}
> .time-text {
@apply w-full px-6 pt-5 pb-2 text-sm text-gray-500;
}
> .memo-content-wrapper {
@apply w-full px-6 text-base pb-4;
> .resource-wrapper {
> .images-wrapper {
@apply !grid-cols-2;
}
}
}
> .watermark-container {
@apply flex flex-row justify-between items-center w-full bg-gray-100 dark:bg-zinc-700 py-3 px-6;
> .userinfo-container {
@apply w-auto grow truncate flex mr-2 flex-col justify-center items-start;
> .name-text {
@apply w-full text-sm truncate font-bold text-gray-600 dark:text-gray-300;
}
> .usage-text {
@apply text-xs text-gray-400;
}
}
> .logo-container {
@apply mr-2;
> .logo-img {
@apply h-10 shrink-0 w-auto;
}
}
}
}
}
} }
} }

7
web/src/locales/en.json
Unescape Escape View File

@ -75,8 +75,7 @@
}, },
"memo": { "memo": {
"view-detail": "View Detail", "view-detail": "View Detail",
"copy": "Copy", "copy-link": "Copy Link",
"copy-link":"Copy Link",
"embed": "Embed memo", "embed": "Embed memo",
"archived-memos": "Archived Memos", "archived-memos": "Archived Memos",
"no-archived-memos": "No archived memos.", "no-archived-memos": "No archived memos.",
@ -85,9 +84,9 @@
"archived-at": "Archived at", "archived-at": "Archived at",
"search-placeholder": "Search memos", "search-placeholder": "Search memos",
"visibility": { "visibility": {
"private": "Only visible to you", "private": "Private",
"protected": "Visible to members", "protected": "Visible to members",
"public": "Everyone can see", "public": "Public to everyone",
"disabled": "Public memos are disabled" "disabled": "Public memos are disabled"
} }
}, },

37
web/src/store/module/global.ts
Unescape Escape View File

@ -33,28 +33,23 @@ export const initialGlobalState = async () => {
defaultGlobalState.appearance = storageAppearance; defaultGlobalState.appearance = storageAppearance;
} }
try { const { data } = (await api.getSystemStatus()).data;
const { data } = (await api.getSystemStatus()).data; if (data) {
if (data) { const customizedProfile = data.customizedProfile;
const customizedProfile = data.customizedProfile; defaultGlobalState.systemStatus = {
defaultGlobalState.systemStatus = { ...data,
...data, customizedProfile: {
customizedProfile: { name: customizedProfile.name || "memos",
name: customizedProfile.name || "memos", logoUrl: customizedProfile.logoUrl || "/logo.webp",
logoUrl: customizedProfile.logoUrl || "/logo.webp", description: customizedProfile.description,
description: customizedProfile.description, locale: customizedProfile.locale || "en",
locale: customizedProfile.locale || "en", appearance: customizedProfile.appearance || "system",
appearance: customizedProfile.appearance || "system", externalUrl: "",
externalUrl: "", },
}, };
}; defaultGlobalState.locale = storageLocale || convertLanguageCodeToLocale(i18n.language);
defaultGlobalState.locale = storageLocale || convertLanguageCodeToLocale(i18n.language); defaultGlobalState.appearance = customizedProfile.appearance;
defaultGlobalState.appearance = customizedProfile.appearance;
}
} catch (error) {
// do nth
} }
store.dispatch(setGlobalState(defaultGlobalState)); store.dispatch(setGlobalState(defaultGlobalState));
}; };

Write Preview
Loading…
Cancel
Save