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 = ; + return ( +
+ + + +
+ ); +} + +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 @@
{uiName}
+
{children}