From 9385c9d582eaf80a9fd4a9ff23e5bcc52e71b266 Mon Sep 17 00:00:00 2001 From: tischsoic Date: Fri, 24 Jun 2022 10:39:42 +0200 Subject: [PATCH 1/3] IBX-3085: Add thumbnail twig component --- .../public/scss/_header-user-menu.scss | 9 +----- .../public/scss/_user-thumbnail.scss | 8 ++++++ src/bundle/Resources/public/scss/ibexa.scss | 1 + .../adaptive_filters.html.twig | 2 -- .../user_thumbnail/user_thumbnail.html.twig | 28 +++++++++++++++++++ .../views/themes/admin/ui/menu/user.html.twig | 16 +++-------- 6 files changed, 42 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..87b8f0cdbb --- /dev/null +++ b/src/bundle/Resources/public/scss/_user-thumbnail.scss @@ -0,0 +1,8 @@ +.ibexa-user-thumbnail { + &--img { + width: calculateRem(24px); + height: calculateRem(24px); + border-radius: 50%; + cursor: pointer; + } +} 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 da6b77bd11..00b6b87a26 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..283a0df038 --- /dev/null +++ b/src/bundle/Resources/views/themes/admin/ui/component/user_thumbnail/user_thumbnail.html.twig @@ -0,0 +1,28 @@ +{% import "@ibexadesign/ui/component/macros.html.twig" as html %} + +{% set user_image = user_content.thumbnail %} + +{% set attr = attr|default({})|merge({ + class: ('ibexa-user-thumbnail ' ~ attr.class|default(''))|trim, +}) %} + +{% if user_image.mimeType == 'image/svg+xml' %} + {% set attr_svg = attr|merge(attr_svg|default({}))|merge({ + class: ('ibexa-user-thumbnail--svg ' ~ attr.class|default('') ~ attr_svg.class|default(''))|trim, + width: attr_svg.width is defined ? attr_svg.width : (attr.width is defined ? attr.width : '24'), + height: attr_svg.height is defined ? attr_svg.height : (attr.height is defined ? attr.height : '24'), + xmlns: attr_svg.xmlns is defined ? attr_svg.xmlns : (attr.xmlns is defined ? attr.xmlns : 'http://www.w3.org/2000/svg'), + }) %} + + + + +{% else %} + {% set attr_img = attr|merge(attr_img|default({}))|merge({ + class: ('ibexa-user-thumbnail--img ' ~ attr.class|default('') ~ attr_img.class|default(''))|trim, + src: attr_img.src is defined ? attr_img.src : (attr.src is defined ? attr.src : user_image.resource), + alt: attr_img.alt is defined ? attr_img.alt : (attr.alt is defined ? attr.alt : user.name), + }) %} + + +{% 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 @@ From 961429521feab6e528f6c56a2122af08ab7591d1 Mon Sep 17 00:00:00 2001 From: tischsoic Date: Fri, 24 Jun 2022 10:51:52 +0200 Subject: [PATCH 2/3] remove attr --- .../user_thumbnail/user_thumbnail.html.twig | 22 ++++++++----------- 1 file changed, 9 insertions(+), 13 deletions(-) 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 index 283a0df038..d3469ece4d 100644 --- 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 @@ -2,26 +2,22 @@ {% set user_image = user_content.thumbnail %} -{% set attr = attr|default({})|merge({ - class: ('ibexa-user-thumbnail ' ~ attr.class|default(''))|trim, -}) %} - {% if user_image.mimeType == 'image/svg+xml' %} - {% set attr_svg = attr|merge(attr_svg|default({}))|merge({ - class: ('ibexa-user-thumbnail--svg ' ~ attr.class|default('') ~ attr_svg.class|default(''))|trim, - width: attr_svg.width is defined ? attr_svg.width : (attr.width is defined ? attr.width : '24'), - height: attr_svg.height is defined ? attr_svg.height : (attr.height is defined ? attr.height : '24'), - xmlns: attr_svg.xmlns is defined ? attr_svg.xmlns : (attr.xmlns is defined ? attr.xmlns : 'http://www.w3.org/2000/svg'), + {% 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', }) %} {% else %} - {% set attr_img = attr|merge(attr_img|default({}))|merge({ - class: ('ibexa-user-thumbnail--img ' ~ attr.class|default('') ~ attr_img.class|default(''))|trim, - src: attr_img.src is defined ? attr_img.src : (attr.src is defined ? attr.src : user_image.resource), - alt: attr_img.alt is defined ? attr_img.alt : (attr.alt is defined ? attr.alt : user.name), + {% 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, }) %} From 264882ca254bf631cd3b6d9fced0c414a12df781 Mon Sep 17 00:00:00 2001 From: tischsoic Date: Fri, 24 Jun 2022 10:59:23 +0200 Subject: [PATCH 3/3] Remove cursor from CSS --- src/bundle/Resources/public/scss/_user-thumbnail.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/bundle/Resources/public/scss/_user-thumbnail.scss b/src/bundle/Resources/public/scss/_user-thumbnail.scss index 87b8f0cdbb..c0f90498fc 100644 --- a/src/bundle/Resources/public/scss/_user-thumbnail.scss +++ b/src/bundle/Resources/public/scss/_user-thumbnail.scss @@ -3,6 +3,5 @@ width: calculateRem(24px); height: calculateRem(24px); border-radius: 50%; - cursor: pointer; } }