kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Show category icons in user popover

Browse source 
Show bio, organization and location icons within user popover.
This commit is contained in:
Kushal Pandya 2019-04-11 14:45:32 +05:30
parent d8d57f23b2
commit 2d58213f09
3 changed files with 39 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue
View file

@ -1,11 +1,13 @@
<script>
import { GlPopover, GlSkeletonLoading } from '@gitlab/ui';
import Icon from '~/vue_shared/components/icon.vue';
import UserAvatarImage from '../user_avatar/user_avatar_image.vue';
import { glEmojiTag } from '../../../emoji';
export default {
name: 'UserPopover',
components: {
Icon,
GlPopover,
GlSkeletonLoading,
UserAvatarImage,
@ -68,16 +70,27 @@ 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">{{ user.bio }}</div>
<div v-if="user.organization" class="js-organization">{{ user.organization }}</div>
<div v-if="user.bio" class="js-bio d-flex mb-1">
<icon name="profile" css-classes="category-icon" />
<span 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" css-classes="category-icon" />
<span class="ml-1">{{ user.organization }}</span>
</div>
<gl-skeleton-loading
v-if="jobInfoIsLoading"
:lines="1"
class="animation-container-small mb-1"
/>
</div>
<div class="text-secondary">
{{ user.location }}
<div class="js-location text-secondary d-flex">
<icon
v-show="!locationIsLoading && user.location"
name="location"
css-classes="category-icon"
/>
<span class="ml-1">{{ user.location }}</span>
<gl-skeleton-loading
v-if="locationIsLoading"
:lines="1"

4
app/assets/stylesheets/components/popover.scss
View file

@ -5,6 +5,10 @@
padding: $gl-padding-8;
font-size: $gl-font-size-small;
line-height: $gl-line-height;
.category-icon {
color: $gray-600;
}
}
}

18
spec/javascripts/vue_shared/components/user_popover/user_popover_spec.js
View file

@ -61,6 +61,12 @@ describe('User Popover Component', () => {
expect(vm.$el.textContent).toContain(DEFAULT_PROPS.user.username);
expect(vm.$el.textContent).toContain(DEFAULT_PROPS.user.location);
});
it('shows icon for location', () => {
const iconEl = vm.$el.querySelector('.js-location svg');
expect(iconEl.querySelector('use').getAttribute('xlink:href')).toContain('location');
});
});
describe('job data', () => {
@ -117,6 +123,18 @@ describe('User Popover Component', () => {
'Me & my <funky> Company',
);
});
it('shows icon for bio', () => {
const iconEl = vm.$el.querySelector('.js-bio svg');
expect(iconEl.querySelector('use').getAttribute('xlink:href')).toContain('profile');
});
it('shows icon for organization', () => {
const iconEl = vm.$el.querySelector('.js-organization svg');
expect(iconEl.querySelector('use').getAttribute('xlink:href')).toContain('work');
});
});
describe('status data', () => {