IBX-6419: Added user avatar to user references

src/bundle/Resources/public/scss/_user-name.scss

@@ -0,0 +1,18 @@
+.ibexa-user-name {
+    display: inline-flex;
+    align-items: center;
+
+    &__thumbnail {
+        width: calculateRem(20px);
+        height: calculateRem(20px);
+        margin-right: calculateRem(8px);
+    }
+
+    &__text {
+        white-space: nowrap;
+    }
+
+    .ibexa-user-thumbnail {
+        vertical-align: initial;
+    }
+}

src/bundle/Resources/public/scss/_user-thumbnail.scss

@@ -1,7 +1,7 @@
 .ibexa-user-thumbnail {
     &--img {
-        width: calculateRem(24px);
-        height: calculateRem(24px);
+        width: calculateRem(20px);
+        height: calculateRem(20px);
         border-radius: 50%;
     }
 }

src/bundle/Resources/public/scss/ibexa.scss

@@ -124,3 +124,4 @@
 @import 'summary-tile';
 @import 'double-input-range';
 @import 'switcher';
+@import 'user-name';

src/bundle/Resources/public/scss/ui/modules/_common.scss

@@ -2,3 +2,4 @@
 @import 'common/tooltip.popup';
 @import 'common/thumbnail';
 @import 'common/simple.dropdown';
+@import 'common/user.name';

src/bundle/Resources/public/scss/ui/modules/common/_user.name.scss

@@ -0,0 +1,7 @@
+.c-user-name {
+    .c-thumbnail__image {
+        width: calculateRem(20px);
+        height: calculateRem(20px);
+        border-radius: 50%;
+    }
+}

src/bundle/Resources/views/themes/admin/content/tab/details.html.twig

@@ -7,14 +7,31 @@
         {{ translation.name }}<br>
     {% endfor %}
 {% endset %}
+
+{% set creator_name %}
+    {% if creator is not empty %}
+        {% include '@ibexadesign/ui/component/user/user.html.twig' with { user: creator } only %}
+    {% else %}
+        {{ 'tab.details.creator.not_found'|trans|desc('Can\'t fetch creator') }}
+    {% endif %}
+{% endset %}
+
+{% set last_contributor_name %}
+    {% if last_contributor is not empty %}
+        {% include '@ibexadesign/ui/component/user/user.html.twig' with { user: last_contributor } only %}
+    {% else %}
+        {{ 'tab.details.last_contributor.not_found'|trans|desc('Can\'t fetch last contributor') }}
+    {% endif %}
+{% endset %}
+
 {% set content_details_items = [
     {
         label: 'tab.details.creator'|trans()|desc('Creator'),
-        content: creator is not empty ? ibexa_content_name(creator) : 'tab.details.creator.not_found'|trans|desc('Can\'t fetch creator'),
+        content: creator_name,
     },
     {
         label: 'tab.details.last_contributor'|trans()|desc('Last contributor'),
-        content: last_contributor is not empty ? ibexa_content_name(last_contributor) : 'tab.details.last_contributor.not_found'|trans|desc('Can\'t fetch last contributor'),
+        content: last_contributor_name,
     },
     {
         label: 'tab.details.published_version'|trans()|desc('Published version'),

src/bundle/Resources/views/themes/admin/content/tab/versions/table.html.twig

@@ -81,10 +81,17 @@
                             content: ibexa_admin_ui_config.languages.mappings[version.initialLanguageCode].name,
                         } %}
                         {{ custom_columns }}
+
+                        {% set author_name %}
+                            {% if version.author is not empty %}
+                                {% include '@ibexadesign/ui/component/user/user.html.twig' with { user: version.author } only %}
+                            {% else %}
+                                {{ 'tab.versions.table.author.not_found'|trans|desc('Can\'t fetch contributor') }}
+                            {% endif %}
+                        {% endset %}
+
                         {% include '@ibexadesign/ui/component/table/table_body_cell.html.twig' with {
-                            content: version.author is not empty
-                                ? ibexa_content_name(version.author)
-                                : 'tab.versions.table.author.not_found'|trans|desc('Can\'t fetch contributor'),
+                            content: author_name,
                         } %}
                         {% if not is_draft_conflict %}
                             {% include '@ibexadesign/ui/component/table/table_body_cell.html.twig' with {

src/bundle/Resources/views/themes/admin/trash/list.html.twig

@@ -146,11 +146,17 @@
                     raw: true,
                 }]) %}
 
