diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/icons/AspectRatio.tsx | 13 | ||||
| -rw-r--r-- | src/components/icons/FlipImage.tsx | 9 | ||||
| -rw-r--r-- | src/view/com/modals/EditImage.tsx | 106 |
3 files changed, 64 insertions, 64 deletions
diff --git a/src/components/icons/AspectRatio.tsx b/src/components/icons/AspectRatio.tsx new file mode 100644 index 000000000..b59c1680e --- /dev/null +++ b/src/components/icons/AspectRatio.tsx @@ -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', +}) diff --git a/src/components/icons/FlipImage.tsx b/src/components/icons/FlipImage.tsx new file mode 100644 index 000000000..deb133a5e --- /dev/null +++ b/src/components/icons/FlipImage.tsx @@ -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', +}) diff --git a/src/view/com/modals/EditImage.tsx b/src/view/com/modals/EditImage.tsx index b39dcd936..e3a770db0 100644 --- a/src/view/com/modals/EditImage.tsx +++ b/src/view/com/modals/EditImage.tsx @@ -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%', }, |