ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add user icon to user widget

This commit is contained in:
Ramon Wenger 2018-10-08 17:42:52 +02:00
parent 9fad28f97c
commit c56cfb8c19
2 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
client/src/components/UserWidget.vue
View File

@ -1,14 +1,20 @@
<template> <template>
<div class="user-widget"> <div class="user-widget">
<img class="user-widget__avatar" :src="avatar"> <user-icon class="user-widget__avatar" :src="avatar"></user-icon>
<span class="user-widget__name">{{firstName}} {{lastName}}</span> <span class="user-widget__name">{{firstName}} {{lastName}}</span>
<span class="user-widget__date" v-if="date">{{date}}</span> <span class="user-widget__date" v-if="date">{{date}}</span>
</div> </div>
</template> </template>
<script> <script>
import UserIcon from '@/components/icons/UserIcon';
export default { export default {
props: ['firstName', 'lastName', 'avatar', 'date'] props: ['firstName', 'lastName', 'avatar', 'date'],
components: {
UserIcon
}
} }
</script> </script>

8
client/src/components/icons/UserIcon.vue Normal file
View File

@ -0,0 +1,8 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path
d="M50,0A50.12,50.12,0,0,0,.07,46.65S0,48.23,0,50s.07,3.25.07,3.36A50,50,0,1,0,50,0ZM24.14,86V79.84A15.18,15.18,0,0,1,39.31,64.67H60.69A15.18,15.18,0,0,1,75.86,79.84V86a44.27,44.27,0,0,1-51.72,0Zm57.47-5V79.84A20.94,20.94,0,0,0,60.69,58.93H39.31A20.94,20.94,0,0,0,18.39,79.84v1.31a44.4,44.4,0,1,1,63.22-.06Z"/>
<path
d="M50,20.26A17.54,17.54,0,1,0,67.55,37.81,17.57,17.57,0,0,0,50,20.26ZM50,49.6a11.8,11.8,0,1,1,11.81-11.8A11.82,11.82,0,0,1,50,49.6Z"/>
</svg>
</template>