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

NTP Refinement #1376

Closed
wants to merge 1 commit into from
Closed

NTP Refinement #1376

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
37 changes: 16 additions & 21 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 @@ -50,28 +50,23 @@ void CustomizeWebUIHTMLSource(const std::string &name, content::WebUIDataSource*
{ "fd85070af5114d6ac462c466e78448e4.svg", IDR_BRAVE_NEW_TAB_IMG1 },
{ "314e7529efec41c8867019815f4d8dad.svg", IDR_BRAVE_NEW_TAB_IMG4 },
{ "6c337c63662ee0ba4e57f6f8156d69ce.svg", IDR_BRAVE_NEW_TAB_IMG2 },
{ "50cc52a4f1743ea74a21da996fe44272.jpg", IDR_BRAVE_NEW_TAB_IMG14 },
// New tab Backgrounds
{ "dksfoto1.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND1 },
{ "dksfoto2.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND2 },
{ "dksfoto3.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND3 },
{ "dksfoto4.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND4 },
{ "dksfoto5.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND5 },
{ "dksfoto6.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND6 },
{ "dksfoto7.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND7 },
{ "dksfoto8.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND8 },
{ "dksfoto9.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND9 },
{ "dksfoto10.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND10 },
{ "dksfoto11.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND11 },
{ "Phoyoserge_Corsica.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND12 },
{ "Phoyoserge_Corsica2.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND13 },
{ "Phoyoserge_DowntownGriffith.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND14 },
{ "Phoyoserge_ElmatadorBeach.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND15 },
{ "Phoyoserge_ParisConciergeri.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND16 },
{ "Phoyoserge_Theroofparis.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND17 },
{ "Phoyoserge_TheSeantParis.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND18 },
{ "Phoyoserge_VeniseSunset.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND19 },
{ "Phoyoserge_Yosemite.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND20 },
{ "ntp-1.webp", IDR_BRAVE_NEW_TAB_BACKGROUND1 },
{ "ntp-2.webp", IDR_BRAVE_NEW_TAB_BACKGROUND2 },
{ "ntp-3.webp", IDR_BRAVE_NEW_TAB_BACKGROUND3 },
{ "ntp-4.webp", IDR_BRAVE_NEW_TAB_BACKGROUND4 },
{ "ntp-5.webp", IDR_BRAVE_NEW_TAB_BACKGROUND5 },
{ "ntp-6.webp", IDR_BRAVE_NEW_TAB_BACKGROUND6 },
{ "ntp-7.webp", IDR_BRAVE_NEW_TAB_BACKGROUND7 },
{ "ntp-8.webp", IDR_BRAVE_NEW_TAB_BACKGROUND8 },
{ "ntp-9.webp", IDR_BRAVE_NEW_TAB_BACKGROUND9 },
{ "ntp-10.webp", IDR_BRAVE_NEW_TAB_BACKGROUND10 },
{ "ntp-11.webp", IDR_BRAVE_NEW_TAB_BACKGROUND11 },
{ "ntp-12.webp", IDR_BRAVE_NEW_TAB_BACKGROUND12 },
{ "ntp-13.webp", IDR_BRAVE_NEW_TAB_BACKGROUND13 },
{ "ntp-14.webp", IDR_BRAVE_NEW_TAB_BACKGROUND14 },
{ "ntp-15.webp", IDR_BRAVE_NEW_TAB_BACKGROUND15 },
{ "ntp-16.webp", IDR_BRAVE_NEW_TAB_BACKGROUND16 },

// private tab
{ "c168145d6bf1abf2c0322636366f7dbe.svg", IDR_BRAVE_PRIVATE_TAB_TOR_IMG },
Expand Down
18 changes: 7 additions & 11 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 @@ -7,7 +7,6 @@ import { DragDropContext } from 'react-dnd'
import { bindActionCreators, Dispatch } from 'redux'
import { connect } from 'react-redux'
import HTML5Backend from 'react-dnd-html5-backend'
import { Grid, Column } from 'brave-ui/components'
import { Clock } from 'brave-ui/old'

// Components
Expand All @@ -25,7 +24,6 @@ import * as newTabActions from '../actions/new_tab_actions'

// Assets
require('../../styles/newtab.less')
require('font-awesome/css/font-awesome.css')
require('../../fonts/poppins.css')
require('../../fonts/muli.css')

Expand Down Expand Up @@ -149,15 +147,13 @@ class NewTabPage extends React.Component<Props, {}> {
<div data-test-id={this.showImages ? 'bgGradient' : 'gradient'} className={gradientClassName} />
<div className='content'>
<main style={theme.newTab}>
<div style={theme.newTabStats}>
<Grid columns={3}>
<Column size={2}>
<Stats stats={newTabData.stats}/>
</Column>
<Column size={1} customStyle={theme.clockContainer}>
<Clock customStyle={theme.clock} />
</Column>
</Grid>
<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'>
Expand Down
119 changes: 69 additions & 50 deletions components/brave_new_tab_ui/components/block.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,16 @@

import * as React from 'react'
import {
DragSource, DragSourceCollector,
DragSource,
DragSourceCollector,
DragSourceConnector,
DragSourceMonitor, DragSourceSpec,
DropTarget, DropTargetCollector,
DragSourceMonitor,
DragSourceSpec,
DropTarget,
DropTargetCollector,
DropTargetConnector,
DropTargetMonitor, DropTargetSpec
DropTargetMonitor,
DropTargetSpec
} from 'react-dnd'

// Utils
Expand Down Expand Up @@ -48,7 +52,9 @@ const blockTarget: DropTargetSpec<Props> = {
const item: Props = monitor.getItem() as Props
const draggedId = item.id
if (draggedId !== props.id) {
const dragRight = monitor.getClientOffset().x - monitor.getInitialSourceClientOffset().x > 0
const dragRight =
monitor.getClientOffset().x - monitor.getInitialSourceClientOffset().x >
0
props.onDraggedSite(draggedId, props.id, dragRight)
}
}
Expand All @@ -63,7 +69,10 @@ const blockTarget: DropTargetSpec<Props> = {
* @see http://gaearon.github.io/react-dnd/docs-drop-target.html#the-collecting-function
*/

const sourceCollect: DragSourceCollector = (connect: DragSourceConnector, monitor: DragSourceMonitor) => {
const sourceCollect: DragSourceCollector = (
connect: DragSourceConnector,
monitor: DragSourceMonitor
) => {
return {
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging()
Expand Down Expand Up @@ -111,51 +120,57 @@ class Block extends React.Component<Props, {}> {
style,
favicon
} = this.props
const starIcon = isBookmarked ? 'fa-star' : 'fa-star-o'
const pinIcon = isPinned ? 'fa-minus' : 'fa-thumb-tack'
const starIcon = isBookmarked ? 'bookmark' : 'bookmark-o'
const pinIcon = isPinned ? 'pin' : 'pin-o'

return connectDragSource(connectDropTarget(
<div className='topSiteSquareSpace'>
<div
className='topSitesElement'
>
<div className='topSitesActionContainer'>
<button
className={cx({
topSitesActionBtn: true,
fa: true,
[pinIcon]: true
})}
onClick={onPinnedTopSite}
data-l10n-id={isPinned ? 'pinTopSiteButton' : 'unpinTopSiteButton'}
/>
<button
className={cx({
topSitesActionBtn: true,
fa: true,
[starIcon]: true
})}
onClick={onToggleBookmark}
data-l10n-id={isBookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
/>
<button
className='topSitesActionBtn fa fa-close'
onClick={onIgnoredTopSite}
data-l10n-id='removeTopSiteButton'
/>
return connectDragSource(
connectDropTarget(
<div className='topSiteSquareSpace'>
<div className='topSitesElement'>
<div className='topSitesActionContainer'>
<button
className={cx({
topSitesActionBtn: true,
[pinIcon]: true
})}
onClick={onPinnedTopSite}
data-l10n-id={
isPinned ? 'pinTopSiteButton' : 'unpinTopSiteButton'
}
/>
<button
className={cx({
topSitesActionBtn: true,
[starIcon]: true
})}
onClick={onToggleBookmark}
data-l10n-id={
isBookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'
}
/>
<button
className='topSitesActionBtn close'
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} />
</a>
</div>
<a
className='topSitesElementFavicon'
title={title}
href={href}
style={style}
>
{isPinned ? <div className='pinnedTopSite'><span className='pin fa fa-thumb-tack' /></div> : null}
<img src={favicon} />
</a>
</div>
</div>
))
)
)
}
}

Expand All @@ -166,7 +181,9 @@ class Block extends React.Component<Props, {}> {
*
* @see http://gaearon.github.io/react-dnd/docs-drag-source.html
*/
const source = DragSource<Props>(Types.BLOCK, blockSource, sourceCollect)(Block)
const source = DragSource<Props>(Types.BLOCK, blockSource, sourceCollect)(
Block
)

// Notice that we're exporting the DropTarget and not Block Class.
/**
Expand All @@ -175,4 +192,6 @@ const source = DragSource<Props>(Types.BLOCK, blockSource, sourceCollect)(Block)
*
* @see http://gaearon.github.io/react-dnd/docs-drop-target.html
*/
export default DropTarget<Props>(Types.BLOCK, blockTarget, targetCollect)(source)
export default DropTarget<Props>(Types.BLOCK, blockTarget, targetCollect)(
source
)
38 changes: 28 additions & 10 deletions components/brave_new_tab_ui/components/footerInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,24 +16,42 @@ export default class FooterInfo extends React.Component<Props, {}> {
return (
<footer className='footerContainer'>
<div className='copyrightNotice'>
{
bgImage && bgImage.name
? <div>
{bgImage && bgImage.name ? (
<div>
<div className='copyrightCredits'>
<span className='photoBy'>{getLocale('photoBy')} </span>
<a className='copyrightOwner' href={bgImage.link} rel='noopener' target='_blank'>
<a
className='copyrightOwner'
href={bgImage.link}
rel='noopener'
target='_blank'
>
{' '}
{bgImage.author}
</a>
</div>
<span className='photoName'>{bgImage.name}</span>
</div>
: null
}
) : 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>
<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>
)
Expand Down
2 changes: 1 addition & 1 deletion components/brave_new_tab_ui/components/siteRemovalNotification.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export default class SiteRemovalNotification extends React.Component<Props, {}>
<span className='notification' i18n-content='thumbRemoved' />
<span className='siteRemovalAction' onClick={onUndoIgnoredTopSite} i18n-content='undoRemoved' />
<span className='siteRemovalAction' onClick={onRestoreAll} i18n-content='restoreAll' />
<button className='fa fa-close' onClick={onCloseNotification} i18n-content='close' />
<button className='icon-container close' onClick={onCloseNotification} i18n-content='close' />
</div>
)
}
Expand Down
Loading