diff --git a/src/bundle/Resources/public/scss/_user-name.scss b/src/bundle/Resources/public/scss/_user-name.scss new file mode 100644 index 0000000000..b8df00ccca --- /dev/null +++ b/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; + } +} diff --git a/src/bundle/Resources/public/scss/_user-thumbnail.scss b/src/bundle/Resources/public/scss/_user-thumbnail.scss index c0f90498fc..44fc2b7738 100644 --- a/src/bundle/Resources/public/scss/_user-thumbnail.scss +++ b/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%; } } diff --git a/src/bundle/Resources/public/scss/ibexa.scss b/src/bundle/Resources/public/scss/ibexa.scss index 7c2c7fa035..e5ae89c97e 100644 --- a/src/bundle/Resources/public/scss/ibexa.scss +++ b/src/bundle/Resources/public/scss/ibexa.scss @@ -124,3 +124,4 @@ @import 'summary-tile'; @import 'double-input-range'; @import 'switcher'; +@import 'user-name'; diff --git a/src/bundle/Resources/public/scss/ui/modules/_common.scss b/src/bundle/Resources/public/scss/ui/modules/_common.scss index e29cac2861..65e08b6562 100644 --- a/src/bundle/Resources/public/scss/ui/modules/_common.scss +++ b/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'; diff --git a/src/bundle/Resources/public/scss/ui/modules/common/_user.name.scss b/src/bundle/Resources/public/scss/ui/modules/common/_user.name.scss new file mode 100644 index 0000000000..3d5f90ea2a --- /dev/null +++ b/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%; + } +} diff --git a/src/bundle/Resources/views/themes/admin/content/tab/details.html.twig b/src/bundle/Resources/views/themes/admin/content/tab/details.html.twig index bc860a8211..a707bc0229 100644 --- a/src/bundle/Resources/views/themes/admin/content/tab/details.html.twig +++ b/src/bundle/Resources/views/themes/admin/content/tab/details.html.twig @@ -7,14 +7,31 @@ {{ translation.name }}
{% 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'), diff --git a/src/bundle/Resources/views/themes/admin/content/tab/versions/table.html.twig b/src/bundle/Resources/views/themes/admin/content/tab/versions/table.html.twig index 2fd8b7d5c3..9c6c371c84 100644 --- a/src/bundle/Resources/views/themes/admin/content/tab/versions/table.html.twig +++ b/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 { diff --git a/src/bundle/Resources/views/themes/admin/trash/list.html.twig b/src/bundle/Resources/views/themes/admin/trash/list.html.twig index d7c0d17e4f..3714363208 100644 --- a/src/bundle/Resources/views/themes/admin/trash/list.html.twig +++ b/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 %} diff --git a/src/bundle/Resources/views/themes/admin/ui/component/user/user.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/user/user.html.twig new file mode 100644 index 0000000000..bfb58d910c --- /dev/null +++ b/src/bundle/Resources/views/themes/admin/ui/component/user/user.html.twig @@ -0,0 +1,17 @@ +
+ + {% include '@ibexadesign/ui/component/user_thumbnail/user_thumbnail.html.twig' with { + user_content: user.content, + user: user, + attr_svg: { + width: 20, + height: 20, + } + } only %} + + {% if user_path is defined %} + {{ ibexa_content_name(user) }} + {% else %} + {{ ibexa_content_name(user) }} + {% endif %} +
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 d3469ece4d..e141c3982a 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 @@ -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 @@ {% 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, }) %} diff --git a/src/bundle/Resources/views/themes/admin/ui/dashboard/tab/all_content.html.twig b/src/bundle/Resources/views/themes/admin/ui/dashboard/tab/all_content.html.twig index 86b06b3e50..74b33672da 100644 --- a/src/bundle/Resources/views/themes/admin/ui/dashboard/tab/all_content.html.twig +++ b/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 }, ]) %} diff --git a/src/bundle/Resources/views/themes/admin/ui/dashboard/tab/all_media.html.twig b/src/bundle/Resources/views/themes/admin/ui/dashboard/tab/all_media.html.twig index 4041fe1bae..5a55b91175 100644 --- a/src/bundle/Resources/views/themes/admin/ui/dashboard/tab/all_media.html.twig +++ b/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 }, ]) %} diff --git a/src/bundle/ui-dev/src/modules/common/thumbnail/thumbnail.js b/src/bundle/ui-dev/src/modules/common/thumbnail/thumbnail.js index 3afe66d1f9..3f6b1b2ac2 100644 --- a/src/bundle/ui-dev/src/modules/common/thumbnail/thumbnail.js +++ b/src/bundle/ui-dev/src/modules/common/thumbnail/thumbnail.js @@ -27,7 +27,7 @@ const Thumbnail = ({ thumbnailData, iconExtraClasses, contentTypeIconPath }) => return (
{renderContentTypeIcon()} - +
); }; diff --git a/src/bundle/ui-dev/src/modules/common/user-name/user.name.js b/src/bundle/ui-dev/src/modules/common/user-name/user.name.js new file mode 100644 index 0000000000..b2eb5452aa --- /dev/null +++ b/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 ( +
+ + + + {name} +
+ ); +}; + +UserName.propTypes = { + name: PropTypes.string.isRequired, + thumbnail: PropTypes.shape({ + mimeType: PropTypes.string.isRequired, + uri: PropTypes.string.isRequired, + }).isRequired, +}; + +export default UserName; diff --git a/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.item.component.js b/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.item.component.js index fa0a5cc94c..f4aef24edc 100644 --- a/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.item.component.js +++ b/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
{this.getName(this.props.item.content._info.owner)}
; + const { owner } = this.props.item.content._info; + + if (!owner) { + return null; + } + + return ( +
+ +
+ ); } renderContributorCell() { - return
{this.getName(this.props.item.content._info.currentVersion.creator)}
; + const { creator } = this.props.item.content._info.currentVersion; + + if (!creator) { + return null; + } + + return ( +
+ +
+ ); } renderSectionCell() { diff --git a/src/bundle/ui-dev/src/modules/sub-items/services/sub.items.service.js b/src/bundle/ui-dev/src/modules/sub-items/services/sub.items.service.js index 370a6d26ce..ed2870528e 100644 --- a/src/bundle/ui-dev/src/modules/sub-items/services/sub.items.service.js +++ b/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 }