acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Remove expo/vector-icons from EditImage modal

Browse Source
This commit is contained in:
Eric Bailey
2024-09-19 10:31:50 -05:00
parent bda355fd58
commit 0bacd9bcfa
8 changed files with 69 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/icons/aspectRatio11_stroke2_corner0_rounded.svg
+1
View File
@@ -0,0 +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>
Side by Side

After

Width:  |  Height:  |  Size: 229 B

assets/icons/aspectRatio34_stroke2_corner0_rounded.svg
+1
View File
@@ -0,0 +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>
Side by Side

After

Width:  |  Height:  |  Size: 276 B

assets/icons/aspectRatio43_stroke2_corner0_rounded.svg
+1
View File
@@ -0,0 +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>
Side by Side

After

Width:  |  Height:  |  Size: 279 B

assets/icons/flipHorizontal_stroke2_corner0_rounded.svg
+1
View File
@@ -0,0 +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>
Side by Side

After

Width:  |  Height:  |  Size: 371 B

assets/icons/flipVertical_stroke2_corner0_rounded.svg
+1
View File
@@ -0,0 +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>
Side by Side

After

Width:  |  Height:  |  Size: 376 B

src/components/icons/AspectRatio.tsx
+13
View File
@@ -0,0 +1,13 @@
import {createSinglePathSVG} from './TEMPLATE'
export const AspectRatio11_Stroke2_Corner0_Rounded = createSinglePathSVG({
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',
})
export const AspectRatio43_Stroke2_Corner0_Rounded = createSinglePathSVG({
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',
})
export const AspectRatio34_Stroke2_Corner0_Rounded = createSinglePathSVG({
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',
})
src/components/icons/FlipImage.tsx
+9
View File
@@ -0,0 +1,9 @@
import {createSinglePathSVG} from './TEMPLATE'
export const FlipVertical_Stroke2_Corner0_Rounded = createSinglePathSVG({
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',
})
export const FlipHorizontal_Stroke2_Corner0_Rounded = createSinglePathSVG({
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',
})
src/view/com/modals/EditImage.tsx
+42 -64
View File
@@ -2,7 +2,6 @@ import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
import {Pressable, StyleSheet, View} from 'react-native'
import {useWindowDimensions} from 'react-native'
import {LinearGradient} from 'expo-linear-gradient'
import {MaterialIcons} from '@expo/vector-icons'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {Slider} from '@miblanchard/react-native-slider'
@@ -13,13 +12,24 @@ import {useModalControls} from '#/state/modals'
import {MAX_ALT_TEXT} from 'lib/constants'
import {usePalette} from 'lib/hooks/usePalette'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {RectTallIcon, RectWideIcon, SquareIcon} from 'lib/icons'
import {enforceLen} from 'lib/strings/helpers'
import {gradients, s} from 'lib/styles'
import {useTheme} from 'lib/ThemeContext'
import {getKeys} from 'lib/type-assertions'
import {GalleryModel} from 'state/models/media/gallery'
import {ImageModel} from 'state/models/media/image'
import {atoms as a} from '#/alf'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {
AspectRatio11_Stroke2_Corner0_Rounded as A11,
AspectRatio34_Stroke2_Corner0_Rounded as A34,
AspectRatio43_Stroke2_Corner0_Rounded as A43,
} from '#/components/icons/AspectRatio'
import {CircleBanSign_Stroke2_Corner0_Rounded as Ban} from '#/components/icons/CircleBanSign'
import {
FlipHorizontal_Stroke2_Corner0_Rounded as FlipHorizontal,
FlipVertical_Stroke2_Corner0_Rounded as FlipVertical,
} from '#/components/icons/FlipImage'
import {Text} from '../util/text/Text'
import {TextInput} from './util'
@@ -27,18 +37,16 @@ export const snapPoints = ['80%']
const RATIOS = {
'4:3': {
Icon: RectWideIcon,
icon: A43,
},
'1:1': {
Icon: SquareIcon,
icon: A11,
},
'3:4': {
Icon: RectTallIcon,
icon: A34,
},
None: {
label: 'None',
Icon: MaterialIcons,
name: 'do-not-disturb-alt',
icon: Ban,
},
} as const
@@ -112,12 +120,12 @@ export const Component = observer(function EditImageImpl({
// },
// },
{
name: 'flip' as const,
icon: FlipHorizontal,
label: _(msg`Flip horizontal`),
onPress: onFlipHorizontal,
},
{
name: 'flip' as const,
icon: FlipVertical,
label: _(msg`Flip vertically`),
onPress: onFlipVertical,
},
@@ -165,17 +173,6 @@ export const Component = observer(function EditImageImpl({
onCloseModal()
}, [altText, image, position, scale, onCloseModal])
const getLabelIconSize = useCallback((as: AspectRatio) => {
switch (as) {
case 'None':
return 22
case '1:1':
return 32
default:
return 26
}
}, [])
if (image.cropped === undefined) {
return null
}
@@ -231,7 +228,7 @@ export const Component = observer(function EditImageImpl({
maximumValue={3}
/>
</View>
<View>
<View style={[a.gap_sm]}>
{!isMobile ? (
<Text type="sm-bold" style={pal.text}>
<Trans>Ratios</Trans>
@@ -239,31 +236,25 @@ export const Component = observer(function EditImageImpl({
) : null}
<View style={imgControlStyles}>
{getKeys(RATIOS).map(ratio => {
const {Icon, ...props} = RATIOS[ratio]
const labelIconSize = getLabelIconSize(ratio)
const {icon} = RATIOS[ratio]
const isSelected = aspectRatio === ratio
return (
<Pressable
<Button
key={ratio}
label={ratio}
size="large"
shape="square"
variant="outline"
color={isSelected ? 'primary' : 'secondary'}
onPress={() => {
onSetRatio(ratio)
}}
accessibilityLabel={ratio}
accessibilityHint="">
<Icon
size={labelIconSize}
style={[styles.imgControl, isSelected ? s.blue3 : pal.text]}
color={(isSelected ? s.blue3 : pal.text).color}
{...props}
/>
<Text
type={isSelected ? 'xs-bold' : 'xs-medium'}
style={[isSelected ? s.blue3 : pal.text, s.textCenter]}>
{ratio}
</Text>
</Pressable>
}}>
<View style={[a.align_center, a.gap_2xs]}>
<ButtonIcon icon={icon} />
<ButtonText style={[a.text_xs]}>{ratio}</ButtonText>
</View>
</Button>
)
})}
</View>
@@ -273,24 +264,17 @@ export const Component = observer(function EditImageImpl({
</Text>
) : null}
<View style={imgControlStyles}>
{adjustments.map(({label, name, onPress}) => (
<Pressable
{adjustments.map(({label, icon, onPress}) => (
<Button
key={label}
onPress={onPress}
accessibilityLabel={label}
accessibilityHint=""
style={styles.flipBtn}>
<MaterialIcons
name={name}
size={label?.startsWith('Flip') ? 22 : 24}
style={[
pal.text,
label === _(msg`Flip vertically`)
? styles.flipVertical
: undefined,
]}
/>
</Pressable>
label={label}
size="large"
shape="square"
variant="outline"
color="secondary"
onPress={onPress}>
<ButtonIcon icon={icon} />
</Button>
))}
</View>
</View>
@@ -362,12 +346,6 @@ const styles = StyleSheet.create({
paddingVertical: 8,
paddingHorizontal: 24,
},
imgControl: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: 40,
},
imgEditor: {
maxWidth: '100%',
},