Page MenuHomePhabricator
Files F3177389

D3739.diff
No OneTemporary
Actions

D3739.diff
View Options

diff --git a/web/modals/threads/members/add-members-item.react.js b/web/modals/threads/members/add-members-item.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/threads/members/add-members-item.react.js
@@ -0,0 +1,50 @@
+// @flow
+
+import * as React from 'react';
+
+import type { UserListItem } from 'lib/types/user-types';
+
+import css from './members-modal.css';
+
+type AddMembersItemProps = {
+ +userInfo: UserListItem,
+ +onClick: (userID: string) => void,
+ +userAdded: boolean,
+};
+
+function AddMemberItem(props: AddMembersItemProps): React.Node {
+ const { userInfo, onClick, userAdded = false } = props;
+
+ const canBeAdded = !userInfo.alertText;
+
+ const onClickCallback = React.useCallback(() => {
+ if (!canBeAdded) {
+ return;
+ }
+ onClick(userInfo.id);
+ }, [canBeAdded, onClick, userInfo.id]);
+
+ const action = React.useMemo(() => {
+ if (!canBeAdded) {
+ return userInfo.alertTitle;
+ }
+ if (userAdded) {
+ return <span className={css.danger}>Remove</span>;
+ } else {
+ return 'Add';
+ }
+ }, [canBeAdded, userAdded, userInfo.alertTitle]);
+
+ return (
+ <button
+ className={css.addMemberItem}
+ onClick={onClickCallback}
+ disabled={!canBeAdded}
+ >
+ <div className={css.label}>{userInfo.username}</div>
+ <div className={css.label}>{action}</div>
+ </button>
+ );
+}
+
+export default AddMemberItem;
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
@@ -49,3 +49,39 @@
padding-top: 16px;
text-align: center;
}
+
+button.addMemberItem {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ color: var(--add-members-item-color);
+ font-size: var(--l-font-18);
+ background-color: transparent;
+ border: none;
+ width: 100%;
+}
+
+button.addMemberItem:hover {
+ color: var(--add-members-item-color-hover);
+}
+
+button.addMemberItem:disabled {
+ color: var(--add-members-item-disabled-color);
+ cursor: not-allowed;
+}
+
+button.addMemberItem:hover:disabled {
+ color: var(--add-members-item-disabled-color-hover);
+}
+
+button.addMemberItem .label {
+ padding: 8px 16px;
+}
+
+button.addMemberItem .danger {
+ color: var(--add-members-remove-pending-color);
+}
+button.addMemberItem:hover .danger {
+ color: var(--add-members-remove-pending-color-hover);
+}
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -152,4 +152,10 @@
--arrow-extension-color: var(--shades-black-60);
--modal-close-color: var(--shades-black-60);
--modal-close-color-hover: var(--shades-white-100);
+ --add-members-item-color: var(--shades-black-60);
+ --add-members-item-color-hover: var(--shades-white-100);
+ --add-members-item-disabled-color: var(--shades-black-80);
+ --add-members-item-disabled-color-hover: var(--shades-black-60);
+ --add-members-remove-pending-color: var(--error-primary);
+ --add-members-remove-pending-color-hover: var(--error-light-50);
}

File Metadata

Mime Type
text/plain
Expires
Fri, Nov 8, 11:16 PM (21 h, 38 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2446731
Default Alt Text
D3739.diff (3 KB)

Event Timeline