diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-03-16 12:09:12 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-03-16 12:09:12 +0000 |
commit | cbfe03ae04a52d9825ff7cbeccdfe5d313adf6a2 (patch) | |
tree | e4879b35d019d3bbba1689f3ac4c48b81bf7b451 /app/assets/javascripts/vue_shared | |
parent | 3fd97b4bba24ca412112aad025a38a32c7a6cf8c (diff) | |
download | gitlab-ce-cbfe03ae04a52d9825ff7cbeccdfe5d313adf6a2.tar.gz |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/vue_shared')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue | 54 |
1 files changed, 45 insertions, 9 deletions
diff --git a/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue index ca25d9ee738..602d4ab89e1 100644 --- a/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue +++ b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue @@ -1,8 +1,10 @@ <script> -import { GlPopover, GlSkeletonLoading } from '@gitlab/ui'; +import { GlPopover, GlSkeletonLoading, GlSprintf } from '@gitlab/ui'; import Icon from '~/vue_shared/components/icon.vue'; import UserAvatarImage from '../user_avatar/user_avatar_image.vue'; import { glEmojiTag } from '../../../emoji'; +import { s__ } from '~/locale'; +import { isString } from 'lodash'; export default { name: 'UserPopover', @@ -10,6 +12,7 @@ export default { Icon, GlPopover, GlSkeletonLoading, + GlSprintf, UserAvatarImage, }, props: { @@ -45,8 +48,27 @@ export default { nameIsLoading() { return !this.user.name; }, - jobInfoIsLoading() { - return !this.user.loaded && this.user.organization === null; + workInformationIsLoading() { + return !this.user.loaded && this.workInformation === null; + }, + workInformation() { + const { jobTitle, organization } = this.user; + + if (organization && jobTitle) { + return { + message: s__('Profile|%{job_title} at %{organization}'), + placeholders: { job_title: jobTitle, organization }, + }; + } else if (organization) { + return organization; + } else if (jobTitle) { + return jobTitle; + } + + return null; + }, + workInformationShouldUseSprintf() { + return !isString(this.workInformation); }, locationIsLoading() { return !this.user.loaded && this.user.location === null; @@ -72,16 +94,30 @@ export default { <gl-skeleton-loading v-else :lines="1" class="animation-container-small mb-1" /> </div> <div class="text-secondary"> - <div v-if="user.bio" class="js-bio d-flex mb-1"> + <div v-if="user.bio" class="d-flex mb-1"> <icon name="profile" class="category-icon flex-shrink-0" /> - <span class="ml-1">{{ user.bio }}</span> + <span ref="bio" class="ml-1">{{ user.bio }}</span> </div> - <div v-if="user.organization" class="js-organization d-flex mb-1"> - <icon v-show="!jobInfoIsLoading" name="work" class="category-icon flex-shrink-0" /> - <span class="ml-1">{{ user.organization }}</span> + <div v-if="workInformation" class="d-flex mb-1"> + <icon + v-show="!workInformationIsLoading" + name="work" + class="category-icon flex-shrink-0" + /> + <span ref="workInformation" class="ml-1"> + <gl-sprintf v-if="workInformationShouldUseSprintf" :message="workInformation.message"> + <template + v-for="(placeholder, slotName) in workInformation.placeholders" + v-slot:[slotName] + > + <span :key="slotName">{{ placeholder }}</span> + </template> + </gl-sprintf> + <span v-else>{{ workInformation }}</span> + </span> </div> <gl-skeleton-loading - v-if="jobInfoIsLoading" + v-if="workInformationIsLoading" :lines="1" class="animation-container-small mb-1" /> |