usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-12-21 10:11:42 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore: use dropdown in member section

Browse Source
This commit is contained in:
boojack 2022-08-07 01:35:20 +08:00
parent 84564891be
commit fd44255668
2 changed files with 20 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
web/src/components/Settings/MemberSection.tsx
View File

@ -4,6 +4,7 @@ import { userService } from "../../services";
import { useAppSelector } from "../../store";
import * as api from "../../helpers/api";
import toastHelper from "../Toast";
import Dropdown from "../common/Dropdown";
import { showCommonDialog } from "../Dialog/CommonDialog";
import "../../less/settings/member-section.less";
@ -136,20 +137,19 @@ const PreferencesSection: React.FC<Props> = () => {
<div className="buttons-container">
{currentUser?.id === user.id ? (
<span className="tip-text">Yourself</span>
) : user.rowStatus === "NORMAL" ? (
<span className="btn archive" onClick={() => handleArchiveUserClick(user)}>
archive
</span>
) : (
<>
<span className="btn restore" onClick={() => handleRestoreUserClick(user)}>
restore
</span>
<span className="split-line">/</span>
<span className="btn delete" onClick={() => handleDeleteUserClick(user)}>
delete
</span>
</>
<Dropdown className="actions-dropdown">
{user.rowStatus === "NORMAL" ? (
<button onClick={() => handleArchiveUserClick(user)}>Archive</button>
) : (
<>
<button onClick={() => handleRestoreUserClick(user)}>Restore</button>
<button className="delete" onClick={() => handleDeleteUserClick(user)}>
Delete
</button>
</>
)}
</Dropdown>
)}
</div>
</div>

28
web/src/less/settings/member-section.less
View File

@ -32,7 +32,7 @@
}
> .member-container {
@apply w-full grid grid-cols-6 border-b py-2;
@apply w-full grid grid-cols-4 border-b py-2;
> .field-text {
@apply text-base pl-2 mr-4 w-16 truncate;
@ -42,35 +42,21 @@
}
&.email-text {
@apply w-auto col-span-3;
@apply w-auto col-span-2;
}
}
> .buttons-container {
@apply col-span-2 flex flex-row justify-start items-center flex-wrap;
> .btn {
@apply px-2 leading-7 border rounded shadow hover:opacity-80;
&.archive {
@apply bg-yellow-100 text-yellow-600;
}
&.restore {
@apply bg-green-100 text-green-600;
}
&.delete {
@apply bg-red-100 text-red-600;
}
}
@apply col-span-1 flex flex-row justify-end items-center;
> .tip-text {
@apply text-gray-400;
}
> .split-line {
@apply font-mono text-gray-300 mx-1;
> .actions-dropdown {
.delete {
@apply text-red-600;
}
}
}
}