Page MenuHomePhabricator
Files F3373886

D7866.diff
No OneTemporary
Actions

D7866.diff
View Options

diff --git a/web/modals/threads/members/add-members-modal.react.js b/web/modals/threads/members/add-members-modal.react.js
--- a/web/modals/threads/members/add-members-modal.react.js
+++ b/web/modals/threads/members/add-members-modal.react.js
@@ -199,4 +199,4 @@
);
}
-export default AddMembersModal;
+export { AddMembersModal, AddMembersModalContent };
diff --git a/web/modals/threads/members/members-modal.css b/web/modals/threads/members/members-modal.css
--- a/web/modals/threads/members/members-modal.css
+++ b/web/modals/threads/members/members-modal.css
@@ -1,5 +1,4 @@
div.modalContentContainer {
- width: 383px;
height: 617px;
overflow: hidden;
display: flex;
@@ -68,7 +67,6 @@
flex-direction: column;
overflow: auto;
color: var(--fg);
- width: 383px;
height: 617px;
}
diff --git a/web/modals/threads/members/members-modal.react.js b/web/modals/threads/members/members-modal.react.js
--- a/web/modals/threads/members/members-modal.react.js
+++ b/web/modals/threads/members/members-modal.react.js
@@ -13,7 +13,7 @@
import { threadPermissions } from 'lib/types/thread-permission-types.js';
import { type RelativeMemberInfo } from 'lib/types/thread-types.js';
-import AddMembersModal from './add-members-modal.react.js';
+import { AddMembersModal } from './add-members-modal.react.js';
import ThreadMembersList from './members-list.react.js';
import css from './members-modal.css';
import Button from '../../../components/button.react.js';
@@ -131,7 +131,7 @@
name="Members"
searchPlaceholder="Search members"
onClose={onClose}
- size="fit-content"
+ size="large"
>
{renderModalContent}
</SearchModal>
diff --git a/web/sidebar/community-creation/community-creation-members-modal.css b/web/sidebar/community-creation/community-creation-members-modal.css
new file mode 100644
--- /dev/null
+++ b/web/sidebar/community-creation/community-creation-members-modal.css
@@ -0,0 +1,36 @@
+.container {
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ margin: 16px;
+}
+
+div.ancestryContainer {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 40px;
+ background-color: var(--community-creation-ancestry-bg);
+ margin-top: 20px;
+}
+
+div.ancestryContainer p {
+ color: var(--community-creation-ancestry-text);
+}
+
+.keyserverContainer {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 5px 10px;
+ margin: 0 6px;
+ border-radius: 8px;
+ background-color: var(--community-creation-keyserver-container);
+}
+
+.keyserverName {
+ padding-left: 6px;
+ color: var(--thread-ancestor-color);
+ font-size: var(--s-font-14);
+ font-weight: var(--semi-bold);
+}
diff --git a/web/sidebar/community-creation/community-creation-members-modal.react.js b/web/sidebar/community-creation/community-creation-members-modal.react.js
new file mode 100644
--- /dev/null
+++ b/web/sidebar/community-creation/community-creation-members-modal.react.js
@@ -0,0 +1,49 @@
+// @flow
+
+import * as React from 'react';
+
+import css from './community-creation-members-modal.css';
+import CommIcon from '../../CommIcon.react.js';
+import Search from '../../components/search.react.js';
+import Modal from '../../modals/modal.react.js';
+import { AddMembersModalContent } from '../../modals/threads/members/add-members-modal.react.js';
+
+type Props = {
+ +threadID: string,
+ +onClose: () => void,
+};
+function CommunityCreationMembersModal(props: Props): React.Node {
+ const { threadID, onClose } = props;
+ const [searchText, setSearchText] = React.useState('');
+
+ return (
+ <Modal
+ name="Add members to the community"
+ subtitle="You may also add members later"
+ onClose={onClose}
+ size="large"
+ >
+ <div className={css.ancestryContainer}>
+ <p>within</p>
+ <div className={css.keyserverContainer}>
+ <CommIcon icon="cloud-filled" size={18} color="white" />
+ <div className={css.keyserverName}>ashoat</div>
+ </div>
+ </div>
+ <div className={css.container}>
+ <Search
+ onChangeText={setSearchText}
+ searchText={searchText}
+ placeholder="Search members"
+ />
+ <AddMembersModalContent
+ searchText={searchText}
+ threadID={threadID}
+ onClose={onClose}
+ />
+ </div>
+ </Modal>
+ );
+}
+
+export default CommunityCreationMembersModal;
diff --git a/web/sidebar/community-creation/community-creation-modal.react.js b/web/sidebar/community-creation/community-creation-modal.react.js
--- a/web/sidebar/community-creation/community-creation-modal.react.js
+++ b/web/sidebar/community-creation/community-creation-modal.react.js
@@ -14,6 +14,7 @@
useServerCall,
} from 'lib/utils/action-utils.js';
+import CommunityCreationMembersModal from './community-creation-members-modal.react.js';
import css from './community-creation-modal.css';
import CommIcon from '../../CommIcon.react.js';
import Button, { buttonThemes } from '../../components/button.react.js';
@@ -107,6 +108,12 @@
});
modalContext.popModal();
+ modalContext.pushModal(
+ <CommunityCreationMembersModal
+ onClose={modalContext.popModal}
+ threadID={newThreadID}
+ />,
+ );
}, [callCreateNewCommunity, dispatch, dispatchActionPromise, modalContext]);
const megaphoneIcon = React.useMemo(

File Metadata

Mime Type
text/plain
Expires
Wed, Nov 27, 12:27 PM (22 h, 1 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2590417
Default Alt Text
D7866.diff (5 KB)

Event Timeline