Bluesky app fork with some witchin' additions 💫

Remove expo/vector-icons from EditImage modal (#5422)

authored by

Eric Bailey and committed by
GitHub
15231604 24adcb48

+69 -64
+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 + <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 + <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 + <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 + <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
··· 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
··· 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
··· 2 2 import {Pressable, StyleSheet, View} from 'react-native' 3 3 import {useWindowDimensions} from 'react-native' 4 4 import {LinearGradient} from 'expo-linear-gradient' 5 - import {MaterialIcons} from '@expo/vector-icons' 6 5 import {msg, Trans} from '@lingui/macro' 7 6 import {useLingui} from '@lingui/react' 8 7 import {Slider} from '@miblanchard/react-native-slider' ··· 13 12 import {MAX_ALT_TEXT} from 'lib/constants' 14 13 import {usePalette} from 'lib/hooks/usePalette' 15 14 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 16 - import {RectTallIcon, RectWideIcon, SquareIcon} from 'lib/icons' 17 15 import {enforceLen} from 'lib/strings/helpers' 18 16 import {gradients, s} from 'lib/styles' 19 17 import {useTheme} from 'lib/ThemeContext' 20 18 import {getKeys} from 'lib/type-assertions' 21 19 import {GalleryModel} from 'state/models/media/gallery' 22 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' 23 33 import {Text} from '../util/text/Text' 24 34 import {TextInput} from './util' 25 35 ··· 27 37 28 38 const RATIOS = { 29 39 '4:3': { 30 - Icon: RectWideIcon, 40 + icon: A43, 31 41 }, 32 42 '1:1': { 33 - Icon: SquareIcon, 43 + icon: A11, 34 44 }, 35 45 '3:4': { 36 - Icon: RectTallIcon, 46 + icon: A34, 37 47 }, 38 48 None: { 39 - label: 'None', 40 - Icon: MaterialIcons, 41 - name: 'do-not-disturb-alt', 49 + icon: Ban, 42 50 }, 43 51 } as const 44 52 ··· 112 120 // }, 113 121 // }, 114 122 { 115 - name: 'flip' as const, 123 + icon: FlipHorizontal, 116 124 label: _(msg`Flip horizontal`), 117 125 onPress: onFlipHorizontal, 118 126 }, 119 127 { 120 - name: 'flip' as const, 128 + icon: FlipVertical, 121 129 label: _(msg`Flip vertically`), 122 130 onPress: onFlipVertical, 123 131 }, ··· 165 173 onCloseModal() 166 174 }, [altText, image, position, scale, onCloseModal]) 167 175 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 176 if (image.cropped === undefined) { 180 177 return null 181 178 } ··· 231 228 maximumValue={3} 232 229 /> 233 230 </View> 234 - <View> 231 + <View style={[a.gap_sm]}> 235 232 {!isMobile ? ( 236 233 <Text type="sm-bold" style={pal.text}> 237 234 <Trans>Ratios</Trans> ··· 239 236 ) : null} 240 237 <View style={imgControlStyles}> 241 238 {getKeys(RATIOS).map(ratio => { 242 - const {Icon, ...props} = RATIOS[ratio] 243 - const labelIconSize = getLabelIconSize(ratio) 239 + const {icon} = RATIOS[ratio] 244 240 const isSelected = aspectRatio === ratio 245 241 246 242 return ( 247 - <Pressable 243 + <Button 248 244 key={ratio} 245 + label={ratio} 246 + size="large" 247 + shape="square" 248 + variant="outline" 249 + color={isSelected ? 'primary' : 'secondary'} 249 250 onPress={() => { 250 251 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> 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> 267 258 ) 268 259 })} 269 260 </View> ··· 273 264 </Text> 274 265 ) : null} 275 266 <View style={imgControlStyles}> 276 - {adjustments.map(({label, name, onPress}) => ( 277 - <Pressable 267 + {adjustments.map(({label, icon, onPress}) => ( 268 + <Button 278 269 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> 270 + label={label} 271 + size="large" 272 + shape="square" 273 + variant="outline" 274 + color="secondary" 275 + onPress={onPress}> 276 + <ButtonIcon icon={icon} /> 277 + </Button> 294 278 ))} 295 279 </View> 296 280 </View> ··· 361 345 borderRadius: 4, 362 346 paddingVertical: 8, 363 347 paddingHorizontal: 24, 364 - }, 365 - imgControl: { 366 - display: 'flex', 367 - alignItems: 'center', 368 - justifyContent: 'center', 369 - height: 40, 370 348 }, 371 349 imgEditor: { 372 350 maxWidth: '100%',