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: task background image getting cropped #36261

Merged
merged 16 commits into from
Mar 22, 2024
Merged

fix: task background image getting cropped #36261

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
9ff4961
fix: animated background getting cropped on android
aswin-s Feb 7, 2024
8122391
Merge remote-tracking branch 'upstream/main' into fix/issue-33922
aswin-s Feb 7, 2024
cd340a8
Merge remote-tracking branch 'upstream/main' into fix/issue-33922
aswin-s Feb 9, 2024
e623767
fix: action item taking extra space
aswin-s Feb 9, 2024
eaa7e04
fix: clean lint
aswin-s Feb 9, 2024
e6e18f6
fix: background image horizontal shift on sensor value change
aswin-s Feb 12, 2024
977512b
refactor: move image offset values outside of component
aswin-s Feb 12, 2024
deee8d4
Merge remote-tracking branch 'upstream/main' into fix/issue-33922
aswin-s Feb 13, 2024
1a076af
Merge remote-tracking branch 'upstream/main' into fix/issue-33922
aswin-s Feb 14, 2024
5ab88ef
Merge remote-tracking branch 'upstream/main' into fix/issue-33922
aswin-s Feb 16, 2024
310d81f
Merge remote-tracking branch 'upstream/main' into fix/issue-33922
aswin-s Mar 18, 2024
c0f2995
Merge remote-tracking branch 'upstream/main' into fix/issue-33922
aswin-s Mar 19, 2024
e7902fe
fix: extra space among report action items
aswin-s Mar 19, 2024
4cb39ce
fix: clamp translateY value
aswin-s Mar 19, 2024
d9fec75
Merge remote-tracking branch 'upstream/main' into fix/issue-33922
aswin-s Mar 19, 2024
33bcc45
Merge remote-tracking branch 'upstream/main' into fix/issue-33922
aswin-s Mar 22, 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
9 changes: 6 additions & 3 deletions src/pages/home/report/AnimatedEmptyStateBackground.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,14 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
import variables from '@styles/variables';
import CONST from '@src/CONST';

const IMAGE_OFFSET_Y = 75;
// Maximum horizontal and vertical shift in pixels on sensor value change
const IMAGE_OFFSET_X = 30;
const IMAGE_OFFSET_Y = 20;

function AnimatedEmptyStateBackground() {
const StyleUtils = useStyleUtils();
const {windowWidth, isSmallScreenWidth} = useWindowDimensions();
const illustrations = useThemeIllustrations();
const IMAGE_OFFSET_X = windowWidth / 2;

// If window width is greater than the max background width, repeat the background image
const maxBackgroundWidth = variables.sideBarWidth + CONST.EMPTY_STATE_BACKGROUND.ASPECT_RATIO * CONST.EMPTY_STATE_BACKGROUND.WIDE_SCREEN.IMAGE_HEIGHT;
Expand All @@ -37,7 +38,9 @@ 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 {
transform: [{translateX: withSpring(-IMAGE_OFFSET_X - xOffset.value)}, {translateY: withSpring(yOffset.value)}],
// 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]);

Expand Down
6 changes: 3 additions & 3 deletions src/pages/home/report/ReportActionItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -678,7 +678,7 @@ function ReportActionItem({
message = 'parentReportAction.deletedRequest';
}
return (
<View style={[StyleUtils.getReportWelcomeContainerStyle(isSmallScreenWidth, true), styles.justifyContentEnd]}>
<View>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add test case for this change

<AnimatedEmptyStateBackground />
<View style={[StyleUtils.getReportWelcomeTopMarginStyle(isSmallScreenWidth)]}>
<OfflineWithFeedback pendingAction={parentReportAction?.pendingAction ?? null}>
Expand Down Expand Up @@ -707,7 +707,7 @@ function ReportActionItem({
if (ReportUtils.isTaskReport(report)) {
if (ReportUtils.isCanceledTaskReport(report, parentReportAction)) {
return (
<View style={[StyleUtils.getReportWelcomeContainerStyle(isSmallScreenWidth)]}>
<View>
<AnimatedEmptyStateBackground />
<View style={[StyleUtils.getReportWelcomeTopMarginStyle(isSmallScreenWidth)]}>
<OfflineWithFeedback pendingAction={parentReportAction?.pendingAction}>
Expand All @@ -725,7 +725,7 @@ function ReportActionItem({
);
}
return (
<View style={[StyleUtils.getReportWelcomeContainerStyle(isSmallScreenWidth, true)]}>
<View>
<AnimatedEmptyStateBackground />
<View style={[StyleUtils.getReportWelcomeTopMarginStyle(isSmallScreenWidth)]}>
<TaskView
Expand Down
2 changes: 1 addition & 1 deletion src/styles/utils/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -755,7 +755,7 @@ function getReportWelcomeBackgroundImageStyle(isSmallScreenWidth: boolean, isMon
if (isSmallScreenWidth) {
return {
height: emptyStateBackground.SMALL_SCREEN.IMAGE_HEIGHT,
width: '200%',
width: '100%',
position: 'absolute',
};
}
Expand Down
Loading