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

Jump to bottom

Feat/initial settings page layout change #27468

Merged
merged 16 commits into from
Sep 21, 2023
Merged

Feat/initial settings page layout change #27468

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
8fcb69e
refactor illustrated header component and apply new layout for settin…
ishpaul777 Sep 14, 2023
ff383aa
fix background for safari
ishpaul777 Sep 14, 2023
3fb944f
fix sying in large screen and fix status bar to of same color as header
ishpaul777 Sep 14, 2023
18a099e
Merge branch 'main' into feat/InitialSettingsPageLayout-change
ishpaul777 Sep 14, 2023
6d7c141
code formatting
ishpaul777 Sep 14, 2023
aeffeb1
Merge branch 'main' into feat/InitialSettingsPageLayout-change
ishpaul777 Sep 15, 2023
71a7807
fix status bar color for status page
ishpaul777 Sep 15, 2023
225bde6
Merge branch 'main' into feat/InitialSettingsPageLayout-change
ishpaul777 Sep 15, 2023
baefffc
code formatting
ishpaul777 Sep 15, 2023
ddfcca2
Merge branch 'feat/InitialSettingsPageLayout-change' of https://githu…
ishpaul777 Sep 15, 2023
a6abada
added comment for safari specific workaround and fix status bar color…
ishpaul777 Sep 16, 2023
a7c1454
change screen names to match upstream
ishpaul777 Sep 16, 2023
623b43d
added extra large avatar size
ishpaul777 Sep 19, 2023
ae41437
Merge branch 'main' into feat/InitialSettingsPageLayout-change
ishpaul777 Sep 20, 2023
64c6d63
fix lint error
ishpaul777 Sep 20, 2023
efd6e23
added requested changes
ishpaul777 Sep 20, 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
1 change: 1 addition & 0 deletions src/CONST.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1163,6 +1163,7 @@ const CONST = {
},

AVATAR_SIZE: {
XLARGE: 'xlarge',
LARGE: 'large',
MEDIUM: 'medium',
DEFAULT: 'default',
Expand Down
6 changes: 6 additions & 0 deletions src/SCREENS.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,14 @@ export default {
VALIDATE_LOGIN: 'ValidateLogin',
CONCIERGE: 'Concierge',
SETTINGS: {
ROOT: 'Settings_Root',
PREFERENCES: 'Settings_Preferences',
WORKSPACES: 'Settings_Workspaces',
SECURITY: 'Settings_Security',
STATUS: 'Settings_Status',
},
SAVE_THE_WORLD: {
ROOT: 'SaveTheWorld_Root',
},
SIGN_IN_WITH_APPLE_DESKTOP: 'AppleSignInDesktop',
SIGN_IN_WITH_GOOGLE_DESKTOP: 'GoogleSignInDesktop',
Expand Down
19 changes: 16 additions & 3 deletions src/components/CurrentUserPersonalDetailsSkeletonView/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import _ from 'underscore';
import SkeletonViewContentLoader from 'react-content-loader/native';
import {Circle, Rect} from 'react-native-svg';
import {View} from 'react-native';
Expand All @@ -12,14 +13,26 @@ import styles from '../../styles/styles';
const propTypes = {
/** Whether to animate the skeleton view */
shouldAnimate: PropTypes.bool,

/** The size of the avatar */
avatarSize: PropTypes.oneOf(_.values(CONST.AVATAR_SIZE)),

/** Background color of the skeleton view */
backgroundColor: PropTypes.string,

/** Foreground color of the skeleton view */
foregroundColor: PropTypes.string,
};

const defaultProps = {
shouldAnimate: true,
avatarSize: CONST.AVATAR_SIZE.LARGE,
backgroundColor: themeColors.highlightBG,
foregroundColor: themeColors.border,
};

function CurrentUserPersonalDetailsSkeletonView(props) {
const avatarPlaceholderSize = StyleUtils.getAvatarSize(CONST.AVATAR_SIZE.LARGE);
const avatarPlaceholderSize = StyleUtils.getAvatarSize(props.avatarSize);
const avatarPlaceholderRadius = avatarPlaceholderSize / 2;
const spaceBetweenAvatarAndHeadline = styles.mb3.marginBottom + styles.mt1.marginTop + (variables.lineHeightXXLarge - variables.fontSizeXLarge) / 2;
const headlineSize = variables.fontSizeXLarge;
Expand All @@ -29,8 +42,8 @@ function CurrentUserPersonalDetailsSkeletonView(props) {
<View style={styles.avatarSectionWrapperSkeleton}>
<SkeletonViewContentLoader
animate={props.shouldAnimate}
backgroundColor={themeColors.highlightBG}
foregroundColor={themeColors.border}
backgroundColor={props.backgroundColor}
foregroundColor={props.foregroundColor}
height={avatarPlaceholderSize + spaceBetweenAvatarAndHeadline + headlineSize + spaceBetweenHeadlineAndLabel + labelSize}
>
<Circle
Expand Down
57 changes: 33 additions & 24 deletions src/components/StaticHeaderPageLayout.js → src/components/HeaderPageLayout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import themeColors from '../styles/themes/default';
import * as StyleUtils from '../styles/StyleUtils';
import useWindowDimensions from '../hooks/useWindowDimensions';
import FixedFooter from './FixedFooter';
import useNetwork from '../hooks/useNetwork';
import * as Browser from '../libs/Browser';

const propTypes = {
...headerWithBackButtonPropTypes,
Expand All @@ -22,16 +24,26 @@ const propTypes = {

/** A fixed footer to display at the bottom of the page. */
footer: PropTypes.node,

/** The image to display in the upper half of the screen. */
header: PropTypes.node,

/** Style to apply to the header image container */
// eslint-disable-next-line react/forbid-prop-types
headerContainerStyles: PropTypes.arrayOf(PropTypes.object),
};

const defaultProps = {
backgroundColor: themeColors.appBG,
header: null,
headerContainerStyles: [],
footer: null,
};

function StaticHeaderPageLayout({backgroundColor, children, image: Image, footer, imageContainerStyle, style, ...propsToPassToHeader}) {
const {windowHeight} = useWindowDimensions();

function HeaderPageLayout({backgroundColor, children, footer, headerContainerStyles, style, headerContent, ...propsToPassToHeader}) {
const {windowHeight, isSmallScreenWidth} = useWindowDimensions();
const {isOffline} = useNetwork();
const appBGColor = StyleUtils.getBackgroundColorStyle(themeColors.appBG);
const {titleColor, iconFill} = useMemo(() => {
const isColorfulBackground = backgroundColor !== themeColors.appBG;
return {
Expand All @@ -45,7 +57,7 @@ function StaticHeaderPageLayout({backgroundColor, children, image: Image, footer
style={[StyleUtils.getBackgroundColorStyle(backgroundColor)]}
shouldEnablePickerAvoiding={false}
includeSafeAreaPaddingBottom={false}
offlineIndicatorStyle={[StyleUtils.getBackgroundColorStyle(themeColors.appBG)]}
offlineIndicatorStyle={[appBGColor]}
>
{({safeAreaPaddingBottomStyle}) => (
<>
Expand All @@ -55,27 +67,24 @@ function StaticHeaderPageLayout({backgroundColor, children, image: Image, footer
titleColor={titleColor}
iconFill={iconFill}
/>
<View style={[styles.flex1, StyleUtils.getBackgroundColorStyle(themeColors.appBG)]}>
<View style={[styles.flex1, appBGColor, !isOffline ? safeAreaPaddingBottomStyle : {}]}>
{/** Safari on ios/mac has a bug where overscrolling the page scrollview shows green the background color. This is a workaround to fix that. https://github.com/Expensify/App/issues/23422 */}
{Browser.isSafari() && (
<View style={[styles.dualColorOverscrollSpacer]}>
ishpaul777 marked this conversation as resolved.
Show resolved Hide resolved
<View style={[styles.flex1, StyleUtils.getBackgroundColorStyle(backgroundColor)]} />
<View style={[isSmallScreenWidth ? styles.flex1 : styles.flex3, appBGColor]} />
</View>
)}
<ScrollView
contentContainerStyle={[safeAreaPaddingBottomStyle, style]}
showsVerticalScrollIndicator={false}
offlineIndicatorStyle={[appBGColor]}
>
<View style={styles.overscrollSpacer(backgroundColor, windowHeight)} />
<View
style={[
styles.alignItemsCenter,
styles.justifyContentEnd,
StyleUtils.getBackgroundColorStyle(backgroundColor),
imageContainerStyle,
styles.staticHeaderImage,
]}
>
<Image
pointerEvents="none"
style={styles.staticHeaderImage}
/>
{!Browser.isSafari() && <View style={styles.overscrollSpacer(backgroundColor, windowHeight)} />}
<View style={[styles.alignItemsCenter, styles.justifyContentEnd, StyleUtils.getBackgroundColorStyle(backgroundColor), ...headerContainerStyles]}>
{headerContent}
</View>
<View style={styles.pt5}>{children}</View>
<View style={[styles.pt5, appBGColor]}>{children}</View>
</ScrollView>
{!_.isNull(footer) && <FixedFooter>{footer}</FixedFooter>}
</View>
Expand All @@ -85,8 +94,8 @@ function StaticHeaderPageLayout({backgroundColor, children, image: Image, footer
);
}

StaticHeaderPageLayout.propTypes = propTypes;
StaticHeaderPageLayout.defaultProps = defaultProps;
StaticHeaderPageLayout.displayName = 'StaticHeaderPageLayout';
HeaderPageLayout.propTypes = propTypes;
HeaderPageLayout.defaultProps = defaultProps;
HeaderPageLayout.displayName = 'HeaderPageLayout';

export default StaticHeaderPageLayout;
export default HeaderPageLayout;
72 changes: 19 additions & 53 deletions src/components/IllustratedHeaderPageLayout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,10 @@
import _ from 'underscore';
import React from 'react';
import PropTypes from 'prop-types';
import {ScrollView, View} from 'react-native';
import Lottie from 'lottie-react-native';
import headerWithBackButtonPropTypes from './HeaderWithBackButton/headerWithBackButtonPropTypes';
import HeaderWithBackButton from './HeaderWithBackButton';
import ScreenWrapper from './ScreenWrapper';
import styles from '../styles/styles';
import themeColors from '../styles/themes/default';
import * as StyleUtils from '../styles/StyleUtils';
import useWindowDimensions from '../hooks/useWindowDimensions';
import FixedFooter from './FixedFooter';
import useNetwork from '../hooks/useNetwork';
import * as Browser from '../libs/Browser';
import HeaderPageLayout from './HeaderPageLayout';

const propTypes = {
...headerWithBackButtonPropTypes,
Expand Down Expand Up @@ -40,54 +32,28 @@ const defaultProps = {
};

function IllustratedHeaderPageLayout({backgroundColor, children, illustration, footer, overlayContent, ...propsToPassToHeader}) {
const {isOffline} = useNetwork();
const {isSmallScreenWidth, windowHeight} = useWindowDimensions();
const appBGColor = StyleUtils.getBackgroundColorStyle(themeColors.appBG);

return (
<ScreenWrapper
style={[StyleUtils.getBackgroundColorStyle(backgroundColor)]}
shouldEnablePickerAvoiding={false}
includeSafeAreaPaddingBottom={false}
offlineIndicatorStyle={[appBGColor]}
>
{({safeAreaPaddingBottomStyle}) => (
<HeaderPageLayout
backgroundColor={backgroundColor}
title={propsToPassToHeader.title}
headerContent={
<>
<HeaderWithBackButton
// eslint-disable-next-line react/jsx-props-no-spreading
{...propsToPassToHeader}
titleColor={backgroundColor === themeColors.appBG ? undefined : themeColors.textColorfulBackground}
iconFill={backgroundColor === themeColors.appBG ? undefined : themeColors.iconColorfulBackground}
<Lottie
source={illustration}
style={styles.w100}
autoPlay
loop
/>
<View style={[styles.flex1, appBGColor, !isOffline ? safeAreaPaddingBottomStyle : {}]}>
{/* Safari on ios/mac has a bug where overscrolling the page scrollview shows green the background color. This is a workaround to fix that. https://github.com/Expensify/App/issues/23422 */}
{Browser.isSafari() && (
<View style={[styles.dualColorOverscrollSpacer]}>
<View style={[styles.flex1, StyleUtils.getBackgroundColorStyle(backgroundColor)]} />
<View style={[isSmallScreenWidth ? styles.flex1 : styles.flex3, appBGColor]} />
</View>
)}
<ScrollView
contentContainerStyle={safeAreaPaddingBottomStyle}
showsVerticalScrollIndicator={false}
>
{!Browser.isSafari() && <View style={styles.overscrollSpacer(backgroundColor, windowHeight)} />}
<View style={[styles.alignItemsCenter, styles.justifyContentEnd, StyleUtils.getBackgroundColorStyle(backgroundColor)]}>
<Lottie
source={illustration}
style={styles.w100}
autoPlay
loop
/>
{overlayContent && overlayContent()}
</View>
<View style={[styles.pt5, appBGColor]}>{children}</View>
</ScrollView>
{!_.isNull(footer) && <FixedFooter>{footer}</FixedFooter>}
</View>
{overlayContent && overlayContent()}
</>
)}
</ScreenWrapper>
}
headerContainerStyles={[styles.justifyContentCenter, styles.w100]}
footer={footer}
// eslint-disable-next-line react/jsx-props-no-spreading
{...propsToPassToHeader}
>
{children}
</HeaderPageLayout>
);
}

Expand Down
8 changes: 4 additions & 4 deletions src/libs/Navigation/AppNavigator/ModalStackNavigators.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -334,7 +334,7 @@ const NewTeachersUniteNavigator = createModalStackNavigator([
const SaveTheWorldPage = require('../../../pages/TeachersUnite/SaveTheWorldPage').default;
return SaveTheWorldPage;
},
name: 'SaveTheWorld_Root',
name: SCREENS.SAVE_THE_WORLD.ROOT,
},
{
getComponent: () => {
Expand Down Expand Up @@ -365,7 +365,7 @@ const SettingsModalStackNavigator = createModalStackNavigator([
const SettingsInitialPage = require('../../../pages/settings/InitialSettingsPage').default;
return SettingsInitialPage;
},
name: 'Settings_Root',
name: SCREENS.SETTINGS.ROOT,
},
{
getComponent: () => {
Expand Down Expand Up @@ -506,7 +506,7 @@ const SettingsModalStackNavigator = createModalStackNavigator([
const SettingsSecurityPage = require('../../../pages/settings/Security/SecuritySettingsPage').default;
return SettingsSecurityPage;
},
name: 'Settings_Security',
name: SCREENS.SETTINGS.SECURITY,
},
{
getComponent: () => {
Expand Down Expand Up @@ -576,7 +576,7 @@ const SettingsModalStackNavigator = createModalStackNavigator([
const SettingsStatus = require('../../../pages/settings/Profile/CustomStatus/StatusPage').default;
return SettingsStatus;
},
name: 'Settings_Status',
name: SCREENS.SETTINGS.STATUS,
},
{
getComponent: () => {
Expand Down
3 changes: 2 additions & 1 deletion src/libs/Navigation/NavigationRoot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,8 @@ function NavigationRoot(props) {

prevStatusBarBackgroundColor.current = statusBarBackgroundColor.current;
statusBarBackgroundColor.current = currentScreenBackgroundColor;
if (prevStatusBarBackgroundColor.current === statusBarBackgroundColor.current) {

if (currentScreenBackgroundColor === themeColors.appBG && prevStatusBarBackgroundColor.current === themeColors.appBG) {
Copy link
Contributor

Choose a reason for hiding this comment

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

sorry, I don't understand why we made this change. Seems like it was correct before and prevents animating between any two screens where the color was the same, not just between two screens of the default background color?

Copy link
Contributor Author

@ishpaul777 ishpaul777 Sep 20, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

so before this there was a issue when navigating to Security Page or opening a report the status bar color change to light blue and dark green respectively, and when close button is pressed or we close a report and then navigate back to settings page the status bar color remains unchanged 👇

Record_2023-09-20-19-59-59.mp4

@roryabraham

return;
}

Expand Down
8 changes: 4 additions & 4 deletions src/libs/Navigation/linkingConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export default {
screens: {
Settings: {
screens: {
Settings_Root: {
[SCREENS.SETTINGS.ROOT]: {
path: ROUTES.SETTINGS,
},
[SCREENS.SETTINGS.WORKSPACES]: {
Expand All @@ -65,7 +65,7 @@ export default {
path: ROUTES.SETTINGS_CLOSE,
exact: true,
},
Settings_Security: {
[SCREENS.SETTINGS.SECURITY]: {
path: ROUTES.SETTINGS_SECURITY,
exact: true,
},
Expand Down Expand Up @@ -159,7 +159,7 @@ export default {
path: ROUTES.SETTINGS_SHARE_CODE,
exact: true,
},
Settings_Status: {
[SCREENS.SETTINGS.STATUS]: {
path: ROUTES.SETTINGS_STATUS,
exact: true,
},
Expand Down Expand Up @@ -273,7 +273,7 @@ export default {
},
TeachersUnite: {
screens: {
SaveTheWorld_Root: ROUTES.TEACHERS_UNITE,
[SCREENS.SAVE_THE_WORLD.ROOT]: ROUTES.TEACHERS_UNITE,
I_Know_A_Teacher: ROUTES.I_KNOW_A_TEACHER,
Intro_School_Principal: ROUTES.INTRO_SCHOOL_PRINCIPAL,
I_Am_A_Teacher: ROUTES.I_AM_A_TEACHER,
Expand Down
3 changes: 2 additions & 1 deletion src/pages/TeachersUnite/SaveTheWorldPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
import _ from 'lodash';
import Navigation from '../../libs/Navigation/Navigation';
import ROUTES from '../../ROUTES';
import SCREENS from '../../SCREENS';
import ONYXKEYS from '../../ONYXKEYS';
import CONST from '../../CONST';
import styles from '../../styles/styles';
Expand Down Expand Up @@ -53,8 +54,8 @@ function SaveTheWorldPage(props) {
<IllustratedHeaderPageLayout
shouldShowBackButton
title={translate('sidebarScreen.saveTheWorld')}
backgroundColor={themeColors.PAGE_BACKGROUND_COLORS[SCREENS.SAVE_THE_WORLD.ROOT]}
onBackButtonPress={() => Navigation.goBack(ROUTES.HOME)}
backgroundColor={themeColors.PAGE_BACKGROUND_COLORS[ROUTES.I_KNOW_A_TEACHER]}
illustration={LottieAnimations.SaveTheWorld}
>
<View style={[styles.mb4, styles.justifyContentBetween, styles.mh5]}>
Expand Down
Loading
Loading