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

Jump to bottom

refactor ntp to use brave-ui #1339

Merged
merged 5 commits into from
Jan 17, 2019
Merged

refactor ntp to use brave-ui #1339

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d342239
change default new tab and private new tab structure
cezaraugusto Jan 10, 2019
82fddb8
refactor new tab page to use brave-ui
cezaraugusto Jan 11, 2019
780a056
remove leftover files from ntp
cezaraugusto Jan 11, 2019
af676f1
adapt favicon size to 64px to match tile icon size
cezaraugusto Jan 11, 2019
f6b4029
normalize styles using emptykit.css
cezaraugusto Jan 14, 2019
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}`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What happens here if a 64 pixel version isn't available?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

actually nm - just tried it out; it upscales it 😄

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
186 changes: 9 additions & 177 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,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<Props, {}> {
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<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 @@ -212,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