Revamp Dashboard with Material Design

[jspenguin2017]

Any feedback on this? #33 (comment)

---

The current dashboard is ugly and glitchy, has hard-to-access buttons, and is not mobile(Yandex)-friendly. (There could be other complications when dealing with mobile browsers, but like all Material Design libraries are responsive)
Should revamp it with clean, responsive, and modern Material Design.

Also:

• Make sure browser back button works

• Change last section of third party filters pannel to "For your locale" and "Other locales" Maybe a link to Nano Filter Store?

• Rework Dashboard

• Update credits in About page

[jspenguin2017]

Also, what about a mini extension store for Nano? Where people can list filters and themes? That will make the third party page nice and tidy, and also help with building a community.
Maybe we can even have syntax highlighting rules (like lightweight, full highlight, and everywhere in between) and more snippets resources on there.
And maybe even linting rules (RegExp to warning message map).

[spectatorBH]

There's already a long standing discussion about possible UI redesign of uBlock0 to make it both more attractive and mobile-friendly (see gorhill#1890). Substantial work already has been done by @kazzkiq over there. Although the project seems to be put on hold now since @gorhill recently rejected a major redesign approach. So maybe you can cooperate with @kazzkiq or just pick up where he left off.

[jspenguin2017]

Great! I'll definitely keep that in mind!
Although I'm looking at a beautiful, animated, and modern Material Design, without worrying too much about RAM usage, but I still want it fast though. Light on CPU, reasonable on RAM.

I'm thinking of making it look like the Chrome settings page, but with always-open right-side navigation menu, and important buttons like update filters, apply, add filters on a fixed nav-bar. Also theme it pale red to fit Nano.

Nano's goal is to give users another choice between performance and power, I think this is an important step towards diversity. Thanks for your support!

[jspenguin2017]

I've been wanting to remake that ugly UI for a long time, this is the next thing on my TODO list!

[jspenguin2017]

I'm thinking to only support newer browsers for the new dashboard, if the user wants, he can always switch back to the old one. Basically Nano will have 2 dashboards and user can choose which one to use.
I'm thinking of renaming the tabs: Settings Filters Rules Whitelists Matrix About where Filters is 3p filters, Rules is My filters, Matrix is My rules.

[jspenguin2017]

After some planning, I think we have 3 choices:

• Go big, use Polymer
• Go for lightweight, maybe use my homegrown Paper Framework?
• Go with the existing design in that issue and style it for Nano

The problem with Polymer is that it's a pretty decent sized library, Chrome settings page uses it, I don't think it'll be a bottleneck.
How well Paper works is unknown, I didn't design it for Nano.
Go with the abandoned design might be a safer bet, but as there are a couple things I want to change (like how panel selection is handled) I'm not sure how good that'll be.

Update: I ended up going in between and used MDL.

[jspenguin2017]

Hum, doesn't look that good... I need to think about this.

[KonoromiHimaries]

soo big it is

[jspenguin2017]

What is too big?

[jspenguin2017]

Hum... maybe collapse it on scroll. could be hard though

[jspenguin2017]

Pink theme is way too bright, I'll change back to blue.

[KonoromiHimaries]

i think the desktop version can be better.

[jspenguin2017]

On desktop there are plenty of space, i don't think it's too big.

[jspenguin2017]

The 3 big buttons should be accessible now 👍

[FatOrangutan]

Curious why you swapped the positions of 'My matrix' and 'Whitelist?'

I think it makes sense to keep 'My rules' and 'My Matrix' together and to have 'Whitelist' as the last (configurable) tab on the page.

Also, not sure about renaming 3rd-party Filters to My Filters.

I like the way it looks though, especially on mobile, and it is great to see that the project is open to design improvements.

[jspenguin2017]

"My rules" in uBO only works for advanced users, it is less relevant and I think "My Matrix" is a better name for it, as matrix give a sense of complexity. Since it is less relevant to the average user, I moved it back.

The renaming is definitely debatable, if it is named like this since the beginning of uBO, renaming to "thrid-party filters" would be equally debatable. Got to make a decision eventually, since we are doing a full remake, I'll take the chance to change the wording that I think is awkward.

"My Filters" in the sense of "My Filters Subscription".

For the color theme it's a drop-in replacement since it uses MDL, further customization could actually be harder than I'd like, but well, we'll see.

[jspenguin2017]

The problem with tab bar is that it's actually really hard to use on Android, like 2 and half tabs fit on the screen, and you'll end up scrolling it a lot. I think this makes more sense.

It's really good on Android, but kind of weird on desktop...

[jspenguin2017]

OK, draft 5: Tab bar like before on desktop, drawer on Android.

[jspenguin2017]

Also, I will be folding old images to save bandwidth. Folded image won't auto-load.

The scrollbar should go away on real device.

[jspenguin2017]

[jspenguin2017]

Some settings will be moved, update filters is moved to settings tab and enforcing cosmetic filter will be moved to advanced tab.

My Rules tab, with configurable line wrap:

[elypter]

it would be cool if this would become a reusable library that can be adopted by other extensions or usescripts

[jspenguin2017]

The "reusable library" is called Material Design Lite, by Google. Beside that, really not much can be reused, the dashboard is specific to Nano.

[jspenguin2017]

The buttons are kind of hard to access on desktop, I'll add shortcut keys for desktop (like Ctrl+S for save), for Android, they should be pretty easy to access.

I'll put this on hold for now because it is taking lots of time, and I don't want to keep other features waiting for too long.