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

New default icon theme #1239

Closed
Emdek opened this issue Jan 18, 2017 · 16 comments

Comments

Projects
None yet
5 participants
@Emdek
Copy link
Member

commented Jan 18, 2017

Since last year we are working on new default icon theme.

Current progress can be tracked here:
https://github.com/MhzDsgN/Flat

To test you have to clone repository, enter about:config, set path to icon theme in Interface/IconThemePath and restart application.

Note that Qt versions older than 5.8 will cause crash on exit due to unloading of QtSVG plugin, imply ignore it.

@pierreporte

This comment has been minimized.

Copy link
Contributor

commented Jan 18, 2017

This theme is nice. Despite me being unable to test it for now due to sonnet incompatibility on my system, there could be several issues. The ones I found by just looking at the icons are:

  1. Even though they are SVG icons, a width 64 px is too big for non-hi-DPI monitors. There should be a normal set, with a width of 32 px for instance, and a hi-DPI set (the current one). With the current icons, we would need to resize them continuously, which needs calculations that could be avoided.
  2. All icons are of the same size, but in the browser we will need several sizes. Resizing the full size icons may work for some, but it is better to draw a set of small icons so that they are always readable.
  3. Some icons are difficult to understand. For example, the go-first/go-last and undo/redo icons. The added dot is unclear. I believe that the go-first/go-last should have a vertical bar at the end of the arrow instead of this dot. For the undo/redo icons, I think that something like go-jump-location is closer to what users are used to see in other programmes. I won’t review everything though.

To end with, I see that the theme isn’t complete yet, so I am looking forward to the remaining icons.


Is @MhzDsgN making these icons just for Otter Browser, working with you during the last year?

@Frenzie

This comment has been minimized.

Copy link
Member

commented Jan 18, 2017

DPI and amount of detail appropriate to a certain icon size are two very different things, so I'm with @pierreporte on his 2.

Also agreed that undo/redo are normally a rounded arrow, as illustrated by a simple image search like this (or indeed the current icons).

@pierreporte

This comment has been minimized.

Copy link
Contributor

commented Jan 22, 2017

I managed to compile the new version so I enabled the new icon theme. As I feared, while some icons look nice (the zoom icons for instance), some others suffer of their size shrink (private windows and tabs are unreadable). The colours can feel weird, especially for the bookmarks (the yellow star is hard to read on a grey background, yet it looks gorgeous in the address bar). The big coloured square icons (especially the close icon) are ugly. The button to open a new tab located in the tab bar feels out of place: a single + is clearer. Apart from the look, changing the icon theme unveiled a bug: the Otter logo on the menu button is absent.

Some screenshots:

s lection_552

menu_550

menu_548

s lection_545

s lection_544

@MhzDsgN

This comment has been minimized.

Copy link

commented Jan 26, 2017

@pierreporte @Frenzie

  1. It is planned to generate icons 32x32 after the completion of the 64x64 version
  2. I am aware of this.
  3. Icons will evolve and probably some of them will change completely or slightly.
@pierreporte

This comment has been minimized.

Copy link
Contributor

commented Jan 26, 2017

@MhzDsgN @Emdek For issues regarding the icon theme in itself and not its interaction with Otter, should we discuss here or on the dedicated repository?

@Emdek Emdek added the discussion label Jan 26, 2017

@Emdek

This comment has been minimized.

Copy link
Member Author

commented Jan 26, 2017

@pierreporte, here, exactly here (this ticket).

@pierreporte

This comment has been minimized.

Copy link
Contributor

commented Jan 26, 2017

Due to the curvature of some arrows (reload, redo and undo), the arrow head isn’t symmetrical and one side is closer to the curve than the other. These icons will look nicer if the arrow head is slightly rotated so that we have an optical symmetry.

The new undo/redo icons are better but now they are too close with the reload icon. I think it should be really more open, like these:


@MhzDsgN

This comment has been minimized.

Copy link

commented Jan 26, 2017

@pierreporte
check now :)

@pierreporte

This comment has been minimized.

Copy link
Contributor

commented Jan 26, 2017

It’s better 👍

@pierreporte

This comment has been minimized.

Copy link
Contributor

commented Jan 27, 2017

I decided to review every single icon. Most are good enough for me but about half of them could be improved. The most common issue is readability, broadly speaking.

Used version MhzDsgN/Flat@fcbd83c

