Skip to content

Commit

Permalink
refactor new tab page to use brave-ui
Browse files Browse the repository at this point in the history 
close brave/brave-browser#633
  • Loading branch information
@cezaraugusto
cezaraugusto committed Jan 11, 2019
1 parent 1951438 commit a74d34d
Show file tree
Hide file tree
Showing 12 changed files with 154 additions and 221 deletions.
3 changes: 1 addition & 2 deletions components/brave_new_tab_ui/BUILD.gn
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
2 changes: 0 additions & 2 deletions components/brave_new_tab_ui/actions/new_tab_actions.ts
View file
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
3 changes: 0 additions & 3 deletions components/brave_new_tab_ui/brave_new_tab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down
75 changes: 33 additions & 42 deletions components/brave_new_tab_ui/components/newTab/block.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -120,54 +123,42 @@ class Block extends React.Component<Props, {}> {
style,
favicon
} = this.props
const starIcon = isBookmarked ? 'bookmark' : 'bookmark-o'
const pinIcon = isPinned ? 'pin' : 'pin-o'
const starIcon = isBookmarked ? <BookmarkOIcon /> : <BookmarkIcon />
const pinIcon = <PinIcon />

return connectDragSource(
connectDropTarget(
<div className='topSiteSquareSpace'>
<div className='topSitesElement'>
<div className='topSitesActionContainer'>
<button
className={cx({
topSitesActionBtn: true,
[pinIcon]: true
})}
<div>
<Tile title={title} style={style}>
<TileActionsContainer>
<TileAction
onClick={onPinnedTopSite}
data-l10n-id={
isPinned ? 'pinTopSiteButton' : 'unpinTopSiteButton'
}
/>
<button
className={cx({
topSitesActionBtn: true,
[starIcon]: true
})}
data-l10n-id={isPinned ? 'pinTopSiteButton' : 'unpinTopSiteButton'}
>
{pinIcon}
</TileAction>
<TileAction
onClick={onToggleBookmark}
data-l10n-id={
isBookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'
}
/>
<button
className='topSitesActionBtn close'
data-l10n-id={isBookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
>
{starIcon}
</TileAction>
<TileAction
onClick={onIgnoredTopSite}
data-l10n-id='removeTopSiteButton'
/>
</div>
<a
className='topSitesElementFavicon'
title={title}
href={href}
style={style}
>
{isPinned ? (
<div className='pinnedTopSite'>
<span className='icon-container pin' />
</div>
) : null}
<img src={favicon} />
>
<CloseStrokeIcon />
</TileAction>
</TileActionsContainer>
{
isPinned
? <TileAction onClick={onPinnedTopSite} standalone={true}><PinIcon /></TileAction>
: null
}
<a href={href}>
<TileFavicon src={favicon} />
</a>
</div>
</Tile>
</div>
)
)
Expand Down
73 changes: 31 additions & 42 deletions components/brave_new_tab_ui/components/newTab/footerInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,57 +3,46 @@
* 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<Props, {}> {
render () {
const bgImage: NewTab.Image | undefined = this.props.backgroundImage
const { backgroundImageInfo } = this.props

return (
<footer className='footerContainer'>
<div className='copyrightNotice'>
{bgImage && bgImage.name ? (
<div>
<div className='copyrightCredits'>
<span className='photoBy'>{getLocale('photoBy')} </span>
<a
className='copyrightOwner'
href={bgImage.link}
rel='noopener'
target='_blank'
>
{' '}
{bgImage.author}
</a>
</div>
</div>
) : null}
</div>
<nav className='shortcutsContainer'>
<a href='chrome://settings'>
<span
className='shortcutIcon settingsIcon'
title={getLocale('preferencesPageTitle')}
/>
</a>
<a href='chrome://bookmarks'>
<span
className='shortcutIcon bookmarksIcon'
title={getLocale('bookmarksPageTitle')}
/>
</a>
<a href='chrome://history'>
<span
className='shortcutIcon historyIcon'
title={getLocale('historyPageTitle')}
/>
</a>
</nav>
</footer>
<>
<div>
<PhotoName>
{`${getLocale('photoBy')} `}
<Link href={backgroundImageInfo!.link} rel='noreferrer noopener' target='_blank'>
{backgroundImageInfo!.author}
</Link>
</PhotoName>
</div>
<Navigation>
<IconLink title={getLocale('preferencesPageTitle')} href='chrome://settings'>
<SettingsAdvancedIcon />
</IconLink>
<IconLink title={getLocale('bookmarksPageTitle')} href='chrome://bookmarks'>
<BookmarkBook />
</IconLink>
<IconLink title={getLocale('historyPageTitle')} href='chrome://history'>
<HistoryIcon />
</IconLink>
</Navigation>
</>
)
}
}
96 changes: 38 additions & 58 deletions components/brave_new_tab_ui/components/newTab/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,21 @@ 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,
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
Expand All @@ -26,8 +32,8 @@ class NewTabPage extends React.Component<Props, {}> {
return this.props.actions
}

get showImages () {
return this.props.newTabData.showImages && !!this.props.newTabData.backgroundImage
componentDidMount () {
this.actions.onHideSiteRemovalNotification()
}

onDraggedSite = (fromUrl: string, toUrl: string, dragRight: boolean) => {
Expand Down Expand Up @@ -66,21 +72,10 @@ class NewTabPage extends React.Component<Props, {}> {
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

Expand All @@ -89,33 +84,15 @@ class NewTabPage extends React.Component<Props, {}> {
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 />
</div>
</div>
<div className='topSitesContainer'>
<nav className='topSitesGrid'>
<DynamicBackground background={newTabData.backgroundImage!.source}>
<Gradient />
<Page>
<Header>
<Stats stats={newTabData.stats} />
<Clock />
<Main>
<List>
{
this.props.newTabData.gridSites.map((site: NewTab.Site) =>
<Block
Expand All @@ -135,21 +112,24 @@ class NewTabPage extends React.Component<Props, {}> {
/>
)
}
</nav>
</div>
</main>
{
this.props.newTabData.showSiteRemovalNotification
? <SiteRemovalNotification
onUndoIgnoredTopSite={this.onUndoIgnoredTopSite}
onRestoreAll={this.onUndoAllSiteIgnored}
onCloseNotification={this.onHideSiteRemovalNotification}
/>
: null
}
<FooterInfo backgroundImage={bgImage} />
</div>
</div>
</List>
{
this.props.newTabData.showSiteRemovalNotification
? (
<SiteRemovalNotification
onUndoIgnoredTopSite={this.onUndoIgnoredTopSite}
onRestoreAll={this.onUndoAllSiteIgnored}
onCloseNotification={this.onHideSiteRemovalNotification}
/>
) : null
}
</Main>
</Header>
<Footer>
<FooterInfo backgroundImageInfo={newTabData.backgroundImage} />
</Footer>
</Page>
</DynamicBackground>
)
}
}
Expand Down
Loading

0 comments on commit a74d34d

Please sign in to comment.