octo/tooot
octo
/
tooot
mirror of https://github.com/tooot-app/app
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Improve status mini card

This commit is contained in:
xmflsct 2022-12-11 14:08:27 +01:00
parent acca2683af
commit 306bc45e33
11 changed files with 65 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Instance/index.tsx
View File

@ -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

27
src/components/Parse/Emojis.tsx
View File

@ -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

12
src/components/Parse/HTML.tsx
View File

@ -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

20
src/components/Timeline/Default.tsx
View File

@ -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} />

17
src/components/Timeline/Shared/Avatar.tsx
View File

@ -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',

7
src/components/Timeline/Shared/Card.tsx
View File

@ -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,

12
src/components/Timeline/Shared/HeaderDefault.tsx
View File

@ -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

1
src/screens/Compose/Root/Footer/Reply.tsx
View File

@ -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',

9
src/screens/Tabs/Me/List/Edit.tsx
View File

@ -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'

70
src/screens/Tabs/Me/Profile.tsx
View File

@ -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>

2
src/utils/styles/constants.ts
View File

@ -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 }
}