New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
mnapoli opened this Issue Apr 2, 2015 · 29 comments

Comments

Projects
None yet
6 participants
@mnapoli
Contributor

mnapoli commented Apr 2, 2015

Currently icons in Piwik are not consistent and are implemented as images.

With the WIP of the redesign, we could take the opportunity to move towards font icons. Not doing this would mean either not using icons at all in redesigned parts, or using existing icons which don't fit well in it.

So we need a set of font icons.

The obvious solution IMO would be Bootstrap or even better, Font Awesome but it requires Bootstrap… (seem to be usable without Bootstrap, related to #7390)

Thoughts?

@mnapoli mnapoli added this to the Piwik 2.13.0 milestone Apr 2, 2015

@mattab

This comment has been minimized.

Show comment
Hide comment
@mattab

mattab Apr 2, 2015

Member

Nice idea. Added value to (a very small set of our) users is that it would make icons themable eg. when they use custom theme or the White Label plugin - also would save us from creating several icon sizes of the same icon (though we don't do this often).

Not doing this would mean either not using icons at all in redesigned parts or using existing icons which don't fit well in it.

we've redesigned Piwik twice before and it wasn't an issue to use image icons. for this redesign we can still use image icons like we do already consistently within Piwik... if/when icons don't fit well in new design, we should ask designers to create new icons. (that's not an issue at all)

The obvious solution IMO would be Bootstrap or even better, Font Awesome but it requires Bootstrap…

It's not that obvious: these sets don't have all icons we need... so we will need to design or improve those icon sets to create new icons. imho it's lots of extra work and out of scope for our Redesign project in #7585

Member

mattab commented Apr 2, 2015

Nice idea. Added value to (a very small set of our) users is that it would make icons themable eg. when they use custom theme or the White Label plugin - also would save us from creating several icon sizes of the same icon (though we don't do this often).

Not doing this would mean either not using icons at all in redesigned parts or using existing icons which don't fit well in it.

we've redesigned Piwik twice before and it wasn't an issue to use image icons. for this redesign we can still use image icons like we do already consistently within Piwik... if/when icons don't fit well in new design, we should ask designers to create new icons. (that's not an issue at all)

The obvious solution IMO would be Bootstrap or even better, Font Awesome but it requires Bootstrap…

It's not that obvious: these sets don't have all icons we need... so we will need to design or improve those icon sets to create new icons. imho it's lots of extra work and out of scope for our Redesign project in #7585

@mnapoli

This comment has been minimized.

Show comment
Hide comment
@mnapoli

mnapoli Apr 2, 2015

Contributor

these sets don't have all icons we need...

Could you please explain this?

I did a POC by searching for all Morpheus icons from A to I (~ half the page) and could find a replacement in Font Awesome every time. I have ignored non-icons (background fading strips), maybe 2-3 of them. Yes this folder doesn't contain all piwik icons, but 100% on that sample is a pretty good result.

And in any case, I don't suggest we remove existing icons (yet). As for new icons, in any case we would have to create new icons anyway (except if we have font icons we have a great chance to already have it, which saves us some time).

for this redesign we can still use image icons like we do already consistently within Piwik...

Some of those old icons are not consistent with the new design, that's the problem I initially said. I can use these but it won't look as good as the screens we have been sent.

if/when icons don't fit well in new design, we should ask designers to create new icons. (that's not an issue at all)

Using a standard lib is not an issue at all too. Especially when it comes with numerous advantages, and also it replaces deprecated practices with better ones which is good for Piwik on the long term (by deprecated I mean there is a better way).

imho it's lots of extra work

Could you please explain this?

Contributor

mnapoli commented Apr 2, 2015

these sets don't have all icons we need...

Could you please explain this?

I did a POC by searching for all Morpheus icons from A to I (~ half the page) and could find a replacement in Font Awesome every time. I have ignored non-icons (background fading strips), maybe 2-3 of them. Yes this folder doesn't contain all piwik icons, but 100% on that sample is a pretty good result.

