diff options
author | Samuel Newman <mozzius@protonmail.com> | 2024-06-19 22:32:44 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2024-06-20 00:32:44 +0300 |
commit | 0f931933a7b7b72505fbab6e1f25860f7a84e59c (patch) | |
tree | f0ca1407e9fabd8cac7d1e2af0c7c09678a92a92 /src/view/com/util/images/Gallery.tsx | |
parent | 22c5aa4da4e8835f2694e1590c27b2e5783d3cc4 (diff) | |
download | voidsky-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.tsx | 22 |
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, |