diff --git a/app/components/slide_up_panel_item/index.tsx b/app/components/slide_up_panel_item/index.tsx index 143483c32..840d8ec5e 100644 --- a/app/components/slide_up_panel_item/index.tsx +++ b/app/components/slide_up_panel_item/index.tsx @@ -21,7 +21,6 @@ type SlideUpPanelProps = { textStyles?: TextStyle; testID?: string; text: string; - topDivider?: boolean; } export const ITEM_HEIGHT = 48; @@ -62,15 +61,10 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => { color: theme.centerChannelColor, ...typography('Body', 200, 'Regular'), }, - divider: { - borderTopWidth: 1, - borderStyle: 'solid', - borderColor: changeOpacity(theme.centerChannelColor, 0.08), - }, }; }); -const SlideUpPanelItem = ({destructive, icon, imageStyles, onPress, testID, text, textStyles, rightIcon = false, topDivider}: SlideUpPanelProps) => { +const SlideUpPanelItem = ({destructive, icon, imageStyles, onPress, testID, text, textStyles, rightIcon = false}: SlideUpPanelProps) => { const theme = useTheme(); const handleOnPress = useCallback(preventDoubleTap(onPress, 500), []); const style = getStyleSheet(theme); @@ -105,12 +99,10 @@ const SlideUpPanelItem = ({destructive, icon, imageStyles, onPress, testID, text } } - const divider = topDivider ? style.divider : {}; - return ( diff --git a/app/screens/home/channel_list/categories_list/header/header.tsx b/app/screens/home/channel_list/categories_list/header/header.tsx index c391deedc..f21d5f81b 100644 --- a/app/screens/home/channel_list/categories_list/header/header.tsx +++ b/app/screens/home/channel_list/categories_list/header/header.tsx @@ -24,6 +24,7 @@ import {typography} from '@utils/typography'; import LoadingUnreads from './loading_unreads'; import PlusMenu from './plus_menu'; +import {SEPARATOR_HEIGHT} from './plus_menu/separator'; type Props = { canCreateChannels: boolean; @@ -131,6 +132,8 @@ const ChannelListHeader = ({ const closeButtonId = 'close-plus-menu'; let items = 1; + let separators = 0; + if (canCreateChannels) { items += 1; } @@ -141,12 +144,13 @@ const ChannelListHeader = ({ if (canInvitePeople) { items += 1; + separators += 1; } bottomSheet({ closeButtonId, renderContent, - snapPoints: [bottomSheetSnapPoint(items, ITEM_HEIGHT, insets.bottom), 10], + snapPoints: [bottomSheetSnapPoint(items, ITEM_HEIGHT, insets.bottom, separators, SEPARATOR_HEIGHT), 10], theme, title: intl.formatMessage({id: 'home.header.plus_menu', defaultMessage: 'Options'}), }); diff --git a/app/screens/home/channel_list/categories_list/header/plus_menu/index.tsx b/app/screens/home/channel_list/categories_list/header/plus_menu/index.tsx index 35bc9b806..4bf2481bb 100644 --- a/app/screens/home/channel_list/categories_list/header/plus_menu/index.tsx +++ b/app/screens/home/channel_list/categories_list/header/plus_menu/index.tsx @@ -14,6 +14,7 @@ import {useTheme} from '@context/theme'; import {dismissBottomSheet, showModal} from '@screens/navigation'; import PlusMenuItem from './item'; +import PlusMenuSeparator from './separator'; type Props = { canCreateChannels: boolean; @@ -128,10 +129,13 @@ const PlusMenuList = ({canCreateChannels, canJoinChannels, canInvitePeople, disp onPress={openDirectMessage} /> {canInvitePeople && - + <> + + + } ); diff --git a/app/screens/home/channel_list/categories_list/header/plus_menu/item.tsx b/app/screens/home/channel_list/categories_list/header/plus_menu/item.tsx index 590fa77ae..34c61a2a3 100644 --- a/app/screens/home/channel_list/categories_list/header/plus_menu/item.tsx +++ b/app/screens/home/channel_list/categories_list/header/plus_menu/item.tsx @@ -36,7 +36,6 @@ const PlusMenuItem = ({pickerAction, onPress}: PlusMenuItemProps) => { icon: 'account-plus-outline', text: intl.formatMessage({id: 'plus_menu.invite_people_to_team.title', defaultMessage: 'Invite people to the team'}), testID: 'plus_menu_item.invite_people_to_team', - topDivider: true, }, }; diff --git a/app/screens/home/channel_list/categories_list/header/plus_menu/separator.tsx b/app/screens/home/channel_list/categories_list/header/plus_menu/separator.tsx new file mode 100644 index 000000000..2bed13b13 --- /dev/null +++ b/app/screens/home/channel_list/categories_list/header/plus_menu/separator.tsx @@ -0,0 +1,33 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; +import {View} from 'react-native'; + +import {useTheme} from '@context/theme'; +import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; + +const MARGIN_VERTICAL = 8; +const BORDER = 1; +export const SEPARATOR_HEIGHT = (MARGIN_VERTICAL * 2) + BORDER; + +const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({ + separator: { + marginTop: MARGIN_VERTICAL, + marginBottom: MARGIN_VERTICAL, + borderTopWidth: BORDER, + borderStyle: 'solid', + borderColor: changeOpacity(theme.centerChannelColor, 0.08), + }, +})); + +const PlusMenuSeparator = () => { + const theme = useTheme(); + const style = getStyleSheet(theme); + + return ( + + ); +}; + +export default PlusMenuSeparator; diff --git a/app/utils/helpers.ts b/app/utils/helpers.ts index 7f55e26ec..45d937023 100644 --- a/app/utils/helpers.ts +++ b/app/utils/helpers.ts @@ -144,12 +144,12 @@ export async function isTablet() { export const pluckUnique = (key: string) => (array: Array<{[key: string]: unknown}>) => Array.from(new Set(array.map((obj) => obj[key]))); -export function bottomSheetSnapPoint(itemsCount: number, itemHeight: number, bottomInset = 0) { +export function bottomSheetSnapPoint(itemsCount: number, itemHeight: number, bottomInset = 0, separatorCount = 0, separatorHeight = 0) { let bottom = bottomInset; if (!bottom && Platform.OS === 'ios') { bottom = IOS_STATUS_BAR_HEIGHT; } - return ((itemsCount + Platform.select({android: 1, default: 0})) * itemHeight) + (bottom * 2.5); + return ((itemsCount + Platform.select({android: 1, default: 0})) * itemHeight) + (separatorCount * separatorHeight) + (bottom * 2.5); } export function hasTrailingSpaces(term: string) {