Skip to content

Commit 11a03ed

Browse files
cezaraugustocezaraugusto
committed
NTP: Update dashboard interface
Close brave/brave-browser#9455
1 parent 6786b7c commit 11a03ed

20 files changed

+731
-207
lines changed

‎browser/ui/webui/brave_webui_source.cc

+1
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,7 @@ void CustomizeWebUIHTMLSource(const std::string &name,
162162
{ "showTopSites", IDS_BRAVE_NEW_TAB_SHOW_TOP_SITES },
163163
{ "showRewards", IDS_BRAVE_NEW_TAB_SHOW_REWARDS },
164164
{ "showBinance", IDS_BRAVE_NEW_TAB_SHOW_BINANCE },
165+
{ "moreCards", IDS_BRAVE_NEW_TAB_SHOW_MORE_CARDS },
165166
{ "brandedWallpaperOptIn", IDS_BRAVE_NEW_TAB_BRANDED_WALLPAPER_OPT_IN },
166167
{ "topSitesTitle", IDS_BRAVE_NEW_TAB_TOP_SITES },
167168
{ "statsTitle", IDS_BRAVE_NEW_TAB_STATS },

‎components/brave_new_tab_ui/components/default/index.ts

+1-6
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* You can obtain one at http://mozilla.org/MPL/2.0/. */
55

66
import { StatsContainer, StatsItem } from './stats'
7-
import { SettingsMenu, SettingsRow, SettingsText, SettingsTitle, SettingsWrapper } from './settings'
7+
export * from './settings'
88
import { ListWidget, Tile, TileActionsContainer, TileAction, TileFavicon } from './gridSites'
99
import { SiteRemovalNotification, SiteRemovalText, SiteRemovalAction } from './notification'
1010
import { ClockWidget } from './clock'
@@ -26,11 +26,6 @@ export {
2626
SiteRemovalText,
2727
SiteRemovalAction,
2828
ClockWidget,
29-
SettingsMenu,
30-
SettingsRow,
31-
SettingsText,
32-
SettingsTitle,
33-
SettingsWrapper,
3429
RewardsWidget,
3530
BinanceWidget,
3631
createWidget

‎components/brave_new_tab_ui/components/default/page/index.ts

+34
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,11 @@ export const Page = styled<PageProps, 'div'>('div')`
6767
min-height: 100vh;
6868
align-items: flex-start;
6969
70+
/* lock the screen so when brave today is scroled
71+
NTP items remain in the same place */
72+
position: sticky;
73+
top: 0;
74+
7075
@media screen and (max-width: ${breakpointEveryBlock}) {
7176
display: flex;
7277
flex-direction: column;
@@ -139,6 +144,15 @@ export const GridItemNavigation = styled('section')`
139144
}
140145
`
141146

147+
export const GridItemNavigationBraveToday = styled<{}, 'span'>('span')`
148+
position: absolute;
149+
bottom: 60px;
150+
text-align: center;
151+
width: 100%;
152+
color: white;
153+
font-size: 24px;
154+
`
155+
142156
export const Footer = styled<{}, 'footer'>('footer')`
143157
/* Child items are primary Grid items and can slot in to free spaces,
144158
so this element doesn't do anything on wider viewport widths. */
@@ -183,6 +197,7 @@ export const App = styled<AppProps, 'div'>('div')`
183197
box-sizing: border-box;
184198
display: flex;
185199
flex: 1;
200+
flex-direction: column;
186201
transition: opacity .125s ease-out;
187202
opacity: ${p => p.dataIsReady ? 1 : 0};
188203
`
@@ -327,3 +342,22 @@ export const IconButtonSideText = styled<IconButtonSideTextProps, 'label'>('labe
327342
outline: 0;
328343
}
329344
`
345+
346+
interface IconButtonContainerProps {
347+
textDirection: string
348+
}
349+
350+
export const IconButtonContainer = styled<IconButtonContainerProps, 'div'>('div')`
351+
font-family: ${p => p.theme.fontFamily.heading};
352+
font-size: 13px;
353+
font-weight: 600;
354+
color: rgba(255,255,255,0.8);
355+
margin-right: ${p => p.textDirection === 'ltr' && '8px'};
356+
margin-left: ${p => p.textDirection === 'rtl' && '8px'};
357+
border-right: ${p => p.textDirection === 'ltr' && '1px solid rgba(255, 255, 255, 0.6)'};
358+
border-left: ${p => p.textDirection === 'rtl' && '1px solid rgba(255, 255, 255, 0.6)'};
359+
360+
&:hover {
361+
color: #ffffff;
362+
}
363+
`

‎components/brave_new_tab_ui/components/default/settings/index.ts

+160-18
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,168 @@
1-
/* This Source Code Form is subject to the terms of the Mozilla Public
2-
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
3-
* You can obtain one at http://mozilla.org/MPL/2.0/. */
1+
// Copyright (c) 2020 The Brave Authors. All rights reserved.
2+
// This Source Code Form is subject to the terms of the Mozilla Public
3+
// License, v. 2.0. If a copy of the MPL was not distributed with this file,
4+
// you can obtain one at http://mozilla.org/MPL/2.0/.
45

5-
import styled, { css } from 'styled-components'
6+
import styled, { css } from 'brave-ui/theme'
67

78
interface Props {
89
textDirection: string
910
}
1011

1112
export const SettingsMenu = styled<Props, 'div'>('div')`
12-
bottom: 48px;
13-
width: auto;
14-
position: absolute;
13+
width: 680px;
1514
${p => p.textDirection && (p.textDirection === 'rtl') ? `left: 12px` : `right: 12px`}
1615
background-color: ${p => p.theme.color.contextMenuBackground};
1716
color: ${p => p.theme.color.contextMenuForeground};
1817
border-radius: 8px;
19-
padding: 24px 24px 17px 24px;
18+
padding: 24px;
2019
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.24);
2120
font-family: ${p => p.theme.fontFamily.body};
2221
`
2322

23+
export const SettingsContent = styled<{}, 'div'>('div')`
24+
display: grid;
25+
grid-template-columns: auto 1fr;
26+
grid-gap: 40px;
27+
`
28+
29+
export const SettingsSidebar = styled<{}, 'aside'>('aside')`
30+
position: relative;
31+
/* normalize against SettingsMenu default padding */
32+
margin-left: -24px;
33+
padding-left: 24px;
34+
`
35+
36+
interface SettingsSidebarActiveButtonSliderProps {
37+
translateTo: number
38+
}
39+
40+
export const SettingsSidebarActiveButtonSlider =
41+
styled<SettingsSidebarActiveButtonSliderProps, 'div'>('div')`
42+
position: absolute;
43+
top: 0;
44+
left: 0;
45+
height: 48px;
46+
width: 4px;
47+
background: linear-gradient(93.83deg, ${p => p.theme.color.brandBrave} -3.53%, ${p => p.theme.palette.magenta500} 110.11%);
48+
transform: translateY(${p => p.translateTo * 48}px);
49+
transition-delay: 0.05s;
50+
transition-duration: 0.3s;
51+
transition-timing-function: ease-in;
52+
transition-property: transform;
53+
`
54+
interface SettingsSidebarSVGContentProps {
55+
src: string
56+
}
57+
58+
export const SettingsSidebarSVGContent = styled<SettingsSidebarSVGContentProps, 'div'>('div')`
59+
width: 20px;
60+
height: 20px;
61+
background: ${p => p.theme.palette.grey800};
62+
-webkit-mask-image: url(${p => p.src});
63+
-webkit-mask-repeat: no-repeat;
64+
-webkit-mask-position: center;
65+
`
66+
67+
export const SettingsSidebarButtonText = styled<{}, 'span'>('span')`
68+
margin-left: 16px;
69+
font-weight: 500;
70+
font-size: 13px;
71+
font-family: ${p => p.theme.fontFamily.heading};
72+
color: ${p => p.theme.palette.grey800};
73+
position: relative;
74+
75+
&:hover {
76+
color: ${p => p.theme.color.brandBrave};
77+
}
78+
`
79+
interface SettingsSidebarButtonProps {
80+
activeTab: boolean
81+
}
82+
83+
export const SettingsSidebarButton = styled<SettingsSidebarButtonProps, 'button'>('button')`
84+
appearance: none;
85+
padding: 0;
86+
margin: 0;
87+
border: 0;
88+
width: 220px;
89+
height: 48px;
90+
text-align: left;
91+
cursor: pointer;
92+
display: flex;
93+
align-items: center;
94+
95+
&:focus {
96+
outline: none;
97+
}
98+
99+
&:hover {
100+
${SettingsSidebarSVGContent} {
101+
background: ${p => p.theme.color.brandBrave};
102+
}
103+
${SettingsSidebarButtonText} {
104+
color: ${p => p.theme.color.brandBrave};
105+
}
106+
}
107+
108+
${SettingsSidebarSVGContent} {
109+
${p => p.activeTab && css`
110+
background: linear-gradient(93.83deg, ${p => p.theme.color.brandBrave} -3.53%, ${p => p.theme.palette.magenta500} 110.11%);
111+
`}
112+
}
113+
114+
${SettingsSidebarButtonText} {
115+
// Gradientify text
116+
${p => p.activeTab && css`
117+
background: ${p => p.theme.color.panelBackground};
118+
`}
119+
120+
// Gradientify text part 2
121+
&::before {
122+
${p => p.activeTab && css`
123+
mix-blend-mode: screen;
124+
content: '';
125+
display: block;
126+
position: absolute;
127+
top: 0;
128+
right: 0;
129+
bottom: 0;
130+
left: 0;
131+
transition: linear 0.3s background-image;
132+
background-image: linear-gradient(93.83deg, ${p => p.theme.color.brandBrave} -3.53%, ${p => p.theme.palette.magenta500} 110.11%);
133+
`}
134+
}
135+
`
136+
137+
export const SettingsFeatureBody = styled<{}, 'section'>('section')`
138+
padding: 10px 16px 0;
139+
`
140+
24141
export const SettingsTitle = styled<{}, 'div'>('div')`
25-
font-family: ${p => p.theme.fontFamily.body};
26-
font-size: 18px;
27-
font-weight: bold;
28-
letter-spacing: 0px;
29142
margin-bottom: 17px;
143+
grid-template-columns: 1fr 20px;
144+
display: grid;
145+
align-items: center;
146+
147+
h1 {
148+
font-family: ${p => p.theme.fontFamily.heading};
149+
margin: 0;
150+
font-weight: 600;
151+
font-size: 20px;
152+
line-height: 30px;
153+
letter-spacing: 0.02em;
154+
color: ${p => p.theme.color.neutral900};
155+
}
156+
`
157+
158+
export const SettingsCloseIcon = styled<{}, 'button'>('button')`
159+
appearance: none;
160+
padding: 0;
161+
margin: 0;
162+
border: 0;
163+
width: 20px;
164+
height: 20px;
165+
cursor: pointer;
30166
`
31167

32168
interface SettingsRowProps {
@@ -37,11 +173,11 @@ export const SettingsRow = styled<SettingsRowProps, 'div'>('div')`
37173
box-sizing: border-box;
38174
display: grid;
39175
grid-template-columns: 1fr 36px;
40-
margin-top: 10px;
41-
height: 30px;
42-
width: 320px;
176+
align-items: center;
177+
width: 100%;
178+
height: 28px;
43179
${p => p.isChildSetting && css`
44-
padding-left: 15px;
180+
padding-left: 36px;
45181
`}
46182
`
47183

@@ -57,9 +193,15 @@ interface SettingsWrapperProps {
57193
}
58194

59195
export const SettingsWrapper = styled<SettingsWrapperProps, 'div'>('div')`
60-
position: relative;
196+
position: absolute;
197+
top: 0;
198+
left: 0;
199+
width: 100%;
200+
height: 100%;
201+
z-index: 3;
61202
display: flex;
62-
justify-content: flex-end;
203+
justify-content: center;
204+
align-items: center;
63205
font-family: ${p => p.theme.fontFamily.heading};
64206
font-size: 13px;
65207
font-weight: 600;

0 commit comments

Comments
 (0)