Skip to content

Commit

Permalink
Merge pull request #30143 from allroundexperts/fix-30129
Browse files Browse the repository at this point in the history 
fix: unify the spacing on the money report
(cherry picked from commit cb5aeb1)
  • Loading branch information
@luacmartins @OSBotify
luacmartins authored and OSBotify committed Oct 22, 2023
1 parent b314ce5 commit 697cbd3
Show file tree
Hide file tree
Showing 3 changed files with 68 additions and 56 deletions.
11 changes: 10 additions & 1 deletion src/CONST.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,16 @@ const CONST = {
VIEW_HEIGHT: 275,
},
MONEY_REPORT: {
MIN_HEIGHT: 280,
SMALL_SCREEN: {
IMAGE_HEIGHT: 300,
CONTAINER_MINHEIGHT: 280,
VIEW_HEIGHT: 220,
},
WIDE_SCREEN: {
IMAGE_HEIGHT: 450,
CONTAINER_MINHEIGHT: 280,
VIEW_HEIGHT: 275,
},
},
},

Expand Down
91 changes: 45 additions & 46 deletions src/components/ReportActionItem/MoneyReportView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import styles from '../../styles/styles';
import themeColors from '../../styles/themes/default';
import * as ReportUtils from '../../libs/ReportUtils';
import * as StyleUtils from '../../styles/StyleUtils';
import CONST from '../../CONST';
import Text from '../Text';
import Icon from '../Icon';
import * as Expensicons from '../Icon/Expensicons';
Expand Down Expand Up @@ -41,9 +40,9 @@ function MoneyReportView(props) {
const subAmountTextStyles = [styles.taskTitleMenuItem, styles.alignSelfCenter, StyleUtils.getFontSizeStyle(variables.fontSizeh1), StyleUtils.getColorStyle(themeColors.textSupporting)];

return (
<View style={[StyleUtils.getReportWelcomeContainerStyle(props.isSmallScreenWidth), StyleUtils.getMinimumHeight(CONST.EMPTY_STATE_BACKGROUND.MONEY_REPORT.MIN_HEIGHT)]}>
<View style={[StyleUtils.getReportWelcomeContainerStyle(props.isSmallScreenWidth, true)]}>
<AnimatedEmptyStateBackground />
<View style={[StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth)]}>
<View style={[StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth, true)]}>
<View style={[styles.flexRow, styles.pointerEventsNone, styles.containerWithSpaceBetween, styles.ph5, styles.pv2]}>
<View style={[styles.flex1, styles.justifyContentCenter]}>
<Text
Expand All @@ -70,51 +69,51 @@ function MoneyReportView(props) {
</Text>
</View>
</View>
</View>
{shouldShowBreakdown ? (
<>
<View style={[styles.flexRow, styles.pointerEventsNone, styles.containerWithSpaceBetween, styles.ph5, styles.pv1]}>
<View style={[styles.flex1, styles.justifyContentCenter]}>
<Text
style={[styles.textLabelSupporting]}
numberOfLines={1}
>
{translate('cardTransactions.outOfPocket')}
</Text>
</View>
<View style={[styles.flexRow, styles.justifyContentCenter]}>
<Text
numberOfLines={1}
style={subAmountTextStyles}
>
{formattedOutOfPocketAmount}
</Text>
</View>
</View>
<View style={[styles.flexRow, styles.pointerEventsNone, styles.containerWithSpaceBetween, styles.ph5, styles.pv1]}>
<View style={[styles.flex1, styles.justifyContentCenter]}>
<Text
style={[styles.textLabelSupporting]}
numberOfLines={1}
>
{translate('cardTransactions.companySpend')}
</Text>
{shouldShowBreakdown ? (
<>
<View style={[styles.flexRow, styles.pointerEventsNone, styles.containerWithSpaceBetween, styles.ph5, styles.pv1]}>
<View style={[styles.flex1, styles.justifyContentCenter]}>
<Text
style={[styles.textLabelSupporting]}
numberOfLines={1}
>
{translate('cardTransactions.outOfPocket')}
</Text>
</View>
<View style={[styles.flexRow, styles.justifyContentCenter]}>
<Text
numberOfLines={1}
style={subAmountTextStyles}
>
{formattedOutOfPocketAmount}
</Text>
</View>
</View>
<View style={[styles.flexRow, styles.justifyContentCenter]}>
<Text
numberOfLines={1}
style={subAmountTextStyles}
>
{formattedCompanySpendAmount}
</Text>
<View style={[styles.flexRow, styles.pointerEventsNone, styles.containerWithSpaceBetween, styles.ph5, styles.pv1]}>
<View style={[styles.flex1, styles.justifyContentCenter]}>
<Text
style={[styles.textLabelSupporting]}
numberOfLines={1}
>
{translate('cardTransactions.companySpend')}
</Text>
</View>
<View style={[styles.flexRow, styles.justifyContentCenter]}>
<Text
numberOfLines={1}
style={subAmountTextStyles}
>
{formattedCompanySpendAmount}
</Text>
</View>
</View>
</View>
</>
) : undefined}
<SpacerView
shouldShow={props.shouldShowHorizontalRule}
style={[props.shouldShowHorizontalRule ? styles.reportHorizontalRule : {}]}
/>
</>
) : undefined}
<SpacerView
shouldShow={props.shouldShowHorizontalRule}
style={[props.shouldShowHorizontalRule ? styles.reportHorizontalRule : {}]}
/>
</View>
</View>
);
}
Expand Down
22 changes: 13 additions & 9 deletions src/styles/StyleUtils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -882,17 +882,19 @@ function getErrorPageContainerStyle(safeAreaPaddingBottom = 0): ViewStyle {
/**
* Gets the correct size for the empty state background image based on screen dimensions
*/
function getReportWelcomeBackgroundImageStyle(isSmallScreenWidth: boolean): ViewStyle {
function getReportWelcomeBackgroundImageStyle(isSmallScreenWidth: boolean, isMoneyReport = false): ViewStyle {
const emptyStateBackground = isMoneyReport ? CONST.EMPTY_STATE_BACKGROUND.MONEY_REPORT : CONST.EMPTY_STATE_BACKGROUND;

if (isSmallScreenWidth) {
return {
height: CONST.EMPTY_STATE_BACKGROUND.SMALL_SCREEN.IMAGE_HEIGHT,
height: emptyStateBackground.SMALL_SCREEN.IMAGE_HEIGHT,
width: '200%',
position: 'absolute',
};
}

return {
height: CONST.EMPTY_STATE_BACKGROUND.WIDE_SCREEN.IMAGE_HEIGHT,
height: emptyStateBackground.WIDE_SCREEN.IMAGE_HEIGHT,
width: '100%',
position: 'absolute',
};
Expand All @@ -901,15 +903,16 @@ function getReportWelcomeBackgroundImageStyle(isSmallScreenWidth: boolean): View
/**
* Gets the correct top margin size for the chat welcome message based on screen dimensions
*/
function getReportWelcomeTopMarginStyle(isSmallScreenWidth: boolean): ViewStyle {
function getReportWelcomeTopMarginStyle(isSmallScreenWidth: boolean, isMoneyReport = false): ViewStyle {
const emptyStateBackground = isMoneyReport ? CONST.EMPTY_STATE_BACKGROUND.MONEY_REPORT : CONST.EMPTY_STATE_BACKGROUND;
if (isSmallScreenWidth) {
return {
marginTop: CONST.EMPTY_STATE_BACKGROUND.SMALL_SCREEN.VIEW_HEIGHT,
marginTop: emptyStateBackground.SMALL_SCREEN.VIEW_HEIGHT,
};
}

return {
marginTop: CONST.EMPTY_STATE_BACKGROUND.WIDE_SCREEN.VIEW_HEIGHT,
marginTop: emptyStateBackground.WIDE_SCREEN.VIEW_HEIGHT,
};
}

Expand All @@ -934,17 +937,18 @@ function getLineHeightStyle(lineHeight: number): TextStyle {
/**
* Gets the correct size for the empty state container based on screen dimensions
*/
function getReportWelcomeContainerStyle(isSmallScreenWidth: boolean): ViewStyle {
function getReportWelcomeContainerStyle(isSmallScreenWidth: boolean, isMoneyReport = false): ViewStyle {
const emptyStateBackground = isMoneyReport ? CONST.EMPTY_STATE_BACKGROUND.MONEY_REPORT : CONST.EMPTY_STATE_BACKGROUND;
if (isSmallScreenWidth) {
return {
minHeight: CONST.EMPTY_STATE_BACKGROUND.SMALL_SCREEN.CONTAINER_MINHEIGHT,
minHeight: emptyStateBackground.SMALL_SCREEN.CONTAINER_MINHEIGHT,
display: 'flex',
justifyContent: 'space-between',
};
}

return {
minHeight: CONST.EMPTY_STATE_BACKGROUND.WIDE_SCREEN.CONTAINER_MINHEIGHT,
minHeight: emptyStateBackground.WIDE_SCREEN.CONTAINER_MINHEIGHT,
display: 'flex',
justifyContent: 'space-between',
};
Expand Down

0 comments on commit 697cbd3

Please sign in to comment.