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

feat: show thumbnail in resource dashboard (#1666)

Browse Source 
* Add image thumbnail instead of an icon

* Change thumbnail size of dashboard to fixed

* Fix for eslint-checks

* Fix for eslint-checks

* Replace css with tailwind

* Remove the parent div used for style

* Show preview while click on the resource

* Change for review Suggested by @Zeng1998

---------

Co-authored-by: Athurg Feng <athurg@gooth.org>
This commit is contained in:
Athurg Gooth 2023-05-19 08:31:32 +08:00 committed by GitHub
parent 88799d469c
commit 34913cfc83
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 6 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/components/ResourceCover.tsx
View File

@ -1,5 +1,7 @@
import React from "react";
import Icon from "./Icon";
import { getResourceUrl } from "@/utils/resource";
import showPreviewImageDialog from "./PreviewImageDialog";
import "@/less/resource-cover.less";
interface ResourceCoverProps {
@ -34,9 +36,12 @@ const getResourceType = (resource: Resource) => {
const ResourceCover = ({ resource }: ResourceCoverProps) => {
const resourceType = getResourceType(resource);
const resourceUrl = getResourceUrl(resource);
switch (resourceType) {
case "image/*":
return <Icon.FileImage className="resource-cover" />;
return (
<img className="resource-cover h-20 w-20" src={resourceUrl + "?thumbnail=1"} onClick={() => showPreviewImageDialog(resourceUrl)} />
);
case "video/*":
return <Icon.FileVideo2 className="resource-cover" />;
case "audio/*":