And in any case, I don't suggest we remove existing icons (yet). As for new icons, in any case we would have to create new icons anyway (except if we have font icons we have a great chance to already have it, which saves us some time).

for this redesign we can still use image icons like we do already consistently within Piwik...

Some of those old icons are not consistent with the new design, that's the problem I initially said. I can use these but it won't look as good as the screens we have been sent.

if/when icons don't fit well in new design, we should ask designers to create new icons. (that's not an issue at all)

Using a standard lib is not an issue at all too. Especially when it comes with numerous advantages, and also it replaces deprecated practices with better ones which is good for Piwik on the long term (by deprecated I mean there is a better way).

imho it's lots of extra work

Could you please explain this?

@mattab

This comment has been minimized.

Show comment
Hide comment
@mattab

mattab Apr 2, 2015

Member

these sets don't have all icons we need...

likely I under-estimated fontawesome. I took quick look and it seems very complete...

Using a standard lib is not an issue at all too.

If we're talking about http://fortawesome.github.io/Font-Awesome/icons/ in particular, then +1 to consider the idea seriously. This decision to use a given iconset is next for designers who are responsible to make Piwik look great. so maybe we ask them if they would consider using FontAwesome (for new icons and/or for existing ones)?

One consequence is that it would make Piwik "look like" many other apps which use this icon set (this may not be an issue considering the benefits and if designers find it looks good).

Some of those old icons are not consistent with the new design

Good point - if we don't use an icon set, we should at least design those old icons to look good with new themes. if we dont use fontawesome, then we should create a list of those "not good looking icons" and put them in a new issue and i'll follow up there with designers to get consistent icons designed.

Member

mattab commented Apr 2, 2015

these sets don't have all icons we need...

likely I under-estimated fontawesome. I took quick look and it seems very complete...

Using a standard lib is not an issue at all too.

If we're talking about http://fortawesome.github.io/Font-Awesome/icons/ in particular, then +1 to consider the idea seriously. This decision to use a given iconset is next for designers who are responsible to make Piwik look great. so maybe we ask them if they would consider using FontAwesome (for new icons and/or for existing ones)?

One consequence is that it would make Piwik "look like" many other apps which use this icon set (this may not be an issue considering the benefits and if designers find it looks good).

Some of those old icons are not consistent with the new design

Good point - if we don't use an icon set, we should at least design those old icons to look good with new themes. if we dont use fontawesome, then we should create a list of those "not good looking icons" and put them in a new issue and i'll follow up there with designers to get consistent icons designed.

@mnapoli

This comment has been minimized.

Show comment
Hide comment
@mnapoli

mnapoli Apr 2, 2015

Contributor

+1 let's ask what they think of the idea so that we can have a different voice on this

