An ATproto social media client -- with an independent Appview.
Fixes the lightbox not having a close button on web (#306) (#323)
authored by
John Fawcett
and committed by
GitHub
c31ffdac
db6b198d
+40
-18
+40
-18
src/view/com/lightbox/Lightbox.web.tsx
+40
-18
src/view/com/lightbox/Lightbox.web.tsx
···
11
11
import {useStores} from 'state/index'
12
12
import * as models from 'state/models/ui/shell'
13
13
import {colors} from 'lib/styles'
14
+
import ImageDefaultHeader from './ImageViewing/components/ImageDefaultHeader'
14
15
15
16
interface Img {
16
17
uri: string
···
59
60
}
60
61
61
62
return (
62
-
<TouchableWithoutFeedback onPress={onClose}>
63
-
<View style={styles.mask}>
64
-
<Image source={imgs[index]} style={styles.image} />
65
-
{canGoLeft && (
66
-
<TouchableOpacity
67
-
onPress={onPressLeft}
68
-
style={[styles.btn, styles.leftBtn]}>
69
-
<FontAwesomeIcon icon="angle-left" style={styles.icon} size={40} />
70
-
</TouchableOpacity>
71
-
)}
72
-
{canGoRight && (
73
-
<TouchableOpacity
74
-
onPress={onPressRight}
75
-
style={[styles.btn, styles.rightBtn]}>
76
-
<FontAwesomeIcon icon="angle-right" style={styles.icon} size={40} />
77
-
</TouchableOpacity>
78
-
)}
63
+
<View style={styles.mask}>
64
+
<TouchableWithoutFeedback onPress={onClose}>
65
+
<View style={styles.imageCenterer}>
66
+
<Image source={imgs[index]} style={styles.image} />
67
+
{canGoLeft && (
68
+
<TouchableOpacity
69
+
onPress={onPressLeft}
70
+
style={[styles.btn, styles.leftBtn]}>
71
+
<FontAwesomeIcon
72
+
icon="angle-left"
73
+
style={styles.icon}
74
+
size={40}
75
+
/>
76
+
</TouchableOpacity>
77
+
)}
78
+
{canGoRight && (
79
+
<TouchableOpacity
80
+
onPress={onPressRight}
81
+
style={[styles.btn, styles.rightBtn]}>
82
+
<FontAwesomeIcon
83
+
icon="angle-right"
84
+
style={styles.icon}
85
+
size={40}
86
+
/>
87
+
</TouchableOpacity>
88
+
)}
89
+
</View>
90
+
</TouchableWithoutFeedback>
91
+
<View style={styles.closeBtn}>
92
+
<ImageDefaultHeader onRequestClose={onClose} />
79
93
</View>
80
-
</TouchableWithoutFeedback>
94
+
</View>
81
95
)
82
96
}
83
97
···
89
103
width: '100%',
90
104
height: '100%',
91
105
backgroundColor: '#000c',
106
+
},
107
+
imageCenterer: {
108
+
flex: 1,
92
109
alignItems: 'center',
93
110
justifyContent: 'center',
94
111
},
···
99
116
},
100
117
icon: {
101
118
color: colors.white,
119
+
},
120
+
closeBtn: {
121
+
position: 'absolute',
122
+
top: 10,
123
+
right: 10,
102
124
},
103
125
btn: {
104
126
position: 'absolute',