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.

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

[Desktop] Redesign 'Customize Dashboard' setting on the new tab page to support more options #9455

Closed
rebron opened this issue Apr 24, 2020 · 3 comments · Fixed by brave/brave-core#5555

Comments

@rebron
Copy link
Collaborator

rebron commented Apr 24, 2020

Description

Update the design for New Tab page settings to allow for more customization of the page: to show/hide more widgets, to manage individual widget settings, for managing user uploaded wallpaper or choosing background colors.

Test plan

Should match design

Design

Clicking on customize now opens an expanded dashboard customization panel:

user flows - customize

customize dashboard-full

The customization panel now has sections that contains toggles for each widget.

customize dashboard-background image

customize dashboard-background image specs

customize dashboard-brave stats

customize dashboard-brave rewards

customize dashboard-top sites

customize dashboard-clock

customize dashboard-more cards

Switching between sections

Hover on another section:

customize dashboard - hover

When the user clicks on a different section in the panel, the highlight slides to the selected section:

click section

Dark theme

Dark theme is supported:

customize dashboard - dark theme

customize dashboard - dark theme hover

Assets

Figma link for CSS, sizing, etc.: https://www.figma.com/file/ZVez2eu0i1OFReiP2jEfgm/Customize-Dashboard-panel?node-id=0%3A1 <-- export the icons from here too

@rebron rebron added feature/new-tab priority/P3 The next thing for us to work on. It'll ride the trains. labels Apr 24, 2020
@karenkliu
Copy link

Designs and assets added!

@rebron
Copy link
Collaborator Author

rebron commented Apr 29, 2020

cc: @cezaraugusto

cezaraugusto added a commit to brave/brave-core that referenced this issue May 14, 2020
bsclifton pushed a commit to brave/brave-core that referenced this issue May 17, 2020
ryanml pushed a commit to brave/brave-core that referenced this issue May 19, 2020
ryanml pushed a commit to brave/brave-core that referenced this issue May 21, 2020
ryanml pushed a commit to brave/brave-core that referenced this issue May 26, 2020
ryanml pushed a commit to brave/brave-core that referenced this issue May 27, 2020
petemill pushed a commit to brave/brave-core that referenced this issue Jun 1, 2020
@bbondy bbondy added this to the Closed / Invalid milestone Jun 3, 2020
@LaurenWags
Copy link
Member

LaurenWags commented Jul 2, 2020

Verified passed with

Brave | 1.11.85 Chromium: 83.0.4103.116 (Official Build) dev (64-bit)
-- | --
Revision | 8f0c18b4dca9b6699eb629be0f51810c24fb6428-refs/branch-heads/4103@{#716}
OS | macOS Version 10.14.6 (Build 18G3020)
Dark Theme Images Screen Shot 2020-07-02 at 9 53 12 AM Screen Shot 2020-07-02 at 9 53 25 AM Screen Shot 2020-07-02 at 9 53 32 AM Screen Shot 2020-07-02 at 9 53 40 AM Screen Shot 2020-07-02 at 9 54 41 AM Screen Shot 2020-07-02 at 9 54 49 AM
Light Theme Images Screen Shot 2020-07-02 at 9 55 07 AM Screen Shot 2020-07-02 at 9 55 13 AM Screen Shot 2020-07-02 at 9 55 20 AM Screen Shot 2020-07-02 at 9 55 27 AM Screen Shot 2020-07-02 at 9 55 34 AM Screen Shot 2020-07-02 at 9 55 41 AM

Verified passed with

Brave	1.11.87 Chromium: 83.0.4103.116 (Official Build) dev (64-bit)
Revision	8f0c18b4dca9b6699eb629be0f51810c24fb6428-refs/branch-heads/4103@{#716}
OS	Linux
Dark Theme Images Screen Shot 2020-07-03 at 2 41 36 PM Screen Shot 2020-07-03 at 2 41 46 PM Screen Shot 2020-07-03 at 2 41 52 PM Screen Shot 2020-07-03 at 2 41 59 PM Screen Shot 2020-07-03 at 2 42 06 PM Screen Shot 2020-07-03 at 2 42 13 PM
Light Theme Images Screen Shot 2020-07-03 at 2 42 34 PM Screen Shot 2020-07-03 at 2 42 40 PM Screen Shot 2020-07-03 at 2 42 46 PM Screen Shot 2020-07-03 at 2 42 53 PM Screen Shot 2020-07-03 at 2 42 59 PM Screen Shot 2020-07-03 at 2 43 09 PM

Verification passed on


Brave | 1.11.90 Chromium: 83.0.4103.116 (Official Build) dev (64-bit)
-- | --
Revision | 8f0c18b4dca9b6699eb629be0f51810c24fb6428-refs/branch-heads/4103@{#716}
OS | Windows 10 OS Version 1903 (Build 18362.900)


Dark Theme Images ![image](https://user-images.githubusercontent.com/38657976/86820031-1bb25e80-c0a6-11ea-9fda-886fc9c7fdab.png) ![image](https://user-images.githubusercontent.com/38657976/86820064-2cfb6b00-c0a6-11ea-8bfa-a7c11704cc36.png) ![image](https://user-images.githubusercontent.com/38657976/86820104-3d134a80-c0a6-11ea-9331-c7d098cb9f19.png) ![image](https://user-images.githubusercontent.com/38657976/86820149-48ff0c80-c0a6-11ea-8b64-1d8ae5434f97.png) ![image](https://user-images.githubusercontent.com/38657976/86820221-5b794600-c0a6-11ea-87a7-fe781614968e.png) ![image](https://user-images.githubusercontent.com/38657976/86820267-6c29bc00-c0a6-11ea-94e9-05aa69958b75.png)
Light Theme Images ![image](https://user-images.githubusercontent.com/38657976/86820510-cb87cc00-c0a6-11ea-8e60-bdbdff2f77b9.png) ![image](https://user-images.githubusercontent.com/38657976/86820584-e1958c80-c0a6-11ea-9b80-eae6d1dd5137.png) ![image](https://user-images.githubusercontent.com/38657976/86820636-f40fc600-c0a6-11ea-9bda-4b901cc54416.png) ![image](https://user-images.githubusercontent.com/38657976/86820696-0558d280-c0a7-11ea-897f-778145202122.png) ![image](https://user-images.githubusercontent.com/38657976/86820763-1e618380-c0a7-11ea-8015-4ccce1f1e949.png) ![image](https://user-images.githubusercontent.com/38657976/86820806-2e796300-c0a7-11ea-80db-98996ae141f4.png)

@rebron rebron changed the title redesign NTP settings [Desktop] Redesign 'Customize Dashboard' setting on the new tab page to support more options Jul 14, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants