Update icons #8488

mnapoli · 2015-08-05T10:16:56Z

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…

The new icons are done using web fonts. They have been added to the UI demo page.

This new method (should) work on PhantomJS (as well as all browser), and should fallback to something correct on IE8.

For example simplify user manager, site manager, reports manager, etc.

It's much easier to read and discover them.

… demo

Form inline helps are based on "info" alerts, but the icon is too heavy in forms.

tsteur · 2015-08-13T15:44:46Z

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

tsteur · 2015-08-13T15:57:11Z

This here looks broken: http://builds-artifacts.piwik.org/piwik/piwik/icons/14663/MeasurableManager_loaded . Same here http://builds-artifacts.piwik.org/piwik/piwik/icons/14663/SitesManager_loaded , http://builds-artifacts.piwik.org/piwik/piwik/icons/14663/MeasurableManager_add_measurable_view etc

Is the left margin supposed to be there? http://builds-artifacts.piwik.org/piwik/piwik/icons/14663/RowEvolution_row_evolution

Is it normal that we use a red button for "adding entity" now (seen this in a few screenshot diffs)? http://builds-artifacts.piwik.org/piwik/piwik/icons/14663/UIIntegrationTest_admin_manage_users

Edit / delete button look a bit weird similar to sitesManager: http://builds-artifacts.piwik.org/piwik/piwik/icons/14663/UIIntegrationTest_admin_manage_users , http://builds-artifacts.piwik.org/piwik/piwik/icons/14663/UIIntegrationTest_email_reports , http://builds-artifacts.piwik.org/piwik/piwik/icons/14663/UIIntegrationTest_goals_manage

Is the icon here a bit smaller and further away from the text box? http://builds-artifacts.piwik.org/piwik/piwik/icons/14663/UIIntegrationTest_admin_settings_general

mnapoli · 2015-08-13T16:22:20Z

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 · 2015-08-13T16:29:25Z

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 · 2015-08-13T16:49:16Z

@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:

To this:

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 · 2015-08-13T17:08:02Z

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:
when the "info" alerts are displayed several time in page, eg. in Geo location settings, let's remove the bulb icons in these cases:

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 · 2015-08-17T12:07:45Z

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 · 2015-08-19T09:52:33Z

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 · 2015-08-19T12:38:59Z

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 · 2015-08-19T13:48:44Z

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 · 2015-08-22T16:37:12Z

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

mnapoli · 2015-08-24T10:24:35Z

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

tsteur · 2015-08-24T12:47:28Z

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

mnapoli · 2015-08-24T12:50:48Z

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

diosmosis · 2015-08-24T14:33:31Z

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

mnapoli · 2015-08-24T15:09:53Z

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

Fixes #7618, add new icons to Piwik & use where appropriate. Also includes slight re-designs to entity management tables & a new CSS API using the icons easily.

diosmosis · 2015-08-24T17:08:01Z

Follow up issue created here: #8632

mnapoli added 3 commits August 5, 2015 11:42

Import new icons proposed in #7618

61a282d

The new icons are done using web fonts. They have been added to the UI demo page.

Reorganize icons in the UI demo for better readability

be31fa1

Apply new icons to the UI alerts

1d99307

mnapoli added Pull Request WIP Indicates the current pull request is still work in progress and not ready yet for a review. c: Design / UI For issues that impact Matomo's user interface or the design overall. labels Aug 5, 2015

mnapoli self-assigned this Aug 5, 2015

mnapoli added this to the 2.15.0 milestone Aug 5, 2015

mnapoli added 18 commits August 5, 2015 13:34

Vertically align icons in alerts

0933ce6

Vertically align icons in alerts

6a7c6f2

This new method (should) work on PhantomJS (as well as all browser), and should fallback to something correct on IE8.

Use new icons and simplify "manager" tables

d57e683

For example simplify user manager, site manager, reports manager, etc.

User new icons in widget headers

256631c

Display icons organized by categories in the UI demo

1e30ec0

It's much easier to read and discover them.

Change the icon used for maximising widgets

