From f1b1afab98acc610146c46f8a57e2ffc4836086f Mon Sep 17 00:00:00 2001 From: dragnoir Date: Wed, 20 Mar 2024 22:09:32 +0100 Subject: [PATCH 1/2] Fix: remove border bug on report previews with 3+ receipts --- assets/images/imagesMoreBg/dark_bg.png | Bin 0 -> 184 bytes assets/images/imagesMoreBg/light_bg.png | Bin 0 -> 184 bytes .../ReportActionItemImages.tsx | 79 ++++++++---------- src/styles/index.ts | 5 +- src/styles/theme/illustrations/themes/dark.ts | 2 + .../theme/illustrations/themes/light.ts | 2 + src/styles/theme/illustrations/types.ts | 1 + 7 files changed, 42 insertions(+), 47 deletions(-) create mode 100644 assets/images/imagesMoreBg/dark_bg.png create mode 100644 assets/images/imagesMoreBg/light_bg.png diff --git a/assets/images/imagesMoreBg/dark_bg.png b/assets/images/imagesMoreBg/dark_bg.png new file mode 100644 index 0000000000000000000000000000000000000000..a0b909e497ea12712121d1ef49e0af84e6866d2f GIT binary patch literal 184 zcmeAS@N?(olHy`uVBq!ia0vp^8X(NX3?x5J2>1u27>k44ofvPP)Tsw@I14-?iy0WW zg+Z8+Vb&Z8kYIpMh^v&Xk${0JyNaY;UM9#q4^J1zkcv63rxr3EP!Kq9V0|KoTgn!n u&PC#)g~sdO?~g3I-Q0F7*FS>*5TAX%=KI$_{y-xc7(8A5T-G@yGywoW7dLJI literal 0 HcmV?d00001 diff --git a/assets/images/imagesMoreBg/light_bg.png b/assets/images/imagesMoreBg/light_bg.png new file mode 100644 index 0000000000000000000000000000000000000000..6033ccb85452cf8227d5b8b776823c0e16605948 GIT binary patch literal 184 zcmeAS@N?(olHy`uVBq!ia0vp^8X(NX3?x5J2>1u27>k44ofvPP)Tsw@I14-?iy0WW zg+Z8+Vb&Z8kYIpMi0iY5x8A>g`s2%orQJo`KtT^r7srr_Ij*M`G9FM6IB;NnB8OYb w7N5>V;-ZDd>)-E>EW6#@b}QFEg8&epeZJ=V*FXM1BN-SxUHx3vIVCg!09k=Q1^@s6 literal 0 HcmV?d00001 diff --git a/src/components/ReportActionItem/ReportActionItemImages.tsx b/src/components/ReportActionItem/ReportActionItemImages.tsx index ffc12957dcb4..798ce8c80525 100644 --- a/src/components/ReportActionItem/ReportActionItemImages.tsx +++ b/src/components/ReportActionItem/ReportActionItemImages.tsx @@ -1,10 +1,10 @@ /* eslint-disable react/no-array-index-key */ import React from 'react'; import {View} from 'react-native'; -import {Polygon, Svg} from 'react-native-svg'; +import Image from '@components/Image'; import Text from '@components/Text'; import useStyleUtils from '@hooks/useStyleUtils'; -import useTheme from '@hooks/useTheme'; +import useThemeIllustrations from '@hooks/useThemeIllustrations'; import useThemeStyles from '@hooks/useThemeStyles'; import type {ThumbnailAndImageURI} from '@libs/ReceiptUtils'; import variables from '@styles/variables'; @@ -38,9 +38,9 @@ type ReportActionItemImagesProps = { */ function ReportActionItemImages({images, size, total, isHovered = false}: ReportActionItemImagesProps) { - const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); + const illustrations = useThemeIllustrations(); // Calculate the number of images to be shown, limited by the value of 'size' (if defined) // or the total number of images. const numberOfShownImages = Math.min(size ?? images.length, images.length); @@ -60,48 +60,39 @@ function ReportActionItemImages({images, size, total, isHovered = false}: Report const hoverStyle = isHovered ? styles.reportPreviewBoxHoverBorder : undefined; - const triangleWidth = variables.reportActionItemImagesMoreCornerTriangleWidth; - return ( - - {shownImages.map(({thumbnail, image, transaction, isLocalFile, filename}, index) => { - const isLastImage = index === numberOfShownImages - 1; - - // Show a border to separate multiple images. Shown to the right for each except the last. - const shouldShowBorder = shownImages.length > 1 && index < shownImages.length - 1; - const borderStyle = shouldShowBorder ? styles.reportActionItemImageBorder : {}; - return ( - - - {isLastImage && remaining > 0 && ( - - - - - - {remaining > MAX_REMAINING ? `${MAX_REMAINING}+` : `+${remaining}`} - - )} - - ); - })} + + + {shownImages.map(({thumbnail, image, transaction, isLocalFile, filename}, index) => { + // Show a border to separate multiple images. Shown to the right for each except the last. + const shouldShowBorder = shownImages.length > 1 && index < shownImages.length - 1; + const borderStyle = shouldShowBorder ? styles.reportActionItemImageBorder : {}; + return ( + + + + ); + })} + + {remaining > 0 && ( + + + {remaining > MAX_REMAINING ? `${MAX_REMAINING}+` : `+${remaining}`} + + )} ); } diff --git a/src/styles/index.ts b/src/styles/index.ts index 8a65cabaf19f..53c234e04bba 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -4123,14 +4123,13 @@ const styles = (theme: ThemeColors) => reportActionItemImagesMoreContainer: { position: 'absolute', - bottom: 0, - right: 0, + bottom: 4, + right: 4, display: 'flex', }, reportActionItemImagesMore: { borderTopLeftRadius: 12, - backgroundColor: theme.border, width: 40, height: 40, }, diff --git a/src/styles/theme/illustrations/themes/dark.ts b/src/styles/theme/illustrations/themes/dark.ts index a46900510652..296f055cab28 100644 --- a/src/styles/theme/illustrations/themes/dark.ts +++ b/src/styles/theme/illustrations/themes/dark.ts @@ -1,3 +1,4 @@ +import ImagesMoreBg from '@assets/images/imagesMoreBg/dark_bg.png'; import EmptyStateBackgroundImage from '@assets/images/themeDependent/empty-state_background-fade-dark.png'; import ExampleCheckEN from '@assets/images/themeDependent/example-check-image-dark-en.png'; import ExampleCheckES from '@assets/images/themeDependent/example-check-image-dark-es.png'; @@ -9,6 +10,7 @@ const illustrations = { ExampleCheckEN, ExampleCheckES, WorkspaceProfile, + ImagesMoreBg, } satisfies IllustrationsType; export default illustrations; diff --git a/src/styles/theme/illustrations/themes/light.ts b/src/styles/theme/illustrations/themes/light.ts index 3406e219e656..f9252c6b89db 100644 --- a/src/styles/theme/illustrations/themes/light.ts +++ b/src/styles/theme/illustrations/themes/light.ts @@ -1,3 +1,4 @@ +import ImagesMoreBg from '@assets/images/imagesMoreBg/light_bg.png'; import EmptyStateBackgroundImage from '@assets/images/themeDependent/empty-state_background-fade-light.png'; import ExampleCheckEN from '@assets/images/themeDependent/example-check-image-light-en.png'; import ExampleCheckES from '@assets/images/themeDependent/example-check-image-light-es.png'; @@ -9,6 +10,7 @@ const illustrations = { ExampleCheckEN, ExampleCheckES, WorkspaceProfile, + ImagesMoreBg, } satisfies IllustrationsType; export default illustrations; diff --git a/src/styles/theme/illustrations/types.ts b/src/styles/theme/illustrations/types.ts index 86f2aa813118..60806b3a96a6 100644 --- a/src/styles/theme/illustrations/types.ts +++ b/src/styles/theme/illustrations/types.ts @@ -5,6 +5,7 @@ type IllustrationsType = { ExampleCheckES: ImageSourcePropType; ExampleCheckEN: ImageSourcePropType; WorkspaceProfile: ImageSourcePropType; + ImagesMoreBg: ImageSourcePropType; }; export default IllustrationsType; From 093c223420dc4ccfe1343ff33a131a5c17978a04 Mon Sep 17 00:00:00 2001 From: dragnoir Date: Thu, 21 Mar 2024 00:41:44 +0100 Subject: [PATCH 2/2] Fix: change to simple solution --- assets/images/imagesMoreBg/dark_bg.png | Bin 184 -> 0 bytes assets/images/imagesMoreBg/light_bg.png | Bin 184 -> 0 bytes .../ReportActionItemImages.tsx | 25 ++++++++++++------ src/styles/index.ts | 10 ++++--- src/styles/theme/illustrations/themes/dark.ts | 2 -- .../theme/illustrations/themes/light.ts | 2 -- src/styles/theme/illustrations/types.ts | 1 - 7 files changed, 24 insertions(+), 16 deletions(-) delete mode 100644 assets/images/imagesMoreBg/dark_bg.png delete mode 100644 assets/images/imagesMoreBg/light_bg.png diff --git a/assets/images/imagesMoreBg/dark_bg.png b/assets/images/imagesMoreBg/dark_bg.png deleted file mode 100644 index a0b909e497ea12712121d1ef49e0af84e6866d2f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 184 zcmeAS@N?(olHy`uVBq!ia0vp^8X(NX3?x5J2>1u27>k44ofvPP)Tsw@I14-?iy0WW zg+Z8+Vb&Z8kYIpMh^v&Xk${0JyNaY;UM9#q4^J1zkcv63rxr3EP!Kq9V0|KoTgn!n u&PC#)g~sdO?~g3I-Q0F7*FS>*5TAX%=KI$_{y-xc7(8A5T-G@yGywoW7dLJI diff --git a/assets/images/imagesMoreBg/light_bg.png b/assets/images/imagesMoreBg/light_bg.png deleted file mode 100644 index 6033ccb85452cf8227d5b8b776823c0e16605948..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 184 zcmeAS@N?(olHy`uVBq!ia0vp^8X(NX3?x5J2>1u27>k44ofvPP)Tsw@I14-?iy0WW zg+Z8+Vb&Z8kYIpMi0iY5x8A>g`s2%orQJo`KtT^r7srr_Ij*M`G9FM6IB;NnB8OYb w7N5>V;-ZDd>)-E>EW6#@b}QFEg8&epeZJ=V*FXM1BN-SxUHx3vIVCg!09k=Q1^@s6 diff --git a/src/components/ReportActionItem/ReportActionItemImages.tsx b/src/components/ReportActionItem/ReportActionItemImages.tsx index 798ce8c80525..c66dc36d1ed5 100644 --- a/src/components/ReportActionItem/ReportActionItemImages.tsx +++ b/src/components/ReportActionItem/ReportActionItemImages.tsx @@ -1,10 +1,10 @@ /* eslint-disable react/no-array-index-key */ import React from 'react'; import {View} from 'react-native'; -import Image from '@components/Image'; +import {Polygon, Svg} from 'react-native-svg'; import Text from '@components/Text'; import useStyleUtils from '@hooks/useStyleUtils'; -import useThemeIllustrations from '@hooks/useThemeIllustrations'; +import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import type {ThumbnailAndImageURI} from '@libs/ReceiptUtils'; import variables from '@styles/variables'; @@ -38,9 +38,9 @@ type ReportActionItemImagesProps = { */ function ReportActionItemImages({images, size, total, isHovered = false}: ReportActionItemImagesProps) { + const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); - const illustrations = useThemeIllustrations(); // Calculate the number of images to be shown, limited by the value of 'size' (if defined) // or the total number of images. const numberOfShownImages = Math.min(size ?? images.length, images.length); @@ -60,8 +60,10 @@ function ReportActionItemImages({images, size, total, isHovered = false}: Report const hoverStyle = isHovered ? styles.reportPreviewBoxHoverBorder : undefined; + const triangleWidth = variables.reportActionItemImagesMoreCornerTriangleWidth; + return ( - + {shownImages.map(({thumbnail, image, transaction, isLocalFile, filename}, index) => { // Show a border to separate multiple images. Shown to the right for each except the last. @@ -86,10 +88,17 @@ function ReportActionItemImages({images, size, total, isHovered = false}: Report {remaining > 0 && ( - + + + + {remaining > MAX_REMAINING ? `${MAX_REMAINING}+` : `+${remaining}`} )} diff --git a/src/styles/index.ts b/src/styles/index.ts index 53c234e04bba..7c3f488e5eb1 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -4099,9 +4099,12 @@ const styles = (theme: ThemeColors) => gap: 16, }, + reportActionItemImagesContainer: { + margin: 4, + }, + reportActionItemImages: { flexDirection: 'row', - margin: 4, borderRadius: 12, overflow: 'hidden', height: variables.reportActionImagesSingleImageHeight, @@ -4123,13 +4126,14 @@ const styles = (theme: ThemeColors) => reportActionItemImagesMoreContainer: { position: 'absolute', - bottom: 4, - right: 4, + bottom: 0, + right: 0, display: 'flex', }, reportActionItemImagesMore: { borderTopLeftRadius: 12, + backgroundColor: theme.border, width: 40, height: 40, }, diff --git a/src/styles/theme/illustrations/themes/dark.ts b/src/styles/theme/illustrations/themes/dark.ts index 296f055cab28..a46900510652 100644 --- a/src/styles/theme/illustrations/themes/dark.ts +++ b/src/styles/theme/illustrations/themes/dark.ts @@ -1,4 +1,3 @@ -import ImagesMoreBg from '@assets/images/imagesMoreBg/dark_bg.png'; import EmptyStateBackgroundImage from '@assets/images/themeDependent/empty-state_background-fade-dark.png'; import ExampleCheckEN from '@assets/images/themeDependent/example-check-image-dark-en.png'; import ExampleCheckES from '@assets/images/themeDependent/example-check-image-dark-es.png'; @@ -10,7 +9,6 @@ const illustrations = { ExampleCheckEN, ExampleCheckES, WorkspaceProfile, - ImagesMoreBg, } satisfies IllustrationsType; export default illustrations; diff --git a/src/styles/theme/illustrations/themes/light.ts b/src/styles/theme/illustrations/themes/light.ts index f9252c6b89db..3406e219e656 100644 --- a/src/styles/theme/illustrations/themes/light.ts +++ b/src/styles/theme/illustrations/themes/light.ts @@ -1,4 +1,3 @@ -import ImagesMoreBg from '@assets/images/imagesMoreBg/light_bg.png'; import EmptyStateBackgroundImage from '@assets/images/themeDependent/empty-state_background-fade-light.png'; import ExampleCheckEN from '@assets/images/themeDependent/example-check-image-light-en.png'; import ExampleCheckES from '@assets/images/themeDependent/example-check-image-light-es.png'; @@ -10,7 +9,6 @@ const illustrations = { ExampleCheckEN, ExampleCheckES, WorkspaceProfile, - ImagesMoreBg, } satisfies IllustrationsType; export default illustrations; diff --git a/src/styles/theme/illustrations/types.ts b/src/styles/theme/illustrations/types.ts index 60806b3a96a6..86f2aa813118 100644 --- a/src/styles/theme/illustrations/types.ts +++ b/src/styles/theme/illustrations/types.ts @@ -5,7 +5,6 @@ type IllustrationsType = { ExampleCheckES: ImageSourcePropType; ExampleCheckEN: ImageSourcePropType; WorkspaceProfile: ImageSourcePropType; - ImagesMoreBg: ImageSourcePropType; }; export default IllustrationsType;