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

chore: update resource select dialog (#999)

Browse Source 
* chore: update resource select dialog

* chore: update
This commit is contained in:
boojack
2023-02-09 23:24:51 +08:00
committed by GitHub
parent bec1558488
commit 989208eb45
2 changed files with 11 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
web/src/components/ResourcesSelectorDialog.tsx
View File

@@ -1,4 +1,4 @@
import { Checkbox, Tooltip } from "@mui/joy"; import { Button, Checkbox } from "@mui/joy";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import useLoading from "../hooks/useLoading"; import useLoading from "../hooks/useLoading";
@@ -92,8 +92,8 @@ const ResourcesSelectorDialog: React.FC<Props> = (props: Props) => {
) : ( ) : (
<div className="resource-table-container"> <div className="resource-table-container">
<div className="fields-container"> <div className="fields-container">
<span className="field-text id-text">ID</span>
<span className="field-text name-text">{t("resources.name")}</span> <span className="field-text name-text">{t("resources.name")}</span>
<span className="field-text type-text">Type</span>
<span></span> <span></span>
</div> </div>
{resources.length === 0 ? ( {resources.length === 0 ? (
@@ -101,17 +101,11 @@ const ResourcesSelectorDialog: React.FC<Props> = (props: Props) => {
) : ( ) : (
resources.map((resource, index) => ( resources.map((resource, index) => (
<div key={resource.id} className="resource-container"> <div key={resource.id} className="resource-container">
<span className="field-text id-text">{resource.id}</span> <span className="field-text name-text cursor-pointer" onClick={() => handlePreviewBtnClick(resource)}>
<Tooltip placement="top-start" title={resource.filename}> {resource.filename}
<span className="field-text name-text">{resource.filename}</span> </span>
</Tooltip> <span className="field-text type-text">{resource.type}</span>
<div className="flex justify-end"> <div className="flex justify-end">
<Icon.Eye
className=" text-left text-sm leading-6 px-1 mr-2 cursor-pointer hover:opacity-80"
onClick={() => handlePreviewBtnClick(resource)}
>
{t("resources.preview")}
</Icon.Eye>
<Checkbox checked={state.checkedArray[index]} onChange={() => handleCheckboxChange(index)} /> <Checkbox checked={state.checkedArray[index]} onChange={() => handleCheckboxChange(index)} />
</div> </div>
</div> </div>
@@ -124,13 +118,7 @@ const ResourcesSelectorDialog: React.FC<Props> = (props: Props) => {
{t("message.count-selected-resources")}: {state.checkedArray.filter((checked) => checked).length} {t("message.count-selected-resources")}: {state.checkedArray.filter((checked) => checked).length}
</span> </span>
<div className="flex flex-row justify-start items-center"> <div className="flex flex-row justify-start items-center">
<div <Button onClick={handleConfirmBtnClick}>{t("common.confirm")}</Button>
className="text-sm cursor-pointer px-3 py-1 rounded flex flex-row justify-center items-center border border-blue-600 text-blue-600 bg-blue-50 hover:opacity-80"
onClick={handleConfirmBtnClick}
>
<Icon.PlusSquare className=" w-4 h-auto mr-1" />
<span>{t("common.confirm")}</span>
</div>
</div> </div>
</div> </div>
</div> </div>

8
web/src/less/resources-selector-dialog.less
View File

@@ -37,13 +37,13 @@
.field-text { .field-text {
@apply w-full truncate text-base pr-2 last:pr-0; @apply w-full truncate text-base pr-2 last:pr-0;
&.id-text {
@apply col-span-2;
}
&.name-text { &.name-text {
@apply col-span-4; @apply col-span-4;
} }
&.type-text {
@apply col-span-2;
}
} }
} }
} }