mirror of
https://github.com/tooot-app/app
synced 2025-02-10 00:40:51 +01:00
Improve status mini card
This commit is contained in:
parent
acca2683af
commit
306bc45e33
@ -146,7 +146,8 @@ const ComponentInstance: React.FC<Props> = ({
|
||||
borderBottomWidth: 1,
|
||||
...StyleConstants.FontStyle.M,
|
||||
color: colors.primaryDefault,
|
||||
borderBottomColor: instanceQuery.isError ? colors.red : colors.border
|
||||
borderBottomColor: instanceQuery.isError ? colors.red : colors.border,
|
||||
...(Platform.OS === 'android' && { paddingRight: 0 })
|
||||
}}
|
||||
editable={false}
|
||||
defaultValue='https://'
|
||||
@ -158,7 +159,8 @@ const ComponentInstance: React.FC<Props> = ({
|
||||
...StyleConstants.FontStyle.M,
|
||||
marginRight: StyleConstants.Spacing.M,
|
||||
color: colors.primaryDefault,
|
||||
borderBottomColor: instanceQuery.isError ? colors.red : colors.border
|
||||
borderBottomColor: instanceQuery.isError ? colors.red : colors.border,
|
||||
...(Platform.OS === 'android' && { paddingLeft: 0 })
|
||||
}}
|
||||
onChangeText={debounce(text => setDomain(text.replace(/^http(s)?\:\/\//i, '')), 1000, {
|
||||
trailing: true
|
||||
|
@ -21,13 +21,7 @@ export interface Props {
|
||||
}
|
||||
|
||||
const ParseEmojis = React.memo(
|
||||
({
|
||||
content,
|
||||
emojis,
|
||||
size = 'M',
|
||||
adaptiveSize = false,
|
||||
fontBold = false
|
||||
}: Props) => {
|
||||
({ content, emojis, size = 'M', adaptiveSize = false, fontBold = false }: Props) => {
|
||||
const { reduceMotionEnabled } = useAccessibility()
|
||||
|
||||
const adaptiveFontsize = useSelector(getSettingsFontsize)
|
||||
@ -51,22 +45,13 @@ const ParseEmojis = React.memo(
|
||||
image: {
|
||||
width: adaptedFontsize,
|
||||
height: adaptedFontsize,
|
||||
...(Platform.OS === 'ios'
|
||||
? {
|
||||
transform: [{ translateY: -2 }]
|
||||
}
|
||||
: {
|
||||
transform: [{ translateY: 1 }]
|
||||
})
|
||||
...(Platform.OS === 'android' && { transform: [{ translateY: 2 }] })
|
||||
}
|
||||
})
|
||||
}, [theme, adaptiveFontsize])
|
||||
|
||||
return (
|
||||
<CustomText
|
||||
style={styles.text}
|
||||
fontWeight={fontBold ? 'Bold' : undefined}
|
||||
>
|
||||
<CustomText style={styles.text} fontWeight={fontBold ? 'Bold' : undefined}>
|
||||
{emojis ? (
|
||||
content
|
||||
.split(regexEmoji)
|
||||
@ -78,11 +63,7 @@ const ParseEmojis = React.memo(
|
||||
return emojiShortcode === `:${emoji.shortcode}:`
|
||||
})
|
||||
if (emojiIndex === -1) {
|
||||
return (
|
||||
<CustomText key={emojiShortcode + i}>
|
||||
{emojiShortcode}
|
||||
</CustomText>
|
||||
)
|
||||
return <CustomText key={emojiShortcode + i}>{emojiShortcode}</CustomText>
|
||||
} else {
|
||||
const uri = reduceMotionEnabled
|
||||
? emojis[emojiIndex].static_url
|
||||
|
@ -10,6 +10,7 @@ import { StyleConstants } from '@utils/styles/constants'
|
||||
import layoutAnimation from '@utils/styles/layoutAnimation'
|
||||
import { adaptiveScale } from '@utils/styles/scaling'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import { isEqual } from 'lodash'
|
||||
import React, { useCallback, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Platform, Pressable, View } from 'react-native'
|
||||
@ -133,13 +134,8 @@ const renderNode = ({
|
||||
name='ExternalLink'
|
||||
size={adaptedFontsize}
|
||||
style={{
|
||||
...(Platform.OS === 'ios'
|
||||
? {
|
||||
transform: [{ translateY: -2 }]
|
||||
}
|
||||
: {
|
||||
transform: [{ translateY: 1 }]
|
||||
})
|
||||
marginLeft: StyleConstants.Spacing.XS,
|
||||
...(Platform.OS === 'android' && { transform: [{ translateY: 2 }] })
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
@ -320,7 +316,7 @@ const ParseHTML = React.memo(
|
||||
/>
|
||||
)
|
||||
},
|
||||
(prev, next) => prev.content === next.content
|
||||
(prev, next) => prev.content === next.content && isEqual(prev.emojis, next.emojis)
|
||||
)
|
||||
|
||||
export default ParseHTML
|
||||
|
@ -70,9 +70,11 @@ const TimelineDefault: React.FC<Props> = ({
|
||||
|
||||
const mainStyle: StyleProp<ViewStyle> = {
|
||||
flex: 1,
|
||||
padding: StyleConstants.Spacing.Global.PagePadding,
|
||||
padding: disableDetails
|
||||
? StyleConstants.Spacing.Global.PagePadding / 1.5
|
||||
: StyleConstants.Spacing.Global.PagePadding,
|
||||
backgroundColor: colors.backgroundDefault,
|
||||
paddingBottom: disableDetails ? StyleConstants.Spacing.Global.PagePadding : 0
|
||||
paddingBottom: disableDetails ? StyleConstants.Spacing.Global.PagePadding / 1.5 : 0,
|
||||
}
|
||||
const main = () => (
|
||||
<>
|
||||
@ -82,7 +84,13 @@ const TimelineDefault: React.FC<Props> = ({
|
||||
<TimelineActioned action='pinned' />
|
||||
) : null}
|
||||
|
||||
<View style={{ flex: 1, width: '100%', flexDirection: 'row' }}>
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
...(disableDetails && { alignItems: 'flex-start', overflow: 'hidden' })
|
||||
}}
|
||||
>
|
||||
<TimelineAvatar />
|
||||
<TimelineHeaderDefault />
|
||||
</View>
|
||||
@ -90,7 +98,11 @@ const TimelineDefault: React.FC<Props> = ({
|
||||
<View
|
||||
style={{
|
||||
paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
|
||||
paddingLeft: highlighted ? 0 : StyleConstants.Avatar.M + StyleConstants.Spacing.S
|
||||
paddingLeft: highlighted
|
||||
? 0
|
||||
: (disableDetails ? StyleConstants.Avatar.XS : StyleConstants.Avatar.M) +
|
||||
StyleConstants.Spacing.S,
|
||||
...(disableDetails && { marginTop: -StyleConstants.Spacing.S })
|
||||
}}
|
||||
>
|
||||
<TimelineContent setSpoilerExpanded={setSpoilerExpanded} />
|
||||
|
@ -12,7 +12,7 @@ export interface Props {
|
||||
}
|
||||
|
||||
const TimelineAvatar: React.FC<Props> = ({ account }) => {
|
||||
const { status, highlighted, disableOnPress } = useContext(StatusContext)
|
||||
const { status, highlighted, disableDetails, disableOnPress } = useContext(StatusContext)
|
||||
const actualAccount = account || status?.account
|
||||
if (!actualAccount) return null
|
||||
|
||||
@ -33,10 +33,17 @@ const TimelineAvatar: React.FC<Props> = ({ account }) => {
|
||||
!disableOnPress && navigation.push('Tab-Shared-Account', { account: actualAccount })
|
||||
}
|
||||
uri={{ original: actualAccount.avatar, static: actualAccount.avatar_static }}
|
||||
dimension={{
|
||||
width: StyleConstants.Avatar.M,
|
||||
height: StyleConstants.Avatar.M
|
||||
}}
|
||||
dimension={
|
||||
disableDetails
|
||||
? {
|
||||
width: StyleConstants.Avatar.XS,
|
||||
height: StyleConstants.Avatar.XS
|
||||
}
|
||||
: {
|
||||
width: StyleConstants.Avatar.M,
|
||||
height: StyleConstants.Avatar.M
|
||||
}
|
||||
}
|
||||
style={{
|
||||
borderRadius: StyleConstants.Avatar.M,
|
||||
overflow: 'hidden',
|
||||
|
@ -10,7 +10,7 @@ import { useStatusQuery } from '@utils/queryHooks/status'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React, { useContext, useEffect, useState } from 'react'
|
||||
import { Pressable, StyleSheet, Text, View } from 'react-native'
|
||||
import { Pressable, StyleSheet, View } from 'react-native'
|
||||
import { Circle } from 'react-native-animated-spinkit'
|
||||
import TimelineDefault from '../Default'
|
||||
import StatusContext from './Context'
|
||||
@ -187,7 +187,10 @@ const TimelineCard: React.FC = () => {
|
||||
style={{
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
minHeight: isAccount && foundAccount ? undefined : StyleConstants.Font.LineHeight.M * 5,
|
||||
minHeight:
|
||||
(isStatus && foundStatus) || (isAccount && foundAccount)
|
||||
? undefined
|
||||
: StyleConstants.Font.LineHeight.M * 5,
|
||||
marginTop: StyleConstants.Spacing.M,
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
borderRadius: StyleConstants.Spacing.S,
|
||||
|
@ -42,14 +42,20 @@ const TimelineHeaderDefault: React.FC = () => {
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, flexDirection: 'row' }}>
|
||||
<View style={{ flex: 7 }}>
|
||||
<View
|
||||
style={{
|
||||
flex: 7,
|
||||
...(disableDetails && { flexDirection: 'row' })
|
||||
}}
|
||||
>
|
||||
<HeaderSharedAccount account={status.account} />
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginTop: StyleConstants.Spacing.XS,
|
||||
marginBottom: StyleConstants.Spacing.S
|
||||
...(disableDetails
|
||||
? { marginLeft: StyleConstants.Spacing.S }
|
||||
: { marginTop: StyleConstants.Spacing.XS, marginBottom: StyleConstants.Spacing.S })
|
||||
}}
|
||||
>
|
||||
<HeaderSharedCreated
|
||||
|
@ -16,7 +16,6 @@ const ComposeReply: React.FC = () => {
|
||||
style={{
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
minHeight: StyleConstants.Font.LineHeight.M * 5,
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
borderRadius: StyleConstants.Spacing.S,
|
||||
overflow: 'hidden',
|
||||
|
@ -83,15 +83,6 @@ const TabMeListEdit: React.FC<TabMeStackScreenProps<'Tab-Me-List-Edit'>> = ({
|
||||
useEffect(() => {
|
||||
navigation.setOptions({
|
||||
title: params.type === 'add' ? t('me.stacks.listAdd.name') : t('me.stacks.listEdit.name'),
|
||||
...(Platform.OS === 'android' && {
|
||||
headerCenter: () => (
|
||||
<HeaderCenter
|
||||
content={
|
||||
params.type === 'add' ? t('me.stacks.listAdd.name') : t('me.stacks.listEdit.name')
|
||||
}
|
||||
/>
|
||||
)
|
||||
}),
|
||||
headerLeft: () => (
|
||||
<HeaderLeft
|
||||
content='X'
|
||||
|
@ -1,10 +1,7 @@
|
||||
import { HeaderCenter, HeaderLeft } from '@components/Header'
|
||||
import { Message } from '@components/Message'
|
||||
import { createNativeStackNavigator } from '@react-navigation/native-stack'
|
||||
import {
|
||||
TabMeProfileStackParamList,
|
||||
TabMeStackScreenProps
|
||||
} from '@utils/navigation/navigators'
|
||||
import { TabMeProfileStackParamList, TabMeStackScreenProps } from '@utils/navigation/navigators'
|
||||
import React, { useRef } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { KeyboardAvoidingView, Platform } from 'react-native'
|
||||
@ -16,9 +13,7 @@ import TabMeProfileRoot from './Profile/Root'
|
||||
|
||||
const Stack = createNativeStackNavigator<TabMeProfileStackParamList>()
|
||||
|
||||
const TabMeProfile: React.FC<TabMeStackScreenProps<'Tab-Me-Switch'>> = ({
|
||||
navigation
|
||||
}) => {
|
||||
const TabMeProfile: React.FC<TabMeStackScreenProps<'Tab-Me-Switch'>> = ({ navigation }) => {
|
||||
const { t } = useTranslation('screenTabs')
|
||||
const messageRef = useRef<FlashMessage>(null)
|
||||
|
||||
@ -32,82 +27,37 @@ const TabMeProfile: React.FC<TabMeStackScreenProps<'Tab-Me-Switch'>> = ({
|
||||
name='Tab-Me-Profile-Root'
|
||||
options={{
|
||||
title: t('me.stacks.profile.name'),
|
||||
...(Platform.OS === 'android' && {
|
||||
headerCenter: () => (
|
||||
<HeaderCenter content={t('me.stacks.profile.name')} />
|
||||
)
|
||||
}),
|
||||
headerLeft: () => (
|
||||
<HeaderLeft
|
||||
content='ChevronDown'
|
||||
onPress={() => navigation.goBack()}
|
||||
/>
|
||||
<HeaderLeft content='ChevronDown' onPress={() => navigation.goBack()} />
|
||||
)
|
||||
}}
|
||||
>
|
||||
{({ route, navigation }) => (
|
||||
<TabMeProfileRoot
|
||||
messageRef={messageRef}
|
||||
route={route}
|
||||
navigation={navigation}
|
||||
/>
|
||||
<TabMeProfileRoot messageRef={messageRef} route={route} navigation={navigation} />
|
||||
)}
|
||||
</Stack.Screen>
|
||||
<Stack.Screen
|
||||
name='Tab-Me-Profile-Name'
|
||||
options={{
|
||||
title: t('me.stacks.profileName.name'),
|
||||
...(Platform.OS === 'android' && {
|
||||
headerCenter: () => (
|
||||
<HeaderCenter content={t('me.stacks.profileName.name')} />
|
||||
)
|
||||
})
|
||||
}}
|
||||
options={{ title: t('me.stacks.profileName.name') }}
|
||||
>
|
||||
{({ route, navigation }) => (
|
||||
<TabMeProfileName
|
||||
messageRef={messageRef}
|
||||
route={route}
|
||||
navigation={navigation}
|
||||
/>
|
||||
<TabMeProfileName messageRef={messageRef} route={route} navigation={navigation} />
|
||||
)}
|
||||
</Stack.Screen>
|
||||
<Stack.Screen
|
||||
name='Tab-Me-Profile-Note'
|
||||
options={{
|
||||
title: t('me.stacks.profileNote.name'),
|
||||
...(Platform.OS === 'android' && {
|
||||
headerCenter: () => (
|
||||
<HeaderCenter content={t('me.stacks.profileNote.name')} />
|
||||
)
|
||||
})
|
||||
}}
|
||||
options={{ title: t('me.stacks.profileNote.name') }}
|
||||
>
|
||||
{({ route, navigation }) => (
|
||||
<TabMeProfileNote
|
||||
messageRef={messageRef}
|
||||
route={route}
|
||||
navigation={navigation}
|
||||
/>
|
||||
<TabMeProfileNote messageRef={messageRef} route={route} navigation={navigation} />
|
||||
)}
|
||||
</Stack.Screen>
|
||||
<Stack.Screen
|
||||
name='Tab-Me-Profile-Fields'
|
||||
options={{
|
||||
title: t('me.stacks.profileFields.name'),
|
||||
...(Platform.OS === 'android' && {
|
||||
headerCenter: () => (
|
||||
<HeaderCenter content={t('me.stacks.profileFields.name')} />
|
||||
)
|
||||
})
|
||||
}}
|
||||
options={{ title: t('me.stacks.profileFields.name') }}
|
||||
>
|
||||
{({ route, navigation }) => (
|
||||
<TabMeProfileFields
|
||||
messageRef={messageRef}
|
||||
route={route}
|
||||
navigation={navigation}
|
||||
/>
|
||||
<TabMeProfileFields messageRef={messageRef} route={route} navigation={navigation} />
|
||||
)}
|
||||
</Stack.Screen>
|
||||
</Stack.Navigator>
|
||||
|
@ -21,5 +21,5 @@ export const StyleConstants = {
|
||||
Global: { PagePadding: Base * 4 }
|
||||
},
|
||||
|
||||
Avatar: { S: 40, M: 48, L: 96 }
|
||||
Avatar: { XS: 32, S: 40, M: 48, L: 96 }
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user