Page MenuHomePhorge
Files F32167626

D8137.1765052848.diff
No OneTemporary
Actions

Size
4 KB
Referenced Files
None
Subscribers
None

D8137.1765052848.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
new file mode 100644
--- /dev/null
+++ b/web/modals/threads/members/change-member-role-modal.css
@@ -0,0 +1,29 @@
+.roleModalDescription {
+ color: var(--change-member-role-modal-description-text);
+ padding: 16px 32px 0 32px;
+ font-size: medium;
+ line-height: 1.5;
+}
+
+.roleModalMember {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-top: 24px;
+}
+
+.roleModalMemberAvatar {
+ margin-right: 4px;
+}
+
+.roleModalMemberName {
+ margin-left: 4px;
+ font-size: large;
+ color: var(--change-member-role-modal-generic-text);
+}
+
+.roleModalRoleSelector {
+ display: flex;
+ justify-content: center;
+ padding: 20px;
+}
diff --git a/web/modals/threads/members/change-member-role-modal.react.js b/web/modals/threads/members/change-member-role-modal.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/threads/members/change-member-role-modal.react.js
@@ -0,0 +1,37 @@
+// @flow
+
+import * as React from 'react';
+
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+import type { RelativeMemberInfo, ThreadInfo } from 'lib/types/thread-types';
+
+import css from './change-member-role-modal.css';
+import UserAvatar from '../../../components/user-avatar.react.js';
+import Modal from '../../modal.react.js';
+
+type ChangeMemberRoleModalProps = {
+ +memberInfo: RelativeMemberInfo,
+ +threadInfo: ThreadInfo,
+};
+
+function ChangeMemberRoleModal(props: ChangeMemberRoleModalProps): React.Node {
+ const { memberInfo } = props;
+ const { popModal } = useModalContext();
+
+ return (
+ <Modal name="Change Role" 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.
+ </div>
+ <div className={css.roleModalMember}>
+ <div className={css.roleModalMemberAvatar}>
+ <UserAvatar userID={memberInfo.id} size="large" />
+ </div>
+ <div className={css.roleModalMemberName}>{memberInfo.username}</div>
+ </div>
+ </Modal>
+ );
+}
+
+export default ChangeMemberRoleModal;
diff --git a/web/modals/threads/members/member.react.js b/web/modals/threads/members/member.react.js
--- a/web/modals/threads/members/member.react.js
+++ b/web/modals/threads/members/member.react.js
@@ -4,6 +4,7 @@
import * as React from 'react';
import { removeUsersFromThread } from 'lib/actions/thread-actions.js';
+import { useModalContext } from 'lib/components/modal-provider.react.js';
import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
import {
memberIsAdmin,
@@ -22,6 +23,7 @@
useServerCall,
} from 'lib/utils/action-utils.js';
+import ChangeMemberRoleModal from './change-member-role-modal.react.js';
import css from './members-modal.css';
import Label from '../../../components/label.react.js';
import MenuItem from '../../../components/menu-item.react.js';
@@ -37,6 +39,7 @@
function ThreadMember(props: Props): React.Node {
const { memberInfo, threadInfo, setOpenMenu, isMenuOpen } = props;
+ const { pushModal } = useModalContext();
const userName = stringForUser(memberInfo);
const onMenuChange = React.useCallback(
@@ -64,7 +67,11 @@
[boundRemoveUsersFromThread, dispatchActionPromise, memberInfo, threadInfo],
);
- const onClickChangeRole = React.useCallback(() => {}, []);
+ const onClickChangeRole = React.useCallback(() => {
+ pushModal(
+ <ChangeMemberRoleModal memberInfo={memberInfo} threadInfo={threadInfo} />,
+ );
+ }, [memberInfo, pushModal, threadInfo]);
const menuItems = React.useMemo(
() =>
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -229,4 +229,6 @@
--dropdown-option-bg: var(--shades-black-80);
--dropdown-option-hover-bg: var(--shades-black-70);
--dropdown-selected-option-check-color: var(--violet-dark-100);
+ --change-member-role-modal-description-text: var(--shades-white-80);
+ --change-member-role-modal-generic-text: var(--shades-white-100);
}

File Metadata

Mime Type
text/plain
Expires
Sat, Dec 6, 8:27 PM (22 h, 16 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5840631
Default Alt Text
D8137.1765052848.diff (4 KB)

Event Timeline