Page MenuHomePhabricator
Files F2829055

D8237.id28105.diff
No OneTemporary
Actions

D8237.id28105.diff
View Options

diff --git a/web/components/menu.css b/web/components/menu.css
--- a/web/components/menu.css
+++ b/web/components/menu.css
@@ -32,6 +32,13 @@
right: 5px;
}
+div.menuActionListCommunityActions {
+ font-size: var(--m-font-16);
+ background-color: var(--menu-bg-light);
+ color: var(--menu-color);
+ top: 24px;
+}
+
button.menuAction {
color: inherit;
z-index: 1;
diff --git a/web/components/menu.react.js b/web/components/menu.react.js
--- a/web/components/menu.react.js
+++ b/web/components/menu.react.js
@@ -6,7 +6,7 @@
import css from './menu.css';
import { useRenderMenu } from '../menu-provider.react.js';
-type MenuVariant = 'thread-actions' | 'member-actions';
+type MenuVariant = 'thread-actions' | 'member-actions' | 'community-actions';
type MenuProps = {
+icon: React.Node,
@@ -29,6 +29,7 @@
const menuActionListClasses = classnames(css.menuActionList, {
[css.menuActionListThreadActions]: variant === 'thread-actions',
[css.menuActionListMemberActions]: variant === 'member-actions',
+ [css.menuActionListCommunityActions]: variant === 'community-actions',
});
const menuActionList = React.useMemo(
diff --git a/web/invite-links/invite-links-menu.css b/web/invite-links/invite-links-menu.css
new file mode 100644
--- /dev/null
+++ b/web/invite-links/invite-links-menu.css
@@ -0,0 +1,3 @@
+.container {
+ color: var(--menu-color-light);
+}
diff --git a/web/invite-links/invite-links-menu.react.js b/web/invite-links/invite-links-menu.react.js
new file mode 100644
--- /dev/null
+++ b/web/invite-links/invite-links-menu.react.js
@@ -0,0 +1,38 @@
+// @flow
+
+import * as React from 'react';
+
+import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
+import { primaryInviteLinksSelector } from 'lib/selectors/invite-links-selectors.js';
+import type { InviteLink } from 'lib/types/link-types.js';
+
+import css from './invite-links-menu.css';
+import MenuItem from '../components/menu-item.react.js';
+import Menu from '../components/menu.react.js';
+import { useSelector } from '../redux/redux-utils.js';
+
+type Props = {
+ +communityID: string,
+};
+
+function InviteLinksMenu(props: Props): React.Node {
+ const { communityID } = props;
+ const inviteLink: ?InviteLink = useSelector(primaryInviteLinksSelector)[
+ communityID
+ ];
+
+ if (!inviteLink) {
+ return null;
+ }
+
+ const icon = <SWMansionIcon icon="menu-vertical" size={24} />;
+ return (
+ <div className={css.container}>
+ <Menu icon={icon} variant="community-actions">
+ <MenuItem text="Invite Link" icon="link" />
+ </Menu>
+ </div>
+ );
+}
+
+export default InviteLinksMenu;
diff --git a/web/sidebar/community-drawer-item-community.react.js b/web/sidebar/community-drawer-item-community.react.js
--- a/web/sidebar/community-drawer-item-community.react.js
+++ b/web/sidebar/community-drawer-item-community.react.js
@@ -13,6 +13,7 @@
getExpandButton,
} from './community-drawer-utils.react.js';
import ThreadAvatar from '../avatars/thread-avatar.react.js';
+import InviteLinksMenu from '../invite-links/invite-links-menu.react.js';
function CommunityDrawerItemCommunity(props: DrawerItemProps): React.Node {
const {
@@ -87,6 +88,7 @@
<ThreadAvatar size="micro" threadInfo={threadInfo} />
<div className={titleLabel}>{uiName}</div>
</div>
+ <InviteLinksMenu communityID={threadInfo.id} />
</a>
<div className={css.threadListContainer}>{children}</div>
</div>

File Metadata

Mime Type
text/plain
Expires
Sat, Sep 28, 3:15 PM (21 h, 50 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2190773
Default Alt Text
D8237.id28105.diff (3 KB)

Event Timeline