quilling.dev
An ATproto social media client -- with an independent Appview.
Remove expo/vector-icons from EditImage modal (#5422)
authored by
Eric Bailey
and committed by
GitHub
15231604
24adcb48
+1
assets/icons/aspectRatio11_stroke2_corner0_rounded.svg
+1
assets/icons/aspectRatio11_stroke2_corner0_rounded.svg
···
···
1
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm2 1v14h14V5H5Z" clip-rule="evenodd"/></svg>
+1
assets/icons/aspectRatio34_stroke2_corner0_rounded.svg
+1
assets/icons/aspectRatio34_stroke2_corner0_rounded.svg
···
···
1
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4 2c0-.552.41-1 .917-1h14.666c.507 0 .917.448.917 1v20c0 .552-.41 1-.917 1H4.917C4.41 23 4 22.552 4 22V2Zm1.833 1v18h12.834V3H5.833Z" clip-rule="evenodd"/></svg>
+1
assets/icons/aspectRatio43_stroke2_corner0_rounded.svg
+1
assets/icons/aspectRatio43_stroke2_corner0_rounded.svg
···
···
1
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M2 20.5c-.552 0-1-.41-1-.917V4.917C1 4.41 1.448 4 2 4h20c.552 0 1 .41 1 .917v14.666c0 .507-.448.917-1 .917H2Zm1-1.833h18V5.833H3v12.834Z" clip-rule="evenodd"/></svg>
+1
assets/icons/flipHorizontal_stroke2_corner0_rounded.svg
+1
assets/icons/flipHorizontal_stroke2_corner0_rounded.svg
···
···
1
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4 21a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5v2H5v14h4v2H4Zm9-20v22h-2V1h2Zm7.707 2.293A1 1 0 0 1 21 4v1h-2V3h1a1 1 0 0 1 .707.293ZM19 7h2v2h-2V7Zm0 4h2v2h-2v-2Zm0 4h2v2h-2v-2Zm0 4h2v1a1 1 0 0 1-1 1h-1v-2Zm-2 0v2h-2v-2h2ZM15 5h2V3h-2v2Z" clip-rule="evenodd"/></svg>
+1
assets/icons/flipVertical_stroke2_corner0_rounded.svg
+1
assets/icons/flipVertical_stroke2_corner0_rounded.svg
···
···
1
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v5h-2V5H5v4H3V4Zm20 9H1v-2h22v2Zm-2.293 7.707A1 1 0 0 1 20 21h-1v-2h2v1a1 1 0 0 1-.293.707ZM17 19v2h-2v-2h2Zm-4 0v2h-2v-2h2Zm-4 0v2H7v-2h2Zm-4 0v2H4a1 1 0 0 1-1-1v-1h2Zm0-2H3v-2h2v2Zm14-2v2h2v-2h-2Z" clip-rule="evenodd"/></svg>
+13
src/components/icons/AspectRatio.tsx
+13
src/components/icons/AspectRatio.tsx
···
···
1
+
import {createSinglePathSVG} from './TEMPLATE'
2
+
3
+
export const AspectRatio11_Stroke2_Corner0_Rounded = createSinglePathSVG({
4
+
path: 'M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm2 1v14h14V5H5Z',
5
+
})
6
+
7
+
export const AspectRatio43_Stroke2_Corner0_Rounded = createSinglePathSVG({
8
+
path: 'M2 20.5c-.552 0-1-.41-1-.917V4.917C1 4.41 1.448 4 2 4h20c.552 0 1 .41 1 .917v14.666c0 .507-.448.917-1 .917H2Zm1-1.833h18V5.833H3v12.834Z',
9
+
})
10
+
11
+
export const AspectRatio34_Stroke2_Corner0_Rounded = createSinglePathSVG({
12
+
path: 'M4 2c0-.552.41-1 .917-1h14.666c.507 0 .917.448.917 1v20c0 .552-.41 1-.917 1H4.917C4.41 23 4 22.552 4 22V2Zm1.833 1v18h12.834V3H5.833Z',
13
+
})
+9
src/components/icons/FlipImage.tsx
+9
src/components/icons/FlipImage.tsx
···
···
1
+
import {createSinglePathSVG} from './TEMPLATE'
2
+
3
+
export const FlipVertical_Stroke2_Corner0_Rounded = createSinglePathSVG({
4
+
path: 'M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v5h-2V5H5v4H3V4Zm20 9H1v-2h22v2Zm-2.293 7.707A1 1 0 0 1 20 21h-1v-2h2v1a1 1 0 0 1-.293.707ZM17 19v2h-2v-2h2Zm-4 0v2h-2v-2h2Zm-4 0v2H7v-2h2Zm-4 0v2H4a1 1 0 0 1-1-1v-1h2Zm0-2H3v-2h2v2Zm14-2v2h2v-2h-2Z',
5
+
})
6
+
7
+
export const FlipHorizontal_Stroke2_Corner0_Rounded = createSinglePathSVG({
8
+
path: 'M4 21a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5v2H5v14h4v2H4Zm9-20v22h-2V1h2Zm7.707 2.293A1 1 0 0 1 21 4v1h-2V3h1a1 1 0 0 1 .707.293ZM19 7h2v2h-2V7Zm0 4h2v2h-2v-2Zm0 4h2v2h-2v-2Zm0 4h2v1a1 1 0 0 1-1 1h-1v-2Zm-2 0v2h-2v-2h2ZM15 5h2V3h-2v2Z',
9
+
})
+42
-64
src/view/com/modals/EditImage.tsx
+42
-64
src/view/com/modals/EditImage.tsx
···
2
import {Pressable, StyleSheet, View} from 'react-native'
3
import {useWindowDimensions} from 'react-native'
4
import {LinearGradient} from 'expo-linear-gradient'
5
-
import {MaterialIcons} from '@expo/vector-icons'
6
import {msg, Trans} from '@lingui/macro'
7
import {useLingui} from '@lingui/react'
8
import {Slider} from '@miblanchard/react-native-slider'
···
13
import {MAX_ALT_TEXT} from 'lib/constants'
14
import {usePalette} from 'lib/hooks/usePalette'
15
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
16
-
import {RectTallIcon, RectWideIcon, SquareIcon} from 'lib/icons'
17
import {enforceLen} from 'lib/strings/helpers'
18
import {gradients, s} from 'lib/styles'
19
import {useTheme} from 'lib/ThemeContext'
20
import {getKeys} from 'lib/type-assertions'
21
import {GalleryModel} from 'state/models/media/gallery'
22
import {ImageModel} from 'state/models/media/image'
23
import {Text} from '../util/text/Text'
24
import {TextInput} from './util'
25
···
27
28
const RATIOS = {
29
'4:3': {
30
-
Icon: RectWideIcon,
31
},
32
'1:1': {
33
-
Icon: SquareIcon,
34
},
35
'3:4': {
36
-
Icon: RectTallIcon,
37
},
38
None: {
39
-
label: 'None',
40
-
Icon: MaterialIcons,
41
-
name: 'do-not-disturb-alt',
42
},
43
} as const
44
···
112
// },
113
// },
114
{
115
-
name: 'flip' as const,
116
label: _(msg`Flip horizontal`),
117
onPress: onFlipHorizontal,
118
},
119
{
120
-
name: 'flip' as const,
121
label: _(msg`Flip vertically`),
122
onPress: onFlipVertical,
123
},
···
165
onCloseModal()
166
}, [altText, image, position, scale, onCloseModal])
167
168
-
const getLabelIconSize = useCallback((as: AspectRatio) => {
169
-
switch (as) {
170
-
case 'None':
171
-
return 22
172
-
case '1:1':
173
-
return 32
174
-
default:
175
-
return 26
176
-
}
177
-
}, [])
178
-
179
if (image.cropped === undefined) {
180
return null
181
}
···
231
maximumValue={3}
232
/>
233
</View>
234
-
<View>
235
{!isMobile ? (
236
<Text type="sm-bold" style={pal.text}>
237
<Trans>Ratios</Trans>
···
239
) : null}
240
<View style={imgControlStyles}>
241
{getKeys(RATIOS).map(ratio => {
242
-
const {Icon, ...props} = RATIOS[ratio]
243
-
const labelIconSize = getLabelIconSize(ratio)
244
const isSelected = aspectRatio === ratio
245
246
return (
247
-
<Pressable
248
key={ratio}
249
onPress={() => {
250
onSetRatio(ratio)
251
-
}}
252
-
accessibilityLabel={ratio}
253
-
accessibilityHint="">
254
-
<Icon
255
-
size={labelIconSize}
256
-
style={[styles.imgControl, isSelected ? s.blue3 : pal.text]}
257
-
color={(isSelected ? s.blue3 : pal.text).color}
258
-
{...props}
259
-
/>
260
-
261
-
<Text
262
-
type={isSelected ? 'xs-bold' : 'xs-medium'}
263
-
style={[isSelected ? s.blue3 : pal.text, s.textCenter]}>
264
-
{ratio}
265
-
</Text>
266
-
</Pressable>
267
)
268
})}
269
</View>
···
273
</Text>
274
) : null}
275
<View style={imgControlStyles}>
276
-
{adjustments.map(({label, name, onPress}) => (
277
-
<Pressable
278
key={label}
279
-
onPress={onPress}
280
-
accessibilityLabel={label}
281
-
accessibilityHint=""
282
-
style={styles.flipBtn}>
283
-
<MaterialIcons
284
-
name={name}
285
-
size={label?.startsWith('Flip') ? 22 : 24}
286
-
style={[
287
-
pal.text,
288
-
label === _(msg`Flip vertically`)
289
-
? styles.flipVertical
290
-
: undefined,
291
-
]}
292
-
/>
293
-
</Pressable>
294
))}
295
</View>
296
</View>
···
361
borderRadius: 4,
362
paddingVertical: 8,
363
paddingHorizontal: 24,
364
-
},
365
-
imgControl: {
366
-
display: 'flex',
367
-
alignItems: 'center',
368
-
justifyContent: 'center',
369
-
height: 40,
370
},
371
imgEditor: {
372
maxWidth: '100%',
···
2
import {Pressable, StyleSheet, View} from 'react-native'
3
import {useWindowDimensions} from 'react-native'
4
import {LinearGradient} from 'expo-linear-gradient'
5
import {msg, Trans} from '@lingui/macro'
6
import {useLingui} from '@lingui/react'
7
import {Slider} from '@miblanchard/react-native-slider'
···
12
import {MAX_ALT_TEXT} from 'lib/constants'
13
import {usePalette} from 'lib/hooks/usePalette'
14
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
15
import {enforceLen} from 'lib/strings/helpers'
16
import {gradients, s} from 'lib/styles'
17
import {useTheme} from 'lib/ThemeContext'
18
import {getKeys} from 'lib/type-assertions'
19
import {GalleryModel} from 'state/models/media/gallery'
20
import {ImageModel} from 'state/models/media/image'
21
+
import {atoms as a} from '#/alf'
22
+
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
23
+
import {
24
+
AspectRatio11_Stroke2_Corner0_Rounded as A11,
25
+
AspectRatio34_Stroke2_Corner0_Rounded as A34,
26
+
AspectRatio43_Stroke2_Corner0_Rounded as A43,
27
+
} from '#/components/icons/AspectRatio'
28
+
import {CircleBanSign_Stroke2_Corner0_Rounded as Ban} from '#/components/icons/CircleBanSign'
29
+
import {
30
+
FlipHorizontal_Stroke2_Corner0_Rounded as FlipHorizontal,
31
+
FlipVertical_Stroke2_Corner0_Rounded as FlipVertical,
32
+
} from '#/components/icons/FlipImage'
33
import {Text} from '../util/text/Text'
34
import {TextInput} from './util'
35
···
37
38
const RATIOS = {
39
'4:3': {
40
+
icon: A43,
41
},
42
'1:1': {
43
+
icon: A11,
44
},
45
'3:4': {
46
+
icon: A34,
47
},
48
None: {
49
+
icon: Ban,
50
},
51
} as const
52
···
120
// },
121
// },
122
{
123
+
icon: FlipHorizontal,
124
label: _(msg`Flip horizontal`),
125
onPress: onFlipHorizontal,
126
},
127
{
128
+
icon: FlipVertical,
129
label: _(msg`Flip vertically`),
130
onPress: onFlipVertical,
131
},
···
173
onCloseModal()
174
}, [altText, image, position, scale, onCloseModal])
175
176
if (image.cropped === undefined) {
177
return null
178
}
···
228
maximumValue={3}
229
/>
230
</View>
231
+
<View style={[a.gap_sm]}>
232
{!isMobile ? (
233
<Text type="sm-bold" style={pal.text}>
234
<Trans>Ratios</Trans>
···
236
) : null}
237
<View style={imgControlStyles}>
238
{getKeys(RATIOS).map(ratio => {
239
+
const {icon} = RATIOS[ratio]
240
const isSelected = aspectRatio === ratio
241
242
return (
243
+
<Button
244
key={ratio}
245
+
label={ratio}
246
+
size="large"
247
+
shape="square"
248
+
variant="outline"
249
+
color={isSelected ? 'primary' : 'secondary'}
250
onPress={() => {
251
onSetRatio(ratio)
252
+
}}>
253
+
<View style={[a.align_center, a.gap_2xs]}>
254
+
<ButtonIcon icon={icon} />
255
+
<ButtonText style={[a.text_xs]}>{ratio}</ButtonText>
256
+
</View>
257
+
</Button>
258
)
259
})}
260
</View>
···
264
</Text>
265
) : null}
266
<View style={imgControlStyles}>
267
+
{adjustments.map(({label, icon, onPress}) => (
268
+
<Button
269
key={label}
270
+
label={label}
271
+
size="large"
272
+
shape="square"
273
+
variant="outline"
274
+
color="secondary"
275
+
onPress={onPress}>
276
+
<ButtonIcon icon={icon} />
277
+
</Button>
278
))}
279
</View>
280
</View>
···
345
borderRadius: 4,
346
paddingVertical: 8,
347
paddingHorizontal: 24,
348
},
349
imgEditor: {
350
maxWidth: '100%',