Implement new icon/color theme

[Mazino-Urek]

Redesigned Icons

Old icons posed two problems:

• Barely visible in dark theme
  

• Inconsistent icon sizes and colors
  

With this commit, the following changes were made:

• Bright Icons that work in both white and dark theme
  

• All icons using uniform canvas (32 px * 32 px) and limited color pallet
  

• All icons are in SVG file now
  

These icons have well visibility in the HDPI screen and thus future-proof the application.

Optimization

All SVG icons have been optimized by svgcleaner. It removes unnecessary metadata and sometimes fixes color and shape preview.

Quality Improvement

Removed icons that are not being used

• dialog-cancel
• dialog-information
• document-encrypt
• document-import
• document-save
• edit-clear-history
• edit-cut
• edit-paste
• expand
• rss-config
• services
• tab-close
• tools-report-bug
• view-calendar-journal

Replaced similar and single use icons

• Replaced checking by queued
• Replaced completed by checked
• Replaced document-edit by edit-rename
• Replaced document-properties by help-about and help-contents
• Replaced download by downloading
• Replaced edit-delete by list-remove
• Replaced mail-mark-read by task-complete
• Replaced paused.svg by media-playback-pause
• Replaced resumed by media-playback-start
• Replaced seeding by kt-set-max-upload-speed
• Replaced sphere by loading
• Replaced task-attention by dialog-warning
• Replaced unavailable by task-reject
• Replaced uploading by kt-set-max-upload-speed
• Replaced view-filter by filterinactive
• Replaced qbittorrent-tray-with-font by qbittorrent-tray

Preview

In-place GUI Menu & Context Icons

delete confirmation
copy transferlist context menu
queue transferlist context menu
tags transferlist context menu
category transferlist context menu
transfer list - context menu v2
filters context menu
tags filter context menu
category filter context menu
transferlist context menu
content context menu
http sources context menu
peers context menu
trackers context menu
webui certificates
ip filtering
properties tab bar
status bar v1
search menu
RSS menu
help menu
tools menu
view menu
edit menu
File Menu 9th June 2022
Tray Icon Context Menu 9th June 2022
top toolbar
filters sidebar

Transferlist torrents by state text colors

transferlist torrents by state text in light mode
transferlist torrents by state text in dark mode

Quick overview

Reference PRs

#8406, #12169, #12926, #12965

[Mazino-Urek]

Opened in favor of #15758 rebase disaster.

[xavier2k6]

Quick glance..........

PR Title & commit title are wrong

No reannounce.svg included in icons.qrc file & spacing is wrong

Here:
https://github.com/qbittorrent/qBittorrent/blob/29729196f00d807a193cc5537f575007a7889f8e/src/icons/icons.qrc#L308-L312

Here:
https://github.com/qbittorrent/qBittorrent/blob/29729196f00d807a193cc5537f575007a7889f8e/src/icons/icons.qrc#L361-L365

Here:
https://github.com/qbittorrent/qBittorrent/blob/29729196f00d807a193cc5537f575007a7889f8e/src/icons/icons.qrc#L368-L372

@Chocobo1 How come this passed the file health check?

---

You need to omit .svg

https://github.com/qbittorrent/qBittorrent/blob/29729196f00d807a193cc5537f575007a7889f8e/src/gui/mainwindow.cpp#L156

Icon images for user-group-delete.svg & user-group-new.svg are reversed.

Image for view-calendar-journal.svg doesn't look good in GUI.
Same for force-recheck.svg IMO

Would suggest these:

[Mazino-Urek]

For Forced Recheck:

For view-calendar-journal:

[xavier2k6]

I think those two icons are ok after seeing them in the GUI, still not sold on the matchstick/wand looking thing for torrent-creator but that's only just my opinion.

[Mazino-Urek]

I will look for some alternatives.

[xavier2k6]

I will look for some alternatives.

I wouldn't spend too much time on it at this stage & would suggest we move on for now as more important work to be done than holding up this PR any longer for the sake of 1 icon. (we can come back to it if needs be)

For example:

TODO:

