Page MenuHomePhabricator
Files F3352428

D10900.diff
No OneTemporary
Actions

D10900.diff
View Options

diff --git a/web/chat/member-list-sidebar/member-list-sidebar-header.css b/web/chat/member-list-sidebar/member-list-sidebar-header.css
new file mode 100644
--- /dev/null
+++ b/web/chat/member-list-sidebar/member-list-sidebar-header.css
@@ -0,0 +1,28 @@
+.container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 16px;
+ height: 100%;
+}
+
+.headerContent {
+ display: flex;
+ align-items: center;
+ column-gap: 16px;
+}
+
+.headerLabel {
+ color: var(--text-background-primary-default);
+ font-size: var(--m-font-16);
+ font-weight: var(--semi-bold);
+}
+
+.closeButton {
+ display: flex;
+ color: var(--button-label-tertiary-default);
+}
+.closeButton:hover {
+ cursor: pointer;
+ color: var(--button-label-tertiary-hover);
+}
diff --git a/web/chat/member-list-sidebar/member-list-sidebar-header.react.js b/web/chat/member-list-sidebar/member-list-sidebar-header.react.js
new file mode 100644
--- /dev/null
+++ b/web/chat/member-list-sidebar/member-list-sidebar-header.react.js
@@ -0,0 +1,52 @@
+// @flow
+
+import * as React from 'react';
+
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
+
+import css from './member-list-sidebar-header.css';
+import { useMemberListSidebarContext } from './member-list-sidebar-provider.react.js';
+import AddButton from '../../components/add-button.react.js';
+import { AddMembersModal } from '../../modals/threads/members/add-members-modal.react.js';
+
+type Props = {
+ +threadID: string,
+};
+
+function MemberListSidebarHeader(props: Props): React.Node {
+ const { threadID } = props;
+
+ const { pushModal, popModal } = useModalContext();
+
+ const onClickAddButton = React.useCallback(() => {
+ pushModal(<AddMembersModal onClose={popModal} threadID={threadID} />);
+ }, [popModal, pushModal, threadID]);
+
+ const { setShowMemberListSidebar } = useMemberListSidebarContext();
+
+ const onClickCloseButton = React.useCallback(() => {
+ setShowMemberListSidebar(false);
+ }, [setShowMemberListSidebar]);
+
+ const memberListSidebarHeader = React.useMemo(
+ () => (
+ <>
+ <div className={css.container}>
+ <div className={css.headerContent}>
+ <div className={css.headerLabel}>Member list</div>
+ <AddButton onClick={onClickAddButton} />
+ </div>
+ <div className={css.closeButton} onClick={onClickCloseButton}>
+ <SWMansionIcon icon="cross-small" size={24} />
+ </div>
+ </div>
+ </>
+ ),
+ [onClickAddButton, onClickCloseButton],
+ );
+
+ return memberListSidebarHeader;
+}
+
+export default MemberListSidebarHeader;

File Metadata

Mime Type
text/plain
Expires
Sun, Nov 24, 5:52 AM (21 h, 6 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2574192
Default Alt Text
D10900.diff (2 KB)

Event Timeline