about summary refs log tree commit diff
path: root/src/view/com/util/images/Gallery.tsx
diff options
context:
space:
mode:
authorSamuel Newman <mozzius@protonmail.com>2024-06-19 22:32:44 +0100
committerGitHub <noreply@github.com>2024-06-20 00:32:44 +0300
commit0f931933a7b7b72505fbab6e1f25860f7a84e59c (patch)
treef0ca1407e9fabd8cac7d1e2af0c7c09678a92a92 /src/view/com/util/images/Gallery.tsx
parent22c5aa4da4e8835f2694e1590c27b2e5783d3cc4 (diff)
downloadvoidsky-0f931933a7b7b72505fbab6e1f25860f7a84e59c.tar.zst
Option for large alt badges (#4571)
* add pref for large alt badge

* add to settings

* do the large badge bit

* Tweak wording

---------

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
Diffstat (limited to 'src/view/com/util/images/Gallery.tsx')
-rw-r--r--src/view/com/util/images/Gallery.tsx22
1 files changed, 10 insertions, 12 deletions
diff --git a/src/view/com/util/images/Gallery.tsx b/src/view/com/util/images/Gallery.tsx
index 8d23d258f..9bbb2ac10 100644
--- a/src/view/com/util/images/Gallery.tsx
+++ b/src/view/com/util/images/Gallery.tsx
@@ -5,7 +5,9 @@ import {AppBskyEmbedImages} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {isWeb} from 'platform/detection'
+import {isWeb} from '#/platform/detection'
+import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
+import {atoms as a} from '#/alf'
 
 type EventFunction = (index: number) => void
 
@@ -27,20 +29,21 @@ export const GalleryItem: FC<GalleryItemProps> = ({
   onLongPress,
 }) => {
   const {_} = useLingui()
+  const largeAltBadge = useLargeAltBadgeEnabled()
   const image = images[index]
   return (
-    <View style={styles.fullWidth}>
+    <View style={a.flex_1}>
       <Pressable
         onPress={onPress ? () => onPress(index) : undefined}
         onPressIn={onPressIn ? () => onPressIn(index) : undefined}
         onLongPress={onLongPress ? () => onLongPress(index) : undefined}
-        style={styles.fullWidth}
+        style={a.flex_1}
         accessibilityRole="button"
         accessibilityLabel={image.alt || _(msg`Image`)}
         accessibilityHint="">
         <Image
           source={{uri: image.thumb}}
-          style={[styles.image, imageStyle]}
+          style={[a.flex_1, a.rounded_xs, imageStyle]}
           accessible={true}
           accessibilityLabel={image.alt}
           accessibilityHint=""
@@ -49,7 +52,9 @@ export const GalleryItem: FC<GalleryItemProps> = ({
       </Pressable>
       {image.alt === '' ? null : (
         <View style={styles.altContainer}>
-          <Text style={styles.alt} accessible={false}>
+          <Text
+            style={[styles.alt, largeAltBadge && a.text_xs]}
+            accessible={false}>
             ALT
           </Text>
         </View>
@@ -59,13 +64,6 @@ export const GalleryItem: FC<GalleryItemProps> = ({
 }
 
 const styles = StyleSheet.create({
-  fullWidth: {
-    flex: 1,
-  },
-  image: {
-    flex: 1,
-    borderRadius: 4,
-  },
   altContainer: {
     backgroundColor: 'rgba(0, 0, 0, 0.75)',
     borderRadius: 6,