From 6cbe364a0d0bf05f30fb6ffbd742b8f9da53d21c Mon Sep 17 00:00:00 2001 From: PrashantKumar Mangukiya Date: Wed, 15 Mar 2023 10:51:06 +0530 Subject: [PATCH 01/10] Add square mask for workspace image upload --- src/CONST.js | 5 +++++ src/components/AvatarCropModal/AvatarCropModal.js | 5 +++++ src/components/AvatarCropModal/ImageCropView.js | 13 +++++++++++-- src/components/AvatarWithImagePicker.js | 5 +++++ src/pages/workspace/WorkspaceSettingsPage.js | 1 + src/styles/styles.js | 6 ++++++ 6 files changed, 33 insertions(+), 2 deletions(-) diff --git a/src/CONST.js b/src/CONST.js index 418d5bc1ad6b..ddcbc49c5724 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -800,6 +800,11 @@ const CONST = { ICON_TYPE_AVATAR: 'avatar', ICON_TYPE_WORKSPACE: 'workspace', + IMAGE_CROP_MASK_TYPE: { + CIRCLE: 'circle', + SQUARE: 'square', + }, + AVATAR_SIZE: { LARGE: 'large', MEDIUM: 'medium', diff --git a/src/components/AvatarCropModal/AvatarCropModal.js b/src/components/AvatarCropModal/AvatarCropModal.js index b0b568d986c8..2721efbdb0d2 100644 --- a/src/components/AvatarCropModal/AvatarCropModal.js +++ b/src/components/AvatarCropModal/AvatarCropModal.js @@ -50,6 +50,9 @@ const propTypes = { /** Modal visibility */ isVisible: PropTypes.bool.isRequired, + /** Type of image crop mask */ + imageCropMaskType: PropTypes.oneOf([CONST.IMAGE_CROP_MASK_TYPE.CIRCLE, CONST.IMAGE_CROP_MASK_TYPE.SQUARE]), + ...withLocalizePropTypes, ...windowDimensionsPropTypes, }; @@ -60,6 +63,7 @@ const defaultProps = { imageType: '', onClose: () => {}, onSave: () => {}, + imageCropMaskType: CONST.IMAGE_CROP_MASK_TYPE.CIRCLE, }; // This component can't be written using class since reanimated API uses hooks. @@ -339,6 +343,7 @@ const AvatarCropModal = (props) => { translateY={translateY} translateX={translateX} rotation={rotation} + imageCropMaskType={props.imageCropMaskType} /> diff --git a/src/components/AvatarCropModal/ImageCropView.js b/src/components/AvatarCropModal/ImageCropView.js index 1b9ca36d16e9..0ae524303c39 100644 --- a/src/components/AvatarCropModal/ImageCropView.js +++ b/src/components/AvatarCropModal/ImageCropView.js @@ -9,6 +9,7 @@ import * as Expensicons from '../Icon/Expensicons'; import * as StyleUtils from '../../styles/StyleUtils'; import gestureHandlerPropTypes from './gestureHandlerPropTypes'; import ControlSelection from '../../libs/ControlSelection'; +import CONST from '../../CONST'; const propTypes = { /** Link to image for cropping */ @@ -37,12 +38,16 @@ const propTypes = { /** React-native-reanimated lib handler which executes when the user is panning image */ panGestureEventHandler: gestureHandlerPropTypes, + + /** Type of image crop mask */ + imageCropMaskType: PropTypes.oneOf([CONST.IMAGE_CROP_MASK_TYPE.CIRCLE, CONST.IMAGE_CROP_MASK_TYPE.SQUARE]), }; const defaultProps = { imageUri: '', containerSize: 0, panGestureEventHandler: () => {}, + imageCropMaskType: CONST.IMAGE_CROP_MASK_TYPE.CIRCLE, }; const ImageCropView = (props) => { @@ -64,14 +69,18 @@ const ImageCropView = (props) => { }; }, [props.originalImageHeight, props.originalImageWidth]); + // If image crop mask type is square then apply border around View + const squareMaskBorder = props.imageCropMaskType === CONST.IMAGE_CROP_MASK_TYPE.SQUARE ? styles.imageCropViewBorder : {}; + // We're preventing text selection with ControlSelection.blockElement to prevent safari // default behaviour of cursor - I-beam cursor on drag. See https://github.com/Expensify/App/issues/13688 return ( - - + + {props.imageCropMaskType === CONST.IMAGE_CROP_MASK_TYPE.CIRCLE + && } diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js index 6f33445ba146..a32eb0af215c 100644 --- a/src/components/AvatarWithImagePicker.js +++ b/src/components/AvatarWithImagePicker.js @@ -60,6 +60,9 @@ const propTypes = { /** Denotes whether it is an avatar or a workspace avatar */ type: PropTypes.oneOf([CONST.ICON_TYPE_AVATAR, CONST.ICON_TYPE_WORKSPACE]), + /** Type of image crop mask */ + imageCropMaskType: PropTypes.oneOf([CONST.IMAGE_CROP_MASK_TYPE.CIRCLE, CONST.IMAGE_CROP_MASK_TYPE.SQUARE]), + ...withLocalizePropTypes, }; @@ -74,6 +77,7 @@ const defaultProps = { size: CONST.AVATAR_SIZE.DEFAULT, fallbackIcon: Expensicons.FallbackAvatar, type: CONST.ICON_TYPE_AVATAR, + imageCropMaskType: CONST.IMAGE_CROP_MASK_TYPE.CIRCLE, }; class AvatarWithImagePicker extends React.Component { @@ -309,6 +313,7 @@ class AvatarWithImagePicker extends React.Component { imageUri={this.state.imageUri} imageName={this.state.imageName} imageType={this.state.imageType} + imageCropMaskType={this.props.imageCropMaskType} /> ); diff --git a/src/pages/workspace/WorkspaceSettingsPage.js b/src/pages/workspace/WorkspaceSettingsPage.js index 37bbe886d310..f5bba22c027e 100644 --- a/src/pages/workspace/WorkspaceSettingsPage.js +++ b/src/pages/workspace/WorkspaceSettingsPage.js @@ -116,6 +116,7 @@ class WorkspaceSettingsPage extends React.Component { isUsingDefaultAvatar={!lodashGet(this.props.policy, 'avatar', null)} onImageSelected={file => Policy.updateWorkspaceAvatar(lodashGet(this.props.policy, 'id', ''), file)} onImageRemoved={() => Policy.deleteWorkspaceAvatar(lodashGet(this.props.policy, 'id', ''))} + imageCropMaskType={CONST.IMAGE_CROP_MASK_TYPE.SQUARE} /> Date: Wed, 15 Mar 2023 10:54:08 +0530 Subject: [PATCH 02/10] Change variable name for square mask border style --- src/components/AvatarCropModal/ImageCropView.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/AvatarCropModal/ImageCropView.js b/src/components/AvatarCropModal/ImageCropView.js index 0ae524303c39..4808859a4ba4 100644 --- a/src/components/AvatarCropModal/ImageCropView.js +++ b/src/components/AvatarCropModal/ImageCropView.js @@ -70,7 +70,7 @@ const ImageCropView = (props) => { }, [props.originalImageHeight, props.originalImageWidth]); // If image crop mask type is square then apply border around View - const squareMaskBorder = props.imageCropMaskType === CONST.IMAGE_CROP_MASK_TYPE.SQUARE ? styles.imageCropViewBorder : {}; + const squareMaskBorderStyle = props.imageCropMaskType === CONST.IMAGE_CROP_MASK_TYPE.SQUARE ? styles.imageCropViewBorder : {}; // We're preventing text selection with ControlSelection.blockElement to prevent safari // default behaviour of cursor - I-beam cursor on drag. See https://github.com/Expensify/App/issues/13688 @@ -78,7 +78,7 @@ const ImageCropView = (props) => { - + {props.imageCropMaskType === CONST.IMAGE_CROP_MASK_TYPE.CIRCLE && } From 2e1b498139198043f19e4531a0b65307abb8ad52 Mon Sep 17 00:00:00 2001 From: PrashantKumar Mangukiya Date: Wed, 15 Mar 2023 16:19:29 +0530 Subject: [PATCH 03/10] Update src/components/AvatarCropModal/ImageCropView.js Changed variable name from squareMaskBorderStyle to maskStyles Co-authored-by: Rajat Parashar --- src/components/AvatarCropModal/ImageCropView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AvatarCropModal/ImageCropView.js b/src/components/AvatarCropModal/ImageCropView.js index 4808859a4ba4..8beb6e3fcc9c 100644 --- a/src/components/AvatarCropModal/ImageCropView.js +++ b/src/components/AvatarCropModal/ImageCropView.js @@ -70,7 +70,7 @@ const ImageCropView = (props) => { }, [props.originalImageHeight, props.originalImageWidth]); // If image crop mask type is square then apply border around View - const squareMaskBorderStyle = props.imageCropMaskType === CONST.IMAGE_CROP_MASK_TYPE.SQUARE ? styles.imageCropViewBorder : {}; + const maskStyles = props.imageCropMaskType === CONST.IMAGE_CROP_MASK_TYPE.SQUARE ? styles.imageCropViewBorder : {}; // We're preventing text selection with ControlSelection.blockElement to prevent safari // default behaviour of cursor - I-beam cursor on drag. See https://github.com/Expensify/App/issues/13688 From dc0acf938e330122117e7ecfeaba15353660caec Mon Sep 17 00:00:00 2001 From: PrashantKumar Mangukiya Date: Wed, 15 Mar 2023 16:19:44 +0530 Subject: [PATCH 04/10] Update src/components/AvatarCropModal/ImageCropView.js Changed variable name from squareMaskBorderStyle to maskStyles Co-authored-by: Rajat Parashar --- src/components/AvatarCropModal/ImageCropView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AvatarCropModal/ImageCropView.js b/src/components/AvatarCropModal/ImageCropView.js index 8beb6e3fcc9c..ff489ef105a1 100644 --- a/src/components/AvatarCropModal/ImageCropView.js +++ b/src/components/AvatarCropModal/ImageCropView.js @@ -78,7 +78,7 @@ const ImageCropView = (props) => { - + {props.imageCropMaskType === CONST.IMAGE_CROP_MASK_TYPE.CIRCLE && } From 9c77982259bdbcc2956f7ded6e570220c60cc2a6 Mon Sep 17 00:00:00 2001 From: PrashantKumar Mangukiya Date: Wed, 15 Mar 2023 16:30:12 +0530 Subject: [PATCH 05/10] Set border color to themeColors.text (i.e. white) --- src/styles/styles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index 3f4175ca654c..7b2259bc0ca2 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2824,7 +2824,7 @@ const styles = { imageCropViewBorder: { borderRadius: variables.componentBorderRadiusCard, borderWidth: 2, - borderColor: '#ffffff', + borderColor: themeColors.text, }, sliderKnob: { From 7f47725db16f8ab38d558e08875da89562a36fc8 Mon Sep 17 00:00:00 2001 From: PrashantKumar Mangukiya Date: Wed, 15 Mar 2023 21:21:34 +0530 Subject: [PATCH 06/10] Add variable for crop view border radius --- src/styles/styles.js | 2 +- src/styles/variables.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index 7b2259bc0ca2..4af1a2113dd8 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2822,7 +2822,7 @@ const styles = { }, imageCropViewBorder: { - borderRadius: variables.componentBorderRadiusCard, + borderRadius: variables.cropViewBorderRadius, borderWidth: 2, borderColor: themeColors.text, }, diff --git a/src/styles/variables.js b/src/styles/variables.js index 375ee77a594a..15a213e57e7b 100644 --- a/src/styles/variables.js +++ b/src/styles/variables.js @@ -28,6 +28,7 @@ export default { componentBorderRadiusCard: 12, componentBorderRadiusRounded: 20, buttonBorderRadius: 100, + cropViewBorderRadius: 12, avatarSizeLarge: 80, avatarSizeHeader: 40, avatarSizeLargeBordered: 88, From d5e1cbd903b1bd17352d4749f29ce835bfd03f9c Mon Sep 17 00:00:00 2001 From: PrashantKumar Mangukiya Date: Wed, 15 Mar 2023 21:49:57 +0530 Subject: [PATCH 07/10] Correct border color --- src/styles/styles.js | 4 ++-- src/styles/themes/default.js | 1 + src/styles/variables.js | 1 - 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index 4af1a2113dd8..2174570698df 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2822,9 +2822,9 @@ const styles = { }, imageCropViewBorder: { - borderRadius: variables.cropViewBorderRadius, + borderRadius: variables.componentBorderRadiusCard, borderWidth: 2, - borderColor: themeColors.text, + borderColor: themeColors.cropMaskOutline, }, sliderKnob: { diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js index 97a3da5d500d..81978378ac73 100644 --- a/src/styles/themes/default.js +++ b/src/styles/themes/default.js @@ -13,6 +13,7 @@ const darkTheme = { iconSuccessFill: colors.green, iconReversed: colors.greenAppBackground, textSupporting: colors.greenSupportingText, + cropMaskOutline: colors.white, text: colors.white, link: colors.blueLink, linkHover: colors.blueLinkHover, diff --git a/src/styles/variables.js b/src/styles/variables.js index 15a213e57e7b..375ee77a594a 100644 --- a/src/styles/variables.js +++ b/src/styles/variables.js @@ -28,7 +28,6 @@ export default { componentBorderRadiusCard: 12, componentBorderRadiusRounded: 20, buttonBorderRadius: 100, - cropViewBorderRadius: 12, avatarSizeLarge: 80, avatarSizeHeader: 40, avatarSizeLargeBordered: 88, From 753fd46c03c319924fa1ca92fb982af217486a55 Mon Sep 17 00:00:00 2001 From: PrashantKumar Mangukiya Date: Sat, 18 Mar 2023 01:57:26 +0530 Subject: [PATCH 08/10] Update code to pass svg mask as prop --- assets/images/image-crop-mask.svg | 26 +++++++++++++++---- assets/images/image-crop-square-mask.svg | 24 +++++++++++++++++ src/CONST.js | 5 ---- .../AvatarCropModal/AvatarCropModal.js | 8 +++--- .../AvatarCropModal/ImageCropView.js | 15 ++++------- src/components/AvatarWithImagePicker.js | 8 +++--- src/components/Icon/Expensicons.js | 2 ++ src/pages/workspace/WorkspaceSettingsPage.js | 2 +- src/styles/styles.js | 7 ----- src/styles/themes/default.js | 1 - 10 files changed, 61 insertions(+), 37 deletions(-) create mode 100644 assets/images/image-crop-square-mask.svg diff --git a/assets/images/image-crop-mask.svg b/assets/images/image-crop-mask.svg index 89b63474dcb9..8edded23218d 100644 --- a/assets/images/image-crop-mask.svg +++ b/assets/images/image-crop-mask.svg @@ -1,7 +1,23 @@ - - - - + + + + + + + + + + + + + + + diff --git a/assets/images/image-crop-square-mask.svg b/assets/images/image-crop-square-mask.svg new file mode 100644 index 000000000000..050998d576f8 --- /dev/null +++ b/assets/images/image-crop-square-mask.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + diff --git a/src/CONST.js b/src/CONST.js index ddcbc49c5724..418d5bc1ad6b 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -800,11 +800,6 @@ const CONST = { ICON_TYPE_AVATAR: 'avatar', ICON_TYPE_WORKSPACE: 'workspace', - IMAGE_CROP_MASK_TYPE: { - CIRCLE: 'circle', - SQUARE: 'square', - }, - AVATAR_SIZE: { LARGE: 'large', MEDIUM: 'medium', diff --git a/src/components/AvatarCropModal/AvatarCropModal.js b/src/components/AvatarCropModal/AvatarCropModal.js index 2721efbdb0d2..e51ad62f777a 100644 --- a/src/components/AvatarCropModal/AvatarCropModal.js +++ b/src/components/AvatarCropModal/AvatarCropModal.js @@ -50,8 +50,8 @@ const propTypes = { /** Modal visibility */ isVisible: PropTypes.bool.isRequired, - /** Type of image crop mask */ - imageCropMaskType: PropTypes.oneOf([CONST.IMAGE_CROP_MASK_TYPE.CIRCLE, CONST.IMAGE_CROP_MASK_TYPE.SQUARE]), + /** Image crop vector mask */ + maskImage: PropTypes.func, ...withLocalizePropTypes, ...windowDimensionsPropTypes, @@ -63,7 +63,7 @@ const defaultProps = { imageType: '', onClose: () => {}, onSave: () => {}, - imageCropMaskType: CONST.IMAGE_CROP_MASK_TYPE.CIRCLE, + maskImage: Expensicons.ImageCropMask, }; // This component can't be written using class since reanimated API uses hooks. @@ -343,7 +343,7 @@ const AvatarCropModal = (props) => { translateY={translateY} translateX={translateX} rotation={rotation} - imageCropMaskType={props.imageCropMaskType} + maskImage={props.maskImage} /> diff --git a/src/components/AvatarCropModal/ImageCropView.js b/src/components/AvatarCropModal/ImageCropView.js index ff489ef105a1..0231a9f6d093 100644 --- a/src/components/AvatarCropModal/ImageCropView.js +++ b/src/components/AvatarCropModal/ImageCropView.js @@ -9,7 +9,6 @@ import * as Expensicons from '../Icon/Expensicons'; import * as StyleUtils from '../../styles/StyleUtils'; import gestureHandlerPropTypes from './gestureHandlerPropTypes'; import ControlSelection from '../../libs/ControlSelection'; -import CONST from '../../CONST'; const propTypes = { /** Link to image for cropping */ @@ -39,15 +38,15 @@ const propTypes = { /** React-native-reanimated lib handler which executes when the user is panning image */ panGestureEventHandler: gestureHandlerPropTypes, - /** Type of image crop mask */ - imageCropMaskType: PropTypes.oneOf([CONST.IMAGE_CROP_MASK_TYPE.CIRCLE, CONST.IMAGE_CROP_MASK_TYPE.SQUARE]), + /** Image crop vector mask */ + maskImage: PropTypes.func, }; const defaultProps = { imageUri: '', containerSize: 0, panGestureEventHandler: () => {}, - imageCropMaskType: CONST.IMAGE_CROP_MASK_TYPE.CIRCLE, + maskImage: Expensicons.ImageCropMask, }; const ImageCropView = (props) => { @@ -69,18 +68,14 @@ const ImageCropView = (props) => { }; }, [props.originalImageHeight, props.originalImageWidth]); - // If image crop mask type is square then apply border around View - const maskStyles = props.imageCropMaskType === CONST.IMAGE_CROP_MASK_TYPE.SQUARE ? styles.imageCropViewBorder : {}; - // We're preventing text selection with ControlSelection.blockElement to prevent safari // default behaviour of cursor - I-beam cursor on drag. See https://github.com/Expensify/App/issues/13688 return ( - - {props.imageCropMaskType === CONST.IMAGE_CROP_MASK_TYPE.CIRCLE - && } + + diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js index a32eb0af215c..67943121ec89 100644 --- a/src/components/AvatarWithImagePicker.js +++ b/src/components/AvatarWithImagePicker.js @@ -60,8 +60,8 @@ const propTypes = { /** Denotes whether it is an avatar or a workspace avatar */ type: PropTypes.oneOf([CONST.ICON_TYPE_AVATAR, CONST.ICON_TYPE_WORKSPACE]), - /** Type of image crop mask */ - imageCropMaskType: PropTypes.oneOf([CONST.IMAGE_CROP_MASK_TYPE.CIRCLE, CONST.IMAGE_CROP_MASK_TYPE.SQUARE]), + /** Image crop vector mask */ + maskImage: PropTypes.func, ...withLocalizePropTypes, }; @@ -77,7 +77,7 @@ const defaultProps = { size: CONST.AVATAR_SIZE.DEFAULT, fallbackIcon: Expensicons.FallbackAvatar, type: CONST.ICON_TYPE_AVATAR, - imageCropMaskType: CONST.IMAGE_CROP_MASK_TYPE.CIRCLE, + maskImage: Expensicons.ImageCropMask, }; class AvatarWithImagePicker extends React.Component { @@ -313,7 +313,7 @@ class AvatarWithImagePicker extends React.Component { imageUri={this.state.imageUri} imageName={this.state.imageName} imageType={this.state.imageType} - imageCropMaskType={this.props.imageCropMaskType} + maskImage={this.props.maskImage} /> ); diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js index 36a01a83f279..6db55a4e0664 100644 --- a/src/components/Icon/Expensicons.js +++ b/src/components/Icon/Expensicons.js @@ -47,6 +47,7 @@ import Hashtag from '../../../assets/images/hashtag.svg'; import History from '../../../assets/images/history.svg'; import Hourglass from '../../../assets/images/hourglass.svg'; import ImageCropMask from '../../../assets/images/image-crop-mask.svg'; +import ImageCropSquareMask from '../../../assets/images/image-crop-square-mask.svg'; import Info from '../../../assets/images/info.svg'; import Invoice from '../../../assets/images/invoice.svg'; import Key from '../../../assets/images/key.svg'; @@ -164,6 +165,7 @@ export { History, Hourglass, ImageCropMask, + ImageCropSquareMask, Info, Invoice, Key, diff --git a/src/pages/workspace/WorkspaceSettingsPage.js b/src/pages/workspace/WorkspaceSettingsPage.js index f5bba22c027e..ba5cb13944a9 100644 --- a/src/pages/workspace/WorkspaceSettingsPage.js +++ b/src/pages/workspace/WorkspaceSettingsPage.js @@ -116,7 +116,7 @@ class WorkspaceSettingsPage extends React.Component { isUsingDefaultAvatar={!lodashGet(this.props.policy, 'avatar', null)} onImageSelected={file => Policy.updateWorkspaceAvatar(lodashGet(this.props.policy, 'id', ''), file)} onImageRemoved={() => Policy.deleteWorkspaceAvatar(lodashGet(this.props.policy, 'id', ''))} - imageCropMaskType={CONST.IMAGE_CROP_MASK_TYPE.SQUARE} + maskImage={Expensicons.ImageCropSquareMask} /> Date: Sat, 18 Mar 2023 17:23:45 +0530 Subject: [PATCH 09/10] Update variable and file name --- .../{image-crop-mask.svg => image-crop-circle-mask.svg} | 0 src/components/AvatarCropModal/AvatarCropModal.js | 2 +- src/components/AvatarCropModal/ImageCropView.js | 2 +- src/components/AvatarWithImagePicker.js | 6 +++--- src/components/Icon/Expensicons.js | 4 ++-- src/pages/workspace/WorkspaceSettingsPage.js | 2 +- 6 files changed, 8 insertions(+), 8 deletions(-) rename assets/images/{image-crop-mask.svg => image-crop-circle-mask.svg} (100%) diff --git a/assets/images/image-crop-mask.svg b/assets/images/image-crop-circle-mask.svg similarity index 100% rename from assets/images/image-crop-mask.svg rename to assets/images/image-crop-circle-mask.svg diff --git a/src/components/AvatarCropModal/AvatarCropModal.js b/src/components/AvatarCropModal/AvatarCropModal.js index e51ad62f777a..e25d8a7fd116 100644 --- a/src/components/AvatarCropModal/AvatarCropModal.js +++ b/src/components/AvatarCropModal/AvatarCropModal.js @@ -63,7 +63,7 @@ const defaultProps = { imageType: '', onClose: () => {}, onSave: () => {}, - maskImage: Expensicons.ImageCropMask, + maskImage: undefined, }; // This component can't be written using class since reanimated API uses hooks. diff --git a/src/components/AvatarCropModal/ImageCropView.js b/src/components/AvatarCropModal/ImageCropView.js index 0231a9f6d093..d89fd07e4688 100644 --- a/src/components/AvatarCropModal/ImageCropView.js +++ b/src/components/AvatarCropModal/ImageCropView.js @@ -46,7 +46,7 @@ const defaultProps = { imageUri: '', containerSize: 0, panGestureEventHandler: () => {}, - maskImage: Expensicons.ImageCropMask, + maskImage: Expensicons.CircleCropMask, }; const ImageCropView = (props) => { diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js index 67943121ec89..f802fd6f70b4 100644 --- a/src/components/AvatarWithImagePicker.js +++ b/src/components/AvatarWithImagePicker.js @@ -61,7 +61,7 @@ const propTypes = { type: PropTypes.oneOf([CONST.ICON_TYPE_AVATAR, CONST.ICON_TYPE_WORKSPACE]), /** Image crop vector mask */ - maskImage: PropTypes.func, + editorMaskImage: PropTypes.func, ...withLocalizePropTypes, }; @@ -77,7 +77,7 @@ const defaultProps = { size: CONST.AVATAR_SIZE.DEFAULT, fallbackIcon: Expensicons.FallbackAvatar, type: CONST.ICON_TYPE_AVATAR, - maskImage: Expensicons.ImageCropMask, + editorMaskImage: undefined, }; class AvatarWithImagePicker extends React.Component { @@ -313,7 +313,7 @@ class AvatarWithImagePicker extends React.Component { imageUri={this.state.imageUri} imageName={this.state.imageName} imageType={this.state.imageType} - maskImage={this.props.maskImage} + maskImage={this.props.editorMaskImage} /> ); diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js index 6db55a4e0664..83a754cd3f8d 100644 --- a/src/components/Icon/Expensicons.js +++ b/src/components/Icon/Expensicons.js @@ -46,7 +46,7 @@ import Globe from '../../../assets/images/globe.svg'; import Hashtag from '../../../assets/images/hashtag.svg'; import History from '../../../assets/images/history.svg'; import Hourglass from '../../../assets/images/hourglass.svg'; -import ImageCropMask from '../../../assets/images/image-crop-mask.svg'; +import CircleCropMask from '../../../assets/images/image-crop-circle-mask.svg'; import ImageCropSquareMask from '../../../assets/images/image-crop-square-mask.svg'; import Info from '../../../assets/images/info.svg'; import Invoice from '../../../assets/images/invoice.svg'; @@ -164,7 +164,7 @@ export { Hashtag, History, Hourglass, - ImageCropMask, + CircleCropMask, ImageCropSquareMask, Info, Invoice, diff --git a/src/pages/workspace/WorkspaceSettingsPage.js b/src/pages/workspace/WorkspaceSettingsPage.js index ba5cb13944a9..a7ad7503d568 100644 --- a/src/pages/workspace/WorkspaceSettingsPage.js +++ b/src/pages/workspace/WorkspaceSettingsPage.js @@ -116,7 +116,7 @@ class WorkspaceSettingsPage extends React.Component { isUsingDefaultAvatar={!lodashGet(this.props.policy, 'avatar', null)} onImageSelected={file => Policy.updateWorkspaceAvatar(lodashGet(this.props.policy, 'id', ''), file)} onImageRemoved={() => Policy.deleteWorkspaceAvatar(lodashGet(this.props.policy, 'id', ''))} - maskImage={Expensicons.ImageCropSquareMask} + editorMaskImage={Expensicons.ImageCropSquareMask} /> Date: Sat, 18 Mar 2023 21:30:01 +0530 Subject: [PATCH 10/10] Change circle mask export name --- src/components/AvatarCropModal/ImageCropView.js | 2 +- src/components/Icon/Expensicons.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/AvatarCropModal/ImageCropView.js b/src/components/AvatarCropModal/ImageCropView.js index d89fd07e4688..bf0762b960a7 100644 --- a/src/components/AvatarCropModal/ImageCropView.js +++ b/src/components/AvatarCropModal/ImageCropView.js @@ -46,7 +46,7 @@ const defaultProps = { imageUri: '', containerSize: 0, panGestureEventHandler: () => {}, - maskImage: Expensicons.CircleCropMask, + maskImage: Expensicons.ImageCropCircleMask, }; const ImageCropView = (props) => { diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js index 83a754cd3f8d..c094b2349c45 100644 --- a/src/components/Icon/Expensicons.js +++ b/src/components/Icon/Expensicons.js @@ -46,7 +46,7 @@ import Globe from '../../../assets/images/globe.svg'; import Hashtag from '../../../assets/images/hashtag.svg'; import History from '../../../assets/images/history.svg'; import Hourglass from '../../../assets/images/hourglass.svg'; -import CircleCropMask from '../../../assets/images/image-crop-circle-mask.svg'; +import ImageCropCircleMask from '../../../assets/images/image-crop-circle-mask.svg'; import ImageCropSquareMask from '../../../assets/images/image-crop-square-mask.svg'; import Info from '../../../assets/images/info.svg'; import Invoice from '../../../assets/images/invoice.svg'; @@ -164,7 +164,7 @@ export { Hashtag, History, Hourglass, - CircleCropMask, + ImageCropCircleMask, ImageCropSquareMask, Info, Invoice,