e9ffbea

Remove duplicated and useless icons

70ba217

Sort icons alphabetically in CSS since they are categorized in the UI…

46576c3

… demo

Use new icons in report headers

4512cee

Use new icons in table reports help

6c12b3f

Use new help icon in visitor profile + simplify Less rules

ce2ebe0

Use new icon and improve the design of the "invalid host" warning

d9dcf4e

Use new help icon in overlay + Less simplification

a9cf57a

Use standard buttons and alerts instead of and old icons and custom CSS

3feca42

Removed unused CSS class

6761146

Use new icons in the system check legend of the installation

0b670fa

Use new icon in the update notifier

55d8815

Remove "info" icons in form inline helps

6c3ff28

Form inline helps are based on "info" alerts, but the icon is too heavy in forms.

mnapoli added Needs Review PRs that need a code review and removed Pull Request WIP Indicates the current pull request is still work in progress and not ready yet for a review. labels Aug 10, 2015

mnapoli mentioned this pull request Aug 13, 2015

Update some of UI icons with new set of font icons #7618

Closed

mnapoli removed their assignment Aug 17, 2015

mnapoli added 2 commits August 17, 2015 13:55

Use the form-help class in the UserCountry settings

eff436f

Fix the display of the notification boxes

59852ee

mnapoli added 2 commits August 23, 2015 21:47

Flat buttons for adding new entities

5b2b623

Restore the old icons for downloads

b720f96

"Pick a row to compare" buttons are now flat

7cea004

Re-add removed double arrow for pick row links in row evolution popups.

ea523a8

diosmosis added a commit that referenced this pull request Aug 24, 2015

Merge pull request #8488 from piwik/icons

7de45e6

Fixes #7618, add new icons to Piwik & use where appropriate. Also includes slight re-designs to entity management tables & a new CSS API using the icons easily.

diosmosis merged commit 7de45e6 into master Aug 24, 2015

diosmosis deleted the icons branch August 24, 2015 17:00

diosmosis mentioned this pull request Aug 24, 2015

Icon update follow up issue: clarify row evolution row compare button/link design #8632

Closed

diosmosis pushed a commit that referenced this pull request Aug 24, 2015

Update screenshots for #8488

7bb75e8

diosmosis pushed a commit that referenced this pull request Aug 24, 2015

https://github.com/piwik/piwik/pull/8488

8587b26

tsteur mentioned this pull request Oct 15, 2015

Icons placed wrong in multi line notifications #9011

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update icons #8488

Update icons #8488

mnapoli commented Aug 5, 2015

tsteur commented Aug 13, 2015

tsteur commented Aug 13, 2015

mnapoli commented Aug 13, 2015

mattab commented Aug 13, 2015

mnapoli commented Aug 13, 2015

mattab commented Aug 13, 2015

mnapoli commented Aug 17, 2015

tsteur commented Aug 19, 2015

mnapoli commented Aug 19, 2015

tsteur commented Aug 19, 2015

diosmosis commented Aug 22, 2015

mnapoli commented Aug 24, 2015

tsteur commented Aug 24, 2015

mnapoli commented Aug 24, 2015

diosmosis commented Aug 24, 2015

mnapoli commented Aug 24, 2015

diosmosis commented Aug 24, 2015

Update icons #8488

Update icons #8488

Conversation

mnapoli commented Aug 5, 2015

tsteur commented Aug 13, 2015

tsteur commented Aug 13, 2015

mnapoli commented Aug 13, 2015

mattab commented Aug 13, 2015

mnapoli commented Aug 13, 2015

mattab commented Aug 13, 2015

mnapoli commented Aug 17, 2015

tsteur commented Aug 19, 2015

mnapoli commented Aug 19, 2015

tsteur commented Aug 19, 2015

diosmosis commented Aug 22, 2015

mnapoli commented Aug 24, 2015

tsteur commented Aug 24, 2015

mnapoli commented Aug 24, 2015

diosmosis commented Aug 24, 2015

mnapoli commented Aug 24, 2015

diosmosis commented Aug 24, 2015