chore: use dropdown in member section

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

View File

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

View File

@ -32,7 +32,7 @@
} }
> .member-container { > .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 { > .field-text {
@apply text-base pl-2 mr-4 w-16 truncate; @apply text-base pl-2 mr-4 w-16 truncate;
@ -42,35 +42,21 @@
} }
&.email-text { &.email-text {
@apply w-auto col-span-3; @apply w-auto col-span-2;
} }
} }
> .buttons-container { > .buttons-container {
@apply col-span-2 flex flex-row justify-start items-center flex-wrap; @apply col-span-1 flex flex-row justify-end items-center;
> .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;
}
}
> .tip-text { > .tip-text {
@apply text-gray-400; @apply text-gray-400;
} }
> .split-line { > .actions-dropdown {
@apply font-mono text-gray-300 mx-1; .delete {
@apply text-red-600;
}
} }
} }
} }