From d342239dbd1ce268b1af9a47f2b23fa16ac2eef5 Mon Sep 17 00:00:00 2001 From: Cezar Augusto Date: Thu, 10 Jan 2019 17:39:40 -0200 Subject: [PATCH 1/5] change default new tab and private new tab structure this allow us to have a better view of the front-end architecture and split interests between files --- components/brave_new_tab_ui/BUILD.gn | 21 +- components/brave_new_tab_ui/brave_new_tab.tsx | 7 + .../brave_new_tab_ui/components/app.tsx | 186 +----------------- .../components/{ => newTab}/block.tsx | 2 +- .../components/{ => newTab}/footerInfo.tsx | 2 +- .../components/newTab/index.tsx | 157 +++++++++++++++ .../{ => newTab}/siteRemovalNotification.tsx | 0 .../components/{ => newTab}/stats.tsx | 4 +- .../components/privateTab/index.tsx | 31 ++- .../components/privateTab/privateTab.tsx | 25 ++- .../components/privateTab/qwantTab.tsx | 2 +- .../components/privateTab/qwantTorTab.tsx | 2 +- .../components/privateTab/torContent.tsx | 2 +- .../components/privateTab/torTab.tsx | 2 +- package-lock.json | 60 +++--- package.json | 2 +- 16 files changed, 255 insertions(+), 250 deletions(-) rename components/brave_new_tab_ui/components/{ => newTab}/block.tsx (99%) rename components/brave_new_tab_ui/components/{ => newTab}/footerInfo.tsx (97%) create mode 100644 components/brave_new_tab_ui/components/newTab/index.tsx rename components/brave_new_tab_ui/components/{ => newTab}/siteRemovalNotification.tsx (100%) rename components/brave_new_tab_ui/components/{ => newTab}/stats.tsx (97%) diff --git a/components/brave_new_tab_ui/BUILD.gn b/components/brave_new_tab_ui/BUILD.gn index ad70623767f9..d90d0cb044a0 100644 --- a/components/brave_new_tab_ui/BUILD.gn +++ b/components/brave_new_tab_ui/BUILD.gn @@ -2,26 +2,29 @@ import("//brave/components/common/typescript.gni") transpile_web_ui("brave_new_tab_ui") { inputs = [ - "brave_new_tab.html", - "brave_new_tab.tsx", - "storage.ts", - "store.ts", "actions/new_tab_actions.ts", - "components/app.tsx", - "components/block.tsx", - "components/footerInfo.tsx", - "components/siteRemovalNotification.tsx", - "components/stats.tsx", + "components/newTab/block.tsx", + "components/newTab/footerInfo.tsx", + "components/newTab/index.tsx", + "components/newTab/siteRemovalNotification.tsx", + "components/newTab/stats.tsx", "components/privateTab/index.tsx", "components/privateTab/privateTab.tsx", "components/privateTab/qwantTab.tsx", "components/privateTab/qwantTorTab.tsx", + "components/privateTab/torContent.tsx", "components/privateTab/torTab.tsx", + "components/app.tsx", "constants/backgrounds.ts", "constants/new_tab_types.ts", "constants/theme.ts", "reducers/index.ts", "reducers/new_tab_reducer.tsx", + "api.ts", + "brave_new_tab.html", + "brave_new_tab.tsx", + "storage.ts", + "store.ts" ] entry_points = [ diff --git a/components/brave_new_tab_ui/brave_new_tab.tsx b/components/brave_new_tab_ui/brave_new_tab.tsx index 9f49dcad9f8d..a0c28b22a433 100644 --- a/components/brave_new_tab_ui/brave_new_tab.tsx +++ b/components/brave_new_tab_ui/brave_new_tab.tsx @@ -17,6 +17,13 @@ import App from './components/app' import store from './store' import * as newTabActions from './actions/new_tab_actions' +// Fonts +import '../fonts/poppins.css' +import '../fonts/muli.css' + +// TODO: remove +import '../styles/newtab.less' + window.cr.define('brave_new_tab', function () { 'use strict' diff --git a/components/brave_new_tab_ui/components/app.tsx b/components/brave_new_tab_ui/components/app.tsx index a68f9d7947de..0f8cac0a82c6 100644 --- a/components/brave_new_tab_ui/components/app.tsx +++ b/components/brave_new_tab_ui/components/app.tsx @@ -3,201 +3,33 @@ * You can obtain one at http://mozilla.org/MPL/2.0/. */ import * as React from 'react' -import { DragDropContext } from 'react-dnd' import { bindActionCreators, Dispatch } from 'redux' import { connect } from 'react-redux' -import HTML5Backend from 'react-dnd-html5-backend' -import { Clock } from 'brave-ui/old' // Components -import Stats from './stats' -import Block from './block' -import FooterInfo from './footerInfo' -import SiteRemovalNotification from './siteRemovalNotification' -import NewPrivateTab from './privateTab' - -// Constants -import { theme } from '../constants/theme' +import NewPrivateTabPage from './privateTab' +import NewTabPage from './newTab' // Utils import * as newTabActions from '../actions/new_tab_actions' -// Assets -require('../../styles/newtab.less') -require('../../fonts/poppins.css') -require('../../fonts/muli.css') - interface Props { actions: any newTabData: NewTab.State } -class NewTabPage extends React.Component { - constructor (props: Props) { - super(props) - // Makes NTP start w/o SiteRemovalNotification. - this.onHideSiteRemovalNotification() - } - - get actions () { - return this.props.actions - } - - get showImages () { - return this.props.newTabData.showImages && !!this.props.newTabData.backgroundImage - } - - get useAlternativePrivateSearchEngine () { - return ( - this.props.newTabData && - this.props.newTabData.useAlternativePrivateSearchEngine - ) - } - - onDraggedSite = (fromUrl: string, toUrl: string, dragRight: boolean) => { - this.actions.siteDragged(fromUrl, toUrl, dragRight) - } - - onDragEnd = (url: string, didDrop: boolean) => { - this.actions.siteDragEnd(url, didDrop) - } - - onToggleBookmark (site: NewTab.Site) { - if (site.bookmarked === undefined) { - this.actions.bookmarkAdded(site.url) - } else { - this.actions.bookmarkRemoved(site.url) - } - } - - onHideSiteRemovalNotification = () => { - this.actions.onHideSiteRemovalNotification() - } - - onTogglePinnedTopSite (site: NewTab.Site) { - if (!site.pinned) { - this.actions.sitePinned(site.url) - } else { - this.actions.siteUnpinned(site.url) - } - } - - onIgnoredTopSite (site: NewTab.Site) { - this.actions.siteIgnored(site.url) - } - - onUndoIgnoredTopSite = () => { - this.actions.undoSiteIgnored() - } - - /** - * Clear ignoredTopSites and pinnedTopSites list - */ - onUndoAllSiteIgnored = () => { - this.actions.undoAllSiteIgnored() - } - - /** - * This handler only fires when the image fails to load. - * If both the remote and local image fail, page defaults to gradients. - */ - onBackgroundImageLoadFailed = () => { - this.actions.backgroundImageLoadFailed() - } - - onChangePrivateSearchEngine = (e: React.ChangeEvent) => { - if (!e.target) { - return - } - this.actions.changePrivateSearchEngine(e.target.checked) - } - +class DefaultPage extends React.Component { render () { - const { newTabData } = this.props + const { newTabData, actions } = this.props // don't render if user prefers an empty page if (this.props.newTabData.showEmptyPage && !this.props.newTabData.isIncognito) { - return
+ return
} - if (this.props.newTabData.isIncognito) { - return ( - - ) - } - - // don't render until object is found - if (!this.props.newTabData) { - return null - } - - const backgroundProps: Partial = {} - const bgImage: NewTab.Image | undefined = this.props.newTabData.backgroundImage - let gradientClassName = 'gradient' - if (this.showImages && bgImage) { - backgroundProps.style = bgImage.style - gradientClassName = 'bgGradient' - } - return ( -
- { - this.showImages && bgImage - ? - : null - } -
-
-
-
-
- -
-
- -
-
-
- -
-
- { - this.props.newTabData.showSiteRemovalNotification - ? - : null - } - -
-
- ) + return this.props.newTabData.isIncognito + ? + : } } @@ -212,4 +44,4 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({ export default connect( mapStateToProps, mapDispatchToProps -)(DragDropContext(HTML5Backend)(NewTabPage)) +)(DefaultPage) diff --git a/components/brave_new_tab_ui/components/block.tsx b/components/brave_new_tab_ui/components/newTab/block.tsx similarity index 99% rename from components/brave_new_tab_ui/components/block.tsx rename to components/brave_new_tab_ui/components/newTab/block.tsx index 510162d62105..aac49b1d02a5 100644 --- a/components/brave_new_tab_ui/components/block.tsx +++ b/components/brave_new_tab_ui/components/newTab/block.tsx @@ -17,7 +17,7 @@ import { } from 'react-dnd' // Utils -import { cx } from '../../common/classSet' +import { cx } from '../../../common/classSet' const Types = { BLOCK: 'block' diff --git a/components/brave_new_tab_ui/components/footerInfo.tsx b/components/brave_new_tab_ui/components/newTab/footerInfo.tsx similarity index 97% rename from components/brave_new_tab_ui/components/footerInfo.tsx rename to components/brave_new_tab_ui/components/newTab/footerInfo.tsx index 9d68591ecfc9..d3afc5ccb595 100644 --- a/components/brave_new_tab_ui/components/footerInfo.tsx +++ b/components/brave_new_tab_ui/components/newTab/footerInfo.tsx @@ -3,7 +3,7 @@ * You can obtain one at http://mozilla.org/MPL/2.0/. */ import * as React from 'react' -import { getLocale } from '../../common/locale' +import { getLocale } from '../../../common/locale' interface Props { backgroundImage?: NewTab.Image diff --git a/components/brave_new_tab_ui/components/newTab/index.tsx b/components/brave_new_tab_ui/components/newTab/index.tsx new file mode 100644 index 000000000000..552834f011ca --- /dev/null +++ b/components/brave_new_tab_ui/components/newTab/index.tsx @@ -0,0 +1,157 @@ +/* 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' +import { DragDropContext } from 'react-dnd' +import HTML5Backend from 'react-dnd-html5-backend' +import { Clock } from 'brave-ui/old' + +// Components +import Stats from './stats' +import Block from './block' +import FooterInfo from './footerInfo' +import SiteRemovalNotification from './siteRemovalNotification' + +// Constants +import { theme } from '../../constants/theme' + +interface Props { + actions: any + newTabData: NewTab.State +} + +class NewTabPage extends React.Component { + get actions () { + return this.props.actions + } + + get showImages () { + return this.props.newTabData.showImages && !!this.props.newTabData.backgroundImage + } + + onDraggedSite = (fromUrl: string, toUrl: string, dragRight: boolean) => { + this.actions.siteDragged(fromUrl, toUrl, dragRight) + } + + onDragEnd = (url: string, didDrop: boolean) => { + this.actions.siteDragEnd(url, didDrop) + } + + onToggleBookmark (site: NewTab.Site) { + if (site.bookmarked === undefined) { + this.actions.bookmarkAdded(site.url) + } else { + this.actions.bookmarkRemoved(site.url) + } + } + + onHideSiteRemovalNotification = () => { + this.actions.onHideSiteRemovalNotification() + } + + onTogglePinnedTopSite (site: NewTab.Site) { + if (!site.pinned) { + this.actions.sitePinned(site.url) + } else { + this.actions.siteUnpinned(site.url) + } + } + + onIgnoredTopSite (site: NewTab.Site) { + this.actions.siteIgnored(site.url) + } + + onUndoIgnoredTopSite = () => { + this.actions.undoSiteIgnored() + } + + /** + * Clear ignoredTopSites and pinnedTopSites list + */ + onUndoAllSiteIgnored = () => { + this.actions.undoAllSiteIgnored() + } + + /** + * This handler only fires when the image fails to load. + * If both the remote and local image fail, page defaults to gradients. + */ + onBackgroundImageLoadFailed = () => { + this.actions.backgroundImageLoadFailed() + } + + render () { + const { newTabData } = this.props + + // don't render until object is found + if (!this.props.newTabData) { + return null + } + + const backgroundProps: Partial = {} + const bgImage: NewTab.Image | undefined = this.props.newTabData.backgroundImage + let gradientClassName = 'gradient' + if (this.showImages && bgImage) { + backgroundProps.style = bgImage.style + gradientClassName = 'bgGradient' + } + return ( +
+ { + this.showImages && bgImage + ? + : null + } +
+
+
+
+
+ +
+
+ +
+
+
+ +
+
+ { + this.props.newTabData.showSiteRemovalNotification + ? + : null + } + +
+
+ ) + } +} + +export default DragDropContext(HTML5Backend)(NewTabPage) diff --git a/components/brave_new_tab_ui/components/siteRemovalNotification.tsx b/components/brave_new_tab_ui/components/newTab/siteRemovalNotification.tsx similarity index 100% rename from components/brave_new_tab_ui/components/siteRemovalNotification.tsx rename to components/brave_new_tab_ui/components/newTab/siteRemovalNotification.tsx diff --git a/components/brave_new_tab_ui/components/stats.tsx b/components/brave_new_tab_ui/components/newTab/stats.tsx similarity index 97% rename from components/brave_new_tab_ui/components/stats.tsx rename to components/brave_new_tab_ui/components/newTab/stats.tsx index 83f221017f89..83180379498b 100644 --- a/components/brave_new_tab_ui/components/stats.tsx +++ b/components/brave_new_tab_ui/components/newTab/stats.tsx @@ -3,10 +3,10 @@ * You can obtain one at http://mozilla.org/MPL/2.0/. */ import * as React from 'react' -import { StatsContainer, StatsItem } from 'brave-ui/features/newTab' +import { StatsContainer, StatsItem } from 'brave-ui/features/newTab/default' // Utils -import { getLocale } from '../../common/locale' +import { getLocale } from '../../../common/locale' interface Props { stats: NewTab.Stats diff --git a/components/brave_new_tab_ui/components/privateTab/index.tsx b/components/brave_new_tab_ui/components/privateTab/index.tsx index 06e4d7028398..26edda27fe91 100644 --- a/components/brave_new_tab_ui/components/privateTab/index.tsx +++ b/components/brave_new_tab_ui/components/privateTab/index.tsx @@ -5,7 +5,7 @@ import * as React from 'react' // Feature-specific components -import { Page, PageWrapper } from 'brave-ui/features/newTab' +import { Page, PageWrapper } from 'brave-ui/features/newTab/private' // Components group import PrivateTab from './privateTab' @@ -14,40 +14,33 @@ import QwantTorTab from './qwantTorTab' import TorTab from './torTab' interface Props { - isTor: boolean - isQwant: boolean - useAlternativePrivateSearchEngine: boolean - onChangePrivateSearchEngine: (e: React.ChangeEvent) => void + actions: any + newTabData: NewTab.State } -export default class NewPrivateTab extends React.PureComponent { - get currentWindow () { - const { isTor, isQwant, useAlternativePrivateSearchEngine, onChangePrivateSearchEngine } = this.props - if (isTor) { - if (isQwant) { +export default class NewPrivateTabPage extends React.PureComponent { + get currentWindowNewTabPage () { + const { newTabData, actions } = this.props + if (newTabData.isTor) { + if (newTabData.isQwant) { return } return } - if (isQwant) { + if (newTabData.isQwant) { return } - return ( - - ) + return } render () { - const { isTor, isQwant } = this.props + const { isTor, isQwant } = this.props.newTabData return ( - {this.currentWindow} + {this.currentWindowNewTabPage} ) diff --git a/components/brave_new_tab_ui/components/privateTab/privateTab.tsx b/components/brave_new_tab_ui/components/privateTab/privateTab.tsx index 938f9bf11b7a..4d473e6cb361 100644 --- a/components/brave_new_tab_ui/components/privateTab/privateTab.tsx +++ b/components/brave_new_tab_ui/components/privateTab/privateTab.tsx @@ -20,7 +20,7 @@ import { Separator, FakeButton, Link -} from 'brave-ui/features/newTab' +} from 'brave-ui/features/newTab/private' // Components import { Toggle } from 'brave-ui/features/shields' @@ -33,13 +33,26 @@ import { getLocale } from '../../../common/locale' const privateWindowImg = require('../../../img/newtab/private-window.svg') interface Props { - useAlternativePrivateSearchEngine: boolean - onChangePrivateSearchEngine: (e: React.ChangeEvent) => void + actions: any + newTabData: NewTab.State } export default class PrivateTab extends React.PureComponent { + get useAlternativePrivateSearchEngine () { + return ( + this.props.newTabData && + this.props.newTabData.useAlternativePrivateSearchEngine + ) + } + + onChangePrivateSearchEngine = (e: React.ChangeEvent) => { + if (!e.target) { + return + } + this.props.actions.changePrivateSearchEngine(e.target.checked) + } + render () { - const { useAlternativePrivateSearchEngine, onChangePrivateSearchEngine } = this.props return ( @@ -66,8 +79,8 @@ export default class PrivateTab extends React.PureComponent { {getLocale('boxDdgButton')} {getLocale('learnMore')} diff --git a/components/brave_new_tab_ui/components/privateTab/qwantTab.tsx b/components/brave_new_tab_ui/components/privateTab/qwantTab.tsx index 3b571fef9e2b..24d8b282fe8a 100644 --- a/components/brave_new_tab_ui/components/privateTab/qwantTab.tsx +++ b/components/brave_new_tab_ui/components/privateTab/qwantTab.tsx @@ -15,7 +15,7 @@ import { TorImage, Separator, FakeButton -} from 'brave-ui/features/newTab' +} from 'brave-ui/features/newTab/private' import TorContent from './torContent' // Helpers import { getLocale } from '../../../common/locale' diff --git a/components/brave_new_tab_ui/components/privateTab/qwantTorTab.tsx b/components/brave_new_tab_ui/components/privateTab/qwantTorTab.tsx index efc1b91e70c4..a64c87c74b65 100644 --- a/components/brave_new_tab_ui/components/privateTab/qwantTorTab.tsx +++ b/components/brave_new_tab_ui/components/privateTab/qwantTorTab.tsx @@ -17,7 +17,7 @@ import { TorLockImage, Separator, FakeButton -} from 'brave-ui/features/newTab' +} from 'brave-ui/features/newTab/private' // Helpers import { getLocale } from '../../../common/locale' diff --git a/components/brave_new_tab_ui/components/privateTab/torContent.tsx b/components/brave_new_tab_ui/components/privateTab/torContent.tsx index 1865d646f620..d172efc01f02 100644 --- a/components/brave_new_tab_ui/components/privateTab/torContent.tsx +++ b/components/brave_new_tab_ui/components/privateTab/torContent.tsx @@ -10,7 +10,7 @@ import { SubTitle, Text, TorLockImage -} from 'brave-ui/features/newTab' +} from 'brave-ui/features/newTab/private' // Helpers import { getLocale } from '../../../common/locale' diff --git a/components/brave_new_tab_ui/components/privateTab/torTab.tsx b/components/brave_new_tab_ui/components/privateTab/torTab.tsx index 3a05492d70a1..d22c3334c047 100644 --- a/components/brave_new_tab_ui/components/privateTab/torTab.tsx +++ b/components/brave_new_tab_ui/components/privateTab/torTab.tsx @@ -21,7 +21,7 @@ import { Separator, FakeButton, Link -} from 'brave-ui/features/newTab' +} from 'brave-ui/features/newTab/private' // Helpers import { getLocale } from '../../../common/locale' diff --git a/package-lock.json b/package-lock.json index 95e57630a118..68f0384b8e89 100644 --- a/package-lock.json +++ b/package-lock.json @@ -463,7 +463,7 @@ }, "ansi-escapes": { "version": "3.1.0", - "resolved": "http://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.1.0.tgz", + "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.1.0.tgz", "integrity": "sha512-UgAb8H9D41AQnu/PbWlCofQVcnV4Gs2bBJi9eZPxfU/hgglFh3SMDMENRIqdr7H6XFnXdoknctFByVsCOotTVw==", "dev": true }, @@ -542,7 +542,7 @@ }, "array-equal": { "version": "1.0.0", - "resolved": "http://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz", + "resolved": "https://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz", "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=", "dev": true }, @@ -1237,8 +1237,8 @@ } }, "brave-ui": { - "version": "github:brave/brave-ui#18386d1f0c65cbb5ad624fa48a761f0f2c58dbd9", - "from": "github:brave/brave-ui#18386d1f0c65cbb5ad624fa48a761f0f2c58dbd9", + "version": "github:brave/brave-ui#5ac69aee3fcf7077e6e04ca4238565ce6395e1a7", + "from": "github:brave/brave-ui#5ac69aee3fcf7077e6e04ca4238565ce6395e1a7", "dev": true, "requires": { "emptykit.css": "^1.0.1", @@ -1484,7 +1484,7 @@ }, "callsites": { "version": "2.0.0", - "resolved": "http://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz", + "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz", "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=", "dev": true }, @@ -1857,7 +1857,7 @@ }, "color-string": { "version": "0.3.0", - "resolved": "http://registry.npmjs.org/color-string/-/color-string-0.3.0.tgz", + "resolved": "https://registry.npmjs.org/color-string/-/color-string-0.3.0.tgz", "integrity": "sha1-J9RvtnAlxcL6JZk7+/V55HhBuZE=", "dev": true, "requires": { @@ -1877,7 +1877,7 @@ }, "colors": { "version": "1.1.2", - "resolved": "http://registry.npmjs.org/colors/-/colors-1.1.2.tgz", + "resolved": "https://registry.npmjs.org/colors/-/colors-1.1.2.tgz", "integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM=", "dev": true }, @@ -2256,7 +2256,7 @@ }, "d": { "version": "1.0.0", - "resolved": "http://registry.npmjs.org/d/-/d-1.0.0.tgz", + "resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz", "integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=", "dev": true, "requires": { @@ -2468,7 +2468,7 @@ }, "doctrine": { "version": "0.7.2", - "resolved": "http://registry.npmjs.org/doctrine/-/doctrine-0.7.2.tgz", + "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-0.7.2.tgz", "integrity": "sha1-fLhgNZujvpDgQLJrcpzkv6ZUxSM=", "dev": true, "requires": { @@ -2921,7 +2921,7 @@ }, "expand-range": { "version": "1.8.2", - "resolved": "http://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz", + "resolved": "https://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz", "integrity": "sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=", "dev": true, "requires": { @@ -4430,7 +4430,7 @@ }, "is-accessor-descriptor": { "version": "0.1.6", - "resolved": "http://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", + "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=", "dev": true, "requires": { @@ -4506,7 +4506,7 @@ }, "is-data-descriptor": { "version": "0.1.4", - "resolved": "http://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", + "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=", "dev": true, "requires": { @@ -6324,7 +6324,7 @@ }, "mp4-stream": { "version": "2.0.3", - "resolved": "http://registry.npmjs.org/mp4-stream/-/mp4-stream-2.0.3.tgz", + "resolved": "https://registry.npmjs.org/mp4-stream/-/mp4-stream-2.0.3.tgz", "integrity": "sha512-5NzgI0+bGakoZEwnIYINXqB3mnewkt3Y7jcvkXsTubnCNUSdM8cpP0Vemxf6FLg0qUN8fydTgNMVAc3QU8B92g==", "requires": { "buffer-alloc": "^1.1.0", @@ -6428,7 +6428,7 @@ }, "next-tick": { "version": "1.0.0", - "resolved": "http://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz", + "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz", "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=", "dev": true }, @@ -6522,7 +6522,7 @@ "dependencies": { "colors": { "version": "0.5.1", - "resolved": "http://registry.npmjs.org/colors/-/colors-0.5.1.tgz", + "resolved": "https://registry.npmjs.org/colors/-/colors-0.5.1.tgz", "integrity": "sha1-fQAj6usVTo7p/Oddy5I9DtFmd3Q=", "dev": true } @@ -6820,7 +6820,7 @@ }, "os-tmpdir": { "version": "1.0.2", - "resolved": "http://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", + "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", "dev": true }, @@ -6949,7 +6949,7 @@ }, "path-browserify": { "version": "0.0.0", - "resolved": "http://registry.npmjs.org/path-browserify/-/path-browserify-0.0.0.tgz", + "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.0.tgz", "integrity": "sha1-oLhwcpquIUAFt9UDLsLLuw+0RRo=", "dev": true }, @@ -6967,7 +6967,7 @@ }, "path-is-absolute": { "version": "1.0.1", - "resolved": "http://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", + "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=" }, "path-key": { @@ -8098,13 +8098,13 @@ }, "regjsgen": { "version": "0.2.0", - "resolved": "http://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz", + "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz", "integrity": "sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc=", "dev": true }, "regjsparser": { "version": "0.1.5", - "resolved": "http://registry.npmjs.org/regjsparser/-/regjsparser-0.1.5.tgz", + "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.1.5.tgz", "integrity": "sha1-fuj4Tcb6eS0/0K4ijSS9lJ6tIFw=", "dev": true, "requires": { @@ -8220,7 +8220,7 @@ }, "resolve": { "version": "1.1.7", - "resolved": "http://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz", "integrity": "sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=", "dev": true }, @@ -8349,7 +8349,7 @@ }, "safe-regex": { "version": "1.1.0", - "resolved": "http://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz", + "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz", "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=", "dev": true, "requires": { @@ -8780,7 +8780,7 @@ }, "sprintf-js": { "version": "1.0.3", - "resolved": "http://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", + "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=", "dev": true }, @@ -8950,7 +8950,7 @@ }, "string_decoder": { "version": "1.1.1", - "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", "requires": { "safe-buffer": "~5.1.0" @@ -8958,7 +8958,7 @@ }, "strip-ansi": { "version": "3.0.1", - "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, "requires": { @@ -8976,7 +8976,7 @@ }, "strip-eof": { "version": "1.0.0", - "resolved": "http://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz", + "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz", "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=", "dev": true }, @@ -9572,7 +9572,7 @@ }, "tty-browserify": { "version": "0.0.0", - "resolved": "http://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz", + "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz", "integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=", "dev": true }, @@ -9703,7 +9703,7 @@ }, "underscore": { "version": "1.4.4", - "resolved": "http://registry.npmjs.org/underscore/-/underscore-1.4.4.tgz", + "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.4.4.tgz", "integrity": "sha1-YaajIBBiKvoHljvzJSA88SI51gQ=", "dev": true }, @@ -10024,7 +10024,7 @@ }, "vm-browserify": { "version": "0.0.4", - "resolved": "http://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz", + "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz", "integrity": "sha1-XX6kW7755Kb/ZflUOOCofDV9WnM=", "dev": true, "requires": { @@ -10509,7 +10509,7 @@ }, "string-width": { "version": "1.0.2", - "resolved": "http://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, "requires": { diff --git a/package.json b/package.json index 0a2435bcc68d..fe2e8a65b4ed 100644 --- a/package.json +++ b/package.json @@ -272,7 +272,7 @@ "@types/react-dom": "^16.0.7", "@types/react-redux": "6.0.4", "awesome-typescript-loader": "^5.2.0", - "brave-ui": "github:brave/brave-ui#18386d1f0c65cbb5ad624fa48a761f0f2c58dbd9", + "brave-ui": "github:brave/brave-ui#5ac69aee3fcf7077e6e04ca4238565ce6395e1a7", "css-loader": "^0.28.9", "csstype": "^2.5.5", "emptykit.css": "^1.0.1", From 82fddb87852ce7172ca7122050c664be1eec518d Mon Sep 17 00:00:00 2001 From: Cezar Augusto Date: Fri, 11 Jan 2019 06:31:37 -0200 Subject: [PATCH 2/5] refactor new tab page to use brave-ui close https://github.com/brave/brave-browser/issues/633 --- browser/ui/webui/brave_webui_source.cc | 1 + components/brave_new_tab_ui/BUILD.gn | 3 +- .../actions/new_tab_actions.ts | 2 - components/brave_new_tab_ui/brave_new_tab.tsx | 3 - .../components/newTab/block.tsx | 74 ++++------ .../components/newTab/footerInfo.tsx | 77 +++++------ .../components/newTab/index.tsx | 129 ++++++------------ .../components/newTab/notification.tsx | 49 +++++++ .../newTab/siteRemovalNotification.tsx | 32 ----- .../constants/new_tab_types.ts | 1 - .../reducers/new_tab_reducer.tsx | 24 ---- components/brave_new_tab_ui/storage.ts | 6 - components/definitions/newTab.d.ts | 13 +- .../resources/brave_components_strings.grd | 1 + package-lock.json | 4 +- package.json | 2 +- 16 files changed, 166 insertions(+), 255 deletions(-) create mode 100644 components/brave_new_tab_ui/components/newTab/notification.tsx delete mode 100644 components/brave_new_tab_ui/components/newTab/siteRemovalNotification.tsx diff --git a/browser/ui/webui/brave_webui_source.cc b/browser/ui/webui/brave_webui_source.cc index 23f73da8cd8e..4e47bf1708f0 100644 --- a/browser/ui/webui/brave_webui_source.cc +++ b/browser/ui/webui/brave_webui_source.cc @@ -109,6 +109,7 @@ void CustomizeWebUIHTMLSource(const std::string &name, content::WebUIDataSource* { "estimatedTimeSaved", IDS_BRAVE_NEW_TAB_TOTAL_TIME_SAVED }, { "thumbRemoved", IDS_BRAVE_NEW_TAB_THUMB_REMOVED }, { "undoRemoved", IDS_BRAVE_NEW_TAB_UNDO_REMOVED }, + { "close", IDS_BRAVE_NEW_TAB_CLOSE }, { "restoreAll", IDS_BRAVE_NEW_TAB_RESTORE_ALL }, { "second", IDS_BRAVE_NEW_TAB_SECOND }, { "seconds", IDS_BRAVE_NEW_TAB_SECONDS }, diff --git a/components/brave_new_tab_ui/BUILD.gn b/components/brave_new_tab_ui/BUILD.gn index d90d0cb044a0..66290558236a 100644 --- a/components/brave_new_tab_ui/BUILD.gn +++ b/components/brave_new_tab_ui/BUILD.gn @@ -6,7 +6,7 @@ transpile_web_ui("brave_new_tab_ui") { "components/newTab/block.tsx", "components/newTab/footerInfo.tsx", "components/newTab/index.tsx", - "components/newTab/siteRemovalNotification.tsx", + "components/newTab/notification.tsx", "components/newTab/stats.tsx", "components/privateTab/index.tsx", "components/privateTab/privateTab.tsx", @@ -17,7 +17,6 @@ transpile_web_ui("brave_new_tab_ui") { "components/app.tsx", "constants/backgrounds.ts", "constants/new_tab_types.ts", - "constants/theme.ts", "reducers/index.ts", "reducers/new_tab_reducer.tsx", "api.ts", diff --git a/components/brave_new_tab_ui/actions/new_tab_actions.ts b/components/brave_new_tab_ui/actions/new_tab_actions.ts index 46a296c41ded..740c7de9df48 100644 --- a/components/brave_new_tab_ui/actions/new_tab_actions.ts +++ b/components/brave_new_tab_ui/actions/new_tab_actions.ts @@ -11,8 +11,6 @@ export const topSitesDataUpdated = (topSites: NewTab.Site[]) => action(types.NEW topSites }) -export const backgroundImageLoadFailed = () => action(types.NEW_TAB_BACKGROUND_IMAGE_LOAD_FAILED) - export const bookmarkAdded = (url: string) => action(types.BOOKMARK_ADDED, { url }) diff --git a/components/brave_new_tab_ui/brave_new_tab.tsx b/components/brave_new_tab_ui/brave_new_tab.tsx index a0c28b22a433..933adfb9ce1c 100644 --- a/components/brave_new_tab_ui/brave_new_tab.tsx +++ b/components/brave_new_tab_ui/brave_new_tab.tsx @@ -21,9 +21,6 @@ import * as newTabActions from './actions/new_tab_actions' import '../fonts/poppins.css' import '../fonts/muli.css' -// TODO: remove -import '../styles/newtab.less' - window.cr.define('brave_new_tab', function () { 'use strict' diff --git a/components/brave_new_tab_ui/components/newTab/block.tsx b/components/brave_new_tab_ui/components/newTab/block.tsx index aac49b1d02a5..5c78a1c8b779 100644 --- a/components/brave_new_tab_ui/components/newTab/block.tsx +++ b/components/brave_new_tab_ui/components/newTab/block.tsx @@ -16,8 +16,11 @@ import { DropTargetSpec } from 'react-dnd' -// Utils -import { cx } from '../../../common/classSet' +// Feature-specific components +import { Tile, TileActionsContainer, TileAction, TileFavicon } from 'brave-ui/features/newTab/default' + +// Icons +import { PinIcon, BookmarkOIcon, BookmarkIcon, CloseStrokeIcon } from 'brave-ui/components/icons' const Types = { BLOCK: 'block' @@ -120,54 +123,33 @@ class Block extends React.Component { style, favicon } = this.props - const starIcon = isBookmarked ? 'bookmark' : 'bookmark-o' - const pinIcon = isPinned ? 'pin' : 'pin-o' + const starIcon = isBookmarked ? : + const pinIcon = return connectDragSource( connectDropTarget( -
- ) ) diff --git a/components/brave_new_tab_ui/components/newTab/footerInfo.tsx b/components/brave_new_tab_ui/components/newTab/footerInfo.tsx index d3afc5ccb595..13eec65ad7b7 100644 --- a/components/brave_new_tab_ui/components/newTab/footerInfo.tsx +++ b/components/brave_new_tab_ui/components/newTab/footerInfo.tsx @@ -3,57 +3,50 @@ * You can obtain one at http://mozilla.org/MPL/2.0/. */ import * as React from 'react' + +// Feature-specific components +import { Link, Navigation, IconLink, PhotoName } from 'brave-ui/features/newTab/default' + +// Icons +import { SettingsAdvancedIcon, BookmarkBook, HistoryIcon } from 'brave-ui/components/icons' + +// Helpers import { getLocale } from '../../../common/locale' interface Props { - backgroundImage?: NewTab.Image + backgroundImageInfo: NewTab.Image | undefined } export default class FooterInfo extends React.Component { render () { - const bgImage: NewTab.Image | undefined = this.props.backgroundImage + const { backgroundImageInfo } = this.props + + if (!backgroundImageInfo) { + return null + } return ( - + <> +
+ + {`${getLocale('photoBy')} `} + + {backgroundImageInfo.author} + + +
+ + + + + + + + + + + + ) } } diff --git a/components/brave_new_tab_ui/components/newTab/index.tsx b/components/brave_new_tab_ui/components/newTab/index.tsx index 552834f011ca..aaaab0be3ce0 100644 --- a/components/brave_new_tab_ui/components/newTab/index.tsx +++ b/components/brave_new_tab_ui/components/newTab/index.tsx @@ -5,16 +5,22 @@ import * as React from 'react' import { DragDropContext } from 'react-dnd' import HTML5Backend from 'react-dnd-html5-backend' -import { Clock } from 'brave-ui/old' +import { + Page, + Header, + Clock, + Main, + List, + Footer, + DynamicBackground, + Gradient +} from 'brave-ui/features/newTab/default' // Components import Stats from './stats' import Block from './block' import FooterInfo from './footerInfo' -import SiteRemovalNotification from './siteRemovalNotification' - -// Constants -import { theme } from '../../constants/theme' +import SiteRemovalNotification from './notification' interface Props { actions: any @@ -22,100 +28,55 @@ interface Props { } class NewTabPage extends React.Component { - get actions () { - return this.props.actions - } - - get showImages () { - return this.props.newTabData.showImages && !!this.props.newTabData.backgroundImage + componentDidMount () { + // if a notification is open at component mounting time, close it + this.props.actions.onHideSiteRemovalNotification() } onDraggedSite = (fromUrl: string, toUrl: string, dragRight: boolean) => { - this.actions.siteDragged(fromUrl, toUrl, dragRight) + this.props.actions.siteDragged(fromUrl, toUrl, dragRight) } onDragEnd = (url: string, didDrop: boolean) => { - this.actions.siteDragEnd(url, didDrop) + this.props.actions.siteDragEnd(url, didDrop) } onToggleBookmark (site: NewTab.Site) { if (site.bookmarked === undefined) { - this.actions.bookmarkAdded(site.url) + this.props.actions.bookmarkAdded(site.url) } else { - this.actions.bookmarkRemoved(site.url) + this.props.actions.bookmarkRemoved(site.url) } } - onHideSiteRemovalNotification = () => { - this.actions.onHideSiteRemovalNotification() - } - onTogglePinnedTopSite (site: NewTab.Site) { if (!site.pinned) { - this.actions.sitePinned(site.url) + this.props.actions.sitePinned(site.url) } else { - this.actions.siteUnpinned(site.url) + this.props.actions.siteUnpinned(site.url) } } onIgnoredTopSite (site: NewTab.Site) { - this.actions.siteIgnored(site.url) - } - - onUndoIgnoredTopSite = () => { - this.actions.undoSiteIgnored() - } - - /** - * Clear ignoredTopSites and pinnedTopSites list - */ - onUndoAllSiteIgnored = () => { - this.actions.undoAllSiteIgnored() - } - - /** - * This handler only fires when the image fails to load. - * If both the remote and local image fail, page defaults to gradients. - */ - onBackgroundImageLoadFailed = () => { - this.actions.backgroundImageLoadFailed() + this.props.actions.siteIgnored(site.url) } render () { - const { newTabData } = this.props + const { newTabData, actions } = this.props - // don't render until object is found - if (!this.props.newTabData) { + if (!newTabData || !newTabData.backgroundImage) { return null } - const backgroundProps: Partial = {} - const bgImage: NewTab.Image | undefined = this.props.newTabData.backgroundImage - let gradientClassName = 'gradient' - if (this.showImages && bgImage) { - backgroundProps.style = bgImage.style - gradientClassName = 'bgGradient' - } return ( -
- { - this.showImages && bgImage - ? - : null - } -
-
-
-
-
- -
-
- -
-
-
- -
-
- { - this.props.newTabData.showSiteRemovalNotification - ? - : null - } - -
-
+ + { + this.props.newTabData.showSiteRemovalNotification + ? + : null + } + + +
+ +
+ + ) } } diff --git a/components/brave_new_tab_ui/components/newTab/notification.tsx b/components/brave_new_tab_ui/components/newTab/notification.tsx new file mode 100644 index 000000000000..63c4e7398b73 --- /dev/null +++ b/components/brave_new_tab_ui/components/newTab/notification.tsx @@ -0,0 +1,49 @@ +/* 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 { + SiteRemovalNotification, + SiteRemovalAction, + SiteRemovalText +} from 'brave-ui/features/newTab/default' + +// Icons +import { CloseStrokeIcon } from 'brave-ui/components/icons' + +// Utils +import { getLocale } from '../../../common/locale' + +interface Props { + actions: any +} + +export default class Notification extends React.Component { + onUndoIgnoredTopSite = () => { + this.props.actions.undoSiteIgnored() + } + + onUndoAllSiteIgnored = () => { + this.props.actions.undoAllSiteIgnored() + } + + onHideSiteRemovalNotification = () => { + this.props.actions.onHideSiteRemovalNotification() + } + + render () { + return ( + + {getLocale('thumbRemoved')} + {getLocale('undoRemoved')} + {getLocale('restoreAll')} + + + + + ) + } +} diff --git a/components/brave_new_tab_ui/components/newTab/siteRemovalNotification.tsx b/components/brave_new_tab_ui/components/newTab/siteRemovalNotification.tsx deleted file mode 100644 index 6aaf457c9e71..000000000000 --- a/components/brave_new_tab_ui/components/newTab/siteRemovalNotification.tsx +++ /dev/null @@ -1,32 +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' - -interface Props { - onUndoIgnoredTopSite: () => void - onRestoreAll: () => void - onCloseNotification: () => void -} - -export default class SiteRemovalNotification extends React.Component { - componentDidMount () { - window.i18nTemplate.process(window.document, window.loadTimeData) - } - render () { - const { - onUndoIgnoredTopSite, - onRestoreAll, - onCloseNotification - } = this.props - return ( -
- - - -
- ) - } -} diff --git a/components/brave_new_tab_ui/constants/new_tab_types.ts b/components/brave_new_tab_ui/constants/new_tab_types.ts index 613c07325f6b..a943876fd10b 100644 --- a/components/brave_new_tab_ui/constants/new_tab_types.ts +++ b/components/brave_new_tab_ui/constants/new_tab_types.ts @@ -6,7 +6,6 @@ export const enum types { BOOKMARK_ADDED = '@@newtab/BOOKMARK_ADDED', BOOKMARK_REMOVED = '@@newtab/BOOKMARK_REMOVED', NEW_TAB_TOP_SITES_DATA_UPDATED = '@@newtab/NEW_TAB_TOP_SITES_DATA_UPDATED', - NEW_TAB_BACKGROUND_IMAGE_LOAD_FAILED = '@@newtab/NEW_TAB_BACKGROUND_IMAGE_LOAD_FAILED', NEW_TAB_SITE_PINNED = '@@newtab/NEW_TAB_SITE_PINNED', NEW_TAB_SITE_UNPINNED = '@@newtab/NEW_TAB_SITE_UNPINNED', NEW_TAB_SITE_IGNORED = '@@newtab/NEW_TAB_SITE_IGNORED', diff --git a/components/brave_new_tab_ui/reducers/new_tab_reducer.tsx b/components/brave_new_tab_ui/reducers/new_tab_reducer.tsx index 582e649cc680..8257b29fcd48 100644 --- a/components/brave_new_tab_ui/reducers/new_tab_reducer.tsx +++ b/components/brave_new_tab_ui/reducers/new_tab_reducer.tsx @@ -105,30 +105,6 @@ export const newTabReducer: Reducer = (state: NewTab.S state = { ...state, topSites: payload.topSites } calculateGridSites(state) break - case types.NEW_TAB_BACKGROUND_IMAGE_LOAD_FAILED: { - const source = '/50cc52a4f1743ea74a21da996fe44272.jpg' - const fallbackImage: NewTab.Image = { - name: 'Bay Bridge', - source, - style: { backgroundImage: 'url(' + source + ')' }, - author: 'Darrell Sano', - link: 'https://dksfoto.smugmug.com' - } - if (!state.imageLoadFailed) { - state = { - ...state, - backgroundImage: fallbackImage, - imageLoadFailed: true - } - } else { - state = { - ...state, - backgroundImage: undefined, - showImages: false - } - } - break - } case types.NEW_TAB_SITE_PINNED: { const topSiteIndex: number = state.topSites.findIndex((site) => site.url === payload.url) diff --git a/components/brave_new_tab_ui/storage.ts b/components/brave_new_tab_ui/storage.ts index 1c98d9ab2bad..247cd2c961a2 100644 --- a/components/brave_new_tab_ui/storage.ts +++ b/components/brave_new_tab_ui/storage.ts @@ -15,8 +15,6 @@ const defaultState: NewTab.State = { ignoredTopSites: [], pinnedTopSites: [], gridSites: [], - showImages: true, - imageLoadFailed: false, showEmptyPage: false, isIncognito: chrome.extension.inIncognitoContext, useAlternativePrivateSearchEngine: false, @@ -35,9 +33,6 @@ const defaultState: NewTab.State = { const randomBackgroundImage = (): NewTab.Image => { const randomIndex: number = Math.floor(Math.random() * backgrounds.length) const image: NewTab.Image = Object.assign({}, backgrounds[randomIndex]) - image.style = { - backgroundImage: 'url(' + image.source + ')' - } return image } @@ -55,7 +50,6 @@ export const getLoadTimeData = (state: NewTab.State) => { const cleanData = (state: NewTab.State): NewTab.State => { state = { ...state } state.backgroundImage = randomBackgroundImage() - delete state.imageLoadFailed state = getLoadTimeData(state) return state } diff --git a/components/definitions/newTab.d.ts b/components/definitions/newTab.d.ts index bac00c69d48c..73a233a9aa7b 100644 --- a/components/definitions/newTab.d.ts +++ b/components/definitions/newTab.d.ts @@ -4,13 +4,10 @@ declare namespace NewTab { } export interface Image { - name: string, - source: string, - author: string, - link: string, - style?: { - backgroundImage: string - } + name: string + source: string + author: string + link: string } export interface Site { @@ -44,12 +41,10 @@ declare namespace NewTab { } export interface State { - imageLoadFailed: boolean topSites: Site[], ignoredTopSites: Site[], pinnedTopSites: Site[], gridSites: Site[], - showImages: boolean, showEmptyPage: boolean, isIncognito: boolean, useAlternativePrivateSearchEngine: boolean, diff --git a/components/resources/brave_components_strings.grd b/components/resources/brave_components_strings.grd index 39de637dae3e..ad0d53810f1c 100644 --- a/components/resources/brave_components_strings.grd +++ b/components/resources/brave_components_strings.grd @@ -124,6 +124,7 @@ Estimated Time Saved Top site removed. Undo + Close Restore All second seconds diff --git a/package-lock.json b/package-lock.json index 68f0384b8e89..0b8ac288d7a4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1237,8 +1237,8 @@ } }, "brave-ui": { - "version": "github:brave/brave-ui#5ac69aee3fcf7077e6e04ca4238565ce6395e1a7", - "from": "github:brave/brave-ui#5ac69aee3fcf7077e6e04ca4238565ce6395e1a7", + "version": "github:brave/brave-ui#96c12716a4a8978e595ac03c63d1bb23f452c0b1", + "from": "github:brave/brave-ui#96c12716a4a8978e595ac03c63d1bb23f452c0b1", "dev": true, "requires": { "emptykit.css": "^1.0.1", diff --git a/package.json b/package.json index fe2e8a65b4ed..2031a1b336b6 100644 --- a/package.json +++ b/package.json @@ -272,7 +272,7 @@ "@types/react-dom": "^16.0.7", "@types/react-redux": "6.0.4", "awesome-typescript-loader": "^5.2.0", - "brave-ui": "github:brave/brave-ui#5ac69aee3fcf7077e6e04ca4238565ce6395e1a7", + "brave-ui": "github:brave/brave-ui#96c12716a4a8978e595ac03c63d1bb23f452c0b1", "css-loader": "^0.28.9", "csstype": "^2.5.5", "emptykit.css": "^1.0.1", From 780a056d59f7349b59eaefe05c72f2621604b6a7 Mon Sep 17 00:00:00 2001 From: Cezar Augusto Date: Fri, 11 Jan 2019 06:34:07 -0200 Subject: [PATCH 3/5] remove leftover files from ntp --- .../brave_new_tab_ui/constants/theme.ts | 49 --- components/styles/animations.less | 24 -- components/styles/button.less | 130 ------- components/styles/common.less | 38 -- components/styles/newtab.less | 343 ------------------ components/styles/sortableTable.less | 72 ---- components/styles/switchControls.less | 92 ----- components/styles/variables.less | 187 ---------- 8 files changed, 935 deletions(-) delete mode 100644 components/brave_new_tab_ui/constants/theme.ts delete mode 100644 components/styles/animations.less delete mode 100644 components/styles/button.less delete mode 100644 components/styles/common.less delete mode 100644 components/styles/newtab.less delete mode 100644 components/styles/sortableTable.less delete mode 100644 components/styles/switchControls.less delete mode 100644 components/styles/variables.less diff --git a/components/brave_new_tab_ui/constants/theme.ts b/components/brave_new_tab_ui/constants/theme.ts deleted file mode 100644 index 38f8077c015e..000000000000 --- a/components/brave_new_tab_ui/constants/theme.ts +++ /dev/null @@ -1,49 +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/. */ - -export const theme = { - newTab: { - fontFamily: 'Poppins, sans-serif' - }, - newPrivateTab: { - fontFamily: 'Poppins, sans-serif', - padding: '80px 60px 40px', - background: 'linear-gradient(#4b3c6e, #000)' - }, - clock: { - color: '#fff', - fontSize: '90px' - }, - clockContainer: { - justifyContent: 'flex-end' - }, - textualContainer: { - maxWidth: '650px', - margin: '60px auto 0', - color: 'rgba(255,255,255,0.8)', - fontFamily: 'Muli, sans-serif' - }, - media: { - width: '80px', - margin: '0 0 0 25px' - }, - title: { - fontFamily: 'Poppins, sans-serif', - fontWeight: '400', - color: '#fff' - }, - italicText: { - fontStyle: 'italic', - fontSize: '15px' - }, - text: { - fontSize: '18px' - }, - switchContainer: { - margin: '40px 0 25px' - }, - switchButton: { - labelColor: 'rgba(255,255,255,0.8)' - } -} diff --git a/components/styles/animations.less b/components/styles/animations.less deleted file mode 100644 index e68361237bfd..000000000000 --- a/components/styles/animations.less +++ /dev/null @@ -1,24 +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/. */ - -@keyframes fadeIn { - from { - opacity: 0 - } - to { - opacity: 1 - } -} - -@keyframes tabFadeIn { - 0% { - opacity: 0.5 - } - 50% { - opacity: 0.6 - } - 100% { - opacity: 0.5 - } -} diff --git a/components/styles/button.less b/components/styles/button.less deleted file mode 100644 index 2a5c73dcde12..000000000000 --- a/components/styles/button.less +++ /dev/null @@ -1,130 +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 "variables.less"; - -// Remove this class from buttons as soon as -// they have been refactored. -// Only use it for default HTML