From 03217207eac6013619a9a767c09a757216a92227 Mon Sep 17 00:00:00 2001 From: Cezar Augusto Date: Thu, 3 Oct 2019 18:13:27 -0300 Subject: [PATCH] Merge pull request #3529 from brave/ca-5950 rework welcome screen responsiveness --- .../brave_welcome_ui/brave_welcome.html | 2 +- .../components/images/index.ts | 12 ++-- .../components/wrapper/index.ts | 30 ++++++--- .../brave_welcome_ui/containers/app.tsx | 25 ++++++-- .../brave_welcome_ui/stories/page/index.tsx | 27 +++++--- .../stories/page/screens/themeBox.tsx | 61 ------------------- components/brave_welcome_ui/stories/story.tsx | 4 +- 7 files changed, 65 insertions(+), 96 deletions(-) delete mode 100644 components/brave_welcome_ui/stories/page/screens/themeBox.tsx diff --git a/components/brave_welcome_ui/brave_welcome.html b/components/brave_welcome_ui/brave_welcome.html index 1e55c720a074..32fe2275ec36 100644 --- a/components/brave_welcome_ui/brave_welcome.html +++ b/components/brave_welcome_ui/brave_welcome.html @@ -14,7 +14,7 @@ diff --git a/components/brave_welcome_ui/components/images/index.ts b/components/brave_welcome_ui/components/images/index.ts index e3cc4a02af27..96fcc3d59053 100644 --- 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 index cd8480d3f3fa..c93b131f27c9 100644 --- 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('section')` `} ` -export const Page = styled<{}, 'div'>('div')` - position: absolute; +interface PageProps { + shouldUpdateElementOverflow: boolean +} + +export const Page = styled('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 index 609fddae243f..88cedf7f4f96 100644 --- 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 { 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 { this.props.actions.goToTabRequested('chrome://newtab', '_self') } + resetStyleOverflow = () => { + this.setState({ shouldUpdateElementOverflow: true }) + } + render () { const { welcomeData, actions } = this.props + const { shouldUpdateElementOverflow } = this.state return ( <> - - - - + @@ -123,6 +135,9 @@ export class WelcomePage extends React.Component { onClickDone={this.onClickDone} /> + + + ) diff --git a/components/brave_welcome_ui/stories/page/index.tsx b/components/brave_welcome_ui/stories/page/index.tsx index 02fc970570c2..a86b6d7513e8 100644 --- a/components/brave_welcome_ui/stories/page/index.tsx +++ b/components/brave_welcome_ui/stories/page/index.tsx @@ -13,7 +13,6 @@ 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 @@ -21,6 +20,7 @@ import { Background, BackgroundContainer } from '../../components/images' export interface State { currentScreen: number + shouldUpdateElementOverflow: boolean fakeChangedSearchEngine: boolean fakeBookmarksImported: boolean fakeChangedDefaultTheme: boolean @@ -35,6 +35,7 @@ export default class WelcomePage extends React.PureComponent { super(props) this.state = { currentScreen: 1, + shouldUpdateElementOverflow: false, fakeChangedSearchEngine: false, fakeBookmarksImported: false, fakeChangedDefaultTheme: false @@ -42,7 +43,7 @@ export default class WelcomePage extends React.PureComponent { } get totalScreensSize () { - return 6 + return 5 } onClickLetsGo = () => { @@ -108,23 +109,26 @@ export default class WelcomePage extends React.PureComponent { } } + resetStyleOverflow = () => { + this.setState({ shouldUpdateElementOverflow: true }) + } + render () { - const { currentScreen } = this.state + const { currentScreen, shouldUpdateElementOverflow } = this.state const { isDefaultSearchGoogle } = this.props return ( <> - - - - + - - - + + { onClickDone={this.onClickDone} /> + + + ) diff --git a/components/brave_welcome_ui/stories/page/screens/themeBox.tsx b/components/brave_welcome_ui/stories/page/screens/themeBox.tsx deleted file mode 100644 index 96170ed552d0..000000000000 --- a/components/brave_welcome_ui/stories/page/screens/themeBox.tsx +++ /dev/null @@ -1,61 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this file, - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import * as React from 'react' - -// Feature-specific components -import { Content, Title, Paragraph, SelectGrid, SelectBox } from '../../../components' - -// Utils -import locale from '../fakeLocale' - -// Images -import { WelcomeThemeImage } from '../../../components/images' - -interface Props { - index: number - currentScreen: number -} - -interface State { - themeSelected: boolean -} - -export default class ThemingBox extends React.PureComponent { - - constructor (props: Props) { - super(props) - this.state = { - themeSelected: false - } - } - - onChangeThemeOption = (event: React.ChangeEvent) => { - this.setState({ themeSelected: event.target.value !== '' }) - } - - render () { - const { index, currentScreen } = this.props - return ( - - - {locale.chooseYourTheme} - {locale.findToolbarTheme} - - - - - - - - - - ) - } -} diff --git a/components/brave_welcome_ui/stories/story.tsx b/components/brave_welcome_ui/stories/story.tsx index 59b84539c924..4ce9cf029466 100644 --- 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) =>