Skip to content
This repository has been archived by the owner on Dec 11, 2019. It is now read-only.

Update styles for Bookmark Manager #4562

Closed
bsclifton opened this issue Oct 6, 2016 · 5 comments
Closed

Update styles for Bookmark Manager #4562

bsclifton opened this issue Oct 6, 2016 · 5 comments
Assignees
Labels
design A design change, especially one which needs input from the design team. feature/bookmarks QA/checked-macOS QA/checked-Win32 QA/checked-Win64
Milestone

Comments

@bsclifton
Copy link
Member

Did you search for similar issues before submitting this one?
Yes

Describe the issue you encountered:
The bookmark manager looks bland. Using the history page as an example, it could use some styling updates.

Expected behavior:
about:bookmarks should look and feel nicer

@bsclifton bsclifton added design A design change, especially one which needs input from the design team. feature/bookmarks labels Oct 6, 2016
@bsclifton bsclifton added this to the 0.12.5dev milestone Oct 6, 2016
@bsclifton bsclifton self-assigned this Oct 6, 2016
@bsclifton
Copy link
Member Author

bsclifton commented Oct 7, 2016

Current WIP screenshot...
rev2

cc: @bradleyrichter

@neeklamy
Copy link
Contributor

neeklamy commented Oct 7, 2016

That’s a lot of vertical space going to waste. Some thoughts:

  • Why is “Bookmark Manager” being repeated on the page? It’s already in the title bar and tab.
  • Why does the “Import browser data” button have such prominence? It will likely be used once, and being positioned next to the search bar makes it look like it’s somehow related too.
  • Why are there headings? “Folders” and “Organize”, it should be self-explanatory without.

Here’s my modest proposal for a tighter fit (there’s a whole lot people using smaller 12" portables these days with very little vertical screen estate):

brave-bookmark-manager-suggestions

@bradleyrichter
Copy link
Contributor

It does need some adjustment from it's parent - about:history.

I'm still working on the design but for now, let's keep the title for consistency, just making the header much shorter. The title is helpful when you have the tab on the far right by chance, or when getting a mouse-hover preview.

@bsclifton
Copy link
Member Author

Updated WIP screenshot 😄 Will have this wrapped up today
screen shot 2016-10-10 at 2 41 00 pm

@bradleyrichter
Copy link
Contributor

@bsclifton Here is a condensed version to reduce the top height and eliminate the need for the orange area labels.

image

The icons in the column headers are shortcut buttons for creating a new folder, import bookmarks, or add a new bookmark within the selected folder.

Other changes/additions:

  • smaller title
  • shorter header
  • top labels go away and folder column gets a list header
  • import button becomes an icon button in the folder list header
  • search box moves to align-right
  • selection color for folder is light grey
  • selected folder text style is bold
  • selected folder icon is open
  • folder list line spacing is tighter
  • new-folder and new-bookmark icons are nested in headers

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
design A design change, especially one which needs input from the design team. feature/bookmarks QA/checked-macOS QA/checked-Win32 QA/checked-Win64
Projects
None yet
Development

No branches or pull requests

6 participants