toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix post priority bottom sheet (#7350)

Browse source 
* Fix post priority bottom sheet

* Remove unneeded tablet handling
This commit is contained in:
Daniel Espino García 2023-05-16 19:13:06 +02:00 committed by GitHub
parent a72abea4d8
commit 5a610f1620
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 46 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
app/components/option_item/index.tsx
View file

@ -30,6 +30,14 @@ const OptionType = {
export type OptionType = typeof OptionType[keyof typeof OptionType];
export const ITEM_HEIGHT = 48;
const DESCRIPTION_MARGIN_TOP = 2;
export function getItemHeightWithDescription(descriptionNumberOfLines: number) {
const labelHeight = 24; // typography 200 line height
const descriptionLineHeight = 16; // typography 75 line height;
return Math.max(48, labelHeight + DESCRIPTION_MARGIN_TOP + (descriptionLineHeight * descriptionNumberOfLines));
}
const hitSlop = {top: 11, bottom: 11, left: 11, right: 11};
const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
@ -50,7 +58,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
description: {
color: changeOpacity(theme.centerChannelColor, 0.64),
...typography('Body', 75),
marginTop: 2,
marginTop: DESCRIPTION_MARGIN_TOP,
},
iconContainer: {marginRight: 16},
infoContainer: {marginRight: 2},
@ -118,6 +126,7 @@ export type OptionItemProps = {
type: OptionType;
value?: string;
onLayout?: (event: LayoutChangeEvent) => void;
descriptionNumberOfLines?: number;
}
const OptionItem = ({
@ -141,6 +150,7 @@ const OptionItem = ({
type,
value,
onLayout,
descriptionNumberOfLines,
}: OptionItemProps) => {
const theme = useTheme();
const styles = getStyleSheet(theme);
@ -262,6 +272,7 @@ const OptionItem = ({
<Text
style={[descriptionTextStyle, optionDescriptionTextStyle]}
testID={`${testID}.description`}
numberOfLines={descriptionNumberOfLines}
>
{description}
</Text>

2
app/products/calls/components/message_bar.tsx
View file

@ -14,8 +14,8 @@ import {useTheme} from '@context/theme';
import {makeStyleSheetFromTheme} from '@utils/theme';
import {typography} from '@utils/typography';
import type {MessageBarType} from '@app/constants/calls';
import type {CallsTheme} from '@calls/types/calls';
import type {MessageBarType} from '@constants/calls';
type Props = {
type: MessageBarType;

16
app/screens/post_priority_picker/components/picker_option.tsx
View file

@ -2,36 +2,26 @@
// See LICENSE.txt for license information.
import React from 'react';
import {StyleSheet} from 'react-native';
import OptionItem, {type OptionItemProps, type OptionType} from '@components/option_item';
import {useTheme} from '@context/theme';
import {makeStyleSheetFromTheme} from '@utils/theme';
import {typography} from '@utils/typography';
const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
const style = StyleSheet.create({
labelContainer: {
alignItems: 'flex-start',
},
optionLabelText: {
color: theme.centerChannelColor,
...typography('Body', 200, 'Regular'),
},
}));
});
type Props = Omit<OptionItemProps, 'type'> & {
type?: OptionType;
}
const PickerOption = ({type, ...rest}: Props) => {
const theme = useTheme();
const style = getStyleSheet(theme);
const testID = `post_priority_picker_item.${rest.value || 'standard'}`;
return (
<OptionItem
labelContainerStyle={style.labelContainer}
optionLabelTextStyle={style.optionLabelText}
testID={testID}
type={type || 'select'}
{...rest}

14
app/screens/post_priority_picker/footer.tsx
View file

@ -16,12 +16,18 @@ export type Props = BottomSheetFooterProps & {
onSubmit: () => void;
}
const TEXT_HEIGHT = 24; // typography 200 line height
const BUTTON_PADDING = 15;
const FOOTER_PADDING = 20;
const FOOTER_PADDING_BOTTOM_TABLET_ADJUST = 12;
export const FOOTER_HEIGHT = (FOOTER_PADDING * 2) + (BUTTON_PADDING * 2) + TEXT_HEIGHT;
const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
container: {
backgroundColor: theme.centerChannelBg,
borderTopColor: changeOpacity(theme.centerChannelColor, 0.16),
borderTopWidth: 1,
paddingTop: 20,
paddingTop: FOOTER_PADDING,
flexDirection: 'row',
paddingHorizontal: 20,
},
@ -30,7 +36,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
backgroundColor: changeOpacity(theme.buttonBg, 0.08),
borderRadius: 4,
flex: 1,
paddingVertical: 15,
paddingVertical: BUTTON_PADDING,
},
cancelButtonText: {
color: theme.buttonBg,
@ -42,7 +48,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
borderRadius: 4,
flex: 1,
marginLeft: 8,
paddingVertical: 15,
paddingVertical: BUTTON_PADDING,
},
applyButtonText: {
color: theme.buttonColor,
@ -59,7 +65,7 @@ const PostPriorityPickerFooter = ({onCancel, onSubmit, ...props}: Props) => {
<BottomSheetFooter {...props}>
<View
style={[style.container, {
paddingBottom: Platform.select({ios: (isTablet ? 20 : 32), android: 20}),
paddingBottom: FOOTER_PADDING + Platform.select({ios: (isTablet ? FOOTER_PADDING_BOTTOM_TABLET_ADJUST : 0), default: 0}),
}]}
>
<TouchableOpacity

28
app/screens/post_priority_picker/post_priority_picker.tsx
View file

@ -7,6 +7,8 @@ import {View} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import FormattedText from '@components/formatted_text';
import {getItemHeightWithDescription} from '@components/option_item';
import {ITEM_HEIGHT} from '@components/slide_up_panel_item';
import {Screens} from '@constants';
import {PostPriorityColors, PostPriorityType} from '@constants/post';
import {useTheme} from '@context/theme';
@ -20,7 +22,7 @@ import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
import {typography} from '@utils/typography';
import PickerOption from './components/picker_option';
import Footer from './footer';
import Footer, {FOOTER_HEIGHT} from './footer';
import {labels} from './utils';
import type {BottomSheetFooterProps} from '@gorhom/bottom-sheet';
@ -35,6 +37,11 @@ type Props = {
closeButtonId: string;
};
const TITLE_HEIGHT = 30; // typography 600 line height
const OPTIONS_PADDING = 12;
const OPTIONS_SEPARATOR_HEIGHT = 1;
const TOGGLE_OPTION_MARGIN_TOP = 16;
const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
container: {
backgroundColor: theme.centerChannelBg,
@ -59,16 +66,16 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
},
optionsContainer: {
paddingTop: 12,
paddingTop: OPTIONS_PADDING,
},
optionsSeparator: {
backgroundColor: changeOpacity(theme.centerChannelColor, 0.08),
height: 1,
height: OPTIONS_SEPARATOR_HEIGHT,
},
toggleOptionContainer: {
marginTop: 16,
marginTop: TOGGLE_OPTION_MARGIN_TOP,
},
}));
@ -98,17 +105,18 @@ const PostPriorityPicker = ({
const displayPersistentNotifications = isPersistenNotificationsEnabled && data.priority === PostPriorityType.URGENT;
const snapPoints = useMemo(() => {
let COMPONENT_HEIGHT = 280;
const paddingBottom = 10;
const bottomSheetAdjust = 5;
let COMPONENT_HEIGHT = TITLE_HEIGHT + OPTIONS_PADDING + FOOTER_HEIGHT + bottomSheetSnapPoint(3, ITEM_HEIGHT, bottom) + paddingBottom + bottomSheetAdjust;
if (isPostAcknowledgementEnabled) {
COMPONENT_HEIGHT += 75;
COMPONENT_HEIGHT += OPTIONS_SEPARATOR_HEIGHT + TOGGLE_OPTION_MARGIN_TOP + getItemHeightWithDescription(2);
if (displayPersistentNotifications) {
COMPONENT_HEIGHT += 75;
COMPONENT_HEIGHT += OPTIONS_SEPARATOR_HEIGHT + TOGGLE_OPTION_MARGIN_TOP + getItemHeightWithDescription(2);
}
}
return [1, bottomSheetSnapPoint(1, COMPONENT_HEIGHT, bottom)];
return [1, COMPONENT_HEIGHT];
}, [displayPersistentNotifications, isPostAcknowledgementEnabled, bottom]);
const handleUpdatePriority = useCallback((priority: PostPriority['priority']) => {
@ -185,6 +193,7 @@ const PostPriorityPicker = ({
icon='check-circle-outline'
type='toggle'
selected={data.requested_ack}
descriptionNumberOfLines={2}
/>
</View>
{displayPersistentNotifications && (
@ -196,6 +205,7 @@ const PostPriorityPicker = ({
icon='bell-ring-outline'
type='toggle'
selected={data.persistent_notifications}
descriptionNumberOfLines={2}
/>
</View>
)}

2
app/screens/post_priority_picker/utils.ts
View file

@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {t} from '@app/i18n';
import {t} from '@i18n';
export const labels = {
standard: {