chore: update resource select dialog (#999)

* 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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 23 deletions

View File

@ -1,4 +1,4 @@
import { Checkbox, Tooltip } from "@mui/joy";
import { Button, Checkbox } from "@mui/joy";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import useLoading from "../hooks/useLoading";
@ -92,8 +92,8 @@ const ResourcesSelectorDialog: React.FC<Props> = (props: Props) => {
) : (
<div className="resource-table-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 type-text">Type</span>
<span></span>
</div>
{resources.length === 0 ? (
@ -101,17 +101,11 @@ const ResourcesSelectorDialog: React.FC<Props> = (props: Props) => {
) : (
resources.map((resource, index) => (
<div key={resource.id} className="resource-container">
<span className="field-text id-text">{resource.id}</span>
<Tooltip placement="top-start" title={resource.filename}>
<span className="field-text name-text">{resource.filename}</span>
</Tooltip>
<span className="field-text name-text cursor-pointer" onClick={() => handlePreviewBtnClick(resource)}>
{resource.filename}
</span>
<span className="field-text type-text">{resource.type}</span>
<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)} />
</div>
</div>
@ -124,13 +118,7 @@ const ResourcesSelectorDialog: React.FC<Props> = (props: Props) => {
{t("message.count-selected-resources")}: {state.checkedArray.filter((checked) => checked).length}
</span>
<div className="flex flex-row justify-start items-center">
<div
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>
<Button onClick={handleConfirmBtnClick}>{t("common.confirm")}</Button>
</div>
</div>
</div>

View File

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