usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-09-21 14:55:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: resource dialog enhancements (#356)

Browse source 
* feat: resource dialog enhancements

* update
This commit is contained in:
Zeng1998 2022-10-29 09:11:16 +08:00 committed by GitHub
parent 94df09c8c0
commit b891e08928
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 47 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
web/src/components/ResourcesDialog.tsx
View file

@ -1,5 +1,5 @@
import copy from "copy-to-clipboard";
import { useEffect, useState } from "react";
import { useCallback, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import useLoading from "../hooks/useLoading";
import { resourceService } from "../services";
@ -10,6 +10,7 @@ import showPreviewImageDialog from "./PreviewImageDialog";
import Icon from "./Icon";
import toastHelper from "./Toast";
import "../less/resources-dialog.less";
import * as utils from "../helpers/utils";
type Props = DialogProps;
@ -120,6 +121,20 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
});
};
const handleResourceNameOrTypeMouseEnter = useCallback((event: React.MouseEvent, nameOrType: string) => {
const tempDiv = document.createElement("div");
tempDiv.className = "usage-detail-container pop-up";
const bounding = utils.getElementBounding(event.target as HTMLElement);
tempDiv.style.left = bounding.left + "px";
tempDiv.style.top = bounding.top - 2 + "px";
tempDiv.innerHTML = `<span>${nameOrType}</span>`;
document.body.appendChild(tempDiv);
}, []);
const handleResourceNameOrTypeMouseLeave = useCallback(() => {
document.body.querySelectorAll("div.usage-detail-container.pop-up").forEach((node) => node.remove());
}, []);
return (
<>
<div className="dialog-header-container">
@ -145,9 +160,9 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
) : (
<div className="resource-table-container">
<div className="fields-container">
<span className="field-text">ID</span>
<span className="field-text id-text">ID</span>
<span className="field-text name-text">NAME</span>
<span className="field-text">TYPE</span>
<span className="field-text type-text">TYPE</span>
<span></span>
</div>
{state.resources.length === 0 ? (
@ -155,9 +170,23 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
) : (
state.resources.map((resource) => (
<div key={resource.id} className="resource-container">
<span className="field-text">{resource.id}</span>
<span className="field-text name-text">{resource.filename}</span>
<span className="field-text">{resource.type}</span>
<span className="field-text id-text">{resource.id}</span>
<span className="field-text name-text">
<span
onMouseEnter={(e) => handleResourceNameOrTypeMouseEnter(e, resource.filename)}
onMouseLeave={handleResourceNameOrTypeMouseLeave}
>
{resource.filename}
</span>
</span>
<span className="field-text type-text">
<span
onMouseEnter={(e) => handleResourceNameOrTypeMouseEnter(e, resource.type)}
onMouseLeave={handleResourceNameOrTypeMouseLeave}
>
{resource.type}
</span>
</span>
<div className="buttons-container">
<Dropdown
actionsClassName="!w-28"

16
web/src/less/resources-dialog.less
View file

@ -4,7 +4,7 @@
@apply px-4;
> .dialog-container {
@apply w-128 max-w-full mb-8;
@apply w-180 max-w-full mb-8;
> .dialog-content-container {
@apply flex flex-col justify-start items-start w-full;
@ -29,7 +29,7 @@
@apply flex flex-col justify-start items-start w-full;
> .fields-container {
@apply px-2 py-2 w-full grid grid-cols-5 border-b;
@apply px-2 py-2 w-full grid grid-cols-10 border-b;
> .field-text {
@apply font-mono text-gray-400;
@ -41,7 +41,7 @@
}
> .resource-container {
@apply px-2 py-2 w-full grid grid-cols-5;
@apply px-2 py-2 w-full grid grid-cols-10;
> .buttons-container {
@apply w-full flex flex-row justify-end items-center;
@ -51,9 +51,17 @@
.field-text {
@apply w-full truncate text-base pr-2 last:pr-0;
&.name-text {
&.id-text {
@apply col-span-2;
}
&.name-text {
@apply col-span-4;
}
&.type-text {
@apply col-span-3;
}
}
}
}