Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: There's a lot of extra space above the report actions #38449

Merged
merged 49 commits into from
May 28, 2024
Merged

Fix: There's a lot of extra space above the report actions #38449

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
49 commits
Select commit Hold shift + click to select a range
fd919af
Fix: There's a lot of extra space above the report actions
rayane-djouah Mar 17, 2024
7cc5415
Fix: There's a lot of extra space above the report actions
rayane-djouah Mar 17, 2024
008e993
Fix lint errors
rayane-djouah Mar 17, 2024
7be7a46
Fix failing test
rayane-djouah Mar 17, 2024
9484d6d
fix: list not scrollable
rayane-djouah Mar 17, 2024
7a81e69
remove unnecessary View
rayane-djouah Mar 19, 2024
ca9dc94
Merge branch 'Expensify:main' into Fix--There's-a-lot-of-extra-space-…
rayane-djouah Mar 19, 2024
e247fb1
Display the pointer cursor when hovering over any part of the message
rayane-djouah Mar 21, 2024
fa02255
merge main and adress review comments
rayane-djouah Mar 21, 2024
f7f3a90
fix lint errors
rayane-djouah Mar 21, 2024
6a0fc4c
address review comments
rayane-djouah Mar 21, 2024
17065b5
Fix MoneyRequestView layout
rayane-djouah Mar 21, 2024
1315a08
Merge branch 'Expensify:main' into Fix--There's-a-lot-of-extra-space-…
rayane-djouah Mar 21, 2024
62eb107
Merge branch 'main' into Fix--There's-a-lot-of-extra-space-above-the-…
rayane-djouah Mar 23, 2024
74f8907
make the background image overlap scroll with the content, so that at…
rayane-djouah Mar 26, 2024
78035ec
Merge branch 'main' into Fix--There's-a-lot-of-extra-space-above-the-…
rayane-djouah Mar 26, 2024
376c7b2
add missing isOverlapBackgroundImage and fix lint errors
rayane-djouah Mar 26, 2024
59fd1f4
prettier
rayane-djouah Mar 26, 2024
a71aecd
fix native and mweb style
rayane-djouah Mar 26, 2024
210c5ee
fix lint error
rayane-djouah Mar 26, 2024
177fde9
prettier
rayane-djouah Mar 26, 2024
b6e542e
Merge branch 'Expensify:main' into Fix--There's-a-lot-of-extra-space-…
rayane-djouah Mar 26, 2024
179a2cc
revert a change mad by error
rayane-djouah Mar 28, 2024
dec3dbf
Merge branch 'main' into Fix--There's-a-lot-of-extra-space-above-the-…
rayane-djouah Mar 31, 2024
cca7245
Merge branch 'main' into Fix--There's-a-lot-of-extra-space-above-the-…
rayane-djouah Apr 4, 2024
58ff868
correct the empty state image logic
rayane-djouah Apr 7, 2024
969564b
Merge branch 'main' into Fix--There's-a-lot-of-extra-space-above-the-…
rayane-djouah Apr 7, 2024
e9c59a5
Fix lint errors
rayane-djouah Apr 7, 2024
2c1b5eb
Fix lint error
rayane-djouah Apr 7, 2024
612eb11
Merge branch 'main' into Fix--There's-a-lot-of-extra-space-above-the-…
rayane-djouah Apr 9, 2024
5d24a4e
Merge branch 'main' into Fix--There's-a-lot-of-extra-space-above-the-…
rayane-djouah Apr 15, 2024
b229760
fix lint
rayane-djouah Apr 15, 2024
3d71266
Merge branch 'main' into Fix--There's-a-lot-of-extra-space-above-the-…
rayane-djouah Apr 25, 2024
82a20a3
use overflow hidden for the empty state image only on web and desktop
rayane-djouah Apr 26, 2024
3938918
Merge branch 'main' into Fix--There's-a-lot-of-extra-space-above-the-…
rayane-djouah Apr 30, 2024
a7caa10
Fix lint
rayane-djouah Apr 30, 2024
fdfedb9
Merge branch 'main' into Fix--There's-a-lot-of-extra-space-above-the-…
rayane-djouah May 3, 2024
a2fa88f
Merge branch 'main' into Fix--There's-a-lot-of-extra-space-above-the-…
rayane-djouah May 3, 2024
52e30c1
Merge branch 'main' into Fix--There's-a-lot-of-extra-space-above-the-…
rayane-djouah May 6, 2024
e350edd
Merge branch 'main' into Fix--There's-a-lot-of-extra-space-above-the-…
rayane-djouah May 8, 2024
bd8c802
fix lint errors
rayane-djouah May 8, 2024
c501c5a
fix lint error
rayane-djouah May 8, 2024
7f99e0c
Merge branch 'main' into Fix--There's-a-lot-of-extra-space-above-the-…
rayane-djouah May 12, 2024
77cd6de
Merge branch 'main' into Fix--There's-a-lot-of-extra-space-above-the-…
rayane-djouah May 13, 2024
ee89aa1
chore: Remove unnecessary positioning code
rayane-djouah May 13, 2024
10b8960
Merge branch 'main' into Fix--There's-a-lot-of-extra-space-above-the-…
rayane-djouah May 13, 2024
e0e7b7d
Merge branch 'main' into Fix--There's-a-lot-of-extra-space-above-the-…
rayane-djouah May 17, 2024
f6b4e71
Remove unnecessary style property
rayane-djouah May 17, 2024
dbcb442
add chatContentScrollViewPlatformStyles
rayane-djouah May 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 1 addition & 16 deletions src/CONST.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,27 +200,12 @@ const CONST = {
// Sizes needed for report empty state background image handling
EMPTY_STATE_BACKGROUND: {
ASPECT_RATIO: 3.72,
OVERLAP: 60,
SMALL_SCREEN: {
IMAGE_HEIGHT: 300,
CONTAINER_MINHEIGHT: 200,
VIEW_HEIGHT: 240,
},
WIDE_SCREEN: {
IMAGE_HEIGHT: 450,
CONTAINER_MINHEIGHT: 500,
VIEW_HEIGHT: 390,
},
MONEY_OR_TASK_REPORT: {
SMALL_SCREEN: {
IMAGE_HEIGHT: 300,
CONTAINER_MINHEIGHT: 280,
VIEW_HEIGHT: 240,
},
WIDE_SCREEN: {
IMAGE_HEIGHT: 450,
CONTAINER_MINHEIGHT: 280,
VIEW_HEIGHT: 390,
},
},
},

Expand Down
202 changes: 99 additions & 103 deletions src/components/ReportActionItem/MoneyReportView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import useLocalize from '@hooks/useLocalize';
import useStyleUtils from '@hooks/useStyleUtils';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import useWindowDimensions from '@hooks/useWindowDimensions';
import * as CurrencyUtils from '@libs/CurrencyUtils';
import Navigation from '@libs/Navigation/Navigation';
import * as ReportUtils from '@libs/ReportUtils';
Expand All @@ -35,7 +34,6 @@ function MoneyReportView({report, policy}: MoneyReportViewProps) {
const styles = useThemeStyles();
const StyleUtils = useStyleUtils();
const {translate} = useLocalize();
const {isSmallScreenWidth} = useWindowDimensions();
const isSettled = ReportUtils.isSettled(report.reportID);
const isTotalUpdated = ReportUtils.hasUpdatedTotal(report, policy);

Expand All @@ -60,113 +58,111 @@ function MoneyReportView({report, policy}: MoneyReportViewProps) {
}, [policy, report]);

return (
<View style={[StyleUtils.getReportWelcomeContainerStyle(isSmallScreenWidth, true), styles.overflowHidden]}>
<View style={[styles.pRelative]}>
<AnimatedEmptyStateBackground />
<View style={[StyleUtils.getReportWelcomeTopMarginStyle(isSmallScreenWidth, true)]}>
{!ReportUtils.isClosedExpenseReportWithNoExpenses(report) && (
<>
{ReportUtils.reportFieldsEnabled(report) &&
sortedPolicyReportFields.map((reportField) => {
const isTitleField = ReportUtils.isReportFieldOfTypeTitle(reportField);
const fieldValue = isTitleField ? report.reportName : reportField.value ?? reportField.defaultValue;
const isFieldDisabled = ReportUtils.isReportFieldDisabled(report, reportField, policy);
const fieldKey = ReportUtils.getReportFieldKey(reportField.fieldID);
{!ReportUtils.isClosedExpenseReportWithNoExpenses(report) && (
<>
{ReportUtils.reportFieldsEnabled(report) &&
sortedPolicyReportFields.map((reportField) => {
const isTitleField = ReportUtils.isReportFieldOfTypeTitle(reportField);
const fieldValue = isTitleField ? report.reportName : reportField.value ?? reportField.defaultValue;
const isFieldDisabled = ReportUtils.isReportFieldDisabled(report, reportField, policy);
const fieldKey = ReportUtils.getReportFieldKey(reportField.fieldID);

return (
<OfflineWithFeedback
pendingAction={report.pendingFields?.[fieldKey]}
errors={report.errorFields?.[fieldKey]}
errorRowStyles={styles.ph5}
key={`menuItem-${fieldKey}`}
onClose={() => reportActions.clearReportFieldErrors(report.reportID, reportField)}
>
<MenuItemWithTopDescription
description={Str.UCFirst(reportField.name)}
title={fieldValue}
onPress={() => Navigation.navigate(ROUTES.EDIT_REPORT_FIELD_REQUEST.getRoute(report.reportID, report.policyID ?? '', reportField.fieldID))}
shouldShowRightIcon
disabled={isFieldDisabled}
wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]}
shouldGreyOutWhenDisabled={false}
numberOfLinesTitle={0}
interactive
shouldStackHorizontally={false}
onSecondaryInteraction={() => {}}
hoverAndPressStyle={false}
titleWithTooltips={[]}
/>
</OfflineWithFeedback>
);
})}
<View style={[styles.flexRow, styles.pointerEventsNone, styles.containerWithSpaceBetween, styles.ph5, styles.pv2]}>
<View style={[styles.flex1, styles.justifyContentCenter]}>
<Text
style={[styles.textLabelSupporting]}
numberOfLines={1}
>
{translate('common.total')}
</Text>
</View>
<View style={[styles.flexRow, styles.justifyContentCenter]}>
{isSettled && !isPartiallyPaid && (
<View style={[styles.defaultCheckmarkWrapper, styles.mh2]}>
<Icon
src={Expensicons.Checkmark}
fill={theme.success}
/>
</View>
)}
<Text
numberOfLines={1}
style={[styles.taskTitleMenuItem, styles.alignSelfCenter, !isTotalUpdated && styles.offlineFeedback.pending]}
return (
<OfflineWithFeedback
pendingAction={report.pendingFields?.[fieldKey]}
errors={report.errorFields?.[fieldKey]}
errorRowStyles={styles.ph5}
key={`menuItem-${fieldKey}`}
onClose={() => reportActions.clearReportFieldErrors(report.reportID, reportField)}
>
{formattedTotalAmount}
</Text>
</View>
<MenuItemWithTopDescription
description={Str.UCFirst(reportField.name)}
title={fieldValue}
onPress={() => Navigation.navigate(ROUTES.EDIT_REPORT_FIELD_REQUEST.getRoute(report.reportID, report.policyID ?? '', reportField.fieldID))}
shouldShowRightIcon
disabled={isFieldDisabled}
wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]}
shouldGreyOutWhenDisabled={false}
numberOfLinesTitle={0}
interactive
shouldStackHorizontally={false}
onSecondaryInteraction={() => {}}
hoverAndPressStyle={false}
titleWithTooltips={[]}
/>
</OfflineWithFeedback>
);
})}
<View style={[styles.flexRow, styles.pointerEventsNone, styles.containerWithSpaceBetween, styles.ph5, styles.pv2]}>
<View style={[styles.flex1, styles.justifyContentCenter]}>
<Text
style={[styles.textLabelSupporting]}
numberOfLines={1}
>
{translate('common.total')}
</Text>
</View>
{Boolean(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 style={[styles.flexRow, styles.justifyContentCenter]}>
{isSettled && !isPartiallyPaid && (
<View style={[styles.defaultCheckmarkWrapper, styles.mh2]}>
<Icon
src={Expensicons.Checkmark}
fill={theme.success}
/>
</View>
)}
<Text
numberOfLines={1}
style={[styles.taskTitleMenuItem, styles.alignSelfCenter, !isTotalUpdated && styles.offlineFeedback.pending]}
>
{formattedTotalAmount}
</Text>
</View>
</View>
{Boolean(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.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 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>
</View>
</>
)}
</>
)}
</View>
<View style={[styles.flexRow, styles.justifyContentCenter]}>
<Text
numberOfLines={1}
style={subAmountTextStyles}
>
{formattedCompanySpendAmount}
</Text>
</View>
</View>
</>
)}
</>
)}
</View>
);
}
Expand Down
10 changes: 3 additions & 7 deletions src/components/ReportActionItem/MoneyRequestView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,10 @@ import ViolationMessages from '@components/ViolationMessages';
import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
import usePermissions from '@hooks/usePermissions';
import useStyleUtils from '@hooks/useStyleUtils';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import useViolations from '@hooks/useViolations';
import type {ViolationField} from '@hooks/useViolations';
import useWindowDimensions from '@hooks/useWindowDimensions';
import * as CardUtils from '@libs/CardUtils';
import * as CurrencyUtils from '@libs/CurrencyUtils';
import type {MileageRate} from '@libs/DistanceRequestUtils';
Expand Down Expand Up @@ -97,9 +95,7 @@ function MoneyRequestView({
const theme = useTheme();
const styles = useThemeStyles();
const session = useSession();
const StyleUtils = useStyleUtils();
const {isOffline} = useNetwork();
const {isSmallScreenWidth} = useWindowDimensions();
const {translate, toLocaleDigit} = useLocalize();
const parentReportAction = parentReportActions?.[report.parentReportActionID ?? ''] ?? null;
const isTrackExpense = ReportUtils.isTrackExpenseReport(report);
Expand Down Expand Up @@ -323,9 +319,9 @@ function MoneyRequestView({
const shouldShowNotesViolations = !isReceiptBeingScanned && canUseViolations && ReportUtils.isPaidGroupPolicy(report);

return (
<View style={[StyleUtils.getReportWelcomeContainerStyle(isSmallScreenWidth, true, shouldShowAnimatedBackground)]}>
<View style={styles.pRelative}>
{shouldShowAnimatedBackground && <AnimatedEmptyStateBackground />}
<View style={shouldShowAnimatedBackground && [StyleUtils.getReportWelcomeTopMarginStyle(isSmallScreenWidth, true)]}>
<>
{!isInvoice && (
<ReceiptAuditHeader
notes={noticeTypeViolations}
Expand Down Expand Up @@ -551,7 +547,7 @@ function MoneyRequestView({
/>
</View>
)}
</View>
</>
</View>
);
}
Expand Down
15 changes: 8 additions & 7 deletions src/pages/home/report/AnimatedEmptyStateBackground.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react';
import {View} from 'react-native';
import Animated, {clamp, SensorType, useAnimatedSensor, useAnimatedStyle, useReducedMotion, useSharedValue, withSpring} from 'react-native-reanimated';
import useStyleUtils from '@hooks/useStyleUtils';
import useThemeIllustrations from '@hooks/useThemeIllustrations';
Expand Down Expand Up @@ -37,18 +38,18 @@ function AnimatedEmptyStateBackground() {
xOffset.value = clamp(xOffset.value + y * CONST.ANIMATION_GYROSCOPE_VALUE, -IMAGE_OFFSET_X, IMAGE_OFFSET_X);
yOffset.value = clamp(yOffset.value - x * CONST.ANIMATION_GYROSCOPE_VALUE, -IMAGE_OFFSET_Y, IMAGE_OFFSET_Y);
return {
// On Android, scroll view sub views gets clipped beyond container bounds. Set the top position so that image wouldn't get clipped
top: IMAGE_OFFSET_Y,
transform: [{translateX: withSpring(xOffset.value)}, {translateY: withSpring(yOffset.value, {overshootClamping: true})}, {scale: 1.15}],
};
}, [isReducedMotionEnabled]);

return (
<Animated.Image
source={illustrations.EmptyStateBackgroundImage}
style={[StyleUtils.getReportWelcomeBackgroundImageStyle(isSmallScreenWidth), animatedStyles]}
resizeMode={windowWidth > maxBackgroundWidth ? 'repeat' : 'cover'}
/>
<View style={StyleUtils.getReportWelcomeBackgroundContainerStyle(isSmallScreenWidth)}>
<Animated.Image
source={illustrations.EmptyStateBackgroundImage}
style={[StyleUtils.getReportWelcomeBackgroundImageStyle(isSmallScreenWidth), animatedStyles]}
resizeMode={windowWidth > maxBackgroundWidth ? 'repeat' : 'cover'}
/>
</View>
);
}

Expand Down
Loading
Loading