diff options
Diffstat (limited to 'app/assets/javascripts/super_sidebar/components/user_menu_profile_item.vue')
-rw-r--r-- | app/assets/javascripts/super_sidebar/components/user_menu_profile_item.vue | 83 |
1 files changed, 83 insertions, 0 deletions
diff --git a/app/assets/javascripts/super_sidebar/components/user_menu_profile_item.vue b/app/assets/javascripts/super_sidebar/components/user_menu_profile_item.vue new file mode 100644 index 00000000000..95255ce3d8e --- /dev/null +++ b/app/assets/javascripts/super_sidebar/components/user_menu_profile_item.vue @@ -0,0 +1,83 @@ +<script> +import { GlBadge, GlDisclosureDropdownItem, GlTooltip } from '@gitlab/ui'; +import SafeHtml from '~/vue_shared/directives/safe_html'; +import { s__ } from '~/locale'; +import { USER_MENU_TRACKING_DEFAULTS } from '../constants'; + +export default { + i18n: { + user: { + busy: s__('UserProfile|Busy'), + }, + }, + components: { + GlBadge, + GlDisclosureDropdownItem, + GlTooltip, + }, + directives: { + SafeHtml, + }, + props: { + user: { + required: true, + type: Object, + }, + }, + computed: { + menuItem() { + const item = { + text: this.user.name, + }; + if (this.user.has_link_to_profile) { + item.href = this.user.link_to_profile; + + item.extraAttrs = { + ...USER_MENU_TRACKING_DEFAULTS, + 'data-track-label': 'user_profile', + 'data-testid': 'user-profile-link', + }; + } + + return item; + }, + }, +}; +</script> + +<template> + <gl-disclosure-dropdown-item :item="menuItem"> + <template #list-item> + <span class="gl-display-flex gl-flex-direction-column"> + <span> + <span class="gl-font-weight-bold"> + {{ user.name }} + </span> + <gl-badge v-if="user.status.busy" size="sm" variant="warning"> + {{ $options.i18n.user.busy }} + </gl-badge> + </span> + + <span class="gl-text-gray-400 gl-word-break-all">@{{ user.username }}</span> + + <span + v-if="user.status.customized" + ref="statusTooltipTarget" + data-testid="user-menu-status" + class="gl-display-flex gl-align-items-baseline gl-mt-2 gl-font-sm" + > + <gl-emoji :data-name="user.status.emoji" class="gl-mr-1" /> + <span v-safe-html="user.status.message_html" class="gl-text-truncate"></span> + <gl-tooltip + v-if="user.status.message_html" + :target="() => $refs.statusTooltipTarget" + boundary="viewport" + placement="bottom" + > + <span v-safe-html="user.status.message_html"></span> + </gl-tooltip> + </span> + </span> + </template> + </gl-disclosure-dropdown-item> +</template> |