Icon Comment
addon-user-script.svg OK
application-exit.svg OK
application-rss+xml.svg Make the center of the arcs coincident with the dot
arrow-down.svg OK
arrow-left.svg OK
arrow-right.svg OK
arrow-up.svg OK
audio-volume-medium.svg OK
audio-volume-muted.svg OK
badge-fraud.svg OK
badge-local.svg OK
badge-remote.svg OK
badge-secure.svg OK
badge-unknown.svg Why red?
bookmark-new.svg Just hollow star
bookmarks-organize.svg Filled black star
bookmarks.svg Hard to read
cache.svg OK
configuration.svg OK but...
configure-shortcuts.svg ... difference with configuration.svg?
configure-toolbars.svg OK
configure.svg OK
content-blocking.svg OK
cookies.svg OK
dialog-error.svg OK
dialog-information.svg OK
dialog-password.svg OK
dialog-warning.svg OK
document-new.svg Larger +
document-open-folder.svg OK but...
document-open.svg ... difference with document-open-folder.svg?
document-print-preview.svg OK
document-print.svg Make eye clearer and larger
document-save.svg OK
download.svg Same as transfers.svg?
edit-clear-history.svg OK
edit-clear.svg OK
edit-copy.svg OK
edit-cut.svg OK
edit-delete.svg Trashbin instead?
edit-find.svg OK
edit-paste.svg Make more different from edit-copy.svg
edit-redo.svg OK
edit-select-all.svg OK
edit-undo.svg OK
fill-password.svg Why different from dialog-password?
go-down.svg OK
go-first.svg OK
go-home.svg Taller or shifted chimney?
go-jump-locationbar.svg Unclear
go-last.svg OK
go-next.svg OK
go-previous.svg OK
go-up.svg OK
help-contents.svg OK
inode-directory.svg Difference with document-open-folder.svg?
list-add.svg Black?
list-remove.svg Black
media-playback-pause.svg Thicker bars?
media-playback-start.svg OK
notes.svg With pencil?
object-locked.svg Why not open?
permission-capture-audio-video.svg Tilted + larger?
permission-capture-audio.svg See permission-capture-video.svg
permission-capture-video.svg Hard to tell what this is without file name
permission-fullscreen.svg 4 arrows + simple frame (+ icon for permission?)
permission-geolocation.svg OK
permission-notifications.svg Why different from dialog-information.svg?
permission-playback-audio.svg OK
permission-pointer-lock.svg Maybe with lock?
preferences-desktop-locale.svg OK or one balloon + foreign characters
preferences-plugin.svg Two of each “things”
process-stop.svg OK
qt.svg OK
tab-close-other.svg Taller tabs + larger icon
tab-close.svg Taller tabs + larger icon
tab-crashed.svg Taller tabs + larger icon
tab-new-private.svg Taller tabs + larger icon
tab-new.svg Taller tabs + larger icon
tab-private.svg Taller tabs + larger icon
tab.svg Taller tabs
task-complete.svg OK
task-ongoing.svg Unclear—Spinner?
task-reject.svg OK
text-html.svg File frame + same icon in black inside
transfers.svg OK
trash-empty.svg Better difference from user-trash.svg
unknown.svg Question mark instead of cross
user-trash.svg Better difference from trash-empty.svg
view-fullscreen.svg Like permission-fullstreen.svg but without icon
view-history.svg OK
view-refresh.svg OK
view-restore.svg Invert view-fullscreen.svg arrows
window-close.svg Just a black cross without background
window-new-private.svg Larger icons
window-new.svg Larger icon
window-popup-block.svg Larger icon
zoom-in.svg OK
zoom-original.svg OK
zoom-out.svg OK
@MhzDsgN

This comment has been minimized.

Copy link

commented Jan 27, 2017

@pierreporte
Thanks for such a great work. I'll check it

@pierreporte

This comment has been minimized.

Copy link
Contributor

commented Feb 12, 2017

@MhzDsgN I love the recent updates, the icons are getting gorgeous.

For application-exit, I think that something like this is way clearer:

Currently, the bookmark icon (yellow hollow star) is unreadable on a white background, or worse on a light grey background (like in the side panel). When the current page is not bookmarked, it should be an hollow star, but with black colour. When it is bookmarked, the star should be filled. The colour is good but maybe a bit too light.

@Emdek Once #36 is fixed, is it planned to have a full custom default theme that goes well with the icons discussed here?

@Emdek

This comment has been minimized.

Copy link
Member Author

commented Feb 13, 2017

@pierreporte, such style wouldn't use such legacy technology anyway.

@Emdek

This comment has been minimized.

Copy link
Member Author

commented Mar 9, 2017

Closing this ticket doesn't mean that there is no room for improvement etc. ;-)

And those who liked old set better can still use it, but it will require fetching older version of resources/icons/ and setting path in about:config.
We might provide some sort of prepackaged version later, if there will be enough interest.

@midluk

This comment has been minimized.

Copy link
Contributor

commented Mar 10, 2017

I hate "every button is just black on gray" icon themes, where you can not distinguish the buttons without paying close attention to their form. Unfortunately this disease is becoming more and more common among software. I much prefer being able to find the correct button on first sight by color.

@Emdek

This comment has been minimized.

Copy link
Member Author

commented Mar 10, 2017

@midluk, don't worry, color will be configurable later.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.