YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-02-20 21:30:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: remove unused visibility selector (#457)

Browse Source
This commit is contained in:
boojack 2022-11-13 10:47:21 +08:00 committed by GitHub
parent 8cc0977a01
commit 2743268fd7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 12 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
web/src/components/MemoCardDialog.tsx
View File

@ -3,7 +3,7 @@ import { useState, useEffect, useCallback } from "react";
import { useTranslation } from "react-i18next";
import { editorStateService, memoService, userService } from "../services";
import { useAppSelector } from "../store";
import { UNKNOWN_ID, VISIBILITY_SELECTOR_ITEMS } from "../helpers/consts";
import { UNKNOWN_ID } from "../helpers/consts";
import * as utils from "../helpers/utils";
import { parseHTMLToRawText } from "../helpers/utils";
import { marked } from "../labs/marked";
@ -11,7 +11,6 @@ import { MARK_REG } from "../labs/marked/parser";
import toastHelper from "./Toast";
import { generateDialog } from "./Dialog";
import Icon from "./Icon";
import Selector from "./common/Selector";
import MemoContent from "./MemoContent";
import MemoResources from "./MemoResources";
import showChangeMemoCreatedTsDialog from "./ChangeMemoCreatedTsDialog";
@ -35,12 +34,6 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
const [linkMemos, setLinkMemos] = useState<LinkedMemo[]>([]);
const [linkedMemos, setLinkedMemos] = useState<LinkedMemo[]>([]);
const isVisitorMode = userService.isVisitorMode();
const visibilitySelectorItems = VISIBILITY_SELECTOR_ITEMS.map((item) => {
return {
value: item.value,
text: t(`memo.visibility.${item.text.toLowerCase()}`),
};
});
useEffect(() => {
const fetchLinkedMemos = async () => {
@ -138,36 +131,8 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
toastHelper.success(t("message.succeed-copy-content"));
};
const handleVisibilitySelectorChange = async (visibility: Visibility) => {
if (memo.visibility === visibility) {
return;
}
await memoService.patchMemo({
id: memo.id,
visibility: visibility,
});
setMemo({
...memo,
visibility: visibility,
});
};
return (
<>
{!isVisitorMode && (
<div className="card-header-container">
<div className="visibility-selector-container">
<Icon.Eye className="icon-img" />
<Selector
className="visibility-selector"
dataSource={visibilitySelectorItems}
value={memo.visibility}
handleValueChanged={(value) => handleVisibilitySelectorChange(value as Visibility)}
/>
</div>
</div>
)}
<div className="memo-card-container">
<div className="header-container">
<p className="time-text" onClick={handleMemoCreatedAtClick}>

2
web/src/components/MemoEditor.tsx
View File

@ -482,7 +482,7 @@ const MemoEditor = () => {
)}
<div className="editor-footer-container">
<Selector
className={`visibility-selector`}
className="visibility-selector"
value={editorState.memoVisibility}
dataSource={memoVisibilityOptionSelectorItems}
handleValueChanged={handleMemoVisibilityOptionChanged}

10
web/src/less/explore.less
View File

@ -1,5 +1,3 @@
@import "./mixin.less";
.page-wrapper.explore {
@apply relative top-0 w-full h-screen overflow-y-auto overflow-x-hidden;
background-color: #f6f5f4;
@ -40,14 +38,10 @@
@apply flex flex-col justify-start items-start w-full p-4 mt-2 bg-white rounded-lg border border-white hover:border-gray-200;
> .memo-header {
@apply mb-2 w-full flex flex-row justify-start items-center text-sm font-mono text-gray-400;
> .split-text {
@apply mx-2;
}
@apply mb-2 w-full flex flex-row justify-start items-center text-sm text-gray-400;
> .name-text {
@apply hover:text-green-600 hover:underline;
@apply ml-2 hover:text-green-600 hover:underline;
}
}

20
web/src/less/memo-card-dialog.less
View File

@ -6,26 +6,6 @@
> .dialog-container {
@apply w-full p-0 bg-transparent flex flex-col justify-start items-center;
> .card-header-container {
@apply z-10 w-128 max-w-full flex flex-row justify-start items-center mb-2;
> .visibility-selector-container {
@apply bg-white px-2 pl-3 py-1 rounded-lg flex flex-row justify-start items-center;
> .icon-img {
@apply mr-1 w-4 h-auto;
}
> .visibility-selector {
@apply w-32;
> .current-value-container {
@apply border-none;
}
}
}
}
> .memo-card-container {
@apply flex flex-col justify-start items-start relative w-128 max-w-full py-3 px-6 mb-3 rounded-lg bg-yellow-200;

30
web/src/less/memo-detail.less
View File

@ -1,5 +1,3 @@
@import "./mixin.less";
.page-wrapper.memo-detail {
@apply relative top-0 w-full h-screen overflow-y-auto overflow-x-hidden;
background-color: #f6f5f4;
@ -44,34 +42,10 @@
@apply mb-2 w-full flex flex-row justify-between items-center;
> .status-container {
@apply flex flex-row justify-start items-center text-sm font-mono text-gray-400;
> .split-text {
@apply mx-2;
}
@apply flex flex-row justify-start items-center text-sm text-gray-400;
> .name-text {
@apply hover:text-green-600 hover:underline;
}
> .visibility-selector {
@apply ml-2;
> .status-text {
@apply flex flex-row justify-start items-center leading-5 text-xs cursor-pointer ml-2 rounded border px-1;
&.public {
@apply border-green-600 text-green-600;
}
&.protected {
@apply border-gray-400 text-gray-400;
}
}
.action-button {
@apply px-2 leading-7 w-full rounded text-gray-600 hover:bg-gray-100;
}
@apply ml-2 hover:text-green-600 hover:underline;
}
}
}

2
web/src/less/memo-editor.less
View File

@ -51,7 +51,7 @@
}
> .common-tools-wrapper {
@apply relative w-full flex flex-row justify-between items-center pt-2;
@apply relative w-full flex flex-row justify-between items-center pt-2 z-1;
> .common-tools-container {
@apply flex flex-row justify-start items-center;

3
web/src/pages/Explore.tsx
View File

@ -82,9 +82,8 @@ const Explore = () => {
<div className="memo-container" key={memo.id}>
<div className="memo-header">
<span className="time-text">{createdAtStr}</span>
<span className="split-text">by</span>
<a className="name-text" href={`/u/${memo.creator.id}`}>
{memo.creator.name}
@{memo.creator.name}
</a>
</div>
<MemoContent className="memo-content" content={memo.content} onMemoContentClick={() => undefined} />

54
web/src/pages/MemoDetail.tsx
View File

@ -48,24 +48,6 @@ const MemoDetail = () => {
}
}, [location]);
const handleVisibilitySelectorChange = async (visibility: Visibility) => {
if (state.memo.visibility === visibility) {
return;
}
await memoService.patchMemo({
id: state.memo.id,
visibility: visibility,
});
setState({
...state,
memo: {
...state.memo,
visibility: visibility,
},
});
};
const handleCopyContent = () => {
copy(state.memo.content);
toastHelper.success(t("message.succeed-copy-content"));
@ -100,37 +82,9 @@ const MemoDetail = () => {
<div className="memo-header">
<div className="status-container">
<span className="time-text">{dayjs(state.memo.displayTs).locale(i18n.language).format("YYYY/MM/DD HH:mm:ss")}</span>
{user?.id === state.memo.creatorId ? (
<Dropdown
className="visibility-selector"
trigger={
<span className={`status-text ${state.memo.visibility.toLowerCase()}`}>
{state.memo.visibility} <Icon.ChevronDown className="w-4 h-auto ml-px" />
</span>
}
actions={
<>
<span className="action-button" onClick={() => handleVisibilitySelectorChange("PRIVATE")}>
Private
</span>
<span className="action-button" onClick={() => handleVisibilitySelectorChange("PROTECTED")}>
Protected
</span>
<span className="action-button" onClick={() => handleVisibilitySelectorChange("PUBLIC")}>
Public
</span>
</>
}
actionsClassName="!w-28 !left-0 !p-1"
/>
) : (
<>
<span className="split-text">by</span>
<a className="name-text" href={`/u/${state.memo.creator.id}`}>
{state.memo.creator.name}
</a>
</>
)}
<a className="name-text" href={`/u/${state.memo.creator.id}`}>
@{state.memo.creator.name}
</a>
</div>
<Dropdown
trigger={<Icon.MoreHorizontal className="ml-2 w-4 h-auto cursor-pointer text-gray-500" />}
@ -141,7 +95,7 @@ const MemoDetail = () => {
className="w-full flex flex-row justify-start items-center px-3 whitespace-nowrap text-sm text-left leading-8 cursor-pointer rounded hover:bg-gray-100"
onClick={handleCopyContent}
>
<Icon.Clipboard className="w-4 h-auto mr-2" /> {t("memo.copy")}
{t("memo.copy")}
</button>
</>
}