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

Experiment with #558

This commit is contained in:
xmflsct 2022-12-18 23:15:58 +01:00
parent d26d8f3c14
commit 50b07fc5eb
7 changed files with 109 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -98,19 +98,17 @@ const TimelineConversation: React.FC<Props> = ({ conversation, queryKey, highlig
</View>
{conversation.last_status ? (
<>
<View
style={{
paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
paddingLeft: highlighted ? 0 : StyleConstants.Avatar.M + StyleConstants.Spacing.S
}}
>
<TimelineContent />
<TimelinePoll />
</View>
<View
style={{
paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
paddingLeft: highlighted ? 0 : StyleConstants.Avatar.M + StyleConstants.Spacing.S
}}
>
<TimelineContent />
<TimelinePoll />
<TimelineActions />
</>
</View>
) : null}
</Pressable>
</StatusContext.Provider>

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

@ -103,8 +103,9 @@ const TimelineDefault: React.FC<Props> = ({
paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
paddingLeft: highlighted
? 0
: (disableDetails ? StyleConstants.Avatar.XS : StyleConstants.Avatar.M) +
StyleConstants.Spacing.S,
: (disableDetails || isConversation
? StyleConstants.Avatar.XS
: StyleConstants.Avatar.M) + StyleConstants.Spacing.S,
...(disableDetails && { marginTop: -StyleConstants.Spacing.S })
}}
>
@ -115,9 +116,9 @@ const TimelineDefault: React.FC<Props> = ({
<TimelineFullConversation />
<TimelineTranslate />
<TimelineFeedback />
</View>
<TimelineActions />
<TimelineActions />
</View>
</>
)

8
src/components/Timeline/Notifications.tsx
View File

@ -47,10 +47,6 @@ const TimelineNotifications: React.FC<Props> = ({ notification, queryKey }) => {
const spoilerHidden = notification.status?.spoiler_text?.length
? !instanceAccount.preferences?.['reading:expand:spoilers'] && !spoilerExpanded
: false
const copiableContent = useRef<{ content: string; complete: boolean }>({
content: '',
complete: false
})
const { colors } = useTheme()
const navigation = useNavigation<StackNavigationProp<TabLocalStackParamList>>()
@ -101,11 +97,11 @@ const TimelineNotifications: React.FC<Props> = ({ notification, queryKey }) => {
<TimelineAttachment />
<TimelineCard />
<TimelineFullConversation />
<TimelineActions />
</View>
) : null}
</View>
<TimelineActions />
</>
)
}

102
src/components/Timeline/Shared/Actions.tsx
View File

@ -263,63 +263,57 @@ const TimelineActions: React.FC = () => {
}, [status.bookmarked])
return (
<View
style={{
paddingLeft: highlighted ? 0 : StyleConstants.Avatar.M + StyleConstants.Spacing.S
}}
>
<View style={{ flexDirection: 'row' }}>
<Pressable
{...(highlighted
? {
accessibilityLabel: t('shared.actions.reply.accessibilityLabel'),
accessibilityRole: 'button'
}
: { accessibilityLabel: '' })}
style={styles.action}
onPress={onPressReply}
children={childrenReply}
/>
<View style={{ flexDirection: 'row' }}>
<Pressable
{...(highlighted
? {
accessibilityLabel: t('shared.actions.reply.accessibilityLabel'),
accessibilityRole: 'button'
}
: { accessibilityLabel: '' })}
style={styles.action}
onPress={onPressReply}
children={childrenReply}
/>
<Pressable
{...(highlighted
? {
accessibilityLabel: t('shared.actions.reblogged.accessibilityLabel'),
accessibilityRole: 'button'
}
: { accessibilityLabel: '' })}
style={styles.action}
onPress={onPressReblog}
children={childrenReblog}
disabled={
status.visibility === 'direct' || (status.visibility === 'private' && !ownAccount)
}
/>
<Pressable
{...(highlighted
? {
accessibilityLabel: t('shared.actions.reblogged.accessibilityLabel'),
accessibilityRole: 'button'
}
: { accessibilityLabel: '' })}
style={styles.action}
onPress={onPressReblog}
children={childrenReblog}
disabled={
status.visibility === 'direct' || (status.visibility === 'private' && !ownAccount)
}
/>
<Pressable
{...(highlighted
? {
accessibilityLabel: t('shared.actions.favourited.accessibilityLabel'),
accessibilityRole: 'button'
}
: { accessibilityLabel: '' })}
style={styles.action}
onPress={onPressFavourite}
children={childrenFavourite}
/>
<Pressable
{...(highlighted
? {
accessibilityLabel: t('shared.actions.favourited.accessibilityLabel'),
accessibilityRole: 'button'
}
: { accessibilityLabel: '' })}
style={styles.action}
onPress={onPressFavourite}
children={childrenFavourite}
/>
<Pressable
{...(highlighted
? {
accessibilityLabel: t('shared.actions.bookmarked.accessibilityLabel'),
accessibilityRole: 'button'
}
: { accessibilityLabel: '' })}
style={styles.action}
onPress={onPressBookmark}
children={childrenBookmark}
/>
</View>
<Pressable
{...(highlighted
? {
accessibilityLabel: t('shared.actions.bookmarked.accessibilityLabel'),
accessibilityRole: 'button'
}
: { accessibilityLabel: '' })}
style={styles.action}
onPress={onPressBookmark}
children={childrenBookmark}
/>
</View>
)
}

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

