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

MM-44652 - Fix long team name (#6943)

Browse Source 
* fix long team name

* minor code refactor

* adds a comment to explain the 85%

* update snapshots
This commit is contained in:
Avinash Lingaloo
2023-01-20 21:17:01 +04:00
committed by GitHub
parent 9c19e4d04a
commit 82c5244589
3 changed files with 200 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
app/screens/home/channel_list/categories_list/__snapshots__/index.test.tsx.snap
View File

@@ -39,44 +39,87 @@ exports[`components/categories_list should render channels error 1`] = `
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
"justifyContent": "space-between",
}
}
>
<View
accessible={true}
focusable={false}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
{
"alignItems": "center",
"flexDirection": "row",
"justifyContent": "space-between",
"width": "85%",
}
}
>
<Text
<View
style={
{
"color": "#ffffff",
"fontFamily": "Metropolis-SemiBold",
"fontSize": 28,
"fontWeight": "600",
"lineHeight": 36,
"alignItems": "center",
"flexDirection": "row",
"justifyContent": "space-between",
}
}
testID="channel_list_header.team_display_name"
>
Test Team!
</Text>
<View
accessible={true}
focusable={false}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
{
"alignItems": "center",
"flexDirection": "row",
"justifyContent": "space-between",
}
}
>
<Text
ellipsizeMode="tail"
numberOfLines={2}
style={
{
"color": "#ffffff",
"fontFamily": "Metropolis-SemiBold",
"fontSize": 28,
"fontWeight": "600",
"lineHeight": 36,
}
}
testID="channel_list_header.team_display_name"
>
Test Team!
</Text>
</View>
</View>
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
"paddingRight": 60,
}
}
>
<Text
ellipsizeMode="tail"
numberOfLines={1}
style={
{
"color": "rgba(255,255,255,0.64)",
"fontFamily": "OpenSans-SemiBold",
"fontSize": 11,
"fontWeight": "600",
"lineHeight": 16,
}
}
testID="channel_list_header.server_display_name"
/>
</View>
</View>
<View
accessible={true}
@@ -104,6 +147,7 @@ exports[`components/categories_list should render channels error 1`] = `
"borderRadius": 14,
"height": 28,
"justifyContent": "center",
"marginTop": 7,
"opacity": 1,
"width": 28,
}
@@ -121,30 +165,6 @@ exports[`components/categories_list should render channels error 1`] = `
/>
</View>
</View>
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
"paddingRight": 60,
}
}
>
<Text
ellipsizeMode="tail"
numberOfLines={1}
style={
{
"color": "rgba(255,255,255,0.64)",
"fontFamily": "OpenSans-SemiBold",
"fontSize": 11,
"fontWeight": "600",
"lineHeight": 16,
}
}
testID="channel_list_header.server_display_name"
/>
</View>
</View>
<View
style={

112
app/screens/home/channel_list/categories_list/header/__snapshots__/header.test.tsx.snap
View File

@@ -19,44 +19,87 @@ exports[`components/channel_list/header Channel List Header Component should mat
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
"justifyContent": "space-between",
}
}
>
<View
accessible={true}
focusable={false}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
{
"alignItems": "center",
"flexDirection": "row",
"justifyContent": "space-between",
"width": "85%",
}
}
>
<Text
<View
style={
{
"color": "#ffffff",
"fontFamily": "Metropolis-SemiBold",
"fontSize": 28,
"fontWeight": "600",
"lineHeight": 36,
"alignItems": "center",
"flexDirection": "row",
"justifyContent": "space-between",
}
}
testID="channel_list_header.team_display_name"
>
Test!
</Text>
<View
accessible={true}
focusable={false}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
{
"alignItems": "center",
"flexDirection": "row",
"justifyContent": "space-between",
}
}
>
<Text
ellipsizeMode="tail"
numberOfLines={2}
style={
{
"color": "#ffffff",
"fontFamily": "Metropolis-SemiBold",
"fontSize": 28,
"fontWeight": "600",
"lineHeight": 36,
}
}
testID="channel_list_header.team_display_name"
>
Test!
</Text>
</View>
</View>
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
"paddingRight": 60,
}
}
>
<Text
ellipsizeMode="tail"
numberOfLines={1}
style={
{
"color": "rgba(255,255,255,0.64)",
"fontFamily": "OpenSans-SemiBold",
"fontSize": 11,
"fontWeight": "600",
"lineHeight": 16,
}
}
testID="channel_list_header.server_display_name"
/>
</View>
</View>
<View
accessible={true}
@@ -84,6 +127,7 @@ exports[`components/channel_list/header Channel List Header Component should mat
"borderRadius": 14,
"height": 28,
"justifyContent": "center",
"marginTop": 7,
"opacity": 1,
"width": 28,
}
@@ -101,29 +145,5 @@ exports[`components/channel_list/header Channel List Header Component should mat
/>
</View>
</View>
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
"paddingRight": 60,
}
}
>
<Text
ellipsizeMode="tail"
numberOfLines={1}
style={
{
"color": "rgba(255,255,255,0.64)",
"fontFamily": "OpenSans-SemiBold",
"fontSize": 11,
"fontWeight": "600",
"lineHeight": 16,
}
}
testID="channel_list_header.server_display_name"
/>
</View>
</View>
`;

122
app/screens/home/channel_list/categories_list/header/header.tsx
View File

@@ -26,6 +26,8 @@ import LoadingUnreads from './loading_unreads';
import PlusMenu from './plus_menu';
import {SEPARATOR_HEIGHT} from './plus_menu/separator';
const PLUS_BUTTON_SIZE = 28;
type Props = {
canCreateChannels: boolean;
canJoinChannels: boolean;
@@ -60,9 +62,10 @@ const getStyles = makeStyleSheetFromTheme((theme: Theme) => ({
},
plusButton: {
backgroundColor: changeOpacity(theme.sidebarText, 0.08),
height: 28,
width: 28,
borderRadius: 14,
height: PLUS_BUTTON_SIZE,
width: PLUS_BUTTON_SIZE,
borderRadius: PLUS_BUTTON_SIZE / 2,
marginTop: PLUS_BUTTON_SIZE / 4,
justifyContent: 'center',
alignItems: 'center',
},
@@ -88,6 +91,13 @@ const getStyles = makeStyleSheetFromTheme((theme: Theme) => ({
justifyContent: 'space-between',
height: 40,
},
outsideBox: {
flexDirection: 'row',
justifyContent: 'space-between',
},
firstBox: {
width: '85%', // ratio derived from the design
},
}));
const hitSlop: Insets = {top: 10, bottom: 30, left: 20, right: 20};
@@ -171,59 +181,63 @@ const ChannelListHeader = ({
let header;
if (displayName) {
header = (
<>
<View style={styles.headerRow}>
<TouchableWithoutFeedback
onPress={onHeaderPress}
>
<View style={styles.headerRow}>
<Text
style={styles.headingStyles}
testID='channel_list_header.team_display_name'
>
{displayName}
</Text>
</View>
</TouchableWithoutFeedback>
<TouchableWithFeedback
hitSlop={hitSlop}
onPress={onPress}
style={styles.plusButton}
testID='channel_list_header.plus.button'
type='opacity'
>
<CompassIcon
style={styles.plusIcon}
name={'plus'}
/>
</TouchableWithFeedback>
</View>
<View style={styles.subHeadingView}>
<Text
numberOfLines={1}
ellipsizeMode='tail'
style={styles.subHeadingStyles}
testID='channel_list_header.server_display_name'
>
{serverDisplayName}
</Text>
{(pushProxyStatus !== PUSH_PROXY_STATUS_VERIFIED) && (
<TouchableWithFeedback
onPress={onPushAlertPress}
testID='channel_list_header.push_alert'
type='opacity'
<View style={styles.outsideBox}>
<View style={styles.firstBox}>
<View style={styles.headerRow}>
<TouchableWithoutFeedback
onPress={onHeaderPress}
>
<CompassIcon
name='alert-outline'
color={theme.errorTextColor}
size={14}
style={styles.pushAlert}
/>
</TouchableWithFeedback>
)}
<LoadingUnreads/>
<View style={styles.headerRow}>
<Text
numberOfLines={2}
ellipsizeMode='tail'
style={styles.headingStyles}
testID='channel_list_header.team_display_name'
>
{displayName}
</Text>
</View>
</TouchableWithoutFeedback>
</View>
<View style={styles.subHeadingView}>
<Text
numberOfLines={1}
ellipsizeMode='tail'
style={styles.subHeadingStyles}
testID='channel_list_header.server_display_name'
>
{serverDisplayName}
</Text>
{(pushProxyStatus !== PUSH_PROXY_STATUS_VERIFIED) && (
<TouchableWithFeedback
onPress={onPushAlertPress}
testID='channel_list_header.push_alert'
type='opacity'
>
<CompassIcon
name='alert-outline'
color={theme.errorTextColor}
size={14}
style={styles.pushAlert}
/>
</TouchableWithFeedback>
)}
<LoadingUnreads/>
</View>
</View>
</>
<TouchableWithFeedback
hitSlop={hitSlop}
onPress={onPress}
style={styles.plusButton}
testID='channel_list_header.plus.button'
type='opacity'
>
<CompassIcon
style={styles.plusIcon}
name={'plus'}
/>
</TouchableWithFeedback>
</View>
);
} else {
header = (