Page MenuHomePhabricator
Files F3387634

D8138.id27515.diff
No OneTemporary
Actions

D8138.id27515.diff
View Options

diff --git a/web/modals/threads/members/change-member-role-modal.css b/web/modals/threads/members/change-member-role-modal.css
--- a/web/modals/threads/members/change-member-role-modal.css
+++ b/web/modals/threads/members/change-member-role-modal.css
@@ -25,5 +25,26 @@
.roleModalRoleSelector {
display: flex;
justify-content: center;
+ flex-direction: column;
+ align-items: center;
padding: 20px;
}
+
+.roleModalActionButtons {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ align-self: center;
+ align-items: stretch;
+ margin: 16px 200px 16px 0;
+}
+
+.roleModalSaveButton {
+ margin-left: 8px;
+ padding: 14px 32px;
+}
+
+.roleModalBackButton {
+ padding: 14px 32px;
+}
diff --git a/web/modals/threads/members/change-member-role-modal.react.js b/web/modals/threads/members/change-member-role-modal.react.js
--- a/web/modals/threads/members/change-member-role-modal.react.js
+++ b/web/modals/threads/members/change-member-role-modal.react.js
@@ -2,9 +2,13 @@
import * as React from 'react';
+import { useModalContext } from 'lib/components/modal-provider.react.js';
import type { RelativeMemberInfo, ThreadInfo } from 'lib/types/thread-types';
+import { values } from 'lib/utils/objects.js';
import css from './change-member-role-modal.css';
+import Button, { buttonThemes } from '../../../components/button.react.js';
+import Dropdown from '../../../components/dropdown.react.js';
import UserAvatar from '../../../components/user-avatar.react.js';
import Modal from '../../modal.react.js';
@@ -14,11 +18,31 @@
};
function ChangeMemberRoleModal(props: ChangeMemberRoleModalProps): React.Node {
- const { memberInfo } = props;
+ const { memberInfo, threadInfo } = props;
+ const { popModal } = useModalContext();
const modalName = 'Change Role';
+ const roleOptions = React.useMemo(
+ () =>
+ values(threadInfo.roles).map(role => ({
+ id: role.id,
+ name: role.name,
+ })),
+ [threadInfo.roles],
+ );
+
+ const initialSelectedRole = React.useMemo(() => {
+ if (!memberInfo.role) {
+ return null;
+ }
+ return memberInfo.role;
+ }, [memberInfo.role]);
+
+ const [selectedRole, setSelectedRole] =
+ React.useState<?string>(initialSelectedRole);
+
return (
- <Modal name={modalName} onClose={() => {}} size="large">
+ <Modal name={modalName} onClose={popModal} size="large">
<div className={css.roleModalDescription}>
Members can only be assigned to one role at a time. Changing a
member&rsquo;s role will replace their previously assigned role.
@@ -29,6 +53,25 @@
</div>
<div className={css.roleModalMemberName}>{memberInfo.username}</div>
</div>
+ <div className={css.roleModalRoleSelector}>
+ <Dropdown
+ options={roleOptions}
+ activeSelection={selectedRole}
+ setActiveSelection={setSelectedRole}
+ />
+ </div>
+ <div className={css.roleModalActionButtons}>
+ <Button variant="outline" className={css.roleModalBackButton}>
+ Back
+ </Button>
+ <Button
+ variant="filled"
+ className={css.roleModalSaveButton}
+ buttonColor={buttonThemes.primary}
+ >
+ Save
+ </Button>
+ </div>
</Modal>
);
}

File Metadata

Mime Type
text/plain
Expires
Sat, Nov 30, 10:28 AM (18 h, 44 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2600581
Default Alt Text
D8138.id27515.diff (3 KB)

Event Timeline