@ -48,8 +48,7 @@ const TimelineAvatar: React.FC<Props> = ({ account }) => {
style={{
borderRadius: StyleConstants.Avatar.M,
overflow: 'hidden',
marginRight: StyleConstants.Spacing.S,
marginLeft: isConversation ? StyleConstants.Avatar.M - StyleConstants.Avatar.XS : undefined
marginRight: StyleConstants.Spacing.S
}}
/>
)

13
src/screens/Tabs/Me/SettingsFontsize.tsx
View File

@ -5,11 +5,7 @@ import CustomText from '@components/Text'
import TimelineDefault from '@components/Timeline/Default'
import { useAppDispatch } from '@root/store'
import { TabMeStackScreenProps } from '@utils/navigation/navigators'
import {
changeFontsize,
getSettingsFontsize,
SettingsState
} from '@utils/slices/settingsSlice'
import { changeFontsize, getSettingsFontsize, SettingsState } from '@utils/slices/settingsSlice'
import { StyleConstants } from '@utils/styles/constants'
import { adaptiveScale } from '@utils/styles/scaling'
import { useTheme } from '@utils/styles/ThemeManager'
@ -34,9 +30,7 @@ export const mapFontsizeToName = (size: SettingsState['fontsize']) => {
}
}
const TabMeSettingsFontsize: React.FC<
TabMeStackScreenProps<'Tab-Me-Settings-Fontsize'>
> = () => {
const TabMeSettingsFontsize: React.FC<TabMeStackScreenProps<'Tab-Me-Settings-Fontsize'>> = () => {
const { colors, theme } = useTheme()
const { t } = useTranslation('screenTabs')
const initialSize = useSelector(getSettingsFontsize)
@ -86,8 +80,7 @@ const TabMeSettingsFontsize: React.FC<
marginBottom: StyleConstants.Spacing.M,
fontSize: adaptiveScale(StyleConstants.Font.Size.M, size),
lineHeight: adaptiveScale(StyleConstants.Font.LineHeight.M, size),
color:
initialSize === size ? colors.primaryDefault : colors.secondary,
color: initialSize === size ? colors.primaryDefault : colors.secondary,
borderWidth: StyleSheet.hairlineWidth,
borderColor: colors.border
}}

125
src/screens/Tabs/Shared/Toot.tsx
View File

