diff options
Diffstat (limited to 'src/view/com/lightbox/ImageViewing')
5 files changed, 46 insertions, 28 deletions
diff --git a/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx b/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx index 3401adaff..88476c8e1 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx @@ -6,9 +6,17 @@ * */ import React from 'react' -import {createHitslop} from 'lib/constants' -import {SafeAreaView, Text, TouchableOpacity, StyleSheet} from 'react-native' -import {t} from '@lingui/macro' +import { + SafeAreaView, + TouchableOpacity, + StyleSheet, + ViewStyle, +} from 'react-native' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' + +import {createHitslop} from '#/lib/constants' type Props = { onRequestClose: () => void @@ -16,20 +24,23 @@ type Props = { const HIT_SLOP = createHitslop(16) -const ImageDefaultHeader = ({onRequestClose}: Props) => ( - <SafeAreaView style={styles.root}> - <TouchableOpacity - style={styles.closeButton} - onPress={onRequestClose} - hitSlop={HIT_SLOP} - accessibilityRole="button" - accessibilityLabel={t`Close image`} - accessibilityHint={t`Closes viewer for header image`} - onAccessibilityEscape={onRequestClose}> - <Text style={styles.closeText}>✕</Text> - </TouchableOpacity> - </SafeAreaView> -) +const ImageDefaultHeader = ({onRequestClose}: Props) => { + const {_} = useLingui() + return ( + <SafeAreaView style={styles.root}> + <TouchableOpacity + style={[styles.closeButton, styles.blurredBackground]} + onPress={onRequestClose} + hitSlop={HIT_SLOP} + accessibilityRole="button" + accessibilityLabel={_(msg`Close image`)} + accessibilityHint={_(msg`Closes viewer for header image`)} + onAccessibilityEscape={onRequestClose}> + <FontAwesomeIcon icon="close" color={'#fff'} size={22} /> + </TouchableOpacity> + </SafeAreaView> + ) +} const styles = StyleSheet.create({ root: { @@ -37,8 +48,8 @@ const styles = StyleSheet.create({ pointerEvents: 'box-none', }, closeButton: { - marginRight: 8, - marginTop: 8, + marginRight: 10, + marginTop: 10, width: 44, height: 44, alignItems: 'center', @@ -46,13 +57,10 @@ const styles = StyleSheet.create({ borderRadius: 22, backgroundColor: '#00000077', }, - closeText: { - lineHeight: 22, - fontSize: 19, - textAlign: 'center', - color: '#FFF', - includeFontPadding: false, - }, + blurredBackground: { + backdropFilter: 'blur(10px)', + WebkitBackdropFilter: 'blur(10px)', + } as ViewStyle, }) export default ImageDefaultHeader diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx index 003ad61ba..414f98a61 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx @@ -37,6 +37,7 @@ type Props = { onTap: () => void onZoom: (isZoomed: boolean) => void isScrollViewBeingDragged: boolean + showControls: boolean } const ImageItem = ({ imageSrc, diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx index cf4ba71df..383490f4f 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx @@ -37,11 +37,18 @@ type Props = { onTap: () => void onZoom: (scaled: boolean) => void isScrollViewBeingDragged: boolean + showControls: boolean } const AnimatedImage = Animated.createAnimatedComponent(Image) -const ImageItem = ({imageSrc, onTap, onZoom, onRequestClose}: Props) => { +const ImageItem = ({ + imageSrc, + onTap, + onZoom, + onRequestClose, + showControls, +}: Props) => { const scrollViewRef = useAnimatedRef<Animated.ScrollView>() const translationY = useSharedValue(0) const [loaded, setLoaded] = useState(false) @@ -144,7 +151,7 @@ const ImageItem = ({imageSrc, onTap, onZoom, onRequestClose}: Props) => { accessibilityLabel={imageSrc.alt} accessibilityHint="" onLoad={() => setLoaded(true)} - enableLiveTextInteraction={!scaled} + enableLiveTextInteraction={showControls && !scaled} /> </Animated.ScrollView> </GestureDetector> diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx index 16688b820..08b99bf9e 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx @@ -10,6 +10,7 @@ type Props = { onTap: () => void onZoom: (scaled: boolean) => void isScrollViewBeingDragged: boolean + showControls: boolean } const ImageItem = (_props: Props) => { diff --git a/src/view/com/lightbox/ImageViewing/index.tsx b/src/view/com/lightbox/ImageViewing/index.tsx index b6835793d..ff8fdb86d 100644 --- a/src/view/com/lightbox/ImageViewing/index.tsx +++ b/src/view/com/lightbox/ImageViewing/index.tsx @@ -122,6 +122,7 @@ function ImageViewing({ imageSrc={imageSrc} onRequestClose={onRequestClose} isScrollViewBeingDragged={isDragging} + showControls={showControls} /> </View> ))} |