Fixes #17405: Added plugin icon to plugin list/detail #19333
Conversation
| @@ -75,3 +75,15 @@ span.color-label { | |||
| .btn-grey, .btn-gray { | |||
| @extend .btn-secondary; | |||
| } | |||
|
|
|||
| img.plugin-icon { | |||
| max-width: 1.4285em; | |||
There was a problem hiding this comment.
This was eye-balled (at ~9/7) so that it matched the font-size. I didn't immediately see any variables to re-use here.
| // Assuming icon is black/white line art, invert it and tone down brightness | ||
| img.plugin-icon { | ||
| filter: invert(100%) brightness(80%); | ||
| } |
There was a problem hiding this comment.
Not loving this approach, unless we'll only ever accept black/white line-drawing-ish icons.
There was a problem hiding this comment.
Just a quick drive-by thought: you could consider adding grayscale() to the filter as well:
filter: grayscale() invert() brightness(80%);Also, small note - you don't need to specify 100% for invert; invert(), invert(1), and invert(100%) are equivalent. (See MDN docs if helpful.)
There was a problem hiding this comment.
Thanks @pheus , appreciate the pointers.
jnovinger
force-pushed
the
17405-plugin-icons
branch
from
ab6ca96 to
9173a11
Compare
jnovinger
requested review from
a team and
bctiemann
and removed request for
a team
Hat tip to @pheus. Thanks! I did end up leaving the filter function arguments as the Sass processor complains when you try calling a filter function without an argument. :/
|
I think this looks fine code-wise, but the icon looks a little too big for the text: 
However I don't think that's a problem with the icon, but rather that the text in the table rows is too small / not vertically centered in the table rows throughout the UI. That's a separate issue that should be raised. |
Fixes: #17405
iconURL value from the plugins catalog API