mirror of
https://github.com/usememos/memos.git
synced 2024-12-21 02:01:55 +03:00
chore: update resource dashboard style (#1362)
This commit is contained in:
boojack
GitHub
parent
0a66c5c269
commit
c189654cd9
@ -75,18 +75,15 @@ const ResourceCard = ({ resource, handlecheckClick, handleUncheckClick }: Resour
|
||||
|
||||
return (
|
||||
<div className="resource-card">
|
||||
<div className="btns-container">
|
||||
<div className="w-full p-2 flex flex-row justify-between items-center absolute top-0 left-0">
|
||||
<div onClick={() => handleSelectBtnClick()}>
|
||||
{isSelected ? (
|
||||
<Icon.CheckCircle2 className="m-2 text-gray-500 hover:text-black absolute top-1" />
|
||||
) : (
|
||||
<Icon.Circle className="resource-checkbox" />
|
||||
)}
|
||||
{isSelected ? <Icon.CheckCircle2 className="resource-checkbox !flex" /> : <Icon.Circle className="resource-checkbox" />}
|
||||
</div>
|
||||
|
||||
<Dropdown
|
||||
className="more-action-btn"
|
||||
actionsClassName="!w-28"
|
||||
trigger={<Icon.MoreVertical className="w-4 h-auto hover:opacity-80 cursor-pointer" />}
|
||||
actions={
|
||||
<>
|
||||
<button
|
||||
@ -117,12 +114,12 @@ const ResourceCard = ({ resource, handlecheckClick, handleUncheckClick }: Resour
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="p-5">
|
||||
<div className="w-full flex flex-row justify-center items-center pb-2 pt-4 px-2">
|
||||
<ResourceCover resource={resource} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-base overflow-x-auto whitespace-nowrap text-center">{resource.filename}</div>
|
||||
<div className="text-sm text-gray-400 text-center">{dayjs(resource.createdTs).locale("en").format("YYYY/MM/DD HH:mm:ss")}</div>
|
||||
<div className="w-full flex flex-col justify-start items-center px-1 select-none">
|
||||
<div className="w-full text-base overflow-x-auto whitespace-nowrap text-center text-ellipsis truncate">{resource.filename}</div>
|
||||
<div className="text-xs text-gray-400 text-center">{dayjs(resource.createdTs).locale("en").format("YYYY/MM/DD HH:mm:ss")}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -6,8 +6,31 @@ interface ResourceCoverProps {
|
||||
resource: Resource;
|
||||
}
|
||||
|
||||
const getResourceType = (resource: Resource) => {
|
||||
if (resource.type.startsWith("image")) {
|
||||
return "image/*";
|
||||
} else if (resource.type.startsWith("video")) {
|
||||
return "video/*";
|
||||
} else if (resource.type.startsWith("audio")) {
|
||||
return "audio/*";
|
||||
} else if (resource.type.startsWith("text")) {
|
||||
return "text/*";
|
||||
} else if (resource.type.startsWith("application/epub+zip")) {
|
||||
return "application/epub+zip";
|
||||
} else if (resource.type.startsWith("application/pdf")) {
|
||||
return "application/pdf";
|
||||
} else if (resource.type.startsWith("application/vnd.openxmlformats-officedocument.wordprocessingml.document")) {
|
||||
return "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
|
||||
} else if (resource.type.startsWith("application/msword")) {
|
||||
return "application/msword";
|
||||
} else {
|
||||
return "application/octet-stream";
|
||||
}
|
||||
};
|
||||
|
||||
const ResourceCover = ({ resource }: ResourceCoverProps) => {
|
||||
switch (resource.type) {
|
||||
const resourceType = getResourceType(resource);
|
||||
switch (resourceType) {
|
||||
case "image/*":
|
||||
return <Icon.FileImage className="resource-cover" />;
|
||||
case "video/*":
|
||||
|
||||
@ -23,7 +23,7 @@ const ResourceSearchBar = ({ setQuery }: ResourceSearchBarProps) => {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="w-4/12">
|
||||
<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
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
.resource-card{
|
||||
@apply flex flex-col relative justify-start hover:bg-slate-200 dark:hover:bg-slate-600 w-full m-4 rounded-md;
|
||||
.resource-card {
|
||||
@apply w-full p-2 relative flex flex-col justify-start hover:shadow hover:bg-slate-200 dark:hover:bg-slate-600 rounded-md;
|
||||
|
||||
&:hover {
|
||||
.resource-checkbox {
|
||||
@apply flex m-2 text-gray-500 absolute top-1 hover:text-black;
|
||||
@apply flex hover:text-black;
|
||||
}
|
||||
.more-action-btn{
|
||||
@apply flex absolute right-0 top-1;
|
||||
.more-action-btn {
|
||||
@apply flex;
|
||||
}
|
||||
}
|
||||
|
||||
.resource-checkbox{
|
||||
@apply hidden hover:flex ;
|
||||
.resource-checkbox {
|
||||
@apply hidden w-4 h-auto cursor-pointer hover:flex;
|
||||
}
|
||||
|
||||
.more-action-btn{
|
||||
@apply hidden m-2;
|
||||
.more-action-btn {
|
||||
@apply hidden;
|
||||
&:hover {
|
||||
& + .more-action-btns-wrapper {
|
||||
display: flex;
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
.resource-cover{
|
||||
@apply w-full h-full ml-auto mr-auto mt-5 opacity-60;
|
||||
.resource-cover {
|
||||
@apply w-20 h-auto ml-auto mr-auto opacity-40;
|
||||
}
|
||||
@ -95,54 +95,53 @@ const ResourcesDashboard = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="w-full min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
|
||||
<section className="w-full max-w-2xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
|
||||
<MobileHeader showSearch={false} />
|
||||
<div className="w-full flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300">
|
||||
<div className="relative w-full flex flex-row justify-between items-center">
|
||||
<p className="px-2 py-1 flex flex-row justify-start items-center select-none rounded">
|
||||
<p className="flex flex-row justify-start items-center select-none rounded">
|
||||
<Icon.Paperclip className="w-5 h-auto mr-1" /> {t("common.resources")}
|
||||
</p>
|
||||
<ResourceSearchBar setQuery={setQueryText} />
|
||||
</div>
|
||||
<div className=" flex flex-col justify-start items-start w-full">
|
||||
<div className="w-full flex flex-row justify-end items-center">
|
||||
<div className="flex flex-row justify-start items-center space-x-2"></div>
|
||||
<div className="m-2">
|
||||
<div className="w-full flex flex-row justify-end items-center space-x-2 mt-3">
|
||||
{isVisiable && (
|
||||
<Button onClick={() => handleDeleteSelectedBtnClick()} color="danger" title={t("resources.delete-selected-resources")}>
|
||||
<Button onClick={() => handleDeleteSelectedBtnClick()} color="danger">
|
||||
<Icon.Trash2 className="w-4 h-auto" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="m-2">
|
||||
<Button onClick={() => showCreateResourceDialog({})} title={t("common.create")}>
|
||||
<Button onClick={() => showCreateResourceDialog({})}>
|
||||
<Icon.Plus className="w-4 h-auto" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Dropdown
|
||||
className="drop-shadow-none m-2 "
|
||||
className="drop-shadow-none"
|
||||
actionsClassName="!w-28 rounded-lg drop-shadow-md dark:bg-zinc-800"
|
||||
positionClassName="mt-2 top-full right-0"
|
||||
trigger={
|
||||
<Button variant="outlined">
|
||||
<Icon.MoreVertical className="w-4 h-auto" />
|
||||
</Button>
|
||||
}
|
||||
actions={
|
||||
<>
|
||||
<button
|
||||
className="w-full content-center text-sm whitespace-nowrap leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
|
||||
className="w-full flex flex-row justify-start items-center content-center text-sm whitespace-nowrap leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
|
||||
onClick={handleDeleteUnusedResourcesBtnClick}
|
||||
>
|
||||
<Icon.Trash2 className="w-4 h-auto mr-2" />
|
||||
{t("resources.clear")}
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full flex flex-col justify-start items-start mt-4 mb-6">
|
||||
{loadingState.isLoading ? (
|
||||
<div className="flex flex-col justify-center items-center w-full h-32">
|
||||
<div className="w-full h-32 flex flex-col justify-center items-center">
|
||||
<p className="w-full text-center text-base my-6 mt-8">{t("resources.fetching-data")}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-full h-full grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4">
|
||||
<div className="w-full h-full grid grid-cols-2 md:grid-cols-4 md:px-6 gap-6">
|
||||
{resources.length === 0 ? (
|
||||
<p className="w-full text-center text-base my-6 mt-8">{t("resources.no-resources")}</p>
|
||||
) : (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user