Skip to content
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

updated browser and os icons #11063

Merged
merged 18 commits into from Jan 5, 2017
Merged

Conversation

Findus23
Copy link
Member

@Findus23 Findus23 commented Dec 21, 2016

Pull request as mentioned in #10587. (#9292)
from https://github.com/Findus23/device-icons

Example of changes: http://builds-artifacts.piwik.org/piwik/piwik/3.x-dev/21561/UIIntegrationTest_visitors_software.png

The following icons are missing:

  • 'AB' => 'ABrowse' X
  • 'AF' => 'ANT Fresco'
  • 'BX' => 'BrowseX' X
  • 'CS' => 'Cheshire'
  • 'DB' => 'dbrowser'
  • 'DO' => 'Dorado'
  • 'EB' => 'Element Browser'
  • 'ES' => 'Espial TV Browser' X
  • 'KP' => 'Kapiko' X
  • 'LS' => 'Lunascape' X
  • 'LU' => 'LuaKit'
  • 'MU' => 'MIUI Browser' X
  • 'NF' => 'NetFront' X
  • 'NP' => 'NetPositive' X
  • 'OD' => 'Odyssey Web Browser'
  • 'OR' => 'Oregano' X
  • 'PO' => 'Polaris' X
  • 'SC' => 'SEMC-Browser'
  • 'SN' => 'Snowshoe'
  • 'SR' => 'Sunrise'
  • 'TZ' => 'Tizen Browser' X
  • 'VB' => 'Vision Mobile Browser'
  • 'WO' => 'wOSBrowser' X
  • 'WT' => 'WeTab Browser'
  • 'XI' => 'Xiino'

The following icons could be improved

  • 'IB' => 'IBrowse' (text over image) X
  • 'KI' => 'Kindle Browser' (official logo just text) X
  • 'MX' => 'Maxthon' (maybe outdated) X
  • 'NB' => 'Nokia Browser' (not sure if it is correct) X
  • 'ON' => 'Opera Next' (Opera Next is now called Opera Beta) X

(X -> There is an icon in Piwik)

Update:

I also updated the os icons:

Missing:

  • Brew
  • MTK / Nucleus
  • WebTV

Hard to recognize:

  • HP-UX
  • Solaris
  • MeeGo
  • PlayStation *
  • Symbian *
  • WebOS

I am unsure about MacOS and iOS. The official iOS Logo is hard to read, so I only used the Text.
Should I use the latest MacOS logo, the old but distinctive logo or just the apple logo?

@Findus23 Findus23 changed the title [WIP] updated browser-icons [WIP] updated browser and os icons Dec 22, 2016
@mattab
Copy link
Member

mattab commented Dec 26, 2016

The new icons look really great. Awesome!

As we wouldn't want to lose some icons, we should not remove any icon that was there before. Could you add back those low res icons as PNG? Then I think we can merge. Or did you want to do more work before we merge?

@mattab mattab added this to the 3.0.1 milestone Dec 26, 2016
@mattab mattab added c: Design / UI For issues that impact Matomo's user interface or the design overall. Pull Request WIP Indicates the current pull request is still work in progress and not ready yet for a review. labels Dec 26, 2016
@Findus23
Copy link
Member Author

I now have added the previous icons (and changed the macOS-icon)

I'm currently working on newer Referrers-icons, but I'll probably create a new pull request.

What about the (obviously) failing tests?

@Findus23 Findus23 changed the title [WIP] updated browser and os icons updated browser and os icons Dec 26, 2016
@mattab
Copy link
Member

mattab commented Dec 26, 2016

What about the (obviously) failing tests?

Don't worry about the tests we'll fix them at the end or after merging

@mattab
Copy link
Member

mattab commented Dec 26, 2016

@Findus23 sounds good to create separate PR for referrers icons, will make it slightly easier for us too

Do you know if we could maybe find a s sharper icon for Firefox icon? i'm not too sure but it looks like a bit blurry in http://builds-artifacts.piwik.org/piwik/piwik/3.x-dev/21604/processed/UIIntegrationTest_visitors_software.png

@Findus23
Copy link
Member Author

