Merge pull request #3599 from brave/ca-5950-70

[0.70.x] rework welcome screen responsiveness
brave · Oct 4, 2019 · 60b9458 · 60b9458
2 parents 31d6e02 + 0321720
commit 60b9458
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 96 deletions.
diff --git a/components/brave_welcome_ui/brave_welcome.html b/components/brave_welcome_ui/brave_welcome.html
@@ -14,7 +14,7 @@
 <script src="/brave_welcome.bundle.js"></script>
 <script src="/strings.js"></script>
 <style>
-  #root { height: -webkit-fill-available; width: -webkit-fill-available; }
+  #root { height: 100%; width: 100%; }
 </style>
 </head>
 <body>

diff --git a/components/brave_welcome_ui/components/images/index.ts b/components/brave_welcome_ui/components/images/index.ts
@@ -52,28 +52,26 @@ export const topToBottom = keyframes`
   }
 `
 
+export const backgroundHeight = 136
+
 export const BackgroundContainer = styled<{}, 'div'>('div')`
   box-sizing: border-box;
   width: inherit;
-  height: inherit;
-  position: absolute;
+  height: ${backgroundHeight}px;
+  position: relative;
   animation-delay: 0s;
   animation-name: ${topToBottom};
   animation-duration: 2000ms;
   animation-timing-function: ease-in-out;
   animation-fill-mode: forwards;
   animation-iteration-count: 1;
-  overflow: hidden;
 `
 
 export const Background = styled<{}, 'div'>('div')`
   box-sizing: border-box;
   background: url('${WelcomeImage}');
   width: 100%;
-  height: 136px;
+  height: ${backgroundHeight}px;
   background-size: cover;
   background-position-x: center;
-  position: absolute;
-  bottom: 0;
-  overflow: hidden;
 `
diff --git a/components/brave_welcome_ui/components/wrapper/index.ts b/components/brave_welcome_ui/components/wrapper/index.ts
@@ -3,6 +3,11 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import styled, { css, keyframes } from 'styled-components'
+import { backgroundHeight } from '../images'
+
+const slideContentHeight = 540
+const footerHeight = 52
+const footerTopMargin = 24
 
 const fadeIn = keyframes`
   from {
@@ -35,9 +40,9 @@ export const SelectGrid = styled(BaseGrid)`
 
 export const Footer = styled(BaseGrid.withComponent('footer'))`
   grid-template-columns: 1fr 1fr 1fr;
-  grid-template-rows: 52px;
+  grid-template-rows: ${footerHeight}px;
   max-width: 540px;
-  margin: 24px 0 0 0;
+  margin: ${footerTopMargin}px 0 0 0;
 `
 
 export const FooterLeftColumn = styled(BaseColumn)`
@@ -83,16 +88,21 @@ export const Content = styled<ContentProps, 'section'>('section')`
   `}
 `
 
-export const Page = styled<{}, 'div'>('div')`
-  position: absolute;
+interface PageProps {
+  shouldUpdateElementOverflow: boolean
+}
+
+export const Page = styled<PageProps, 'div'>('div')`
   width: inherit;
   height: inherit;
   display: flex;
   align-items: flex-start;
   justify-content: center;
   background: ${p => p.theme.color.panelBackground};
-  overflow: hidden;
-  transition: background 0.3s linear;
+  flex-direction: column;
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: ${p => p.shouldUpdateElementOverflow ? 'initial' : 'hidden' };
 `
 
 export const Panel = styled('div')`