• Adhere to advice in Redesign Icons #15453 (comment) / Redesigning both Theme and Skin icons #12169 (comment).
• Make icons consistent where applicable across for e.g. mainwindow/context/filter/tabs views.

Remove tag
Remove category
Remove unused tag
Remove unused category
Remove Web seed
Remove tracker

Would prefer if these displayed minus symbol .

This would make them consistent with context menu.

Change:
list-remove -> edit-clear

1x
/src/gui/properties/propertieswidget.cpp
1x
/src/gui/properties/trackerlistwidget.cpp
2x
/src/gui/tagfilterwidget.cpp
2x
/src/gui/categoryfilterwidget.cpp

There may be other places that could be changed, but certain features I don't use/haven't looked into.

---

• Ensure below icon colors are distinguishable from each other & match their respective Transfer List - RGB text colors.
  (Visible in Light & Dark theme - if possible)
• Downloading
• Seeding
• Completed
• Paused
• Stalled Uploading
• Stalled Downloading
• Checking
• Errored
• Queued

---

• Make necessary changes to WebUI
• Add screenshots of Icons being used & various in-app GUI Interfaces

[Mazino-Urek]

I think text-plain can be changed from this:

to this:

Seems simpler.

In general, trash looks not very visible to me. I have two proposal:

Another issue caught my eyes. As icon names were based on Gnome icon naming spec, I suspect some icon doesn't have real action based names. This issue needs to be addressed. Some examples:

[Mazino-Urek]

Besides, I am targeting this changes for QBT version 5.0, as most user has no idea what goes under the hood. It will be a nice change for them.

[ArcticGems]

In general, trash looks not very visible to me. I have two proposal:

I like this one 👍

[Mazino-Urek]

I think this works best:





1st and 4th works for me. Between them, 1st for me.

[xavier2k6]

I think text-plain can be changed

I don't see any issue with changing it, seems to be only used in one place in code from what I can see.

As icon names were based on Gnome icon naming spec, I suspect some icon doesn't have real action based names. This issue needs to be addressed.

I will leave this to you.

The bin icon, I'd have concerns about how the swirling arrows would look in the GUI......may appear a bit scrunched but will see.

[Mazino-Urek]

I don't see any issue with changing it, seems to be only used in one place in code from what I can see.

I am deleting text-plain and replacing with view-calendar-journal then.

I will leave this to you.

I will need some screenshots. My Linux distro can't run the artifact program file for this #12229.

The bin icon, I'd have concerns about how the swirling arrows would look in the GUI......may appear a bit scrunched but will see.

Test it out.

[Mazino-Urek]

@xavier2k6 @ArcticGems Please confirm.

After some deep search, following icons are not used anywhere.

• dialog-cancel
• dialog-information
• document-encrypt
• document-import
• document-save
• edit-clear-history
• edit-cut
• edit-paste
• expand (Possibly)
• rss-config
• services (Possibly)
• tab-close
• tools-report-bug

Miscellaneous observation:

• checking can be replaced with task-ongoing
• completed can be replaced with checked (Same Icon)
• document-properties should be replaced with checked or a new icon I have in mind
• help-about might need change
• mail-folder-inbox, kindly look into it, might not be needed or should be changed.
• mail-mark-read, kindly look into it, might need change.
• queued deep search needed.
• unavailable and task-reject same icon. One can be removed.
• Replace edit-delete by list-remove
• Replace document-edit by edit-rename
• Replace mail-mark-read by task-complete
• Replace task-attention by dialog-warning

[Mazino-Urek]

I am so sad right now. It broke my back designing those icons and yet so much of them are not really used. What a mess.

[xavier2k6]

@nowshed-imran you may be right that some icons may not be used as over time features have been changed etc. & the icons may have remained but also some of those icons could be used by webui etc.

Edit:
I haven't researched them fully.

[Mazino-Urek]

I did some thinking. These icons were designed for this project and strict coherence was maintained. Here is my proposal:

1. Ununsed icons are to be kept. I might add some following gnome guidelines. Each icon are less than 1 kilobytes, some are even half a kilobytes after optimization. These icons can be used in future if new features are added.
2. In case of repeated icons, only one is to be kept and other should be deleted.

