YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: update resources page

Browse Source
This commit is contained in:
Steven
2023-09-15 22:25:07 +08:00
parent d1156aa755
commit 723e6bcdae
7 changed files with 71 additions and 400 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/components/ResourceCard.tsx
View File

@ -1,6 +1,5 @@
import { getDateTimeString } from "@/helpers/datetime";
import ResourceIcon from "./ResourceIcon";
import ResourceItemDropdown from "./ResourceItemDropdown";
import "@/less/resource-card.less";
interface Props {
@ -10,13 +9,8 @@ interface Props {
const ResourceCard = ({ resource }: Props) => {
return (
<div className="resource-card">
<div className="w-full p-2 flex flex-row justify-end items-center absolute top-0 left-0">
<div className="more-action-btn">
<ResourceItemDropdown resource={resource} />
</div>
</div>
<div className="w-full flex flex-row justify-center items-center pb-2 pt-4 px-2">
<ResourceIcon resource={resource} strokeWidth={1} />
<ResourceIcon resource={resource} strokeWidth={0.5} />
</div>
<div className="w-full flex flex-col justify-start items-center px-1 select-none">
<div className="w-full text-base text-center text-ellipsis overflow-hidden line-clamp-3">{resource.filename}</div>

93
web/src/components/ResourceItemDropdown.tsx
View File

@ -1,93 +0,0 @@
import copy from "copy-to-clipboard";
import React from "react";
import toast from "react-hot-toast";
import { useResourceStore } from "@/store/module";
import { useTranslate } from "@/utils/i18n";
import { getResourceType, getResourceUrl } from "@/utils/resource";
import showChangeResourceFilenameDialog from "./ChangeResourceFilenameDialog";
import { showCommonDialog } from "./Dialog/CommonDialog";
import Icon from "./Icon";
import showPreviewImageDialog from "./PreviewImageDialog";
import Dropdown from "./kit/Dropdown";
interface Props {
resource: Resource;
}
const ResourceItemDropdown = ({ resource }: Props) => {
const t = useTranslate();
const resourceStore = useResourceStore();
const handlePreviewBtnClick = (resource: Resource) => {
const resourceUrl = getResourceUrl(resource);
if (getResourceType(resource).startsWith("image")) {
showPreviewImageDialog([getResourceUrl(resource)], 0);
} else {
window.open(resourceUrl);
}
};
const handleCopyResourceLinkBtnClick = (resource: Resource) => {
const url = getResourceUrl(resource);
copy(url);
toast.success(t("message.succeed-copy-resource-link"));
};
const handleRenameBtnClick = (resource: Resource) => {
showChangeResourceFilenameDialog(resource.id, resource.filename);
};
const handleDeleteResourceBtnClick = (resource: Resource) => {
let warningText = t("resource.warning-text");
if (resource.linkedMemoAmount > 0) {
warningText = warningText + `\n${t("resource.linked-amount")}: ${resource.linkedMemoAmount}`;
}
showCommonDialog({
title: t("resource.delete-resource"),
content: warningText,
style: "warning",
dialogName: "delete-resource-dialog",
onConfirm: async () => {
await resourceStore.deleteResourceById(resource.id);
},
});
};
return (
<Dropdown
actionsClassName="!w-auto min-w-[8rem]"
trigger={<Icon.MoreVertical className="w-4 h-auto hover:opacity-80 cursor-pointer" />}
actions={
<>
<button
className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
onClick={() => handlePreviewBtnClick(resource)}
>
{t("common.preview")}
</button>
<button
className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
onClick={() => handleCopyResourceLinkBtnClick(resource)}
>
{t("resource.copy-link")}
</button>
<button
className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
onClick={() => handleRenameBtnClick(resource)}
>
{t("common.rename")}
</button>
<button
className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded text-red-600 hover:bg-gray-100 dark:hover:bg-zinc-600"
onClick={() => handleDeleteResourceBtnClick(resource)}
>
{t("common.delete")}
</button>
</>
}
/>
);
};
export default React.memo(ResourceItemDropdown);

44
web/src/components/ResourceSearchBar.tsx
View File

@ -1,44 +0,0 @@
import { useRef, useState } from "react";
import useDebounce from "react-use/lib/useDebounce";
import { useTranslate } from "@/utils/i18n";
import Icon from "./Icon";
interface ResourceSearchBarProps {
setQuery: (queryText: string) => void;
}
const ResourceSearchBar = ({ setQuery }: ResourceSearchBarProps) => {
const t = useTranslate();
const [queryText, setQueryText] = useState("");
const inputRef = useRef<HTMLInputElement>(null);
const handleTextQueryInput = (event: React.FormEvent<HTMLInputElement>) => {
const text = event.currentTarget.value;
setQueryText(text);
};
useDebounce(
() => {
setQuery(queryText);
},
200,
[queryText]
);
return (
<div className="w-44 sm:w-52">
<div className="w-full h-9 flex flex-row justify-start items-center py-2 px-3 rounded-md bg-gray-200 dark:bg-zinc-800">
<Icon.Search className="w-4 h-auto opacity-30 dark:text-gray-200" />
<input
className="flex ml-2 w-24 grow text-sm outline-none bg-transparent dark:text-gray-200"
type="text"
placeholder={t("resource.search-bar-placeholder")}
ref={inputRef}
value={queryText}
onChange={handleTextQueryInput}
/>
</div>
</div>
);
};
export default ResourceSearchBar;