mirror of
https://github.com/usememos/memos.git
synced 2025-02-21 13:50:40 +01:00
feat: resource dialog enhancements (#356)
* feat: resource dialog enhancements * update
This commit is contained in:
parent
94df09c8c0
commit
b891e08928
@ -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"
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user