SW/mattermost-mobile
2
0
Fork 0
forked from Ivasoft/mattermost-mobile
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix alignment of custom status (#6211)

Browse Source
This commit is contained in:
Elias Nahum
2022-05-04 09:32:43 -04:00
committed by GitHub
parent 4fc077caef
commit 588491f582
7 changed files with 67 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/channel_item/custom_status/custom_status.tsx
View File

@@ -17,7 +17,7 @@ const style = StyleSheet.create({
customStatusEmoji: {
color: '#000',
marginHorizontal: 5,
top: -4,
top: 3,
},
info: {
marginHorizontal: -15,

8
app/components/custom_status/__snapshots__/custom_status_emoji.test.tsx.snap
View File

@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/custom_status/custom_status_emoji should match snapshot 1`] = `
<Text
<View
testID="custom_status_emoji.calendar"
>
<Text
@@ -17,11 +17,11 @@ exports[`components/custom_status/custom_status_emoji should match snapshot 1`]
>
📆
</Text>
</Text>
</View>
`;
exports[`components/custom_status/custom_status_emoji should match snapshot with props 1`] = `
<Text
<View
testID="custom_status_emoji.calendar"
>
<Text
@@ -37,5 +37,5 @@ exports[`components/custom_status/custom_status_emoji should match snapshot with
>
📆
</Text>
</Text>
</View>
`;

6
app/components/custom_status/custom_status_emoji.tsx
View File

@@ -2,7 +2,7 @@
// See LICENSE.txt for license information.
import React from 'react';
import {StyleProp, Text, TextStyle} from 'react-native';
import {StyleProp, TextStyle, View} from 'react-native';
import Emoji from '@components/emoji';
@@ -16,7 +16,7 @@ interface ComponentProps {
const CustomStatusEmoji = ({customStatus, emojiSize = 16, style, testID}: ComponentProps) => {
const testIdPrefix = testID ? `${testID}.` : '';
return (
<Text
<View
style={style}
testID={`${testIdPrefix}custom_status_emoji.${customStatus.emoji}`}
>
@@ -24,7 +24,7 @@ const CustomStatusEmoji = ({customStatus, emojiSize = 16, style, testID}: Compon
size={emojiSize}
emojiName={customStatus.emoji!}
/>
</Text>
</View>
);
};

2
app/components/post_list/post/header/header.tsx
View File

@@ -65,7 +65,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
customStatusEmoji: {
color: theme.centerChannelColor,
marginRight: 4,
marginTop: 1,
marginTop: 2,
},
};
});

16
app/screens/custom_status/components/custom_status_emoji.tsx
View File

@@ -2,7 +2,7 @@
// See LICENSE.txt for license information.
import React from 'react';
import {Text, TouchableOpacity} from 'react-native';
import {TouchableOpacity} from 'react-native';
import CompassIcon from '@components/compass_icon';
import Emoji from '@components/emoji';
@@ -18,9 +18,7 @@ type Props = {
const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
return {
iconContainer: {
position: 'absolute',
left: 14,
top: 10,
marginLeft: 14,
},
icon: {
color: changeOpacity(theme.centerChannelColor, 0.64),
@@ -40,12 +38,10 @@ const CustomStatusEmoji = ({emoji, isStatusSet, onPress, theme}: Props) => {
style={style.iconContainer}
>
{isStatusSet ? (
<Text style={style.emoji}>
<Emoji
emojiName={emoji || 'speech_balloon'}
size={20}
/>
</Text>
<Emoji
emojiName={emoji || 'speech_balloon'}
size={20}
/>
) : (
<CompassIcon
name='emoticon-happy-outline'

86
app/screens/custom_status/components/custom_status_input.tsx
View File

@@ -37,16 +37,18 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
input: {
alignSelf: 'stretch',
color: theme.centerChannelColor,
width: '100%',
flex: 1,
fontSize: 17,
paddingHorizontal: 52,
paddingHorizontal: 16,
textAlignVertical: 'center',
height: '100%',
},
inputContainer: {
justifyContent: 'center',
alignItems: 'center',
height: 48,
backgroundColor: theme.centerChannelBg,
flexDirection: 'row',
},
};
});
@@ -57,46 +59,46 @@ const CustomStatusInput = ({emoji, isStatusSet, onChangeText, onClearHandle, onO
const placeholder = intl.formatMessage({id: 'custom_status.set_status', defaultMessage: 'Set a Status'});
return (
<View style={style.inputContainer}>
<TextInput
testID='custom_status.input'
autoCapitalize='none'
autoCorrect={false}
blurOnSubmit={false}
disableFullscreenUI={true}
keyboardAppearance={getKeyboardAppearanceFromTheme(theme)}
keyboardType='default'
maxLength={CUSTOM_STATUS_TEXT_CHARACTER_LIMIT}
onChangeText={onChangeText}
placeholder={placeholder}
placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)}
returnKeyType='go'
style={style.input}
secureTextEntry={false}
underlineColorAndroid='transparent'
value={text}
/>
{isStatusSet && (
<View style={style.divider}/>
)}
<CustomStatusEmoji
emoji={emoji}
isStatusSet={isStatusSet}
onPress={onOpenEmojiPicker}
theme={theme}
/>
{isStatusSet ? (
<View
style={style.clearButton}
testID='custom_status.input.clear.button'
>
<ClearButton
handlePress={onClearHandle}
theme={theme}
/>
</View>
) : null}
</View>
<>
<View style={style.inputContainer}>
<CustomStatusEmoji
emoji={emoji}
isStatusSet={isStatusSet}
onPress={onOpenEmojiPicker}
theme={theme}
/>
<TextInput
testID='custom_status.input'
autoCapitalize='none'
autoCorrect={false}
blurOnSubmit={false}
disableFullscreenUI={true}
keyboardAppearance={getKeyboardAppearanceFromTheme(theme)}
keyboardType='default'
maxLength={CUSTOM_STATUS_TEXT_CHARACTER_LIMIT}
onChangeText={onChangeText}
placeholder={placeholder}
placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)}
returnKeyType='go'
style={style.input}
secureTextEntry={false}
underlineColorAndroid='transparent'
value={text}
/>
{isStatusSet ? (
<View
style={style.clearButton}
testID='custom_status.input.clear.button'
>
<ClearButton
handlePress={onClearHandle}
theme={theme}
/>
</View>
) : null}
</View>
{isStatusSet && <View style={style.divider}/>}
</>
);
};

24
app/screens/custom_status/components/custom_status_suggestion.tsx
View File

@@ -3,7 +3,7 @@
import React, {useCallback} from 'react';
import {useIntl} from 'react-intl';
import {Text, TouchableOpacity, View} from 'react-native';
import {TouchableOpacity, View} from 'react-native';
import ClearButton from '@components/custom_status/clear_button';
import CustomStatusText from '@components/custom_status/custom_status_text';
@@ -30,14 +30,11 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
backgroundColor: theme.centerChannelBg,
flexDirection: 'row',
minHeight: 50,
alignItems: 'center',
},
iconContainer: {
width: 45,
height: 46,
left: 14,
top: 12,
marginRight: 6,
color: theme.centerChannelColor,
marginLeft: 14,
marginRight: 10,
},
wrapper: {
flex: 1,
@@ -49,11 +46,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
width: '70%',
flex: 1,
},
clearButtonContainer: {
position: 'absolute',
top: 4,
right: 13,
},
divider: {
backgroundColor: changeOpacity(theme.centerChannelColor, 0.2),
height: 1,
@@ -87,7 +79,7 @@ const CustomStatusSuggestion = ({duration, emoji, expires_at, handleClear, handl
const clearButton =
handleClear && expires_at ? (
<View style={style.clearButtonContainer}>
<View>
<ClearButton
handlePress={handleSuggestionClear}
theme={theme}
@@ -105,12 +97,12 @@ const CustomStatusSuggestion = ({duration, emoji, expires_at, handleClear, handl
>
<View style={style.container}>
{emoji && (
<Text style={style.iconContainer}>
<View style={style.iconContainer}>
<Emoji
emojiName={emoji}
size={20}
/>
</Text>
</View>
)}
<View style={style.wrapper}>
<View style={style.textContainer}>
@@ -133,9 +125,9 @@ const CustomStatusSuggestion = ({duration, emoji, expires_at, handleClear, handl
</View>
)}
</View>
{clearButton}
{separator && <View style={style.divider}/>}
</View>
{clearButton}
</View>
</TouchableOpacity>
);