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

Fixed #451 

More properly adjusted flexbox layout
This commit is contained in:
xmflsct 2022-11-11 22:46:08 +01:00
parent beb7ba9dc2
commit 72917c21f6
5 changed files with 55 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "tooot",
"version": "4.5.1",
"version": "4.6.0",
"description": "tooot for Mastodon",
"author": "xmflsct <me@xmflsct.com>",
"license": "GPL-3.0-or-later",

10
src/components/Timeline/Shared/HeaderDefault.android.tsx
View File

@ -81,15 +81,10 @@ const TimelineHeaderDefault = ({ queryKey, status, highlighted }: Props) => {
{queryKey ? (
<Pressable
accessibilityHint={t('accessibilityHint')}
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
marginBottom: StyleConstants.Spacing.L
}}
hitSlop={StyleConstants.Font.Size.M}
style={{ flex: 1, flexBasis: StyleConstants.Font.Size.L }}
>
<ContextMenu
style={{ flex: 1, alignItems: 'center' }}
dropdownMenuMode
actions={actions}
onPress={({ nativeEvent: { index } }) => {
@ -104,7 +99,6 @@ const TimelineHeaderDefault = ({ queryKey, status, highlighted }: Props) => {
size={StyleConstants.Font.Size.L}
/>
}
style={{ width: '100%', height: '100%', paddingHorizontal: StyleConstants.Font.Size.M }}
/>
</Pressable>
) : null}

10
src/components/Timeline/Shared/HeaderDefault.ios.tsx
View File

@ -51,15 +51,10 @@ const TimelineHeaderDefault = ({ queryKey, status, highlighted }: Props) => {
{queryKey ? (
<Pressable
accessibilityHint={t('accessibilityHint')}
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
marginBottom: StyleConstants.Spacing.L
}}
hitSlop={StyleConstants.Font.Size.M}
style={{ flex: 1, flexBasis: StyleConstants.Font.Size.L }}
>
<ContextMenu
style={{ flex: 1, alignItems: 'center' }}
dropdownMenuMode
actions={contextMenuContext}
onPress={() => {}}
@ -70,7 +65,6 @@ const TimelineHeaderDefault = ({ queryKey, status, highlighted }: Props) => {
size={StyleConstants.Font.Size.L}
/>
}
style={{ paddingHorizontal: StyleConstants.Font.Size.M }}
/>
</Pressable>
) : null}

92
src/components/Timeline/Shared/HeaderNotification.android.tsx
View File

