@mnapoli opened this Pull Request on August 5th 2015 Member

Fixes #7618

I have added the new font icons (TTF supported everywhere except IE8 + EOT for IE8 support). I have also replaced the usage of old icons. Sometimes instead of simply replacing the icons it made sense either to change the design a bit (e.g. all the user/site/goal/… "managers") or use standard UI elements (buttons, alerts, …). I haven't replaced all the icons used in Piwik (mostly because some are much harder), this can be achieved later in other pull requests.

And by the way the new icons look much better on retina ;) (not pixellized)

For reviewing the PR please checkout the branch: some design changes are better to test in a browser rather than in a screenshot, especially the buttons in the "managers" (user, site, goals, etc.).

Here are the diff screenshots: http://builds-artifacts.piwik.org/piwik/piwik/icons/14663/ You'll see that the square in the top-right has reappeared, and I don't remember what it is about and if it's a problem…

icons

@tsteur commented on August 13th 2015 Owner

just FYI: The square is usually there when there is an update. Rebasing might help

@tsteur commented on August 13th 2015 Owner
@mnapoli commented on August 13th 2015 Member

All those changes are deliberate :) Try it by pulling the branch locally, it's probably better to use it to see (hover, etc.).

To add more information on the red buttons, I've reused Piwik's default buttons (used everywhere else) for consistency (a consistent UI looks better and is easier to understand).

@mattab commented on August 13th 2015 Owner

Nice progress on icons @mnapoli!

Re: red buttons for adding "entities". Since Edit+Delete are not red buttons, it is better to be consistent in this case, and use the + icon with black text for "Create new %s". In general, the UI looks better with + icon + black text for these actions.

can you add back the "Edit" and "Delete" texts next to the icons?

@mnapoli commented on August 13th 2015 Member

@mattab have you tried it locally? I spent a lot of time to try and improve all those tables, removing this kind of redundancy using the new icons was one of the main change of this PR:

capture d ecran 2015-08-13 a 18 32 07

To this:

capture d ecran 2015-08-13 a 18 33 05

Using it isn't confusing at all: the table headers + hovering makes it really clear what such buttons do. And we are talking about the 2 most common buttons ever in a web app.

What I've tried with this PR is continue on the consistency effort by introducing new standard UI elements (like the flat buttons, icon buttons, …) and replace custom design with the existing and new standard UI components.

@mattab commented on August 13th 2015 Owner

good to hear it was all planned :-)

I checked the branch and it looks nice. I have couple feedback:

  • It's maybe not a problem to have the red buttons for adding entities... what do others think?
  • warning icon is misplaced in: warning icon
  • when the "info" alerts are displayed several time in page, eg. in Geo location settings, let's remove the bulb icons in these cases:

    many icons

What's left regarding adding icons, ie. which icons are left to be ported to the new ones? would be awesome to finish this in 2.15.0 :-)

@mnapoli commented on August 17th 2015 Member

warning icon is misplaced in:

Fixed

when the "info" alerts are displayed several time in page, eg. in Geo location settings, let's remove the bulb icons in these cases:

Fixed

@tsteur commented on August 19th 2015 Owner

I'm not sure if this was mentioned already but think it might look better to vertically align the icons in notifications/warnings on top and not in the middle.

I'd also prefer to not have the red buttons there.

What is otherwise left here? The text in edit/delete?

@mnapoli commented on August 19th 2015 Member

What is otherwise left here? The text in edit/delete?

What do you mean about edit/delete buttons?

it might look better to vertically align the icons in notifications/warnings on top and not in the middle.

edit: They are vertically aligned. It only aligns to the top in IE8 and PhantomJS.

@tsteur commented on August 19th 2015 Owner

edit: They are vertically aligned. It only aligns to the top in IE8 and PhantomJS.

sweet!

What do you mean about edit/delete buttons?

Matt asked: "can you add back the "Edit" and "Delete" texts next to the icons?" so I got a bit confused what the current state on this is. From what I understood it is meant to be removed and we do not want to add them back but I'm not sure if I got it right :)

@diosmosis commented on August 22nd 2015 Member

Looks good to merge after row evolution link / button thing is cleared up.

@mnapoli commented on August 24th 2015 Member

Restored the flat buttons for adding new entities, hopefully I didn't forget one.

@tsteur commented on August 24th 2015 Owner

is it safe to merge? I could use the icons right now :)

@mnapoli commented on August 24th 2015 Member

It's ready to be merged if changes are OK.

@diosmosis commented on August 24th 2015 Member

Is the row evolution 'pick row to compare' link still supposed to be a button? @mattab Can you clarify?

@mnapoli commented on August 24th 2015 Member

@diosmosis I just made them flat (i.e. removed red buttons), problem should be solved.

@diosmosis commented on August 24th 2015 Member

Follow up issue created here: https://github.com/piwik/piwik/issues/8632

This Pull Request was closed on August 24th 2015
Powered by GitHub Issue Mirror