From 2dc2645fd6afe7d4cd79d6dfcb25f783d67667ef Mon Sep 17 00:00:00 2001
From: Jakub Brzegowski <symfiz@gmail.com>
Date: Fri, 1 Jul 2022 12:01:58 +0200
Subject: [PATCH] IBX-3085: As a Developer, I want to have thumbnail twig
 component (#478)

* IBX-3085: Add thumbnail twig component

* remove attr

* Remove cursor from CSS
---
 .../public/scss/_header-user-menu.scss        |  9 +------
 .../public/scss/_user-thumbnail.scss          |  7 ++++++
 src/bundle/Resources/public/scss/ibexa.scss   |  1 +
 .../adaptive_filters.html.twig                |  2 --
 .../user_thumbnail/user_thumbnail.html.twig   | 24 +++++++++++++++++++
 .../views/themes/admin/ui/menu/user.html.twig | 16 ++++---------
 6 files changed, 37 insertions(+), 22 deletions(-)
 create mode 100644 src/bundle/Resources/public/scss/_user-thumbnail.scss
 create mode 100644 src/bundle/Resources/views/themes/admin/ui/component/user_thumbnail/user_thumbnail.html.twig

diff --git a/src/bundle/Resources/public/scss/_header-user-menu.scss b/src/bundle/Resources/public/scss/_header-user-menu.scss
index b45ab1073f..20ce7dab69 100644
--- a/src/bundle/Resources/public/scss/_header-user-menu.scss
+++ b/src/bundle/Resources/public/scss/_header-user-menu.scss
@@ -23,13 +23,6 @@
         font-size: $ibexa-text-font-size-small;
     }
 
-    &__image {
-        width: calculateRem(24px);
-        height: calculateRem(24px);
-        border-radius: 50%;
-        cursor: pointer;
-    }
-
     &__toggler {
         display: flex;
         align-items: center;
@@ -47,7 +40,7 @@
         }
     }
 
-    &__thumbnail {
+    &__thumbnail-wrapper {
         display: flex;
         border: calculateRem(3px) solid $ibexa-color-black;
         border-radius: 50%;
diff --git a/src/bundle/Resources/public/scss/_user-thumbnail.scss b/src/bundle/Resources/public/scss/_user-thumbnail.scss
new file mode 100644
index 0000000000..c0f90498fc
--- /dev/null
+++ b/src/bundle/Resources/public/scss/_user-thumbnail.scss
@@ -0,0 +1,7 @@
+.ibexa-user-thumbnail {
+    &--img {
+        width: calculateRem(24px);
+        height: calculateRem(24px);
+        border-radius: 50%;
+    }
+}
diff --git a/src/bundle/Resources/public/scss/ibexa.scss b/src/bundle/Resources/public/scss/ibexa.scss
index 755b226fa9..73cdaa8ada 100644
--- a/src/bundle/Resources/public/scss/ibexa.scss
+++ b/src/bundle/Resources/public/scss/ibexa.scss
@@ -114,3 +114,4 @@
 @import 'back-to-top';
 @import 'date-time-picker';
 @import 'middle-ellipsis';
+@import 'user-thumbnail';
diff --git a/src/bundle/Resources/views/themes/admin/ui/component/adaptive_filters/adaptive_filters.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/adaptive_filters/adaptive_filters.html.twig
index ca1be24d3e..02fe4a74f8 100644
--- a/src/bundle/Resources/views/themes/admin/ui/component/adaptive_filters/adaptive_filters.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/component/adaptive_filters/adaptive_filters.html.twig
@@ -1,5 +1,3 @@
-{% import "@ibexadesign/ui/component/macros.html.twig" as html %}
-
 {% trans_default_domain 'adaptive_filters' %}
 
 {% set attr = attr|default({})|merge({
diff --git a/src/bundle/Resources/views/themes/admin/ui/component/user_thumbnail/user_thumbnail.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/user_thumbnail/user_thumbnail.html.twig
new file mode 100644
index 0000000000..d3469ece4d
--- /dev/null
+++ b/src/bundle/Resources/views/themes/admin/ui/component/user_thumbnail/user_thumbnail.html.twig
@@ -0,0 +1,24 @@
+{% import "@ibexadesign/ui/component/macros.html.twig" as html %}
+
+{% set user_image = user_content.thumbnail %}
+
+{% if user_image.mimeType == 'image/svg+xml' %}
+    {% set attr_svg = attr_svg|default({})|merge({
+        class: ('ibexa-user-thumbnail--svg ' ~ attr_svg.class|default(''))|trim,
+        width: attr_svg.width is defined ? attr_svg.width : '24',
+        height: attr_svg.height is defined ? attr_svg.height : '24',
+        xmlns: attr_svg.xmlns is defined ? attr_svg.xmlns : 'http://www.w3.org/2000/svg',
+    }) %}
+
+    <svg {{ html.attributes(attr_svg|default({})) }}>
+        <use xlink:href="{{ user_image.resource }}"></use>
+    </svg>
+{% else %}
+    {% set attr_img = attr_img|default({})|merge({
+        class: ('ibexa-user-thumbnail--img ' ~ attr_img.class|default(''))|trim,
+        src: attr_img.src is defined ? attr_img.src : user_image.resource,
+        alt: attr_img.alt is defined ? attr_img.alt : user.name,
+    }) %}
+
+    <img {{ html.attributes(attr_img|default({})) }}/>
+{% endif %}
diff --git a/src/bundle/Resources/views/themes/admin/ui/menu/user.html.twig b/src/bundle/Resources/views/themes/admin/ui/menu/user.html.twig
index f3d27e0410..9949032b17 100644
--- a/src/bundle/Resources/views/themes/admin/ui/menu/user.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/menu/user.html.twig
@@ -16,18 +16,10 @@
             <span class="ibexa-header-user-menu__notice-dot ibexa-header-user-menu__notice-dot--no-notice"></span>
         </div>
         <button class="ibexa-header-user-menu__toggler">
-            <div class="ibexa-header-user-menu__thumbnail">
-                {% if user_image.mimeType == "image/svg+xml" %}
-                    <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
-                        <use xlink:href="{{ user_image.resource }}"></use>
-                    </svg>
-                {% else %}
-                    <img
-                        class="ibexa-header-user-menu__image"
-                        src="{{ user_image.resource }}"
-                        alt="{{ user.name }}"
-                    />
-                {% endif %}
+            <div class="ibexa-header-user-menu__thumbnail-wrapper">
+                {% include '@ibexadesign/ui/component/user_thumbnail/user_thumbnail.html.twig' with {
+                    user_content: user.content,
+                } %}
             </div>
         </button>