[xavier2k6]

Unused icons are to be kept. I might add some following gnome guidelines. Each icon are less than 1 kilobytes, some are even half a kilobytes after optimization. These icons can be used in future if new features are added.

I wouldn't be in favor of adding unnecessary bloat currently, if a new future feature was added & it required a new icon - we could give you a @mention.

In case of repeated icons, only one is to be kept and other should be deleted.

In general I would agree with this......

[Mazino-Urek]

Another Idea. I will maintain a personal repository that will have the icons I have created. Links will be given in read me. In that way, the icons won't be lost and can be used in future.

[Mazino-Urek]

I have created a repo for the archive purpose. Removing unused icons.
P.S Build fine. Trying renaming now.

[Mazino-Urek]

@xavier2k6 Tracked a problem. list-add is a hard requirement.
It must stay as this:

We can't change it to this everywhere:

It should be a new icon. Kindly help me with the code.
I propose document-new change into this and this can be used where ever needed. It is serving the same purpose now.

Another Trash candidate:

[Mazino-Urek]

@xavier2k6 @ArcticGems I have made some very big changes. Kindly, test if everything works or not and provide me screenshots.

[xavier2k6]

I have made some very big changes

Oh boy! (Quantum Leap reference)

Kindly, test if everything works

Nope! - missing icons. (Quick check & glaringly obvious)

provide me screenshots.

Do you not have any system available at all to test these builds/changes??

Here ya go:

[Mazino-Urek]

Nope! - missing icons. (Quick check & glaringly obvious)

Sincerely, the sheer amount of change I have done yesterday, one icon mess up is nothing. #15769 (comment) (Only three issues left)

Do you not have any system available at all to test these builds/changes??

No, I exclusively use Linux. Ubuntu builds just doesn't work for me. I tried a lot.

I think this trash icon works.

Help me with this one #15769 (comment) and RSS feed icon. Then, we can proceed with your checklist.

[Mazino-Urek]

Ok, this is the first time I have been able to compile the package myself. IMO, the whole icon set is finger licking good.

This icon needs to be changed.
I propose this new icon.

It needs some new icon.

[Mazino-Urek]

Nope! - missing icons. (Quick check & glaringly obvious)

Fixed!

[ArcticGems]

propose this new icon.

Or maybe something similar to this?? =

[Mazino-Urek]

@ArcticGems That is complex and most complex icons takes tremendous work and doesn't look well when very small and gets rejected most of the time.

I have used this. Try a current build. I have been working on this more than 6 hours straight. Loads of improvement done. From my end it is in the final phase.

[ArcticGems]

@ArcticGems That is complex and most complex icons takes tremendous work and doesn't look well when very small and gets rejected most of the time.

Maybe it only looks good on my theme 😕 =

Try a current build. I have been working on this more than 6 hours straight. Loads of improvement done. From my end it is in the final phase.

Try Later 👍

[Mazino-Urek]

zoom out. That is the trick. Most user won't zoom in to see the icon. Just open the app and see if the icon still looks good or shows what it meant to show. That is the trick. I have changed and modified dozens of icon because of that for the last couple of days.

[Mazino-Urek]

@sledgehammer999 Give me a bit of time, I will provide the complete icon source list.

[Mazino-Urek]

@sledgehammer999 Complete List:

La-Capitaine: application-rss+xml, application-x-mswinurl, connected, disconnected, checked-completed, configure, edit-copy, edit-rename, folder-documents, folder-new, folder-remote, go-bottom, go-down, go-top, go-up, hash, inode-directory, insert-link, kt-magnet, media-playback-pause, media-playback-start, media-seek-forward, network-connect, object-locked, queued, ratio, reannounce, slow_off, slow, speedometer, system-log-out, tags, task-complete, task-reject, tracker-error, tracker-warning, trackerless, trackers, view-categories

