Replace Dashicons with gridicons in the format bar

[aforcier]

We should replace the dashicons with gridicons.

It may also be time to replace the HTML button with code tags, as the iOS editor already has:

cc @jasmussen

[aforcier]

This is also relevant to the iOS editor, cc @diegoreymendez

[aforcier]

Re: HTML mode button

On the other hand, keeping it as HTML is more consistent with the Calypso editor:

My vote is to leave it for now, I think @maxme is also in agreement.

[maxme]

My vote is to leave it for now, I think @maxme is also in agreement.

Yes, it's more explicit than the icon and doesn't take too much space.

[jasmussen]

Here's a zip file containing all the icons you should need.

3 colors, base, disabled and highlighted. SVG, vector drawables, and PNGs.

Note, the SVGs, share the same base grid size as Gridicons do, at 24dp. I'm assuming since they're vectors, you can easily upsize them to the 44dp size that the format icons appear to be using. On that note, have you considered using them in 48dp size instead? That would make the icons look crisper across all platforms.

format bar icons.zip

Please let me know if you need anything else.

Oh, also — this zip file also contains a new HTML icon, which as Maxime suggests literally spells out HTML, but in Roboto Condensed bold so it should be a bit nicer. I also included a "break link" icon, which it doesn't appear that you'll be using — nonetheless it's there should you need it.

[aforcier]

Thanks @jasmussen!

The new icons appear larger than the old ones, is that normal? Here's the format bar with just the bold button changed to a gridicon:

They're the same size, but the new ones have less padding:

(new | old)

[jasmussen]

Gotcha, thanks for the comparison! I'll add some more padding to the icons and get you a new set early next week. Do you have these in a branch? Maybe I can dust off my Android Studio and see it in action as I fix?

[aforcier]

Thanks! Here's my working branch with all the icons replaced with the ones you gave me: https://github.com/wordpress-mobile/WordPress-Editor-Android/tree/issue/370-dashicons-to-gridicons

[aforcier]

I'm looking into changing the icon size from 44dp to 48dp - I seem to recall that might have come up in the past. The problem is that in the past we tried to size the format bar so that it wouldn't need to be scrolled on phones of a certain size and up (the cut-off was 360dp, below that you get a scrollbar). Increasing the icon size would push that cut-off higher, and certain phones (I think the Nexus 4 was one of them) will get a scrollbar, which is a worse experience.

Here's the PR where a lot of these changes were laid out: #201

I'll do some more research into which phones would actually be affected by this change (and how popular they are now), maybe it's become a more viable option.

[jasmussen]

I'm looking into changing the icon size from 44dp to 48dp - I seem to recall that might have come up in the past. The problem is that in the past we tried to size the format bar so that it wouldn't need to be scrolled on phones of a certain size and up (the cut-off was 360dp, below that you get a scrollbar). Increasing the icon size would push that cut-off higher, and certain phones (I think the Nexus 4 was one of them) will get a scrollbar, which is a worse experience.

I did some more research, and found out the reason why the icon was an odd size, and why my icons were bigger than the dashicons. Turns out that was connected.

Turns out the the format buttons use a 36dp base icon, and then have 4dp padding! But the padding is baked into the icons themselves, instead of being in added as styles. I don't know what's better to do, but I know for sure this means you can ignore my comment about 48dp, because now the icons will be crisp, since the icon itself has a 36dp base that's being scaled (and 36dp is pixel-compatible with the 24dp grid).

I'm going to provide you TWO zips this time. One zip has icons without the 4dp padding, if you'd like to add the padding in XML instead. The other zip will be a drop-in replacement, where the 4dp padding is baked into the image. Stay tuned.

[jasmussen]

Alright, here's a new package:

visual editor icons, adjusted.zip

This pack contains two subfolders. One subfolder, padding not baked in has 36dp icons. These icons need 4dp padding around it. The math checks out:

xxhdpi = 3x = ( 36 * 3 ) + (3 * 4) + (3 * 4) = 132

So xxhdpi icons in that folder are 108px in dimensions. When you add 2x12 to that you get 132, which is the button size.

If it's arduous to add the padding as XML style, I included a folder, padding baked in that features icons with the padding baked in. These should be drop-in replacements, and visually correctly sized.

Old:

New:

[aforcier]

Turns out the the format buttons use a 36dp base icon, and then have 4dp padding! But the padding is baked into the icons themselves, instead of being in added as styles. I don't know what's better to do, but I know for sure this means you can ignore my comment about 48dp, because now the icons will be crisp, since the icon itself has a 36dp base that's being scaled (and 36dp is pixel-compatible with the 24dp grid).

Aha, mystery solved! Thanks for the new assets, I'll give them a spin and open up a PR with them when that's ready.