Skip to content
This repository has been archived by the owner on Oct 4, 2023. It is now read-only.

[C-2536] Fix track name cutoff #4019

Merged
merged 3 commits into from
Sep 6, 2023
Merged

[C-2536] Fix track name cutoff #4019

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f83aab7
[C-2536] Fix track name cutoff
dylanjeffers Sep 5, 2023
9d90bbf
Undo memo
dylanjeffers Sep 5, 2023
113dced
allow some text to have newline
dylanjeffers Sep 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion packages/mobile/src/components/core/Text.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ export const Text = (props: TextProps) => {
weight,
fontSize: fontSizeProp,
textTransform,
children: childrenProp,
...other
} = props
const variant = variantProp ?? 'body'
Expand Down Expand Up @@ -85,5 +86,14 @@ export const Text = (props: TextProps) => {
]
)

return <RNText style={[styles.root, customStyles, style]} {...other} />
const children =
typeof childrenProp === 'string'
? childrenProp.replace('\n', ' ')
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Neat! How should we be doing line breaks in our own messages? Do you always do two separate messages spaced using flexbox or is there another way?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

its a good question, actually we should probably have a prop here to disable this, since i see some areas of the mobile code where we do explicit line breaks. Ill fix those entries. Do you have an idea on if it should be default on vs off?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think default on is good to prevent the bug reoccurring. As long as it's not too much work to find the existing newline usages, I would go with that.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Better to require desired newline cases to be explicit about it so we never do it by accident.

: childrenProp

return (
<RNText style={[styles.root, customStyles, style]} {...other}>
{children}
</RNText>
)
}
43 changes: 15 additions & 28 deletions packages/mobile/src/components/lineup-tile/LineupTileMetadata.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,13 @@ import { TouchableOpacity, View } from 'react-native'
import { useSelector } from 'react-redux'

import IconVolume from 'app/assets/images/iconVolume.svg'
import Text from 'app/components/text'
import { Text, FadeInView } from 'app/components/core'
import UserBadges from 'app/components/user-badges'
import { useNavigation } from 'app/hooks/useNavigation'
import { makeStyles } from 'app/styles'
import type { GestureResponderHandler } from 'app/types/gesture'
import { useThemeColors } from 'app/utils/theme'

import { FadeInView } from '../core'

import { LineupTileArt } from './LineupTileArt'
import { useStyles as useTrackTileStyles } from './styles'
import type { LineupTileProps } from './types'
Expand All @@ -25,15 +23,6 @@ const useStyles = makeStyles(({ palette }) => ({
metadata: {
flexDirection: 'row'
},
titlesActive: {
color: palette.primary
},
titlesPressed: {
textDecorationLine: 'underline'
},
titleText: {
fontSize: 16
},
playingIndicator: {
marginLeft: 8
},
Expand Down Expand Up @@ -104,7 +93,7 @@ export const LineupTileMetadata = ({
<TouchableOpacity style={trackTileStyles.title} onPress={onPressTitle}>
<>
<Text
style={[styles.titleText, isActive && styles.titlesActive]}
color={isActive ? 'primary' : 'neutral'}
weight='bold'
numberOfLines={1}
>
Expand All @@ -119,21 +108,19 @@ export const LineupTileMetadata = ({
style={trackTileStyles.artist}
onPress={handleArtistPress}
>
<>
<Text
style={[styles.titleText, isActive && styles.titlesActive]}
weight='medium'
numberOfLines={1}
>
{artistName}
</Text>
<UserBadges
user={user}
badgeSize={12}
style={styles.badge}
hideName
/>
</>
<Text
color={isActive ? 'primary' : 'neutral'}
weight='medium'
numberOfLines={1}
>
{artistName}
</Text>
<UserBadges
user={user}
badgeSize={12}
style={styles.badge}
hideName
/>
</TouchableOpacity>
</FadeInView>
{coSign && (
Expand Down
17 changes: 7 additions & 10 deletions packages/mobile/src/screens/search-screen/SearchResults/SearchItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,13 @@ import { useCallback } from 'react'

import { SquareSizes } from '@audius/common'
import type { SearchPlaylist, SearchTrack, SearchUser } from '@audius/common'
import { View, Text } from 'react-native'
import { View } from 'react-native'
import { useDispatch } from 'react-redux'

import { Text } from 'app/components/core'
import { CollectionImage } from 'app/components/image/CollectionImage'
import { TrackImage } from 'app/components/image/TrackImage'
import { UserImage } from 'app/components/image/UserImage'
import { ProfilePicture } from 'app/components/user'
import UserBadges from 'app/components/user-badges/UserBadges'
import { useNavigation } from 'app/hooks/useNavigation'
import { addItem } from 'app/store/search/searchSlice'
Expand Down Expand Up @@ -58,11 +59,7 @@ const UserSearchResult = (props: UserSearchResultProps) => {

return (
<SearchResultItem onPress={handlePress}>
<UserImage
user={user}
style={styles.userImage}
size={SquareSizes.SIZE_150_BY_150}
/>
<ProfilePicture profile={user} style={styles.userImage} />
<UserBadges
style={styles.badgeContainer}
nameStyle={styles.name}
Expand Down Expand Up @@ -98,7 +95,7 @@ const TrackSearchResult = (props: TrackSearchResultProps) => {
style={styles.squareImage}
/>
<View style={styles.nameContainer}>
<Text numberOfLines={1} style={styles.name}>
<Text numberOfLines={1} variant='body'>
{track.title}
</Text>
<UserBadges
Expand Down Expand Up @@ -136,7 +133,7 @@ const PlaylistSearchResult = (props: PlaylistSearchResultProps) => {
style={styles.squareImage}
/>
<View style={styles.nameContainer}>
<Text numberOfLines={1} style={styles.name}>
<Text numberOfLines={1} variant='body'>
{playlist.playlist_name}
</Text>
<UserBadges
Expand Down Expand Up @@ -174,7 +171,7 @@ const AlbumSearchResult = (props: AlbumSearchResultProps) => {
style={styles.squareImage}
/>
<View style={styles.nameContainer}>
<Text numberOfLines={1} style={styles.name}>
<Text numberOfLines={1} variant='body'>
{album.playlist_name}
</Text>
<UserBadges
Expand Down