Ionicons: application-exit, collapse, dialog-warning, edit-find-user, edit-find, filter-all, firewalled, help-about, help-contents, ip-blocked, list-remove, loading, mail-folder-inbox, name, network-server, office-chart-line, plugins, preferences-desktop, preferences-other, preferences-system-network, security-high, security-low, set-location, torrent-creator, user-group-delete, user-group-new, view-preview, view-refresh, view-statistics, wallet-open, webui

Font-Awesome: force-recheck (I have no idea, how it got in)

My Own: downloading, edit-clear, error, filter-active, filter-inactive, filter-stalled, kt-set-max-download-speed, kt-set-max-upload-speed, list-add, preferences-web-browser-cookies, stalledDL, stalledUP

I have also chosen to include some of my icons in their original origin, although I have modified them so much, they can be considered original.

[xavier2k6]

La-Capitaine x39
Ionicons x31
Font-Awesome x1
My Own x12

It's alot for La-Capitaine in terms of licensing woes perhaps......

[xavier2k6]

@Chocobo1 @glassez @sledgehammer999 We are allowed to use cc0 licensed images in our project if I understand that correctly yes?!

[Chocobo1]

We are allowed to use cc0 licensed images in our project if I understand that correctly yes?!

Seems so, it is listed on this table: https://www.gnu.org/licenses/license-list.en.html#CC0

[sledgehammer999]

Let's summarise a bit:

It is my understanding that there is no objection to the following solution:

1. Merge this PR
2. Do necessary work to mention that binary releases are GPLv3 and that source code is GPLv2+
3. Explore possibility for future replacement of gplv3 icons

If I am correct in my summary, then I'll go ahead in merging this in the next ~24hours.

PS: Step 3 is not mandatory for making a release.

[xavier2k6]

Explore possibility for future replacement of gplv3 icons

This can be done by using icons with CC0 License via a source like SVG Repo

example:
Speedometer
Speedometer v2

[sledgehammer999]

So I am going ahead and merge this according to the afforementioned plan.
Thank you goes to @now-im and everybody else who participated in the PR (and its previous incarnations).

[Mazino-Urek]

This is a tear-jerking moment for me. It has taken too long, and I had no idea it would have been this hard when I made the first PR in 2018. Special thanks to, @xavier2k6, without his contribution and feedback, this project would have been severely lacking.

I was adamant about changes at first, and thought my version was the best version. With hindsight, I can safely say, I was mostly wrong. But, I can safely say, I have laid down a foundation, which will make future work easier.

Thanks a lot, everyone, it has been a wild ride.

[xavier2k6]

@now-im You're most welcome.

[Pentaphon]

@now-im are you guys going to remove the Linux system icons checkbox altogether or leave it unchecked by default?

#17150

Probably should be addressed now that your PR is going to 4.5 for sure.

[Mazino-Urek]

are you guys going to remove the Linux system icons checkbox altogether or leave it unchecked by default?

It should be removed. But, I don't have the necessary skills to do that. I will make an attempt though.

[notevenaperson]

it's over

[sheeit]

No hate, but I really prefer the old theme, to be honest.

[sheeit]

@PriitUring
I would just like to emphasize that I was in no way blaming anyone or belittling their effort. I was simply expressing my personal opinion (which, granted, is not really needed at this point).

Maybe I'm just too resistant to change, but it would've been nice to leave the option to use the old look.

Too few users gave feedback or even bothered to try any any builds before v4.5.0

I only noticed the change after upgrading to 4.5.0, which I assume is the case for most users.

Anyway, you're right, this is definitely not the place or time for this discussion, now that it's merged.

[BEEFY-JOE]

Hello, correct me if I am wrong, but the svg image format can be leveraged as an attack vector.
SVG images are capable of executing arbitrary code embedded within the image
https://rietta.com/blog/svg-xss-injection-attacks/
https://blog.talosintelligence.com/html-smugglers-turn-to-svg-images/
https://security.stackexchange.com/questions/143141/i-received-a-suspicious-svg-file-via-facebook-message-what-does-it-do
I understand the benefit from a graphics designer standpoint of using svg for its superior scaling capabilities, but as we see in these examples SVG image files are a known and used attack vector for malicious attackers.
Would it not make more sense to convert SVG images to more secure image formats that cannot execute arbitrary code from the browser?