WebUI: Add missing icons #21162
WebUI: Add missing icons #21162
Conversation
| @@ -1563,6 +1563,7 @@ window.addEventListener("DOMContentLoaded", () => { | |||
| const id = "uploadPage"; | |||
| new MochaUI.Window({ | |||
| id: id, | |||
| icon: "images/qbittorrent-tray.svg", | |||
There was a problem hiding this comment.
I added it like this to all mocha windows but down the line common properties / callbacks should probably be contained in some base object and then spread during window creation.
skomerko
force-pushed
the
webui-icons-ui
branch
from
87b1420
to
0348e14
Compare
|
@skomerko |
skomerko
force-pushed
the
webui-icons-ui
branch
from
0348e14
to
351eff5
Compare
|
@skomerko |
| @@ -52,6 +52,11 @@ tr.dynamicTableHeader { | |||
| white-space: nowrap; | |||
| } | |||
|
|
|||
| .dynamicTable tr.selected img, | |||
| .dynamicTable tr:hover img { | |||
| filter: var(--color-icon-hover); | |||
There was a problem hiding this comment.
This change breaks peer country flags on selected/hover lines.
There was a problem hiding this comment.
Will fix it, thanks for catching it.
| @@ -540,23 +540,29 @@ ul.filterList { | |||
| padding-left: 0; | |||
| } | |||
|
|
|||
| ul.filterList li:hover img, | |||
| ul.filterList .selectedFilter img { | |||
| filter: var(--color-icon-hover); | |||
There was a problem hiding this comment.
This removes color from selected icons. Is it intentional? I don't really like that to be honest.
There was a problem hiding this comment.
Yes, otherwise it would look like this:
At least now they are visible.
How would you like it to be?
There was a problem hiding this comment.
Maybe use other filter? Like
| filter: var(--color-icon-hover); | |
| filter: drop-shadow(0 0 1px #000); |
Or more tricky
| filter: var(--color-icon-hover); | |
| filter: drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000) drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000); |
if we want it to be solid.
There was a problem hiding this comment.
This PR adds missing icons to WebUI (in tabs, buttons, etc.).
To achieve better icon contrast on hover/selection (+ to change color for some icons in dark mode) I decided to use filter property. It is not ideal but right now it's probably the best way to do this with minimal amount of changes. There are many different SVG techniques but for now I kept everything in the same style and it just works.