diff options
Diffstat (limited to 'src/view/com/util/images')
| -rw-r--r-- | src/view/com/util/images/AutoSizedImage.tsx | 4 | ||||
| -rw-r--r-- | src/view/com/util/images/Gallery.tsx | 19 | ||||
| -rw-r--r-- | src/view/com/util/images/ImageLayoutGrid.tsx | 130 |
3 files changed, 121 insertions, 32 deletions
diff --git a/src/view/com/util/images/AutoSizedImage.tsx b/src/view/com/util/images/AutoSizedImage.tsx index 9abbe2875..a9bfc1c96 100644 --- a/src/view/com/util/images/AutoSizedImage.tsx +++ b/src/view/com/util/images/AutoSizedImage.tsx @@ -88,7 +88,7 @@ export function ConstrainedImage({ <View style={[ a.h_full, - a.rounded_sm, + a.rounded_md, a.overflow_hidden, t.atoms.bg_contrast_25, fullBleed ? a.w_full : {aspectRatio}, @@ -219,7 +219,7 @@ export function AutoSizedImage({ accessibilityHint={_(msg`Tap to view full image`)} style={[ a.w_full, - a.rounded_sm, + a.rounded_md, a.overflow_hidden, t.atoms.bg_contrast_25, {aspectRatio: max}, diff --git a/src/view/com/util/images/Gallery.tsx b/src/view/com/util/images/Gallery.tsx index 38137cc49..e277b7e86 100644 --- a/src/view/com/util/images/Gallery.tsx +++ b/src/view/com/util/images/Gallery.tsx @@ -1,6 +1,6 @@ -import React, {ComponentProps, FC} from 'react' -import {Pressable, View} from 'react-native' -import {Image} from 'expo-image' +import React from 'react' +import {Pressable, StyleProp, View, ViewStyle} from 'react-native' +import {Image, ImageStyle} from 'expo-image' import {AppBskyEmbedImages} from '@atproto/api' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -13,17 +13,18 @@ import {Text} from '#/components/Typography' type EventFunction = (index: number) => void -interface GalleryItemProps { +interface Props { images: AppBskyEmbedImages.ViewImage[] index: number onPress?: EventFunction onLongPress?: EventFunction onPressIn?: EventFunction - imageStyle?: ComponentProps<typeof Image>['style'] + imageStyle?: StyleProp<ImageStyle> viewContext?: PostEmbedViewContext + insetBorderStyle?: StyleProp<ViewStyle> } -export const GalleryItem: FC<GalleryItemProps> = ({ +export function GalleryItem({ images, index, imageStyle, @@ -31,7 +32,8 @@ export const GalleryItem: FC<GalleryItemProps> = ({ onPressIn, onLongPress, viewContext, -}) => { + insetBorderStyle, +}: Props) { const t = useTheme() const {_} = useLingui() const largeAltBadge = useLargeAltBadgeEnabled() @@ -47,7 +49,6 @@ export const GalleryItem: FC<GalleryItemProps> = ({ onLongPress={onLongPress ? () => onLongPress(index) : undefined} style={[ a.flex_1, - a.rounded_sm, a.overflow_hidden, t.atoms.bg_contrast_25, imageStyle, @@ -63,7 +64,7 @@ export const GalleryItem: FC<GalleryItemProps> = ({ accessibilityHint="" accessibilityIgnoresInvertColors /> - <MediaInsetBorder /> + <MediaInsetBorder style={insetBorderStyle} /> </Pressable> {hasAlt && !hideBadges ? ( <View diff --git a/src/view/com/util/images/ImageLayoutGrid.tsx b/src/view/com/util/images/ImageLayoutGrid.tsx index 45da7f076..1aaf166ff 100644 --- a/src/view/com/util/images/ImageLayoutGrid.tsx +++ b/src/view/com/util/images/ImageLayoutGrid.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {StyleProp, View, ViewStyle} from 'react-native' +import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' import {AppBskyEmbedImages} from '@atproto/api' import {PostEmbedViewContext} from '#/view/com/util/post-embeds/types' @@ -22,14 +22,23 @@ export function ImageLayoutGrid({style, ...props}: ImageLayoutGridProps) { ? gtMobile ? a.gap_xs : a.gap_2xs - : gtMobile - ? a.gap_sm : a.gap_xs const count = props.images.length - const aspectRatio = count === 2 ? 2 : count === 3 ? 1.5 : 1 + let aspectRatio + switch (count) { + case 2: + aspectRatio = 2 + break + case 3: + aspectRatio = 2 + break + case 4: + aspectRatio = undefined + break + } return ( <View style={style}> - <View style={[gap, {aspectRatio}]}> + <View style={[gap, a.rounded_md, a.overflow_hidden, {aspectRatio}]}> <ImageLayoutGridInner {...props} gap={gap} /> </View> </View> @@ -54,10 +63,18 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) { return ( <View style={[a.flex_1, a.flex_row, gap]}> <View style={[a.flex_1, {aspectRatio: 1}]}> - <GalleryItem {...props} index={0} /> + <GalleryItem + {...props} + index={0} + insetBorderStyle={noCorners(['topRight', 'bottomRight'])} + /> </View> <View style={[a.flex_1, {aspectRatio: 1}]}> - <GalleryItem {...props} index={1} /> + <GalleryItem + {...props} + index={1} + insetBorderStyle={noCorners(['topLeft', 'bottomLeft'])} + /> </View> </View> ) @@ -65,15 +82,35 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) { case 3: return ( <View style={[a.flex_1, a.flex_row, gap]}> - <View style={{flex: 2}}> - <GalleryItem {...props} index={0} /> + <View style={[a.flex_1]}> + <GalleryItem + {...props} + index={0} + insetBorderStyle={noCorners(['topRight', 'bottomRight'])} + /> </View> <View style={[a.flex_1, gap]}> - <View style={[a.flex_1, {aspectRatio: 1}]}> - <GalleryItem {...props} index={1} /> + <View style={[a.flex_1]}> + <GalleryItem + {...props} + index={1} + insetBorderStyle={noCorners([ + 'topLeft', + 'bottomLeft', + 'bottomRight', + ])} + /> </View> - <View style={[a.flex_1, {aspectRatio: 1}]}> - <GalleryItem {...props} index={2} /> + <View style={[a.flex_1]}> + <GalleryItem + {...props} + index={2} + insetBorderStyle={noCorners([ + 'topLeft', + 'bottomLeft', + 'topRight', + ])} + /> </View> </View> </View> @@ -83,19 +120,51 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) { return ( <> <View style={[a.flex_row, gap]}> - <View style={[a.flex_1, {aspectRatio: 1}]}> - <GalleryItem {...props} index={0} /> + <View style={[a.flex_1, {aspectRatio: 1.5}]}> + <GalleryItem + {...props} + index={0} + insetBorderStyle={noCorners([ + 'bottomLeft', + 'topRight', + 'bottomRight', + ])} + /> </View> - <View style={[a.flex_1, {aspectRatio: 1}]}> - <GalleryItem {...props} index={1} /> + <View style={[a.flex_1, {aspectRatio: 1.5}]}> + <GalleryItem + {...props} + index={1} + insetBorderStyle={noCorners([ + 'topLeft', + 'bottomLeft', + 'bottomRight', + ])} + /> </View> </View> <View style={[a.flex_row, gap]}> - <View style={[a.flex_1, {aspectRatio: 1}]}> - <GalleryItem {...props} index={2} /> + <View style={[a.flex_1, {aspectRatio: 1.5}]}> + <GalleryItem + {...props} + index={2} + insetBorderStyle={noCorners([ + 'topLeft', + 'topRight', + 'bottomRight', + ])} + /> </View> - <View style={[a.flex_1, {aspectRatio: 1}]}> - <GalleryItem {...props} index={3} /> + <View style={[a.flex_1, {aspectRatio: 1.5}]}> + <GalleryItem + {...props} + index={3} + insetBorderStyle={noCorners([ + 'topLeft', + 'bottomLeft', + 'topRight', + ])} + /> </View> </View> </> @@ -105,3 +174,22 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) { return null } } + +function noCorners( + corners: ('topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight')[], +) { + const styles: StyleProp<ViewStyle>[] = [] + if (corners.includes('topLeft')) { + styles.push({borderTopLeftRadius: 0}) + } + if (corners.includes('topRight')) { + styles.push({borderTopRightRadius: 0}) + } + if (corners.includes('bottomLeft')) { + styles.push({borderBottomLeftRadius: 0}) + } + if (corners.includes('bottomRight')) { + styles.push({borderBottomRightRadius: 0}) + } + return StyleSheet.flatten(styles) +} |