usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-09-22 01:07:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore: update resource dialog style (#395)

Browse Source
This commit is contained in:
boojack 2022-11-01 22:24:54 +08:00 committed by GitHub
parent 006cb56d28
commit f8c0d73d2d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
web/src/components/ResourcesDialog.tsx
View File

@ -168,16 +168,18 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
</button>
</div>
<div className="dialog-content-container">
<div className="upload-resource-container" onClick={() => handleUploadFileBtnClick()}>
<div className="upload-resource-btn">
<Icon.File className="icon-img" />
<span>{t("resources.upload")}</span>
<div className="action-buttons-container">
<div className="buttons-wrapper">
<div className="upload-resource-btn" onClick={() => handleUploadFileBtnClick()}>
<Icon.File className="icon-img" />
<span>{t("resources.upload")}</span>
</div>
</div>
<div className="buttons-wrapper">
<button className="delete-unused-resource-btn" onClick={handleDeleteUnusedResourcesBtnClick}>
{t("resources.clear-unused-resources")}
</button>
</div>
</div>
<div className="delete-unused-resource-container">
<button className="delete-unused-resource-btn" onClick={handleDeleteUnusedResourcesBtnClick}>
{t("resources.clear-unused-resources")}
</button>
</div>
{loadingState.isLoading ? (
<div className="loading-text-container">
@ -188,7 +190,6 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
<div className="fields-container">
<span className="field-text id-text">ID</span>
<span className="field-text name-text">NAME</span>
<span className="field-text type-text">TYPE</span>
<span></span>
</div>
{resources.length === 0 ? (
@ -205,14 +206,6 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
{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"

64
web/src/less/resources-dialog.less
View File

@ -4,28 +4,28 @@
@apply px-4;
> .dialog-container {
@apply w-180 max-w-full mb-8;
@apply w-112 max-w-full mb-8;
> .dialog-content-container {
@apply flex flex-col justify-start items-start w-full;
> .upload-resource-container {
@apply mt-2 mb-4 py-8 cursor-pointer w-full rounded flex flex-row justify-center items-center bg-blue-50 border border-blue-600 hover:opacity-80;
> .action-buttons-container {
@apply w-full flex flex-row justify-between items-center mb-2;
> .upload-resource-btn {
@apply px-3 py-1 rounded flex flex-row justify-center items-center border border-dashed border-blue-600 text-blue-600 bg-blue-50;
> .buttons-wrapper {
@apply flex flex-row justify-start items-center;
> .icon-img {
@apply w-4 h-auto mr-1;
> .upload-resource-btn {
@apply 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;
> .icon-img {
@apply w-4 h-auto mr-1;
}
}
}
}
> .delete-unused-resource-container {
@apply flex w-full justify-end;
> .delete-unused-resource-btn {
@apply text-sm py-1 px-3 mr-2 rounded-md hover:opacity-80 bg-red-100 border border-solid border-red-600 text-red-600;
> .delete-unused-resource-btn {
@apply text-sm py-1 px-3 mr-2 rounded bg-red-100 border border-solid border-red-600 text-red-600 hover:opacity-80;
}
}
}
@ -37,7 +37,7 @@
@apply flex flex-col justify-start items-start w-full;
> .fields-container {
@apply px-2 py-2 w-full grid grid-cols-10 border-b;
@apply px-2 py-2 w-full grid grid-cols-7 border-b;
> .field-text {
@apply font-mono text-gray-400;
@ -49,7 +49,7 @@
}
> .resource-container {
@apply px-2 py-2 w-full grid grid-cols-10;
@apply px-2 py-2 w-full grid grid-cols-7;
> .buttons-container {
@apply w-full flex flex-row justify-end items-center;
@ -66,38 +66,6 @@
&.name-text {
@apply col-span-4;
}
&.type-text {
@apply col-span-3;
}
> .form-label {
min-height: 28px;
&.filename-label {
@apply w-full flex flex-row justify-between;
> input {
@apply grow-0 w-40 shadow-inner px-2 mr-2 border rounded leading-7 bg-transparent focus:border-black;
}
> .btns-container {
@apply shrink-0 grow flex flex-row justify-end items-center;
> .btn {
@apply text-sm shadow px-2 leading-7 rounded border hover:opacity-80 bg-gray-50;
&.cancel-btn {
@apply shadow-none border-none bg-transparent;
}
&.confirm-btn {
@apply bg-green-600 border-green-600 text-white;
}
}
}
}
}
}
}
}