Alt text followups -- SLIGHTLY larger, and update gifs (#4252)
* Bump up the alt text indicator's text size just a smidge * Update the GIF alt indicator to match images (right side, visually smaller on mobile)zio/stable
parent
19ee89caf3
commit
efdfb7f57a
|
@ -79,7 +79,7 @@ const styles = StyleSheet.create({
|
||||||
},
|
},
|
||||||
alt: {
|
alt: {
|
||||||
color: 'white',
|
color: 'white',
|
||||||
fontSize: 6,
|
fontSize: 7,
|
||||||
fontWeight: 'bold',
|
fontWeight: 'bold',
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
|
@ -5,7 +5,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||||
import {msg, Trans} from '@lingui/macro'
|
import {msg, Trans} from '@lingui/macro'
|
||||||
import {useLingui} from '@lingui/react'
|
import {useLingui} from '@lingui/react'
|
||||||
|
|
||||||
import {HITSLOP_10} from '#/lib/constants'
|
import {HITSLOP_20} from '#/lib/constants'
|
||||||
import {parseAltFromGIFDescription} from '#/lib/gif-alt-text'
|
import {parseAltFromGIFDescription} from '#/lib/gif-alt-text'
|
||||||
import {isWeb} from '#/platform/detection'
|
import {isWeb} from '#/platform/detection'
|
||||||
import {EmbedPlayerParams} from 'lib/strings/embed-player'
|
import {EmbedPlayerParams} from 'lib/strings/embed-player'
|
||||||
|
@ -166,7 +166,7 @@ function AltText({text}: {text: string}) {
|
||||||
accessibilityRole="button"
|
accessibilityRole="button"
|
||||||
accessibilityLabel={_(msg`Show alt text`)}
|
accessibilityLabel={_(msg`Show alt text`)}
|
||||||
accessibilityHint=""
|
accessibilityHint=""
|
||||||
hitSlop={HITSLOP_10}
|
hitSlop={HITSLOP_20}
|
||||||
onPress={control.open}
|
onPress={control.open}
|
||||||
style={styles.altContainer}>
|
style={styles.altContainer}>
|
||||||
<Text style={styles.alt} accessible={false}>
|
<Text style={styles.alt} accessible={false}>
|
||||||
|
@ -195,18 +195,18 @@ const styles = StyleSheet.create({
|
||||||
altContainer: {
|
altContainer: {
|
||||||
backgroundColor: 'rgba(0, 0, 0, 0.75)',
|
backgroundColor: 'rgba(0, 0, 0, 0.75)',
|
||||||
borderRadius: 6,
|
borderRadius: 6,
|
||||||
paddingHorizontal: 6,
|
paddingHorizontal: isWeb ? 8 : 6,
|
||||||
paddingVertical: 3,
|
paddingVertical: isWeb ? 6 : 3,
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
// Related to margin/gap hack. This keeps the alt label in the same position
|
// Related to margin/gap hack. This keeps the alt label in the same position
|
||||||
// on all platforms
|
// on all platforms
|
||||||
left: isWeb ? 8 : 5,
|
right: isWeb ? 8 : 5,
|
||||||
bottom: isWeb ? 8 : 5,
|
bottom: isWeb ? 8 : 5,
|
||||||
zIndex: 2,
|
zIndex: 2,
|
||||||
},
|
},
|
||||||
alt: {
|
alt: {
|
||||||
color: 'white',
|
color: 'white',
|
||||||
fontSize: 10,
|
fontSize: isWeb ? 10 : 7,
|
||||||
fontWeight: 'bold',
|
fontWeight: 'bold',
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
|
@ -183,7 +183,7 @@ const styles = StyleSheet.create({
|
||||||
},
|
},
|
||||||
alt: {
|
alt: {
|
||||||
color: 'white',
|
color: 'white',
|
||||||
fontSize: 6,
|
fontSize: 7,
|
||||||
fontWeight: 'bold',
|
fontWeight: 'bold',
|
||||||
},
|
},
|
||||||
customFeedOuter: {
|
customFeedOuter: {
|
||||||
|
|
Loading…
Reference in New Issue