Skip to content

Commit 8c21705

Browse files
cezaraugustoryanml
cezaraugusto
authored and
ryanml
committed
NTP: Update dashboard interface
Close brave/brave-browser#9455
1 parent 37cca0b commit 8c21705

20 files changed

+731
-231
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
{ "showRewards", IDS_BRAVE_NEW_TAB_SHOW_REWARDS },
163163
{ "showBinance", IDS_BRAVE_NEW_TAB_SHOW_BINANCE },
164164
{ "showTogether", IDS_BRAVE_NEW_TAB_SHOW_TOGETHER },
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'
@@ -27,11 +27,6 @@ export {
2727
SiteRemovalText,
2828
SiteRemovalAction,
2929
ClockWidget,
30-
SettingsMenu,
31-
SettingsRow,
32-
SettingsText,
33-
SettingsTitle,
34-
SettingsWrapper,
3530
RewardsWidget,
3631
BinanceWidget,
3732
TogetherWidget,

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

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

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

‎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)