Page MenuHomePhabricator
Files F3386994

D8138.diff
No OneTemporary
Actions

D8138.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;
- padding: 20px;
+ flex-direction: column;
+ align-items: center;
+ padding: 20px 20px 0 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
@@ -1,12 +1,16 @@
// @flow
+import invariant from 'invariant';
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 UserAvatar from '../../../avatars/user-avatar.react.js';
+import Button, { buttonThemes } from '../../../components/button.react.js';
+import Dropdown from '../../../components/dropdown.react.js';
import Modal from '../../modal.react.js';
type ChangeMemberRoleModalProps = {
@@ -15,9 +19,23 @@
};
function ChangeMemberRoleModal(props: ChangeMemberRoleModalProps): React.Node {
- const { memberInfo } = props;
+ const { memberInfo, threadInfo } = props;
const { popModal } = useModalContext();
+ const roleOptions = React.useMemo(
+ () =>
+ values(threadInfo.roles).map(role => ({
+ id: role.id,
+ name: role.name,
+ })),
+ [threadInfo.roles],
+ );
+
+ const initialSelectedRole = memberInfo.role;
+ invariant(initialSelectedRole, "Member's role must be defined");
+
+ const [selectedRole, setSelectedRole] = React.useState(initialSelectedRole);
+
return (
<Modal name="Change Role" onClose={popModal} size="large">
<div className={css.roleModalDescription}>
@@ -30,6 +48,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, 7:08 AM (21 h, 41 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2600061
Default Alt Text
D8138.diff (3 KB)

Event Timeline