octo/tooot
octo/tooot
1
0
Fork 0
mirror of https://github.com/tooot-app/app synced 2025-02-28 09:37:43 +01:00
Code Issues Projects Releases Wiki Activity

Added attachment border radius

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

4
package.json
View File

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

14
src/components/GracefullyImage.tsx
View File

@ -21,13 +21,7 @@ export interface Props {
onPress?: () => void onPress?: () => void
style?: StyleProp<ViewStyle> style?: StyleProp<ViewStyle>
imageStyle?: ImageStyle imageStyle?: ImageStyle
// For image viewer when there is no image size available
setImageDimensions?: React.Dispatch<
React.SetStateAction<{
width: number
height: number
}>
>
dim?: boolean dim?: boolean
enableLiveTextInteraction?: boolean enableLiveTextInteraction?: boolean
} }
@ -41,7 +35,6 @@ const GracefullyImage = ({
onPress, onPress,
style, style,
imageStyle, imageStyle,
setImageDimensions,
dim, dim,
enableLiveTextInteraction = false enableLiveTextInteraction = false
}: Props) => { }: Props) => {
@ -68,11 +61,6 @@ const GracefullyImage = ({
source={hidden ? undefined : connectMedia(source)} source={hidden ? undefined : connectMedia(source)}
transition={{ duration: 80 }} transition={{ duration: 80 }}
style={{ flex: 1, ...imageStyle }} style={{ flex: 1, ...imageStyle }}
onLoad={event => {
if (setImageDimensions && event.source) {
setImageDimensions(event.source)
}
}}
onError={() => { onError={() => {
if ( if (
sources.default?.uri && 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, flex: 1,
flexDirection: 'row', flexDirection: 'row',
backgroundColor: colors.shimmerDefault, backgroundColor: colors.shimmerDefault,
aspectRatio: aspectRatio({ total, index, ...audio.meta?.original }) aspectRatio: aspectRatio({ total, index, ...audio.meta?.original }),
borderRadius: StyleConstants.BorderRadius / 2,
overflow: 'hidden'
}} }}
> >
<View <View

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

@ -1,4 +1,5 @@
import GracefullyImage from '@components/GracefullyImage' import GracefullyImage from '@components/GracefullyImage'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager' import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react' import React from 'react'
import { View } from 'react-native' import { View } from 'react-native'
@ -23,7 +24,16 @@ const AttachmentImage = ({
const { colors } = useTheme() const { colors } = useTheme()
return ( 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 <GracefullyImage
accessibilityLabel={image.description} accessibilityLabel={image.description}
hidden={sensitiveShown} 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, flex: 1,
aspectRatio: aspectRatio({ total, index, ...attachment.meta?.original }), aspectRatio: aspectRatio({ total, index, ...attachment.meta?.original }),
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center' alignItems: 'center',
borderRadius: StyleConstants.BorderRadius / 2,
overflow: 'hidden'
}} }}
> >
{attachment.blurhash ? ( {attachment.blurhash ? (

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

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

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

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

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

@ -110,7 +110,7 @@ const ComposeEditAttachment: React.FC<
style={{ style={{
width: DEFAULT_WIDTH, width: DEFAULT_WIDTH,
height: DEFAULT_WIDTH, height: DEFAULT_WIDTH,
borderRadius: StyleConstants.BorderRadius borderRadius: StyleConstants.BorderRadius / 2
}} }}
source={theAttachment.preview_url} 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={{ style={{
width: DEFAULT_WIDTH, width: DEFAULT_WIDTH,
height: DEFAULT_WIDTH, height: DEFAULT_WIDTH,
borderRadius: StyleConstants.BorderRadius borderRadius: StyleConstants.BorderRadius / 2
}} }}
source={ source={
item.local?.thumbnail item.local?.thumbnail

30
yarn.lock
View File

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