+                {% set creator_name %}
+                    {% if trash_item.creator is not empty %}
+                        {% include '@ibexadesign/ui/component/user/user.html.twig' with { user: trash_item.creator } only %}
+                    {% else %}
+                        {{ 'trash.item.deleted_user'|trans|desc('Deleted user') }}
+                    {% endif %}
+                {% endset %}
+
                 {% set body_row_cols = body_row_cols|merge([
                     { content: trash_item.contentType.name },
-                    { content: trash_item.creator is not empty
-                        ? ibexa_content_name(trash_item.creator.content) :
-                        'trash.item.deleted_user'|trans|desc('Deleted user') },
+                    { content: creator_name },
                 ]) %}
 
                 {% if can_view_section %}

src/bundle/Resources/views/themes/admin/ui/component/user/user.html.twig

@@ -0,0 +1,17 @@
+<div class="ibexa-user-name">
+    <span class="ibexa-user-name__thumbnail">
+        {% include '@ibexadesign/ui/component/user_thumbnail/user_thumbnail.html.twig' with {
+            user_content: user.content,
+            user: user,
+            attr_svg: {
+                width: 20,
+                height: 20,
+            }
+        } only %}
+    </span>
+    {% if user_path is defined %}
+        <a href={{ user_path }} class="ibexa-user-name__text">{{ ibexa_content_name(user) }}</a>
+    {% else %}
+        <span class="ibexa-user-name__text">{{ ibexa_content_name(user) }}</span>
+    {% endif %}
+</div>

src/bundle/Resources/views/themes/admin/ui/component/user_thumbnail/user_thumbnail.html.twig

@@ -4,7 +4,7 @@
 
 {% if user_image.mimeType == 'image/svg+xml' %}
     {% set attr_svg = attr_svg|default({})|merge({
-        class: ('ibexa-user-thumbnail--svg ' ~ attr_svg.class|default(''))|trim,
+        class: ('ibexa-user-thumbnail 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',
@@ -15,7 +15,7 @@
     </svg>
 {% else %}
     {% set attr_img = attr_img|default({})|merge({
-        class: ('ibexa-user-thumbnail--img ' ~ attr_img.class|default(''))|trim,
+        class: ('ibexa-user-thumbnail 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,
     }) %}

src/bundle/Resources/views/themes/admin/ui/dashboard/tab/all_content.html.twig

@@ -26,9 +26,17 @@
         raw: true,
     }]) %}
 
+    {% set contributor_name %}
+        {% if row.contributor is not null %}
+            {% include '@ibexadesign/ui/component/user/user.html.twig' with { user: row.contributor } only %}
+        {% else %}
+            {{ 'dashboard.table.contributor.not_found'|trans|desc('Can\'t fetch contributor') }}
+        {% endif %}
+    {% endset %}
+
     {% set body_row_cols = body_row_cols|merge([
         { content: row.type },
-        { content: row.contributor is not null ? row.contributor.name : 'dashboard.table.contributor.not_found'|trans|desc('Can\'t fetch contributor') },
+        { content: contributor_name },
         { content: row.modified|ibexa_full_datetime },
         { has_action_btns: true, content: macros.edit_content_button(row, 'dashboard.table.all.content.edit'|trans|desc('Edit')), raw: true },
     ]) %}

src/bundle/Resources/views/themes/admin/ui/dashboard/tab/all_media.html.twig

@@ -27,9 +27,17 @@
         raw: true,
     }]) %}
 
