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

refactor ntp to use brave-ui #1379

Merged
merged 1 commit into from
Jan 17, 2019
Merged

refactor ntp to use brave-ui #1379

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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 browser/ui/webui/brave_webui_source.cc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Expand Down
22 changes: 12 additions & 10 deletions components/brave_new_tab_ui/BUILD.gn
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down
2 changes: 0 additions & 2 deletions components/brave_new_tab_ui/actions/new_tab_actions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
})
Expand Down
2 changes: 1 addition & 1 deletion components/brave_new_tab_ui/api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
5 changes: 5 additions & 0 deletions components/brave_new_tab_ui/brave_new_tab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
180 changes: 9 additions & 171 deletions components/brave_new_tab_ui/components/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
}
}

Expand All @@ -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
View file
Open in desktop

This file was deleted.

Loading