sharper icon for Firefox icon

I am using https://github.com/Findus23/device-icons/blob/master/src/DevicesDetection/images/browsers/FF.png which is a png of the latest svg from Wikipedia Commons.

I think the effect is because I am using the new logo which is "flatter" than the older ones:
test
(from https://www.mozilla.org/en-US/styleguide/identity/firefox/branding/)

@mattab
Copy link
Member

mattab commented Dec 26, 2016

@Findus23 maybe the algorithm used in the image downsizing could participate in the blurriness as well. i've noticed in the past huge differences in quality depending on how the scaling down is done. Do you know if there are several algorithms available in your script (eg. bicubic / sinc / lanczos /etc. I think would be interesting to try a few different ones and pick the one that generates clearer icons for 16px size?

@Findus23
Copy link
Member Author

That's a good Idea.
As I am using ImageMagick there are hundreds of ways to change the algorithm so I'll need to do some testing.

@mattab
Copy link
Member

mattab commented Dec 26, 2016

@Findus23

Ok good to know. i'm sure with imagick we could get a great end result.

pngquant -f --ext .png -s 1 --skip-if-larger --quality 70-95 "$distFile"

do you know why this line is in the script? probably would be good to use a lossless algorithm 👍

@Findus23
Copy link
Member Author

probably would be good to use a lossless algorithm

At first I was using optipng -o 9 -q "$distFile" (which is lossless) but with https://github.com/Findus23/device-icons/commit/c1e46fd9dc210ad3c6608d90aa9a4f9cd47825f0 and
911f623 I changed it to pngquant as it produces even smaller files and I wasn't able to see a difference.

But I don't mind going back to optipng as a few KB more or less are not that important.

@mattab
Copy link
Member

mattab commented Dec 26, 2016

also can't see a difference on the first few icons that github shows the visual diff, likely the biggest factor is the imagick algorithm 👍

@Findus23
Copy link
Member Author

Findus23 commented Dec 27, 2016

You were right. There is a way of avoiding blur when resizing: Unsharped Resizing (USM)
By adding the parameter -unsharp 0x1 the icons get much clearer.

before after
aa aa
at at
ch ch
ff ff
sf
kno kno

@mattab
Copy link
Member

mattab commented Dec 27, 2016

Well done @Findus23 for finding this.... the difference looks amazing!

@Studio384
Copy link

Studio384 commented Jan 3, 2017

Please use the official Windows logo in its official blue color, not this ugly mismatch.

Also, Edge should get its own icon as well instead of the Internet Explorer icon.

@mattab
Copy link
Member

mattab commented Jan 3, 2017

@Studio384 feel free to submit the icon that should be used

@mattab
Copy link
Member

mattab commented Jan 3, 2017

@Findus23 do you think the PR is ready to be merged? (any minor changes could be done afterwards but good to merge early and get this in beta)

@Findus23
Copy link
Member Author

Findus23 commented Jan 3, 2017

@Studio384, you are right. The windows logo I used isn't the "official" logo but a modification for Wikipedia (https://commons.m.wikimedia.org/wiki/File:Windows_logo_-_2012_derivative.svg). We should probably use the official one (even though it is harder to recognise in my opinion).
I'll change it tomorrow.
About edge: I'm not sure what you mean. I think I am using the right icon for edge (https://github.com/Findus23/device-icons/blob/master/src/DevicesDetection/images/browsers/PS.png). Do you mean another icon?

If you have other ideas for improvements just mention it.

@Studio384
Copy link

@Findus23 I'm sorry, didn't see the Edge icon. Why is it called PS? I guess it's a left-over from Project Spartan?

Either way, I don't really see why the official Windows logo would be harder to recognize than an onofficial home-made version no-one will ever see. Either way, when you update it, make sure to use the 2015 version from Windows 10, with the Windows 10-blue color.

@Findus23
Copy link
Member Author

Findus23 commented Jan 3, 2017

@Findus23
Copy link
Member Author

Findus23 commented Jan 3, 2017

@mattab there is just one thing I'd like to change before this (and the other pull requests) are ready for testing.
Because of the resize we need to explicitly add the size of 16x16px to every <img> in Piwik.
I have changed most of them (the ui test will show if I missed some), except for:

@Findus23
Copy link
Member Author

Findus23 commented Jan 4, 2017

@Studio384
Copy link

@Findus23 Yes, that's the version I ment.

@sgiehl sgiehl changed the base branch from 3.x-dev to better-icons January 5, 2017 10:16
@sgiehl
Copy link
Member

sgiehl commented Jan 5, 2017

I'm gonna merge that in a new branch now and fix the remaining tests before merging to 3.x-dev
Thanks for this awesome PR.

@sgiehl sgiehl merged commit 6dfc6be into matomo-org:better-icons Jan 5, 2017
@Findus23 Findus23 deleted the browser-icons branch January 5, 2017 10:19
@Findus23
Copy link
Member Author

Findus23 commented Jan 5, 2017

Could you also merge the other two pull requests in this branch as they would also need changes in the tests?

@sgiehl
Copy link
Member

sgiehl commented Jan 5, 2017

Good Point. I'll do that

@sgiehl sgiehl mentioned this pull request Jan 5, 2017
@sgiehl sgiehl removed the Pull Request WIP Indicates the current pull request is still work in progress and not ready yet for a review. label Jan 5, 2017
sgiehl added a commit that referenced this pull request Jan 5, 2017
* updated browser and os icons (#11063)

* updated browser-icons

from https://github.com/Findus23/device-icons
72d5ffef94a597c4ba226b33344e0badaadc3c35

* added os icons

* added previous icons

* changed macOS icon

* replaced optipng with pngquant (36% size reduction)

* center icons vertically

* sharpen icons

* increased icon size to 48x48

* fixed visitorPopup and realtimemap

* revert css change

* fixed HTML-Reports

* replaced Windows icon

#11063 (comment)

* max-width and max-height for datatables

* removed submodul (sorry wrong commit)

* add explicit max-size for dataTableRowActions

* fixed UNK.png

* first try at fixing system tests

* fixed cookie.gif

* updates icons in System tests

* updated plugin icons (#11121)

* updated plugin icons

* increased icon size to 48x48

* updated searchEngine and social icons (#11093)

* updated and added searchEngine and social icons

* removed unnecessary icons

* sharpen icons

* increased icon size to 48x48

* fixed promovideo socialicons

http://builds-artifacts.piwik.org/piwik/piwik/3.x-dev/21859/UIIntegrationTest_dashboard1.png

* fixed xx.png

* updates plugin icons in system tests

* [tests] RockMelt has it's own icon

* updates expected UI test files

* submodule update

* fix some last tests
sgiehl added a commit to matomo-org/plugin-CustomVariables that referenced this pull request Jun 18, 2020
* updated browser and os icons (#11063)

* updated browser-icons

from https://github.com/Findus23/device-icons
72d5ffef94a597c4ba226b33344e0badaadc3c35

* added os icons

* added previous icons

* changed macOS icon

* replaced optipng with pngquant (36% size reduction)

* center icons vertically

* sharpen icons

* increased icon size to 48x48

* fixed visitorPopup and realtimemap

* revert css change

* fixed HTML-Reports

* replaced Windows icon

matomo-org/matomo#11063 (comment)

* max-width and max-height for datatables

* removed submodul (sorry wrong commit)

* add explicit max-size for dataTableRowActions

* fixed UNK.png

* first try at fixing system tests

* fixed cookie.gif

* updates icons in System tests

* updated plugin icons (#11121)

* updated plugin icons

* increased icon size to 48x48

* updated searchEngine and social icons (#11093)

* updated and added searchEngine and social icons

* removed unnecessary icons

* sharpen icons

* increased icon size to 48x48

* fixed promovideo socialicons

http://builds-artifacts.piwik.org/piwik/piwik/3.x-dev/21859/UIIntegrationTest_dashboard1.png

* fixed xx.png

* updates plugin icons in system tests

* [tests] RockMelt has it's own icon

* updates expected UI test files

* submodule update

* fix some last tests
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
c: Design / UI For issues that impact Matomo's user interface or the design overall.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants