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

Added attachment border radius

This commit is contained in:
xmflsct 2023-02-12 23:08:15 +01:00
parent e37a95408c
commit a78fe5ffe8
11 changed files with 68 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ios/Podfile.lock
View File

@ -352,7 +352,7 @@ PODS:
- React
- react-native-menu (0.7.3):
- React
- react-native-mmkv (2.6.1):
- react-native-mmkv (2.7.0):
- MMKV (>= 1.2.13)
- React-Core
- react-native-netinfo (9.3.7):
@ -825,7 +825,7 @@ SPEC CHECKSUMS:
react-native-ios-context-menu: e529171ba760a1af7f2ef0729f5a7f4d226171c5
react-native-language-detection: f414937fa715108ab50a6269a3de0bcb95e4ceb0
react-native-menu: 9d7d6f819cc7fa14a15cf86888c53f3240d86f1b
react-native-mmkv: 28af0c2a3dc9495c2cea80f9d41444e096c2a1ef
react-native-mmkv: a2a40a0458bdbc9d43c4e7752ecfc5e3a87b66dd
react-native-netinfo: 2517ad504b3d303e90d7a431b0fcaef76d207983
react-native-pager-view: 54bed894cecebe28cede54c01038d9d1e122de43
react-native-paste-input: fb7156dc75960c9895ddd9b9d68eeb874c9f323a

4
package.json
View File

@ -40,7 +40,7 @@
"@react-navigation/stack": "^6.3.12",
"@sentry/react-native": "4.14.0",
"@sharcoux/slider": "^6.1.1",
"@tanstack/react-query": "^4.24.4",
"@tanstack/react-query": "^4.24.6",
"axios": "^1.3.2",
"diff": "^5.1.0",
"expo": "^48.0.0-beta",
@ -76,7 +76,7 @@
"react-native-image-picker": "^5.0.1",
"react-native-ios-context-menu": "^1.15.3",
"react-native-language-detection": "^0.2.2",
"react-native-mmkv": "~2.6.1",
"react-native-mmkv": "~2.7.0",
"react-native-pager-view": "^6.1.2",
"react-native-quick-base64": "^2.0.5",
"react-native-reanimated": "^2.14.4",

14
src/components/GracefullyImage.tsx
View File

@ -21,13 +21,7 @@ export interface Props {
onPress?: () => void
style?: StyleProp<ViewStyle>
imageStyle?: ImageStyle
// For image viewer when there is no image size available
setImageDimensions?: React.Dispatch<
React.SetStateAction<{
width: number
height: number
}>
>
dim?: boolean
enableLiveTextInteraction?: boolean
}
@ -41,7 +35,6 @@ const GracefullyImage = ({
onPress,
style,
imageStyle,
setImageDimensions,
dim,
enableLiveTextInteraction = false
}: Props) => {
@ -68,11 +61,6 @@ const GracefullyImage = ({
source={hidden ? undefined : connectMedia(source)}
transition={{ duration: 80 }}
style={{ flex: 1, ...imageStyle }}
onLoad={event => {
if (setImageDimensions && event.source) {
setImageDimensions(event.source)
}
}}
onError={() => {
if (
sources.default?.uri &&

4
src/components/Timeline/Shared/Attachment/Audio.tsx
View File

@ -64,7 +64,9 @@ const AttachmentAudio: React.FC<Props> = ({ total, index, sensitiveShown, audio
flex: 1,
flexDirection: 'row',
backgroundColor: colors.shimmerDefault,
aspectRatio: aspectRatio({ total, index, ...audio.meta?.original })
aspectRatio: aspectRatio({ total, index, ...audio.meta?.original }),
borderRadius: StyleConstants.BorderRadius / 2,
overflow: 'hidden'
}}
>
<View

12
src/components/Timeline/Shared/Attachment/Image.tsx
View File

@ -1,4 +1,5 @@
import GracefullyImage from '@components/GracefullyImage'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react'
import { View } from 'react-native'
@ -23,7 +24,16 @@ const AttachmentImage = ({
const { colors } = useTheme()
return (
<View style={{ flex: 1, backgroundColor: colors.shimmerDefault, alignContent: 'center', justifyContent: 'center' }}>
<View
style={{
flex: 1,
backgroundColor: colors.shimmerDefault,
alignContent: 'center',
justifyContent: 'center',
borderRadius: StyleConstants.BorderRadius / 2,
overflow: 'hidden'
}}
>
<GracefullyImage
accessibilityLabel={image.description}
hidden={sensitiveShown}

4
src/components/Timeline/Shared/Attachment/Unsupported.tsx
View File

@ -27,7 +27,9 @@ const AttachmentUnsupported: React.FC<Props> = ({ total, index, sensitiveShown,
flex: 1,
aspectRatio: aspectRatio({ total, index, ...attachment.meta?.original }),
justifyContent: 'center',
alignItems: 'center'
alignItems: 'center',
borderRadius: StyleConstants.BorderRadius / 2,
overflow: 'hidden'
}}
>
{attachment.blurhash ? (

4
src/components/Timeline/Shared/Attachment/Video.tsx
View File

@ -56,7 +56,9 @@ const AttachmentVideo: React.FC<Props> = ({
backgroundColor: colors.shimmerDefault,
aspectRatio: aspectRatio({ total, index, ...video.meta?.original }),
alignContent: 'center',
justifyContent: 'center'
justifyContent: 'center',
borderRadius: StyleConstants.BorderRadius / 2,
overflow: 'hidden'
}}
>
<Video

52
src/components/Timeline/Shared/Attachment/index.tsx
View File

@ -171,31 +171,31 @@ const TimelineAttachment = () => {
}
return (
<View
style={{
marginTop: StyleConstants.Spacing.M,
flex: 1,
gap: StyleConstants.Spacing.XS,
...(isLargeDevice && { maxWidth: 375 })
}}
>
{chunk(status.media_attachments, 2).map((chunk, chunkIndex) => (
<View
key={chunkIndex}
style={{
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'center',
alignContent: 'stretch',
gap: StyleConstants.Spacing.XS
}}
>
{chunk.map((a, aIndex) => (
<Fragment key={aIndex}>{mapAttachmentType(a, chunkIndex * 2 + aIndex)}</Fragment>
))}
</View>
))}
<View style={{ marginTop: StyleConstants.Spacing.M, ...(isLargeDevice && { maxWidth: 375 }) }}>
<View
style={{
flex: 1,
gap: StyleConstants.Spacing.XS
}}
>
{chunk(status.media_attachments, 2).map((chunk, chunkIndex) => (
<View
key={chunkIndex}
style={{
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'center',
alignContent: 'stretch',
gap: StyleConstants.Spacing.XS
}}
>
{chunk.map((a, aIndex) => (
<Fragment key={aIndex}>{mapAttachmentType(a, chunkIndex * 2 + aIndex)}</Fragment>
))}
</View>
))}
</View>
{defaultSensitive() &&
(sensitiveShown ? (
@ -231,7 +231,7 @@ const TimelineAttachment = () => {
}}
style={{
position: 'absolute',
top: StyleConstants.Spacing.S * 2,
top: StyleConstants.Spacing.S,
left: StyleConstants.Spacing.S
}}
/>

2
src/screens/Compose/EditAttachment.tsx
View File

@ -110,7 +110,7 @@ const ComposeEditAttachment: React.FC<
style={{
width: DEFAULT_WIDTH,
height: DEFAULT_WIDTH,
borderRadius: StyleConstants.BorderRadius
borderRadius: StyleConstants.BorderRadius / 2
}}
source={theAttachment.preview_url}
/>

2
src/screens/Compose/Root/Footer/Attachments.tsx
View File

@ -54,7 +54,7 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
style={{
width: DEFAULT_WIDTH,
height: DEFAULT_WIDTH,
borderRadius: StyleConstants.BorderRadius
borderRadius: StyleConstants.BorderRadius / 2
}}
source={
item.local?.thumbnail

30
yarn.lock
View File

@ -3483,18 +3483,18 @@ __metadata:
languageName: node
linkType: hard
"@tanstack/query-core@npm:4.24.4":
version: 4.24.4
resolution: "@tanstack/query-core@npm:4.24.4"
checksum: b357e950a41e5769878a3bfe9dd56a66828ccebb2f9396e568e8835bed71eb37926770a461e3aa5bafb7e1121c5141cee86aedf3ced88a2eacf754d545b107cd
"@tanstack/query-core@npm:4.24.6":
version: 4.24.6
resolution: "@tanstack/query-core@npm:4.24.6"
checksum: 495dff04f27d72174051f97676fce0fbe322bca966edb7f174f0005a3363ac0300c31eb06255dafa7ee519a430840542379f5ec9f6846903b6bb878e46c33656
languageName: node
linkType: hard
"@tanstack/react-query@npm:^4.24.4":
version: 4.24.4
resolution: "@tanstack/react-query@npm:4.24.4"
"@tanstack/react-query@npm:^4.24.6":
version: 4.24.6
resolution: "@tanstack/react-query@npm:4.24.6"
dependencies:
"@tanstack/query-core": 4.24.4
"@tanstack/query-core": 4.24.6
use-sync-external-store: ^1.2.0
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
@ -3505,7 +3505,7 @@ __metadata:
optional: true
react-native:
optional: true
checksum: 8cf008d690fc5d336f6471ea2bc0751189f03874dcc7930cf8944fb57fa34e3b5347823775dbd36629d53a7aacb9ce87482b1adb3ad80d277a3a6c73b797f6a2
checksum: 250bc2cba8dd7da61680a8e360fac87ee057d079ee3be950c76dbc063f941119817634857c1cb0d9b12042dd5d4fbe847c02af5dfb89ae8daa0f9339f87ad605
languageName: node
linkType: hard
@ -9913,13 +9913,13 @@ __metadata:
languageName: node
linkType: hard
"react-native-mmkv@npm:~2.6.1":
version: 2.6.1
resolution: "react-native-mmkv@npm:2.6.1"
"react-native-mmkv@npm:~2.7.0":
version: 2.7.0
resolution: "react-native-mmkv@npm:2.7.0"
peerDependencies:
react: "*"
react-native: ">=0.71.0"
checksum: c73959d10e102a08bbde6a8dd041840a680faa8ef411125431afe63fdce38bf5f58cbd3985f8ef63832b8f5c0279ca39d7cd4a2ca1bde172a23eb74e644af5e0
checksum: 74f85b097fb96ecc6906f7b0fd83bf66462d874a3afc243b439a912579cf02dd83266e41da93a214a2986e4a28be42ea3c790f0936c0dbd08a4515395e2ad0de
languageName: node
linkType: hard
@ -11594,7 +11594,7 @@ __metadata:
"@react-navigation/stack": ^6.3.12
"@sentry/react-native": 4.14.0
"@sharcoux/slider": ^6.1.1
"@tanstack/react-query": ^4.24.4
"@tanstack/react-query": ^4.24.6
"@types/diff": ^5.0.2
"@types/linkify-it": ^3.0.2
"@types/lodash": ^4.14.191
@ -11643,7 +11643,7 @@ __metadata:
react-native-image-picker: ^5.0.1
react-native-ios-context-menu: ^1.15.3
react-native-language-detection: ^0.2.2
react-native-mmkv: ~2.6.1
react-native-mmkv: ~2.7.0
react-native-pager-view: ^6.1.2
react-native-quick-base64: ^2.0.5
react-native-reanimated: ^2.14.4