Add new default user avatar

client/src/components/profile/Avatar.vue

@@ -1,28 +1,43 @@
 <template>
   <div class="avatar">
     <transition name="fade">
-      <user-icon v-show="!isAvatarLoaded" class="avatar__placeholder" :class="{'avatar__placeholder--highlighted': iconHighlighted}"></user-icon>
+      <default-avatar  v-show="!isAvatarLoaded" class="avatar__placeholder"
+                      :class="{'avatar__placeholder--highlighted': iconHighlighted}"></default-avatar>
     </transition>
     <transition name="show">
-      <div v-show="isAvatarLoaded" class="avatar__image" ref="avatarImage" :style="{'background-image': `url(${this.avatarUrl})`}"></div>
+      <div v-show="isAvatarLoaded" class="avatar__image" ref="avatarImage"
+           :style="{'background-image': `url(${this.avatarUrl})`}"></div>
     </transition>
     <img class="avatar__fake-image" :src="avatarUrl" ref="fakeImage"/>
+    <a class="avatar__edit" v-if="editable"><pen-icon></pen-icon></a>
   </div>
 </template>
 
 <script>
 
-  import UserIcon from '@/components/icons/UserIcon';
+  import DefaultAvatar from '@/components/icons/DefaultAvatar';
+  import PenIcon from '@/components/icons/PenIcon';
 
   export default {
-    props: ['avatarUrl', 'iconHighlighted'],
-    components: {UserIcon},
-    data () {
+    props: {
+      avatarUrl: {
+        type: String
+      },
+      iconHighlighted: {},
+      editable: {
+        default: false
+      }
+    },
+    components: {
+      DefaultAvatar,
+      PenIcon
+    },
+    data() {
       return {
         isAvatarLoaded: false
       }
     },
-    mounted () {
+    mounted() {
       if (this.avatarUrl !== '') {
         this.$refs.fakeImage.addEventListener('load', () => {
           if (this.$refs.fakeImage) {
@@ -30,7 +45,7 @@
             this.isAvatarLoaded = true;
           }
         });
-      };
+      }
     }
   }
 </script>
@@ -45,11 +60,11 @@
     width: $max-width;
     overflow: hidden;
     text-align: center;
-    border-radius: 50%;
 
     &__placeholder {
       height: $max-width;
       fill: $color-silver-dark;
+      border-radius: 50%;
 
       &--highlighted {
         fill: $color-brand;
@@ -57,14 +72,14 @@
     }
 
     &__image {
+      background-size: cover;
+      background-position: center center;
+      height: 100%;
+      width: 100%;
+      border: 0;
+      border-radius: 50%;
 
-    background-size: cover;
-    background-position: center center;
-    height: 100%;
-    width: 100%;
-    border: 0;
-
-    &--landscape {
+      &--landscape {
         width: auto;
         height: $max-width;
       }
@@ -75,10 +90,25 @@
       height: 0;
     }
 
-     .fade-leave-active, .show-enter-active {
+    &__edit {
+      position: absolute;
+      box-sizing: border-box;
+      width: 34px;
+      height: 34px;
+      display: block;
+      left: 50%;
+      bottom: -7px;
+      transform: translateX(50%);
+      background-color: $color-white;
+      border-radius: 50%;
+      padding: 6px;
+      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
+    }
+
+    .fade-leave-active, .show-enter-active {
       transition: opacity .5s;
     }
-    .fade-leave-to, .show-enter  {
+    .fade-leave-to, .show-enter {
       opacity: 0;
     }