@@ -108,21 +118,21 @@ export const Panel = styled('div')`
   /* end of animation stuff */
   box-sizing: border-box;
   position: relative;
-  overflow: visible;
   max-width: 800px;
   width: 100%;
   display: flex;
   flex-direction: column;
-  padding: 0;
-  margin: 64px 0 0 0;
+  margin: 0 auto;
   font-size: inherit;
   align-items: center;
+  min-height: ${slideContentHeight + footerTopMargin + footerHeight}px;
+  height: calc(100vh - ${backgroundHeight}px);
 `
 
 export const SlideContent = styled<{}, 'div'>('div')`
   max-width: inherit;
   width: inherit;
-  min-height: 540px;
+  min-height: ${slideContentHeight}px;
   display: flex;
   justify-content: center;
   align-items: center;

diff --git a/components/brave_welcome_ui/containers/app.tsx b/components/brave_welcome_ui/containers/app.tsx
@@ -36,6 +36,9 @@ interface Props {
 
 export interface State {
   currentScreen: number
+  finished: boolean,
+  skipped: boolean
+  shouldUpdateElementOverflow: boolean
 }
 
 const totalScreensSize = 6
@@ -44,7 +47,10 @@ export class WelcomePage extends React.Component<Props, State> {
   constructor (props: Props) {
     super(props)
     this.state = {
-      currentScreen: 1
+      currentScreen: 1,
+      finished: false,
+      skipped: false,
+      shouldUpdateElementOverflow: false
     }
   }
 
@@ -81,14 +87,20 @@ export class WelcomePage extends React.Component<Props, State> {
     this.props.actions.goToTabRequested('chrome://newtab', '_self')
   }
 
+  resetStyleOverflow = () => {
+    this.setState({ shouldUpdateElementOverflow: true })
+  }
+
   render () {
     const { welcomeData, actions } = this.props
+    const { shouldUpdateElementOverflow } = this.state
     return (
       <>
-        <Page id='welcomePage'>
-          <BackgroundContainer>
-            <Background/>
-          </BackgroundContainer>
+        <Page
+          id='welcomePage'
+          onAnimationEnd={this.resetStyleOverflow}
+          shouldUpdateElementOverflow={shouldUpdateElementOverflow}
+        >
           <Panel>
             <SlideContent>
               <WelcomeBox index={1} currentScreen={this.currentScreen} onClick={this.onClickLetsGo} />
@@ -123,6 +135,9 @@ export class WelcomePage extends React.Component<Props, State> {
               onClickDone={this.onClickDone}
             />
           </Panel>
+          <BackgroundContainer>
+            <Background/>
+          </BackgroundContainer>
         </Page>
       </>
     )

diff --git a/components/brave_welcome_ui/stories/page/index.tsx b/components/brave_welcome_ui/stories/page/index.tsx
@@ -13,14 +13,14 @@ import ImportBox from './screens/importBox'
 import ShieldsBox from './screens/shieldsBox'
 import SearchBox from './screens/searchBox'
 import RewardsBox from './screens/rewardsBox'
-import ThemeBox from './screens/themeBox'
 import FooterBox from './screens/footerBox'
 
 // Images
 import { Background, BackgroundContainer } from '../../components/images'
 
 export interface State {
   currentScreen: number
+  shouldUpdateElementOverflow: boolean
   fakeChangedSearchEngine: boolean
   fakeBookmarksImported: boolean
   fakeChangedDefaultTheme: boolean
@@ -35,14 +35,15 @@ export default class WelcomePage extends React.PureComponent<Props, State> {
     super(props)
     this.state = {
       currentScreen: 1,
+      shouldUpdateElementOverflow: false,
       fakeChangedSearchEngine: false,
       fakeBookmarksImported: false,
       fakeChangedDefaultTheme: false
     }
   }
 
   get totalScreensSize () {
-    return 6
+    return 5
   }
 
   onClickLetsGo = () => {
@@ -108,23 +109,26 @@ export default class WelcomePage extends React.PureComponent<Props, State> {
     }
   }
 
+  resetStyleOverflow = () => {
+    this.setState({ shouldUpdateElementOverflow: true })
+  }
+
   render () {
-    const { currentScreen } = this.state
+    const { currentScreen, shouldUpdateElementOverflow } = this.state
     const { isDefaultSearchGoogle } = this.props
     return (
       <>
-        <Page>
-          <BackgroundContainer>
-            <Background />
-          </BackgroundContainer>
+        <Page
+          onAnimationEnd={this.resetStyleOverflow}
+          shouldUpdateElementOverflow={shouldUpdateElementOverflow}
+        >
           <Panel>
             <SlideContent>
               <WelcomeBox index={1} currentScreen={currentScreen} onClick={this.onClickLetsGo} />
               <ImportBox index={2} currentScreen={currentScreen} onClick={this.onClickImport} />
               <SearchBox index={3} currentScreen={currentScreen} onClick={this.onClickConfirmDefaultSearchEngine} fakeOnChange={this.onChangeDefaultSearchEngine} isDefaultSearchGoogle={isDefaultSearchGoogle}/>
-              <ThemeBox index={4} currentScreen={currentScreen} />
-              <ShieldsBox index={5} currentScreen={currentScreen} />
-              <RewardsBox index={6} currentScreen={currentScreen} onClick={this.onClickRewardsGetStarted} />
+              <ShieldsBox index={4} currentScreen={currentScreen} />
+              <RewardsBox index={5} currentScreen={currentScreen} onClick={this.onClickRewardsGetStarted} />
             </SlideContent>
             <FooterBox
               totalScreensSize={this.totalScreensSize}
@@ -135,6 +139,9 @@ export default class WelcomePage extends React.PureComponent<Props, State> {
               onClickDone={this.onClickDone}
             />
           </Panel>
+          <BackgroundContainer>
+            <Background />
+          </BackgroundContainer>
         </Page>
       </>
     )

diff --git a/components/brave_welcome_ui/stories/page/screens/themeBox.tsx b/components/brave_welcome_ui/stories/page/screens/themeBox.tsx
diff --git a/components/brave_welcome_ui/stories/story.tsx b/components/brave_welcome_ui/stories/story.tsx
@@ -16,8 +16,8 @@ import WelcomePage from './page/index'
 const themes = [welcomeLightTheme, welcomeDarkTheme]
 
 const fullPageStoryStyles: object = {
-  width: '-webkit-fill-available',
-  height: '-webkit-fill-available'
+  width: '100%',
+  height: '100%'
 }
 
 export const FullPageStory = (storyFn: any) =>