Skip to content

Commit

Permalink
Merge pull request #1339 from brave/ca-newtab-2
Browse files Browse the repository at this point in the history
refactor ntp to use brave-ui
  • Loading branch information
bsclifton authored and cezaraugusto committed Jan 17, 2019
1 parent 3b02dec commit 9a1d6d2
Showing 34 changed files with 346 additions and 1,358 deletions.
1 change: 1 addition & 0 deletions browser/ui/webui/brave_webui_source.cc
Original file line number Diff line number Diff line change
@@ -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 },
22 changes: 12 additions & 10 deletions components/brave_new_tab_ui/BUILD.gn
Original file line number Diff line number Diff line change
@@ -2,26 +2,28 @@ 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/notification.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 = [
2 changes: 0 additions & 2 deletions components/brave_new_tab_ui/actions/new_tab_actions.ts
Original file line number Diff line number Diff line change
@@ -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
})
2 changes: 1 addition & 1 deletion components/brave_new_tab_ui/api.ts
Original file line number Diff line number Diff line change
@@ -73,7 +73,7 @@ export const getGridSites = (state: NewTab.State, checkBookmarkInfo?: boolean) =
gridSites.forEach((gridSite: NewTab.Site) => {
gridSite.letter = getLetterFromSite(gridSite)
gridSite.thumb = `chrome://thumb/${gridSite.url}`
gridSite.favicon = `chrome://favicon/size/48@1x/${gridSite.url}`
gridSite.favicon = `chrome://favicon/size/64@1x/${gridSite.url}`
gridSite.bookmarked = state.bookmarks[gridSite.url]

if (checkBookmarkInfo && !gridSite.bookmarked) {
5 changes: 5 additions & 0 deletions components/brave_new_tab_ui/brave_new_tab.tsx
Original file line number Diff line number Diff line change
@@ -16,6 +16,11 @@ import App from './components/app'
// Utils
import store from './store'
import * as newTabActions from './actions/new_tab_actions'
import 'emptykit.css'

// Fonts
import '../fonts/poppins.css'
import '../fonts/muli.css'

window.cr.define('brave_new_tab', function () {
'use strict'
180 changes: 9 additions & 171 deletions components/brave_new_tab_ui/components/app.tsx
Original file line number Diff line number Diff line change
@@ -3,195 +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<Props, {}> {
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<HTMLInputElement>) => {
if (!e.target) {
return
}
this.actions.changePrivateSearchEngine(e.target.checked)
}

class DefaultPage extends React.Component<Props, {}> {
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 <div className='empty' />
return <div />
}

if (this.props.newTabData.isIncognito) {
return (
<NewPrivateTab
useAlternativePrivateSearchEngine={this.useAlternativePrivateSearchEngine}
isTor={this.props.newTabData.isTor}
isQwant={this.props.newTabData.isQwant}
onChangePrivateSearchEngine={this.onChangePrivateSearchEngine}
/>
)
}

// don't render until object is found
if (!this.props.newTabData) {
return null
}

const backgroundProps: Partial<NewTab.Image> = {}
const bgImage: NewTab.Image | undefined = this.props.newTabData.backgroundImage
let gradientClassName = 'gradient'
if (this.showImages && bgImage) {
backgroundProps.style = bgImage.style
gradientClassName = 'bgGradient'
}
return (
<div data-test-id='dynamicBackground' className='dynamicBackground' {...backgroundProps}>
{
this.showImages && bgImage
? <img src={bgImage.source} onError={this.onBackgroundImageLoadFailed} data-test-id='backgroundImage' />
: null
}
<div data-test-id={this.showImages ? 'bgGradient' : 'gradient'} className={gradientClassName} />
<div className='content'>
<main style={theme.newTab}>
<div className='newTabStats'>
<div className='statsContainer'>
<Stats stats={newTabData.stats}/>
</div>
<div className='clockContainer'>
<Clock customStyle={theme.clock} />
</div>
</div>
<div className='topSitesContainer'>
<nav className='topSitesGrid'>
{
this.props.newTabData.gridSites.map((site: NewTab.Site) =>
<Block
key={site.url}
id={site.url}
title={site.title}
href={site.url}
favicon={site.favicon}
style={{ backgroundColor: site.themeColor || site.computedThemeColor }}
onToggleBookmark={this.onToggleBookmark.bind(this, site)}
onPinnedTopSite={this.onTogglePinnedTopSite.bind(this, site)}
onIgnoredTopSite={this.onIgnoredTopSite.bind(this, site)}
onDraggedSite={this.onDraggedSite}
onDragEnd={this.onDragEnd}
isPinned={site.pinned}
isBookmarked={site.bookmarked !== undefined}
/>
)
}
</nav>
</div>
</main>
{
this.props.newTabData.showSiteRemovalNotification
? <SiteRemovalNotification
onUndoIgnoredTopSite={this.onUndoIgnoredTopSite}
onRestoreAll={this.onUndoAllSiteIgnored}
onCloseNotification={this.onHideSiteRemovalNotification}
/>
: null
}
<FooterInfo backgroundImage={bgImage} />
</div>
</div>
)
return this.props.newTabData.isIncognito
? <NewPrivateTabPage newTabData={newTabData} actions={actions} />
: <NewTabPage newTabData={newTabData} actions={actions} />
}
}

@@ -206,4 +44,4 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
export default connect(
mapStateToProps,
mapDispatchToProps
)(DragDropContext(HTML5Backend)(NewTabPage))
)(DefaultPage)
59 changes: 0 additions & 59 deletions components/brave_new_tab_ui/components/footerInfo.tsx

This file was deleted.

Loading

0 comments on commit 9a1d6d2

Please sign in to comment.