90 lines
1.8 KiB
Vue
90 lines
1.8 KiB
Vue
<template>
|
|
<div class="user-widget" :class="{'user-widget--is-profile': isProfile}">
|
|
<div class="user-widget__avatar" data-cy="user-widget-avatar" @click="openSidebar()">
|
|
<avatar :avatar-url="avatarUrl" :icon-highlighted="isProfile"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Avatar from '@/components/profile/Avatar';
|
|
import openSidebar from '@/mixins/open-sidebar';
|
|
|
|
export default {
|
|
// todo: clean up unneeded props
|
|
props: {
|
|
firstName: {
|
|
type: String
|
|
},
|
|
lastName: {
|
|
type: String
|
|
},
|
|
avatarUrl: {
|
|
type: String
|
|
},
|
|
mobile: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
showMenu: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
|
|
mixins: [openSidebar],
|
|
|
|
components: {
|
|
Avatar
|
|
},
|
|
computed: {
|
|
isProfile() {
|
|
return this.$route.meta.isProfile;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_variables.scss";
|
|
@import "@/styles/_mixins.scss";
|
|
|
|
.user-widget {
|
|
color: $color-silver-dark;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: relative;
|
|
// todo: do we need the margin right always? just do it where needed --> content block actions and objecives override this
|
|
margin-right: $medium-spacing;
|
|
|
|
&__popover {
|
|
top: 40px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
&__name {
|
|
padding: 0px $small-spacing;
|
|
color: $color-silver-dark;
|
|
font-family: $sans-serif-font-family;
|
|
}
|
|
|
|
&__date {
|
|
font-family: $sans-serif-font-family;
|
|
}
|
|
|
|
&__avatar {
|
|
width: 30px;
|
|
height: 30px;
|
|
fill: $color-silver-dark;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&--is-profile {
|
|
& > span {
|
|
color: $color-brand;
|
|
}
|
|
}
|
|
}
|
|
</style>
|