For now I have not used icons: the main problem (beside whether it's "good looking" or not) is that they mess up the alignment, i.e. they are not aligned with the text, cause the alert to be much bigger and not have consistent margins, etc.. As you can see in the screenshots not using icons is not too much critical for a first version maybe? (i.e. this issue can be delayed a little if necessary?)

Contributor

mnapoli commented Apr 2, 2015

+1 let's ask what they think of the idea so that we can have a different voice on this

For now I have not used icons: the main problem (beside whether it's "good looking" or not) is that they mess up the alignment, i.e. they are not aligned with the text, cause the alert to be much bigger and not have consistent margins, etc.. As you can see in the screenshots not using icons is not too much critical for a first version maybe? (i.e. this issue can be delayed a little if necessary?)

@mnapoli mnapoli modified the milestones: Short term, Piwik 2.13.0 Apr 2, 2015

@tsteur

This comment has been minimized.

Show comment
Hide comment
@tsteur

tsteur Apr 8, 2015

Member

I reckon we're excluding icons that are returned in APIs? Like browser, OS, ... ? They are used eg in Piwik Mobile as well. They have to be images for the mobile app.

At some point it makes probably sense to switch to something like FontAwesome if designers are ok with it. Good point to involve them. I reckon we're not talking about whether it makes sense to use it or not but rather about the priority and importance of it compared to other opened issues? Used FontAwesome in past projects as well and it works (eg on developer.piwik.org). It definitely has advantages but the current version is maybe ok for now too (if there are no major changes in the UI anyway maybe)?

Would we have to create a font for icons that are not present there? Such as maybe http://demo.piwik.org/plugins/Live/images/visitorlog.png ? Might be important to let designers know they'd have to do that.

I reckon we'd also have to leave the old images there in case plugins use them? Also I think we do allow / support overwriting icons in themes meaning we probably have to list new/changed/removed icons in the changelog etc? Just a random thought, different topic!

Member

tsteur commented Apr 8, 2015

I reckon we're excluding icons that are returned in APIs? Like browser, OS, ... ? They are used eg in Piwik Mobile as well. They have to be images for the mobile app.

At some point it makes probably sense to switch to something like FontAwesome if designers are ok with it. Good point to involve them. I reckon we're not talking about whether it makes sense to use it or not but rather about the priority and importance of it compared to other opened issues? Used FontAwesome in past projects as well and it works (eg on developer.piwik.org). It definitely has advantages but the current version is maybe ok for now too (if there are no major changes in the UI anyway maybe)?

Would we have to create a font for icons that are not present there? Such as maybe http://demo.piwik.org/plugins/Live/images/visitorlog.png ? Might be important to let designers know they'd have to do that.

I reckon we'd also have to leave the old images there in case plugins use them? Also I think we do allow / support overwriting icons in themes meaning we probably have to list new/changed/removed icons in the changelog etc? Just a random thought, different topic!

@mnapoli

This comment has been minimized.

Show comment
Hide comment
@mnapoli

mnapoli Apr 8, 2015

Contributor

For the example of the visitor log I don't think we need to find an exact match for new icons but instead think of what we want to show. The current visitor log icon is but we could use any user/profile kind of icon. We can also stack icons (and of course change colors), here is a quick and dirty example by stacking 2 icons:

capture d ecran 2015-04-08 a 22 03 23

Contributor

mnapoli commented Apr 8, 2015

For the example of the visitor log I don't think we need to find an exact match for new icons but instead think of what we want to show. The current visitor log icon is but we could use any user/profile kind of icon. We can also stack icons (and of course change colors), here is a quick and dirty example by stacking 2 icons:

capture d ecran 2015-04-08 a 22 03 23

@mnapoli

This comment has been minimized.

Show comment
Hide comment
@mnapoli

mnapoli Apr 8, 2015

Contributor

about the priority and importance of it compared to other opened issues?

I don't think "using font icons" will ever be something of high importance, but I don't think it means we should dismiss it. We don't have anything particularly major going on, still "fixing issues & improving performance" as usual. If we don't do it during a redesign, then there's no better time. One other thing is that if we don't use font icons now then designers have to create image icons for the new icons of the redesigns + we have to integrate them (sometimes less easy than font icons) etc.

Contributor

mnapoli commented Apr 8, 2015

about the priority and importance of it compared to other opened issues?

I don't think "using font icons" will ever be something of high importance, but I don't think it means we should dismiss it. We don't have anything particularly major going on, still "fixing issues & improving performance" as usual. If we don't do it during a redesign, then there's no better time. One other thing is that if we don't use font icons now then designers have to create image icons for the new icons of the redesigns + we have to integrate them (sometimes less easy than font icons) etc.

@mattab

This comment has been minimized.

Show comment
Hide comment
@mattab

mattab Apr 8, 2015

Member

I reckon we're excluding icons that are returned in APIs? Like browser, OS, ... ? They are used eg in Piwik Mobile as well. They have to be images for the mobile app.

yes those browser/device/country flags/etc. icons are not included in the scope of using fontawesome. those would be at first only "Piwik app" icons

I reckon we'd also have to leave the old images there in case plugins use them?

+1

Next step for this RFC: we'll involve designers and should have more feedback in next few weeks 👍

Member

mattab commented Apr 8, 2015

I reckon we're excluding icons that are returned in APIs? Like browser, OS, ... ? They are used eg in Piwik Mobile as well. They have to be images for the mobile app.

yes those browser/device/country flags/etc. icons are not included in the scope of using fontawesome. those would be at first only "Piwik app" icons

I reckon we'd also have to leave the old images there in case plugins use them?

+1

Next step for this RFC: we'll involve designers and should have more feedback in next few weeks 👍

@mnapoli

This comment has been minimized.

Show comment
Hide comment
@mnapoli

mnapoli May 28, 2015

Contributor

For the record we are waiting on an Piwik icon set developed by designers.

Contributor

mnapoli commented May 28, 2015

For the record we are waiting on an Piwik icon set developed by designers.

@tsteur

This comment has been minimized.

Show comment
Hide comment
@tsteur

tsteur Jun 15, 2015

Member

Do you maybe know if there is any timeline for that icon set?

Member

tsteur commented Jun 15, 2015

Do you maybe know if there is any timeline for that icon set?

@Globulopolis

This comment has been minimized.

Show comment
Hide comment
@Globulopolis

Globulopolis Jun 15, 2015

Contributor

Can we update the DevicePlugins icons too? Currently they are all have a not transparent background and looks ugly in black tooltip in visitor log. I think better to create them in png format with transparent background.

Contributor

Globulopolis commented Jun 15, 2015

Can we update the DevicePlugins icons too? Currently they are all have a not transparent background and looks ugly in black tooltip in visitor log. I think better to create them in png format with transparent background.

@mnapoli

This comment has been minimized.

Show comment
Hide comment
@mnapoli

mnapoli Jun 15, 2015

Contributor

@tsteur the timeline given by the designer team has long been passed :/ I'll send them another email

Contributor

mnapoli commented Jun 15, 2015

@tsteur the timeline given by the designer team has long been passed :/ I'll send them another email

@tsteur

This comment has been minimized.

Show comment
Hide comment
@tsteur

tsteur Jun 15, 2015

Member

Cheers. Do you know if it will be a font? Are you waiting on it?

If we don't get it soon enough I'd say we just use an alternative. I reckon we won't often have such cases where we actually need a new icon after the initial icon pack. I hope it won't take more than 5 days or so to get new icons (not a whole pack) in the future, otherwise it might be better to just use an alternative

Member

tsteur commented Jun 15, 2015

Cheers. Do you know if it will be a font? Are you waiting on it?

If we don't get it soon enough I'd say we just use an alternative. I reckon we won't often have such cases where we actually need a new icon after the initial icon pack. I hope it won't take more than 5 days or so to get new icons (not a whole pack) in the future, otherwise it might be better to just use an alternative

@mnapoli

This comment has been minimized.

Show comment
Hide comment
@mnapoli

mnapoli Jun 15, 2015

Contributor

Yes it will be a font (and the package should also contain SVGs + generated PNGs), waiting for the font (apparently the icons are done). FYI the icon set is based on the icons made for piwik.org so the idea is to be consistent between the website and the app (which is a good idea in theory). I agree though that we should be ready to go with an alternative if it gets delayed more.

I don't know all the Less features but there's maybe a way to bulk-alias CSS classes. That way we could use another icon set (e.g. font awesome) and bulk-alias the CSS classes we want (e.g. icon-…) to the font-awesome classes (fa-…). Later we can change (or remove) the aliases to switch to another icon set. Anyway, might be possible, that way we are not locked.

Contributor

mnapoli commented Jun 15, 2015

Yes it will be a font (and the package should also contain SVGs + generated PNGs), waiting for the font (apparently the icons are done). FYI the icon set is based on the icons made for piwik.org so the idea is to be consistent between the website and the app (which is a good idea in theory). I agree though that we should be ready to go with an alternative if it gets delayed more.

I don't know all the Less features but there's maybe a way to bulk-alias CSS classes. That way we could use another icon set (e.g. font awesome) and bulk-alias the CSS classes we want (e.g. icon-…) to the font-awesome classes (fa-…). Later we can change (or remove) the aliases to switch to another icon set. Anyway, might be possible, that way we are not locked.

@tsteur

This comment has been minimized.

Show comment
Hide comment
@tsteur

tsteur Jun 15, 2015

Member

Hope we'll get more information soon how long it will take. Otherwise just let's use something else

Member

tsteur commented Jun 15, 2015

Hope we'll get more information soon how long it will take. Otherwise just let's use something else

@mattab

This comment has been minimized.

Show comment
Hide comment
@mattab

mattab Jun 15, 2015

Member

ping @lemu

Member

mattab commented Jun 15, 2015

ping @lemu

@tsteur

This comment has been minimized.

Show comment
Hide comment
@tsteur

tsteur Jul 6, 2015

Member

Another alternative might be to use material design icons (750+) since we have some elements of material design already in our UI https://www.google.com/design/icons/ http://google.github.io/material-design-icons/

Member

tsteur commented Jul 6, 2015

Another alternative might be to use material design icons (750+) since we have some elements of material design already in our UI https://www.google.com/design/icons/ http://google.github.io/material-design-icons/

@Fensterbank

This comment has been minimized.

Show comment
Hide comment
@Fensterbank

Fensterbank Jul 7, 2015

Contributor

if there will be more delay, 👍 for the implementation of FontAwesome. It's very popular, has a consistent look and useful features (stacked icons, spin icons).
I use it in many web applications.

If another icon set (google material design ^) will be used, I prefer the usage of an icon font over oldschool images.

Contributor

Fensterbank commented Jul 7, 2015

if there will be more delay, 👍 for the implementation of FontAwesome. It's very popular, has a consistent look and useful features (stacked icons, spin icons).
I use it in many web applications.

If another icon set (google material design ^) will be used, I prefer the usage of an icon font over oldschool images.

@tsteur

This comment has been minimized.

Show comment
Hide comment
@tsteur

tsteur Jul 8, 2015

Member

Just FYI: The material design icons are available as font as well

Member

tsteur commented Jul 8, 2015

Just FYI: The material design icons are available as font as well

@lemu

This comment has been minimized.

Show comment
Hide comment
@lemu

lemu Jul 10, 2015

Hey, try our propositions first. Sorry for the delay, that was low priority for us and got pushed back.

https://www.dropbox.com/s/u5gqzz7dr460wju/%21Piwik%20Icon%20Set.zip?dl=0

lemu commented Jul 10, 2015

Hey, try our propositions first. Sorry for the delay, that was low priority for us and got pushed back.

https://www.dropbox.com/s/u5gqzz7dr460wju/%21Piwik%20Icon%20Set.zip?dl=0

@mattab

This comment has been minimized.

Show comment
Hide comment
@mattab

mattab Jul 12, 2015

Member

Thank you @lemu for the icon set!

We will check it out and try to integrate it in Piwik for next release 2.15.0.

cc @mnapoli

Member

mattab commented Jul 12, 2015

Thank you @lemu for the icon set!

We will check it out and try to integrate it in Piwik for next release 2.15.0.

cc @mnapoli

@mattab mattab modified the milestones: 2.15.0, Short term Jul 12, 2015

@Fensterbank

This comment has been minimized.

Show comment
Hide comment
@Fensterbank

Fensterbank Jul 13, 2015

Contributor

Great! I'm looking forward to see them in one of the next versions.

Contributor

Fensterbank commented Jul 13, 2015

Great! I'm looking forward to see them in one of the next versions.

@mnapoli

This comment has been minimized.

Show comment
Hide comment
@mnapoli

mnapoli Jul 20, 2015

Contributor

@lemu thanks, a feedback: the icon names are rather redundant, e.g. icon-ico_maximise or even icon-ico_ico_edit. A simpler pattern like icon-edit might be better.

Also there are duplicate icons, I guess it's because it's a WIP version?

Contributor

mnapoli commented Jul 20, 2015

@lemu thanks, a feedback: the icon names are rather redundant, e.g. icon-ico_maximise or even icon-ico_ico_edit. A simpler pattern like icon-edit might be better.

Also there are duplicate icons, I guess it's because it's a WIP version?

@lemu

This comment has been minimized.

Show comment
Hide comment
@lemu

lemu Jul 20, 2015

Can you get me a list of proposed changes, so we can go trough it?

lemu commented Jul 20, 2015

Can you get me a list of proposed changes, so we can go trough it?

@mnapoli

This comment has been minimized.

Show comment
Hide comment
@mnapoli

mnapoli Jul 20, 2015

Contributor

In short drop the ico_ prefixes (i.e. use icon- as the only prefix). So for example icon-ico_maximise becomes icon-maximise. Is that what you asked about?

Contributor

mnapoli commented Jul 20, 2015

In short drop the ico_ prefixes (i.e. use icon- as the only prefix). So for example icon-ico_maximise becomes icon-maximise. Is that what you asked about?

@lemu

This comment has been minimized.

Show comment
Hide comment
@lemu

lemu Jul 20, 2015

That's doable. Probably some setting in font generator.

What icon's did you found that are a duplicate?

lemu commented Jul 20, 2015

That's doable. Probably some setting in font generator.

What icon's did you found that are a duplicate?

@mnapoli

This comment has been minimized.

Show comment
Hide comment
@mnapoli

mnapoli Jul 21, 2015

Contributor

Duplicated icons:

capture d ecran 2015-07-21 a 07 31 21

capture d ecran 2015-07-21 a 07 31 32

capture d ecran 2015-07-21 a 07 31 59

Also it would be great to be consistent on the naming, here are the naming patterns I've seen:

  • underscores: icon-ico_datepicker_arr_r
  • dash: icon-ico_open-source
  • camelCase: icon-ico_ecommerceAbandonedCart

It would be good to use only the dash as separators, that would be consistent with most practices in HTML/CSS frameworks (e.g. Bootstrap).

Contributor

mnapoli commented Jul 21, 2015

Duplicated icons:

capture d ecran 2015-07-21 a 07 31 21

capture d ecran 2015-07-21 a 07 31 32

capture d ecran 2015-07-21 a 07 31 59

Also it would be great to be consistent on the naming, here are the naming patterns I've seen:

  • underscores: icon-ico_datepicker_arr_r
  • dash: icon-ico_open-source
  • camelCase: icon-ico_ecommerceAbandonedCart

It would be good to use only the dash as separators, that would be consistent with most practices in HTML/CSS frameworks (e.g. Bootstrap).

mnapoli added a commit that referenced this issue Aug 5, 2015

Import new icons proposed in #7618
The new icons are done using web fonts. They have been added to the UI demo page.

@mnapoli mnapoli self-assigned this Aug 5, 2015

@mnapoli mnapoli referenced this issue Aug 5, 2015

Merged

Update icons #8488

@mattab mattab referenced this issue Aug 5, 2015

Closed

Refresh Piwik design and interface #7585

10 of 10 tasks complete
@mnapoli

This comment has been minimized.

Show comment
Hide comment
@mnapoli

mnapoli Aug 13, 2015

Contributor

PR: #8488

Contributor

mnapoli commented Aug 13, 2015

PR: #8488

@diosmosis diosmosis closed this in #8488 Aug 24, 2015

diosmosis added a commit that referenced this issue Aug 24, 2015

Merge pull request #8488 from piwik/icons
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.

@mattab mattab changed the title from Update icons in Piwik to Update some of UI icons with new set of font icons Oct 13, 2015

@tsteur

This comment has been minimized.

Show comment
Hide comment
@tsteur

tsteur Feb 23, 2016

Member

FYI: GitHub just moved from font icons to SVG and explained it here: https://github.com/blog/2112-delivering-octicons-with-svg

Member

tsteur commented Feb 23, 2016

FYI: GitHub just moved from font icons to SVG and explained it here: https://github.com/blog/2112-delivering-octicons-with-svg

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment