Add ellipsis to server displayName & url (#6223)

This commit is contained in:
Elias Nahum
2022-05-04 12:15:13 -04:00
committed by GitHub
parent abc5dc4bc3
commit 32fd8e3cda
4 changed files with 29 additions and 3 deletions

View File

@@ -149,6 +149,8 @@ exports[`components/categories_list should render channels error 1`] = `
</View>
</View>
<Text
ellipsizeMode="tail"
numberOfLines={1}
style={
Object {
"color": "rgba(255,255,255,0.64)",
@@ -156,6 +158,7 @@ exports[`components/categories_list should render channels error 1`] = `
"fontSize": 11,
"fontWeight": "600",
"lineHeight": 16,
"paddingRight": 30,
}
}
testID="channel_list_header.server_display_name"
@@ -346,6 +349,8 @@ exports[`components/categories_list should render team error 1`] = `
}
>
<Text
ellipsizeMode="tail"
numberOfLines={1}
style={
Object {
"color": "rgba(255,255,255,0.64)",

View File

@@ -129,6 +129,8 @@ exports[`components/channel_list/header Channel List Header Component should mat
</View>
</View>
<Text
ellipsizeMode="tail"
numberOfLines={1}
style={
Object {
"color": "rgba(255,255,255,0.64)",
@@ -136,6 +138,7 @@ exports[`components/channel_list/header Channel List Header Component should mat
"fontSize": 11,
"fontWeight": "600",
"lineHeight": 16,
"paddingRight": 30,
}
}
testID="channel_list_header.server_display_name"

View File

@@ -37,6 +37,7 @@ const getStyles = makeStyleSheetFromTheme((theme: Theme) => ({
},
subHeadingStyles: {
color: changeOpacity(theme.sidebarText, 0.64),
paddingRight: 30,
...typography('Heading', 50),
},
headerRow: {
@@ -168,6 +169,8 @@ const ChannelListHeader = ({canCreateChannels, canJoinChannels, displayName, ico
</TouchableWithFeedback>
</View>
<Text
numberOfLines={1}
ellipsizeMode='tail'
style={styles.subHeadingStyles}
testID='channel_list_header.server_display_name'
>
@@ -180,6 +183,8 @@ const ChannelListHeader = ({canCreateChannels, canJoinChannels, displayName, ico
<View style={styles.noTeamHeaderRow}>
<View style={styles.noTeamHeaderRow}>
<Text
numberOfLines={1}
ellipsizeMode='tail'
style={styles.noTeamHeadingStyles}
testID='channel_list_header.team_display_name'
>

View File

@@ -60,7 +60,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
flex: 1,
height: 72,
justifyContent: 'center',
paddingHorizontal: 18,
paddingLeft: 18,
},
container: {
alignItems: 'center',
@@ -72,6 +72,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
},
details: {
marginLeft: 14,
flex: 1,
},
logout: {
backgroundColor: theme.centerChannelBg,
@@ -354,8 +355,20 @@ const ServerItem = ({highlight, isActive, server, tutorialWatched}: Props) => {
/>
}
<View style={styles.details}>
<Text style={styles.name}>{displayName}</Text>
<Text style={styles.url}>{removeProtocol(stripTrailingSlashes(server.url))}</Text>
<Text
numberOfLines={1}
ellipsizeMode='tail'
style={styles.name}
>
{displayName}
</Text>
<Text
numberOfLines={1}
ellipsizeMode='tail'
style={styles.url}
>
{removeProtocol(stripTrailingSlashes(server.url))}
</Text>
</View>
</View>
{!server.lastActiveAt && !switching &&