feat: banner on profile image showing we can change avatar (#927)

officelifehq · May 29, 2021 · 45509ec · 45509ec
1 parent 201bf63
commit 45509ec
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/resources/js/Pages/Employee/Partials/Avatar.vue b/resources/js/Pages/Employee/Partials/Avatar.vue
@@ -9,19 +9,39 @@
     width: 100%;
     height: auto;
   }
+
+  &:hover {
+    .change-avatar {
+      display: block;
+    }
+  }
+}
+
+.change-avatar {
+  box-shadow: 1px 1px 2px rgba(122, 122, 122, 0.17);
+  opacity: 0.8;
+  top: 10px;
+  width: calc(100% - 20px);
 }
 </style>
 
 <template>
-  <div class="db center mb4 avatar">
+  <div v-if="permissions.can_update_avatar" class="db center mb4 avatar pointer relative">
     <uploadcare :public-key="uploadcarePublicKey"
                 :tabs="'file'"
                 @success="onSuccess"
                 @error="onError"
     >
       <the-avatar :avatar="localAvatar" :size="300" />
+
+      <div class="change-avatar absolute bg-white pa3 tc dn">
+        Change avatar
+      </div>
     </uploadcare>
   </div>
+  <div v-else class="db center mb4 avatar">
+    <the-avatar :avatar="localAvatar" :size="300" />
+  </div>
 </template>
 
 <script>

diff --git a/resources/js/Shared/Avatar.vue b/resources/js/Shared/Avatar.vue
@@ -5,7 +5,7 @@ span {
 </style>
 
 <template>
-  <img v-if="avatar" :loading="loading" class="pointer" :src="avatar.normal"
+  <img v-if="avatar" :loading="loading" :class="avatar.url ? 'pointer' : ''" :src="avatar.normal"
        :width="size"
        :height="size"
        :srcset="avatar.normal + ' 1x,' + avatar.retina + ' 2x'" :alt="alt"