From 7cd5a790ae4792e482a060558adca88135a89efa Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Mon, 14 Dec 2020 17:17:24 +0000
Subject: [PATCH] feat(frontend): replacers all avatars with user avatar
 component

---
 frontend/src/components/FeedCommit.vue     | 16 +++++++++-------
 frontend/src/components/FeedStream.vue     | 16 ++++++++--------
 frontend/src/components/ListItemCommit.vue | 18 ++++++++++--------
 frontend/src/components/UserAvatar.vue     |  6 +++---
 4 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/FeedCommit.vue b/frontend/src/components/FeedCommit.vue
index c53d58ccb..d3b5d2796 100644
--- a/frontend/src/components/FeedCommit.vue
+++ b/frontend/src/components/FeedCommit.vue
@@ -1,13 +1,12 @@
 <template>
   <div>
     <div class="text-center" style="position: absolute">
-      <v-avatar class="mt-10" color="background2" size="40">
-        <v-img v-if="user.avatar" :src="user.avatar" />
-        <v-img
-          v-else
-          :src="`https://robohash.org/` + user.id + `.png?size=40x40`"
-        />
-      </v-avatar>
+      <user-avatar
+        :id="user.id"
+        :avatar="user.avatar"
+        :name="user.name"
+        :size="30"
+      />
     </div>
     <div class="ml-12">
       <v-row class="caption">
@@ -73,7 +72,10 @@
   </div>
 </template>
 <script>
+import UserAvatar from "./UserAvatar"
+
 export default {
+  components: { UserAvatar },
   props: {
     commit: {
       type: Object,
diff --git a/frontend/src/components/FeedStream.vue b/frontend/src/components/FeedStream.vue
index f0f0fc2ae..dad50164f 100644
--- a/frontend/src/components/FeedStream.vue
+++ b/frontend/src/components/FeedStream.vue
@@ -1,13 +1,12 @@
 <template>
   <div>
     <div class="text-center" style="position: absolute">
-      <v-avatar class="mt-10" color="background2" size="40">
-        <v-img v-if="user.avatar" :src="user.avatar" />
-        <v-img
-          v-else
-          :src="`https://robohash.org/` + user.id + `.png?size=40x40`"
-        />
-      </v-avatar>
+      <user-avatar
+        :id="user.id"
+        :avatar="user.avatar"
+        :name="user.name"
+        :size="30"
+      />
     </div>
     <div class="ml-12">
       <v-row class="caption">
@@ -99,9 +98,10 @@
 </template>
 <script>
 import BtnClickCopy from "./BtnClickCopy"
+import UserAvatar from "./UserAvatar"
 
 export default {
-  components: { BtnClickCopy },
+  components: { BtnClickCopy, UserAvatar },
   props: {
     stream: {
       type: Object,
diff --git a/frontend/src/components/ListItemCommit.vue b/frontend/src/components/ListItemCommit.vue
index 6d6519686..72c009605 100644
--- a/frontend/src/components/ListItemCommit.vue
+++ b/frontend/src/components/ListItemCommit.vue
@@ -1,13 +1,12 @@
 <template>
   <v-row>
-    <v-col cols="1">
-      <v-avatar class="ma-1" color="grey lighten-3" size="40">
-        <v-img v-if="commit.authorAvatar" :src="commit.authorAvatar" />
-        <v-img
-          v-else
-          :src="`https://robohash.org/` + commit.authorId + `.png?size=40x40`"
-        />
-      </v-avatar>
+    <v-col cols="1" style="margin-top: 8px;">
+      <user-avatar
+        :id="commit.authorId"
+        :avatar="commit.authorAvatar"
+        :name="commit.authorName"
+        :size="30"
+      />
     </v-col>
     <v-col cols="7">
       <div class="subtitle-1">
@@ -35,7 +34,10 @@
   </v-row>
 </template>
 <script>
+  import UserAvatar from "./UserAvatar"
+
 export default {
+  components: {UserAvatar},
   props: ["commit", "streamId"],
   computed: {
     commitDate() {
diff --git a/frontend/src/components/UserAvatar.vue b/frontend/src/components/UserAvatar.vue
index 930103b17..2bcb657c0 100644
--- a/frontend/src/components/UserAvatar.vue
+++ b/frontend/src/components/UserAvatar.vue
@@ -1,14 +1,14 @@
 <template>
   <div style="display: inline-block">
-    <v-tooltip right color="transparent" open-on-focus close-delay="1200">
+    <v-menu offset-x open-on-hover>
       <template #activator="{ on, attrs }">
         <v-avatar
           class="ma-1"
           color="grey lighten-3"
           :size="size"
           v-bind="attrs"
-          v-on="on"
           to="/"
+          v-on="on"
         >
           <v-img v-if="avatar" :src="avatar" />
           <v-img
@@ -39,7 +39,7 @@
           <br />
         </v-card-text>
       </v-card>
-    </v-tooltip>
+    </v-menu>
   </div>
 </template>
 <script>