Skip to content

C
canifa_note
Unverified Commit 8cdc6627 authored by boojack's avatar boojack Committed by GitHub
Browse files
Options

chore: update memo visibility display (#1485)

parent 204c03e7
Hide whitespace changes
Inline Side-by-side
Showing with 71 additions and 164 deletions
web/src/components/Memo.tsx
View file @ 8cdc6627
......@@ -60,11 +60,6 @@ const Memo: React.FC<Props> = (props: Props) => {
showEmbedMemoDialog(memo.id);
};
const handleCopyContent = () => {
copy(memo.content);
toast.success(t("message.succeed-copy-content"));
};
const handleCopyLink = () => {
copy(`${window.location.origin}/m/${memo.id}`);
toast.success(t("message.succeed-copy-link"));
......@@ -210,7 +205,7 @@ const Memo: React.FC<Props> = (props: Props) => {
className={`status-text ${memo.visibility.toLocaleLowerCase()}`}
onClick={() => handleMemoVisibilityClick(memo.visibility)}
>
{t(`visibility.${memo.visibility}`)}
{t(`memo.visibility.${memo.visibility.toLowerCase()}`)}
</span>
)}
</div>
......@@ -235,9 +230,6 @@ const Memo: React.FC<Props> = (props: Props) => {
<span className="tip-text">{t("common.share")}</span>
</div>
</div>
<span className="btn" onClick={handleCopyContent}>
{t("memo.copy")}
</span>
<span className="btn" onClick={handleCopyLink}>
{t("memo.copy-link")}
</span>
......
web/src/components/SearchBar.tsx
View file @ 8cdc6627
import { useEffect, useState, useRef } from "react";
import { useTranslation } from "react-i18next";
import useDebounce from "@/hooks/useDebounce";
import { useFilterStore, useDialogStore, useLayoutStore } from "@/store/module";
import { resolution } from "@/utils/layout";
import { useFilterStore, useDialogStore } from "@/store/module";
import Icon from "./Icon";
const SearchBar = () => {
const { t } = useTranslation();
const filterStore = useFilterStore();
const dialogStore = useDialogStore();
const layoutStore = useLayoutStore();
const [queryText, setQueryText] = useState("");
const inputRef = useRef<HTMLInputElement>(null);
......@@ -39,14 +37,6 @@ const SearchBar = () => {
setQueryText(text === undefined ? "" : text);
}, [filterStore.state.text]);
useEffect(() => {
if (layoutStore.state.showHomeSidebar) {
if (window.innerWidth < resolution.sm) {
inputRef.current?.focus();
}
}
}, [layoutStore.state.showHomeSidebar]);
useDebounce(
() => {
filterStore.setTextFilter(queryText.length === 0 ? undefined : queryText);
......
web/src/components/ShareMemoDialog.tsx
View file @ 8cdc6627
......@@ -23,7 +23,8 @@ interface Props extends DialogProps {
interface State {
memoAmount: number;
memoVisibility: string;
memoVisibility: Visibility;
showQRCode: boolean;
}
const ShareMemoDialog: React.FC<Props> = (props: Props) => {
......@@ -37,6 +38,7 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
const [state, setState] = useState<State>({
memoAmount: 0,
memoVisibility: propsMemo.visibility,
showQRCode: true,
});
const createLoadingState = useLoading(false);
const loadingState = useLoading();
......@@ -50,11 +52,8 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
useEffect(() => {
getMemoStats(user.id)
.then(({ data: { data } }) => {
setState((state) => {
return {
...state,
memoAmount: data.length,
};
setPartialState({
memoAmount: data.length,
});
loadingState.setFinish();
})
......@@ -63,6 +62,13 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
});
}, []);
const setPartialState = (partialState: Partial<State>) => {
setState({
...state,
...partialState,
});
};
const handleCloseBtnClick = () => {
destroy();
};
......@@ -104,8 +110,7 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
const handleMemoVisibilityOptionChanged = async (value: string) => {
const visibilityValue = value as Visibility;
setState({
...state,
setPartialState({
memoVisibility: visibilityValue,
});
await memoStore.patchMemo({
......@@ -116,39 +121,14 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
return (
<>
<div className="dialog-header-container">
<p className="title-text">{t("common.share")} Memo</p>
<div className="dialog-header-container py-3 px-4 pl-6 !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">
<div className="memo-container" ref={memoElRef}>
<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">
<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">
<Select
className="!min-w-[10rem] w-auto text-sm"
value={state.memoVisibility}
......@@ -179,6 +159,36 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
</button>
</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>
</>
);
......
web/src/less/memo-editor.less
View file @ 8cdc6627
......@@ -121,10 +121,10 @@
@apply h-8;
> .current-value-container {
@apply rounded-full;
@apply rounded-full px-3;
> .value-text {
@apply text-sm w-full;
@apply text-sm w-full mr-1;
}
}
}
......
web/src/less/memo.less
View file @ 8cdc6627
......@@ -34,7 +34,7 @@
}
> .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 {
@apply border-green-600 text-green-600;
......
web/src/less/share-memo-dialog.less
View file @ 8cdc6627
.share-memo-dialog {
> .dialog-container {
@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;
}
}
}
}
}
}
}
web/src/locales/en.json
View file @ 8cdc6627
......@@ -75,8 +75,7 @@
},
"memo": {
"view-detail": "View Detail",
"copy": "Copy",
"copy-link":"Copy Link",
"copy-link": "Copy Link",
"embed": "Embed memo",
"archived-memos": "Archived Memos",
"no-archived-memos": "No archived memos.",
......@@ -85,9 +84,9 @@
"archived-at": "Archived at",
"search-placeholder": "Search memos",
"visibility": {
"private": "Only visible to you",
"private": "Private",
"protected": "Visible to members",
"public": "Everyone can see",
"public": "Public to everyone",
"disabled": "Public memos are disabled"
}
},
......
web/src/store/module/global.ts
View file @ 8cdc6627
......@@ -33,28 +33,23 @@ export const initialGlobalState = async () => {
defaultGlobalState.appearance = storageAppearance;
}
try {
const { data } = (await api.getSystemStatus()).data;
if (data) {
const customizedProfile = data.customizedProfile;
defaultGlobalState.systemStatus = {
...data,
customizedProfile: {
name: customizedProfile.name || "memos",
logoUrl: customizedProfile.logoUrl || "/logo.webp",
description: customizedProfile.description,
locale: customizedProfile.locale || "en",
appearance: customizedProfile.appearance || "system",
externalUrl: "",
},
};
defaultGlobalState.locale = storageLocale || convertLanguageCodeToLocale(i18n.language);
defaultGlobalState.appearance = customizedProfile.appearance;
}
} catch (error) {
// do nth
const { data } = (await api.getSystemStatus()).data;
if (data) {
const customizedProfile = data.customizedProfile;
defaultGlobalState.systemStatus = {
...data,
customizedProfile: {
name: customizedProfile.name || "memos",
logoUrl: customizedProfile.logoUrl || "/logo.webp",
description: customizedProfile.description,
locale: customizedProfile.locale || "en",
appearance: customizedProfile.appearance || "system",
externalUrl: "",
},
};
defaultGlobalState.locale = storageLocale || convertLanguageCodeToLocale(i18n.language);
defaultGlobalState.appearance = customizedProfile.appearance;
}
store.dispatch(setGlobalState(defaultGlobalState));
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment