From df740c85e0539cc6823f592baa52003d1676f7d8 Mon Sep 17 00:00:00 2001 From: Hailey Date: Tue, 30 Jan 2024 16:37:26 -0800 Subject: [PATCH 1/6] use gap on native --- src/view/com/util/images/Gallery.tsx | 5 ++-- src/view/com/util/images/ImageLayoutGrid.tsx | 27 ++++++++++++-------- 2 files changed, 20 insertions(+), 12 deletions(-) diff --git a/src/view/com/util/images/Gallery.tsx b/src/view/com/util/images/Gallery.tsx index e7110372..6b54ec09 100644 --- a/src/view/com/util/images/Gallery.tsx +++ b/src/view/com/util/images/Gallery.tsx @@ -4,6 +4,7 @@ import {StyleSheet, Text, Pressable, View} from 'react-native' import {Image} from 'expo-image' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {isWeb} from 'platform/detection' type EventFunction = (index: number) => void @@ -70,8 +71,8 @@ const styles = StyleSheet.create({ paddingHorizontal: 6, paddingVertical: 3, position: 'absolute', - left: 8, - bottom: 8, + left: isWeb ? 8 : 5, + bottom: isWeb ? 8 : 5, }, alt: { color: 'white', diff --git a/src/view/com/util/images/ImageLayoutGrid.tsx b/src/view/com/util/images/ImageLayoutGrid.tsx index 23e807b6..70122f67 100644 --- a/src/view/com/util/images/ImageLayoutGrid.tsx +++ b/src/view/com/util/images/ImageLayoutGrid.tsx @@ -2,6 +2,7 @@ import React from 'react' import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' import {AppBskyEmbedImages} from '@atproto/api' import {GalleryItem} from './Gallery' +import {isWeb} from 'platform/detection' interface ImageLayoutGridProps { images: AppBskyEmbedImages.ViewImage[] @@ -47,10 +48,10 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) { case 3: return ( - + - + @@ -93,13 +94,19 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) { const IMAGE_GAP = 5 const styles = StyleSheet.create({ - container: { - marginHorizontal: -IMAGE_GAP / 2, - marginVertical: -IMAGE_GAP / 2, - }, - flexRow: {flexDirection: 'row'}, + container: isWeb + ? { + marginHorizontal: -IMAGE_GAP / 2, + marginVertical: -IMAGE_GAP / 2, + } + : { + gap: IMAGE_GAP, + }, + flexRow: {flexDirection: 'row', gap: !isWeb ? IMAGE_GAP : undefined}, smallItem: {flex: 1, aspectRatio: 1}, - image: { - margin: IMAGE_GAP / 2, - }, + image: isWeb + ? { + margin: IMAGE_GAP / 2, + } + : {}, }) From fc8ea01741d7c8da625b21eece0c6fd5e90076de Mon Sep 17 00:00:00 2001 From: Hailey Date: Tue, 30 Jan 2024 16:45:02 -0800 Subject: [PATCH 2/6] use variable --- src/view/com/util/images/ImageLayoutGrid.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/view/com/util/images/ImageLayoutGrid.tsx b/src/view/com/util/images/ImageLayoutGrid.tsx index 70122f67..5698e26c 100644 --- a/src/view/com/util/images/ImageLayoutGrid.tsx +++ b/src/view/com/util/images/ImageLayoutGrid.tsx @@ -51,7 +51,7 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) { - + From 767dd83d0bddc4a4272f2b5ad27d4a1ae1fef7de Mon Sep 17 00:00:00 2001 From: Hailey Date: Tue, 30 Jan 2024 16:55:57 -0800 Subject: [PATCH 3/6] cleanup --- src/view/com/util/images/ImageLayoutGrid.tsx | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/view/com/util/images/ImageLayoutGrid.tsx b/src/view/com/util/images/ImageLayoutGrid.tsx index 5698e26c..cf0d190f 100644 --- a/src/view/com/util/images/ImageLayoutGrid.tsx +++ b/src/view/com/util/images/ImageLayoutGrid.tsx @@ -48,10 +48,10 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) { case 3: return ( - + - + @@ -94,6 +94,9 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) { const IMAGE_GAP = 5 const styles = StyleSheet.create({ + flexRow: {flexDirection: 'row', gap: !isWeb ? IMAGE_GAP : undefined}, + smallItem: {flex: 1, aspectRatio: 1}, + container: isWeb ? { marginHorizontal: -IMAGE_GAP / 2, @@ -102,11 +105,17 @@ const styles = StyleSheet.create({ : { gap: IMAGE_GAP, }, - flexRow: {flexDirection: 'row', gap: !isWeb ? IMAGE_GAP : undefined}, - smallItem: {flex: 1, aspectRatio: 1}, image: isWeb ? { margin: IMAGE_GAP / 2, } : {}, + threeSingle: { + flex: 1, + gap: isWeb ? undefined : IMAGE_GAP, + }, + threeDouble: { + flex: 1, + gap: isWeb ? undefined : IMAGE_GAP, + }, }) From bb4c9df039d36457bb6e78b7fb7dfcdefe0b72d5 Mon Sep 17 00:00:00 2001 From: Hailey Date: Tue, 30 Jan 2024 17:00:49 -0800 Subject: [PATCH 4/6] cleanup --- src/view/com/util/images/ImageLayoutGrid.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/view/com/util/images/ImageLayoutGrid.tsx b/src/view/com/util/images/ImageLayoutGrid.tsx index cf0d190f..ad7a42af 100644 --- a/src/view/com/util/images/ImageLayoutGrid.tsx +++ b/src/view/com/util/images/ImageLayoutGrid.tsx @@ -111,8 +111,8 @@ const styles = StyleSheet.create({ } : {}, threeSingle: { - flex: 1, - gap: isWeb ? undefined : IMAGE_GAP, + flex: 2, + aspectRatio: isWeb ? 1 : undefined, }, threeDouble: { flex: 1, From db3b10e98b775bee48559bda5da3444a89437703 Mon Sep 17 00:00:00 2001 From: Hailey Date: Tue, 30 Jan 2024 17:09:02 -0800 Subject: [PATCH 5/6] update comment --- src/view/com/util/images/ImageLayoutGrid.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/view/com/util/images/ImageLayoutGrid.tsx b/src/view/com/util/images/ImageLayoutGrid.tsx index ad7a42af..ba6c04f5 100644 --- a/src/view/com/util/images/ImageLayoutGrid.tsx +++ b/src/view/com/util/images/ImageLayoutGrid.tsx @@ -89,14 +89,14 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) { } } -// This is used to compute margins (rather than flexbox gap) due to Yoga bugs: +// On web we use margin to calculate gap, as aspectRatio does not properly size +// all images on web. On native though we cannot rely on margin, since the +// negative margin interferes with the swipe controls on pagers. // https://github.com/facebook/yoga/issues/1418 +// https://github.com/bluesky-social/social-app/issues/2601 const IMAGE_GAP = 5 const styles = StyleSheet.create({ - flexRow: {flexDirection: 'row', gap: !isWeb ? IMAGE_GAP : undefined}, - smallItem: {flex: 1, aspectRatio: 1}, - container: isWeb ? { marginHorizontal: -IMAGE_GAP / 2, @@ -105,6 +105,11 @@ const styles = StyleSheet.create({ : { gap: IMAGE_GAP, }, + flexRow: { + flexDirection: 'row', + gap: isWeb ? undefined : IMAGE_GAP, + }, + smallItem: {flex: 1, aspectRatio: 1}, image: isWeb ? { margin: IMAGE_GAP / 2, From d8fc3798e32a6937d725823e68e1e6cb97ba1875 Mon Sep 17 00:00:00 2001 From: Hailey Date: Tue, 30 Jan 2024 17:10:19 -0800 Subject: [PATCH 6/6] add comment --- src/view/com/util/images/Gallery.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/view/com/util/images/Gallery.tsx b/src/view/com/util/images/Gallery.tsx index 6b54ec09..7de3b093 100644 --- a/src/view/com/util/images/Gallery.tsx +++ b/src/view/com/util/images/Gallery.tsx @@ -71,6 +71,8 @@ const styles = StyleSheet.create({ paddingHorizontal: 6, paddingVertical: 3, position: 'absolute', + // Related to margin/gap hack. This keeps the alt label in the same position + // on all platforms left: isWeb ? 8 : 5, bottom: isWeb ? 8 : 5, },