+    {% set contributor_name %}
+        {% if row.contributor is not null %}
+            {% include '@ibexadesign/ui/component/user/user.html.twig' with { user: row.contributor } only %}
+        {% else %}
+            {{ 'dashboard.table.contributor.not_found'|trans|desc('Can\'t fetch contributor') }}
+        {% endif %}
+    {% endset %}
+
     {% set body_row_cols = body_row_cols|merge([
         { content: row.type },
-        { content: row.contributor is not null ? row.contributor.name : 'dashboard.table.contributor.not_found'|trans|desc('Can\'t fetch contributor') },
+        { content: contributor_name },
         { content: row.modified|ibexa_full_datetime },
         { has_action_btns: true, content: macros.edit_content_button(row, 'dashboard.table.all.media.edit'|trans|desc('Edit')), raw: true },
     ]) %}

src/bundle/ui-dev/src/modules/common/thumbnail/thumbnail.js

@@ -27,7 +27,7 @@ const Thumbnail = ({ thumbnailData, iconExtraClasses, contentTypeIconPath }) =>
     return (
         <div className="c-thumbnail">
             {renderContentTypeIcon()}
-            <img src={thumbnailData.resource} />
+            <img className="c-thumbnail__image" src={thumbnailData.resource} />
         </div>
     );
 };

src/bundle/ui-dev/src/modules/common/user-name/user.name.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Thumbnail from '../thumbnail/thumbnail';
+
+const UserName = ({ name, thumbnail }) => {
+    return (
+        <div className="c-user-name ibexa-user-name">
+            <span className="c-user-name__thumbnail ibexa-user-name__thumbnail">
+                <Thumbnail
+                    thumbnailData={{ mimeType: thumbnail.mimeType, resource: thumbnail.uri }}
+                    iconExtraClasses="ibexa-icon--small-medium"
+                />
+            </span>
+            <span className="c-user-name__text ibexa-user-name__text">{name}</span>
+        </div>
+    );
+};
+
+UserName.propTypes = {
+    name: PropTypes.string.isRequired,
+    thumbnail: PropTypes.shape({
+        mimeType: PropTypes.string.isRequired,
+        uri: PropTypes.string.isRequired,
+    }).isRequired,
+};
+
+export default UserName;

src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.item.component.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import Icon from '../../../common/icon/icon';
+import UserName from '../../../common/user-name/user.name';
 import { createCssClassNames } from '../../../common/helpers/css.class.names';
 
 const { ibexa, Translator } = window;
@@ -268,11 +269,31 @@ export default class TableViewItemComponent extends PureComponent {
     }
 
     renderCreatorCell() {
-        return <div className="c-table-view-item__text-wrapper">{this.getName(this.props.item.content._info.owner)}</div>;
+        const { owner } = this.props.item.content._info;
+
+        if (!owner) {
+            return null;
+        }
+
+        return (
+            <div className="c-table-view-item__text-wrapper">
+                <UserName name={this.getName(this.props.item.content._info.owner)} thumbnail={owner.thumbnail} />
+            </div>
+        );
     }
 
     renderContributorCell() {
-        return <div className="c-table-view-item__text-wrapper">{this.getName(this.props.item.content._info.currentVersion.creator)}</div>;
+        const { creator } = this.props.item.content._info.currentVersion;
+
+        if (!creator) {
+            return null;
+        }
+
+        return (
+            <div className="c-table-view-item__text-wrapper">
+                <UserName name={this.getName(creator)} thumbnail={creator.thumbnail} />
+            </div>
+        );
     }
 
     renderSectionCell() {

src/bundle/ui-dev/src/modules/sub-items/services/sub.items.service.js

@@ -68,11 +68,21 @@ export const loadLocation = ({ token, siteaccess }, { locationId = 2, limit = 10
                                     mainLanguageCode
                                     owner {
                                         name
+                                        thumbnail {
+                                            uri
+                                            alternativeText
+                                            mimeType
+                                        }
                                     }
                                     currentVersion {
                                         versionNumber
                                         creator {
                                             name
+                                            thumbnail {
+                                                uri
+                                                alternativeText
+                                                mimeType
+                                            }
                                         }
                                         languageCodes
                                     }