Fix double wrapped thumbnail icon #5142
Conversation
There was a problem hiding this comment.
Hi @ozer550, thank you. Looks like a good start.
Next step would be to improve thumbnail icon scaling logic. I think the goal of the issue was to remove the extra <svg>, but without any changes to user experience. However as of now, icon scaling is lost - for example, if I gradually resize /channels browser window, the thumbnail icon behaves quite differently from before. Here's few places, but it affects almost every screen size.
| Screen width | Before / expected | After |
|---|---|---|
600px |
 |
 |
1380px |
 |
 |
Looking into code, there seemed to be lots of effort into implementing smooth scaling experience:
$svg-scale: 1.25;
$svg-width: calc(100% * 9 / 16 / #{$svg-scale});
$svg-top: calc((100% * 9 / 16 / 2) - ($svg-width / 2));
svg.thumbnail-image {
top: 0;
left: calc(50% - (#{$svg-width} / 4));
width: calc(#{$svg-width} / 4);
...
Even though we want to remove extra svg, I don't think it was intended to get rid of this logic completely. We'd rather want to reapply it in a way that works with KIcon.
| return icon ? CONTENT_KIND_ICONS[icon] : 'error'; | ||
| } | ||
|
|
||
| export function getLearningActivityIcon(activity) { |
There was a problem hiding this comment.
This function doesn't seem to be called from anywhere. Can be removed.
|
|
||
| export function getContentKindIcon(kind, isEmpty = false) { | ||
| const icon = (isEmpty ? [kind + EMPTY] : []).concat([kind]).find(k => k in CONTENT_KIND_ICONS); | ||
| return icon ? CONTENT_KIND_ICONS[icon] : 'error'; |
There was a problem hiding this comment.
Can we throw an error when icon is not found, rather than rendering as 'error' icon? So that we know that something is wrong.
| <KIcon | ||
| :icon="icon" | ||
| class="icon-thumbnail" | ||
| :style="{ fill: '#ffffff' }" |
There was a problem hiding this comment.
KIcon has color prop. Also, we avoid using hardcoded colors. You can see here on how to apply KDS colors. Few another places in this PR need to be similarly updated.
| @@ -46,51 +45,48 @@ | |||
| v-else-if="printing" | |||
| class="printable-icon" | |||
| > | |||
| <VIconWrapper | |||
| <!-- <VIconWrapper | |||
There was a problem hiding this comment.
Commented out code can be removed. Can you check on whether capture-as-image needs to be transferred to KIcon or if it's not needed?
| </div> | ||
|
|
||
| <!-- Bury icon within SVG so it's more responsive, since font-size scaling is more difficult --> | ||
| <svg |
There was a problem hiding this comment.
Comment on line 58 is not relevant anymore. Can be removed.
There was a problem hiding this comment.
<style> section has some styles or classes that don't seem to be used from anywhere anymore. For example nothumbnail-image, svg.thumbnail-image. There may be more.
|
#5147 has now been merged, so can rebase here. |
|
To sum up our co-hack:
|
ozer550
force-pushed
the
fix-double-wrapped-thumbnail-icon
branch
from
92bc058 to
70f156f
Compare
bjester
modified the milestones:
Studio: search recommendations release,
Studio: Q3 (patch) release
Summary
References
closes #4991
Reviewer guidance