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

Add Download Banner to mWeb #25418

Merged
merged 27 commits into from
Aug 23, 2023
Merged

Add Download Banner to mWeb #25418

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
d20ba5e
Add Mobile Banner Component, Styled (not functional)
grgia Aug 17, 2023
ecd7d39
Clean up and add functionality
grgia Aug 17, 2023
0c24cfa
Move out of folder
grgia Aug 17, 2023
aefdaeb
fix asset path
grgia Aug 17, 2023
8d14fa3
Add copy to en/es
grgia Aug 17, 2023
fde38d5
modify spanish translation from slack feedback
grgia Aug 17, 2023
e61e3f0
Fix lint
grgia Aug 17, 2023
81f1536
Design comments- remove period, fix line height in second line
grgia Aug 17, 2023
b19d81d
Merge branch 'main' into georgia-DownloadAppBanner
grgia Aug 17, 2023
b415c22
Fix Capitalization of 'Download the App' to 'Download the app'
grgia Aug 18, 2023
ae8c7e7
Remember if user has dismissed the banner
grgia Aug 18, 2023
ec791de
prettier
grgia Aug 18, 2023
bd78429
Merge branch 'main' into georgia-DownloadAppBanner
mountiny Aug 18, 2023
586c22a
Move MobileBanner down in tree
grgia Aug 19, 2023
1fffcb8
Merge branch 'georgia-DownloadAppBanner' of github.com:Expensify/App …
grgia Aug 19, 2023
d92db8e
Merge branch 'main' into georgia-DownloadAppBanner
grgia Aug 21, 2023
769bc7b
Merge branch 'main' into georgia-DownloadAppBanner
grgia Aug 22, 2023
f485cae
Initial Bottom Banner Styling
grgia Aug 22, 2023
9bcb429
center styling
grgia Aug 22, 2023
955e5ad
Rename to DownloadAppModal, clean up
grgia Aug 22, 2023
163f58c
prettier
grgia Aug 22, 2023
04ce142
Merge branch 'main' into georgia-DownloadAppBanner
grgia Aug 22, 2023
bc88a5e
rename action to DownloadAppModal
grgia Aug 22, 2023
f1633a6
remove unused import for lint
grgia Aug 22, 2023
849639b
Merge branch 'main' into georgia-DownloadAppBanner
grgia Aug 23, 2023
66b56e9
add shouldStackButtons prop
grgia Aug 23, 2023
2daf94a
add back SHOW_DOWNLOAD_APP_BANNER key
grgia Aug 23, 2023
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
48 changes: 27 additions & 21 deletions src/components/ConfirmContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,15 @@ const propTypes = {
/** Whether we should show the cancel button */
shouldShowCancelButton: PropTypes.bool,

/** Icon to display above the title */
iconSource: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),

/** Whether to center the icon / text content */
shouldCenterContent: PropTypes.bool,

/** Whether to stack the buttons */
shouldStackButtons: PropTypes.bool,

/** Styles for title */
// eslint-disable-next-line react/forbid-prop-types
titleStyles: PropTypes.arrayOf(PropTypes.object),
Expand Down Expand Up @@ -75,6 +80,7 @@ const defaultProps = {
contentStyles: [],
iconSource: null,
shouldCenterContent: false,
shouldStackButtons: true,
titleStyles: [],
promptStyles: [],
iconAdditionalStyles: [],
Expand Down Expand Up @@ -111,7 +117,27 @@ function ConfirmContent(props) {
{_.isString(props.prompt) ? <Text style={[...props.promptStyles, isCentered ? styles.textAlignCenter : {}]}>{props.prompt}</Text> : props.prompt}
</View>

{isCentered ? (
{props.shouldStackButtons ? (
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This block is just swapping the buttons since props.shouldStackButtons is default behavior

Copy link
Contributor

Choose a reason for hiding this comment

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

Ah actually I was also wondering if it's worth just repositioning the buttons with flex order instead of duplicating the buttons. Maybe it's more annoying than I think though!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Good shout! Since this PR is urgent, I think we should ignore non-blocking optimizations for now though

Copy link
Contributor

Choose a reason for hiding this comment

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

Gotcha!

Copy link
Contributor

Choose a reason for hiding this comment

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

Could we make an issue to track this change otherwise we never gonna update it 😂

<>
<Button
success={props.success}
danger={props.danger}
style={[styles.mt4]}
onPress={props.onConfirm}
pressOnEnter
text={props.confirmText || translate('common.yes')}
isDisabled={isOffline && props.shouldDisableConfirmButtonWhenOffline}
/>
{props.shouldShowCancelButton && (
<Button
style={[styles.mt3, styles.noSelect]}
onPress={props.onCancel}
text={props.cancelText || translate('common.no')}
shouldUseDefaultHover
/>
)}
</>
) : (
<View style={[styles.flexRow, styles.gap4]}>
{props.shouldShowCancelButton && (
<Button
Expand All @@ -133,26 +159,6 @@ function ConfirmContent(props) {
medium
/>
</View>
) : (
<>
<Button
success={props.success}
danger={props.danger}
style={[styles.mt4]}
onPress={props.onConfirm}
pressOnEnter
text={props.confirmText || translate('common.yes')}
isDisabled={isOffline && props.shouldDisableConfirmButtonWhenOffline}
/>
{props.shouldShowCancelButton && (
<Button
style={[styles.mt3, styles.noSelect]}
onPress={props.onCancel}
text={props.cancelText || translate('common.no')}
shouldUseDefaultHover
/>
)}
</>
)}
</View>
);
Expand Down
9 changes: 8 additions & 1 deletion src/components/ConfirmModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ const propTypes = {
/** Should we announce the Modal visibility changes? */
shouldSetModalVisibility: PropTypes.bool,

/** Icon to display above the title */
iconSource: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),

/** Styles for title */
Expand All @@ -59,8 +60,12 @@ const propTypes = {
// eslint-disable-next-line react/forbid-prop-types
iconAdditionalStyles: PropTypes.arrayOf(PropTypes.object),

/** Whether to center the icon / text content */
shouldCenterContent: PropTypes.bool,

/** Whether to stack the buttons */
shouldStackButtons: PropTypes.bool,

...windowDimensionsPropTypes,
};

Expand All @@ -76,11 +81,12 @@ const defaultProps = {
shouldSetModalVisibility: true,
title: '',
iconSource: null,
shouldCenterContent: false,
onModalHide: () => {},
titleStyles: [],
iconAdditionalStyles: [],
promptStyles: [],
shouldCenterContent: false,
shouldStackButtons: true,
};

function ConfirmModal(props) {
Expand Down Expand Up @@ -111,6 +117,7 @@ function ConfirmModal(props) {
iconAdditionalStyles={props.iconAdditionalStyles}
titleStyles={props.titleStyles}
promptStyles={props.promptStyles}
shouldStackButtons={props.shouldStackButtons}
/>
</Modal>
);
Expand Down
1 change: 1 addition & 0 deletions src/components/DownloadAppModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ function DownloadAppModal({showDownloadAppBanner}) {
promptStyles={[styles.textNormal, styles.lh20]}
titleStyles={[styles.textHeadline]}
iconAdditionalStyles={[styles.appIconBorderRadius]}
shouldStackButtons={false}
/>
);
}
Expand Down