@ -3,10 +3,7 @@ import contextMenuInstance from '@components/ContextMenu/instance'
import contextMenuShare from '@components/ContextMenu/share'
import contextMenuStatus from '@components/ContextMenu/status'
import Icon from '@components/Icon'
import {
RelationshipIncoming,
RelationshipOutgoing
} from '@components/Relationship'
import { RelationshipIncoming, RelationshipOutgoing } from '@components/Relationship'
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
@ -32,27 +29,33 @@ const TimelineHeaderNotification = ({ queryKey, notification }: Props) => {
const shareOnPress =
status && status?.visibility !== 'direct'
? contextMenuShare({
actions: contextMenuActions,
type: 'status',
url: status.url || status.uri
})
actions: contextMenuActions,
type: 'status',
url: status.url || status.uri
})
: null
const statusOnPress = status && contextMenuStatus({
actions: contextMenuActions,
status: status,
queryKey
})
const accountOnPress = status && contextMenuAccount({
actions: contextMenuActions,
type: 'status',
queryKey,
id: status.account.id
})
const instanceOnPress = status && contextMenuInstance({
actions: contextMenuActions,
status: status,
queryKey
})
const statusOnPress =
status &&
contextMenuStatus({
actions: contextMenuActions,
status: status,
queryKey
})
const accountOnPress =
status &&
contextMenuAccount({
actions: contextMenuActions,
type: 'status',
queryKey,
id: status.account.id
})
const instanceOnPress =
status &&
contextMenuInstance({
actions: contextMenuActions,
status: status,
queryKey
})
const actions = useMemo(() => {
switch (notification.type) {
@ -64,14 +67,10 @@ const TimelineHeaderNotification = ({ queryKey, notification }: Props) => {
if (notification.status) {
return (
<Pressable
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
paddingBottom: StyleConstants.Spacing.S
}}
style={{ flex: 1, flexBasis: StyleConstants.Font.Size.L }}
children={
<ContextMenu
style={{ flex: 1, alignItems: 'center' }}
dropdownMenuMode
actions={contextMenuActions}
onPress={({ nativeEvent: { index } }) => {
@ -91,7 +90,6 @@ const TimelineHeaderNotification = ({ queryKey, notification }: Props) => {
size={StyleConstants.Font.Size.L}
/>
}
style={{ width: '100%', height: '100%' }}
/>
}
/>
@ -104,21 +102,14 @@ const TimelineHeaderNotification = ({ queryKey, notification }: Props) => {
<View style={{ flex: 1, flexDirection: 'row' }}>
<View
style={{
flex:
notification.type === 'follow' ||
notification.type === 'follow_request'
? 1
: 4
flex: notification.type === 'follow' || notification.type === 'follow_request' ? 1 : 4
}}
>
<HeaderSharedAccount
account={
notification.status
? notification.status.account
: notification.account
}
{...((notification.type === 'follow' ||
notification.type === 'follow_request') && { withoutName: true })}
account={notification.status ? notification.status.account : notification.account}
{...((notification.type === 'follow' || notification.type === 'follow_request') && {
withoutName: true
})}
/>
<View
style={{
@ -129,28 +120,21 @@ const TimelineHeaderNotification = ({ queryKey, notification }: Props) => {
}}
>
<HeaderSharedCreated
created_at={
notification.status?.created_at || notification.created_at
}
created_at={notification.status?.created_at || notification.created_at}
edited_at={notification.status?.edited_at}
/>
{notification.status?.visibility ? (
<HeaderSharedVisibility
visibility={notification.status.visibility}
/>
<HeaderSharedVisibility visibility={notification.status.visibility} />
) : null}
<HeaderSharedMuted muted={notification.status?.muted} />
<HeaderSharedApplication
application={notification.status?.application}
/>
<HeaderSharedApplication application={notification.status?.application} />
</View>
</View>
<View
style={[
{ marginLeft: StyleConstants.Spacing.M },
notification.type === 'follow' ||
notification.type === 'follow_request'
notification.type === 'follow' || notification.type === 'follow_request'
? { flexShrink: 1 }
: { flex: 1 }
]}

45
src/components/Timeline/Shared/HeaderNotification.ios.tsx
View File

@ -1,8 +1,5 @@
import Icon from '@components/Icon'
import {
RelationshipIncoming,
RelationshipOutgoing
} from '@components/Relationship'
import { RelationshipIncoming, RelationshipOutgoing } from '@components/Relationship'
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
@ -36,14 +33,10 @@ const TimelineHeaderNotification = ({ notification }: Props) => {
if (notification.status) {
return (
<Pressable
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
paddingBottom: StyleConstants.Spacing.S
}}
style={{ flex: 1, flexBasis: StyleConstants.Font.Size.L }}
children={
<ContextMenu
style={{ flex: 1, alignItems: 'center' }}
dropdownMenuMode
actions={contextMenuContext}
onPress={() => {}}
@ -66,21 +59,14 @@ const TimelineHeaderNotification = ({ notification }: Props) => {
<View style={{ flex: 1, flexDirection: 'row' }}>
<View
style={{
flex:
notification.type === 'follow' ||
notification.type === 'follow_request'
? 1
: 4
flex: notification.type === 'follow' || notification.type === 'follow_request' ? 1 : 4
}}
>
<HeaderSharedAccount
account={
notification.status
? notification.status.account
: notification.account
}
{...((notification.type === 'follow' ||
notification.type === 'follow_request') && { withoutName: true })}
account={notification.status ? notification.status.account : notification.account}
{...((notification.type === 'follow' || notification.type === 'follow_request') && {
withoutName: true
})}
/>
<View
style={{
@ -91,28 +77,21 @@ const TimelineHeaderNotification = ({ notification }: Props) => {
}}
>
<HeaderSharedCreated
created_at={
notification.status?.created_at || notification.created_at
}
created_at={notification.status?.created_at || notification.created_at}
edited_at={notification.status?.edited_at}
/>
{notification.status?.visibility ? (
<HeaderSharedVisibility
visibility={notification.status.visibility}
/>
<HeaderSharedVisibility visibility={notification.status.visibility} />
) : null}
<HeaderSharedMuted muted={notification.status?.muted} />
<HeaderSharedApplication
application={notification.status?.application}
/>
<HeaderSharedApplication application={notification.status?.application} />
</View>
</View>
<View
style={[
{ marginLeft: StyleConstants.Spacing.M },
notification.type === 'follow' ||
notification.type === 'follow_request'
notification.type === 'follow' || notification.type === 'follow_request'
? { flexShrink: 1 }
: { flex: 1 }
]}