usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-11-11 07:24:18 +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

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

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

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

@ -4,28 +4,28 @@
@apply px-4; @apply px-4;
> .dialog-container { > .dialog-container {
@apply w-180 max-w-full mb-8; @apply w-112 max-w-full mb-8;
> .dialog-content-container { > .dialog-content-container {
@apply flex flex-col justify-start items-start w-full; @apply flex flex-col justify-start items-start w-full;
> .upload-resource-container { > .action-buttons-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; @apply w-full flex flex-row justify-between items-center mb-2;
> .buttons-wrapper {
@apply flex flex-row justify-start items-center;
> .upload-resource-btn { > .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; @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 { > .icon-img {
@apply w-4 h-auto mr-1; @apply w-4 h-auto mr-1;
} }
} }
}
> .delete-unused-resource-container {
@apply flex w-full justify-end;
> .delete-unused-resource-btn { > .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; @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; @apply flex flex-col justify-start items-start w-full;
> .fields-container { > .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 { > .field-text {
@apply font-mono text-gray-400; @apply font-mono text-gray-400;
@ -49,7 +49,7 @@
} }
> .resource-container { > .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 { > .buttons-container {
@apply w-full flex flex-row justify-end items-center; @apply w-full flex flex-row justify-end items-center;
@ -66,38 +66,6 @@
&.name-text { &.name-text {
@apply col-span-4; @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;
}
}
}
}
}
} }
} }
} }