@ -5,8 +5,10 @@ import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
import React, { useEffect, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { FlatList } from 'react-native'
import { FlatList, View } from 'react-native'
import { InfiniteQueryObserver, useQueryClient } from '@tanstack/react-query'
import ComponentSeparator from '@components/Separator'
import { StyleConstants } from '@utils/styles/constants'
const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
navigation,
@ -98,94 +100,49 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
queryKey={queryKey}
queryOptions={{ staleTime: 0, refetchOnMount: true }}
customProps={{
renderItem: ({ item }) => {
ItemSeparatorComponent: ({ leadingItem }) => {
const levels = {
current:
replyLevels.current.find(reply => reply.id === leadingItem.in_reply_to_id)?.level || 0
}
return (
<TimelineDefault
item={item}
queryKey={queryKey}
rootQueryKey={rootQueryKey}
highlighted={toot.id === item.id}
<ComponentSeparator
extraMarginLeft={
toot.id === leadingItem.id
? 0
: StyleConstants.Avatar.XS +
StyleConstants.Spacing.S +
Math.max(0, levels.current - 1) * 8
}
/>
)
},
// renderItem: ({ item, index }) => {
// const levels = {
// previous:
// replyLevels.current.find(
// reply => reply.id === data.current?.[index - 1]?.in_reply_to_id
// )?.level || 0,
// current:
// replyLevels.current.find(reply => reply.id === item.in_reply_to_id)?.level || 0,
// next:
// replyLevels.current.find(
// reply => reply.id === data.current?.[index + 1]?.in_reply_to_id
// )?.level || 0
// }
renderItem: ({ item, index }) => {
const levels = {
previous:
replyLevels.current.find(
reply => reply.id === data.current?.[index - 1]?.in_reply_to_id
)?.level || 0,
current:
replyLevels.current.find(reply => reply.id === item.in_reply_to_id)?.level || 0,
next:
replyLevels.current.find(
reply => reply.id === data.current?.[index + 1]?.in_reply_to_id
)?.level || 0
}
// return (
// <>
// <TimelineDefault
// item={item}
// queryKey={queryKey}
// rootQueryKey={rootQueryKey}
// highlighted={toot.id === item.id}
// isConversation={toot.id !== item.id}
// />
// {Array.from(Array(levels.current)).map((_, i) => {
// if (index < highlightIndex.current) return null
// if (
// levels.previous + 1 === levels.current ||
// (levels.previous && levels.current && levels.previous === levels.current)
// ) {
// return (
// <View
// key={i}
// style={{
// position: 'absolute',
// top: 0,
// left: StyleConstants.Spacing.Global.PagePadding / 2 + 8 * i,
// height:
// levels.current === levels.next
// ? StyleConstants.Spacing.Global.PagePadding
// : StyleConstants.Spacing.Global.PagePadding + StyleConstants.Avatar.XS,
// borderLeftColor: colors.border,
// borderLeftWidth: 1
// }}
// />
// )
// } else {
// return null
// }
// })}
// {Array.from(Array(levels.next)).map((_, i) => {
// if (index < highlightIndex.current) return null
// if (
// levels.current + 1 === levels.next ||
// (levels.current && levels.next && levels.current === levels.next)
// ) {
// return (
// <View
// key={i}
// style={{
// position: 'absolute',
// top:
// levels.current + 1 === levels.next && levels.next > i + 1
// ? StyleConstants.Spacing.Global.PagePadding + StyleConstants.Avatar.XS
// : StyleConstants.Spacing.Global.PagePadding,
// left: StyleConstants.Spacing.Global.PagePadding / 2 + 8 * i,
// height: 200,
// borderLeftColor: colors.border,
// borderLeftWidth: 1
// }}
// />
// )
// } else {
// return null
// }
// })}
// </>
// )
// },
return (
<View style={{ marginLeft: Math.max(0, levels.current - 1) * StyleConstants.Spacing.S }}>
<TimelineDefault
item={item}
queryKey={queryKey}
rootQueryKey={rootQueryKey}
highlighted={toot.id === item.id}
isConversation={toot.id !== item.id}
/>
</View>
)
},
onScrollToIndexFailed: error => {
const offset = error.averageItemLength * error.index
flRef.current?.scrollToOffset({ offset })