From b1310cdc8efe36d143074335a0256a9ac26a52c6 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 22 Dec 2022 08:18:15 +0100
Subject: [PATCH] avatar initials maximum 2

---
 .../Contributions/ContributionListItem.vue    |  8 +++++--
 frontend/src/components/Menu/Navbar.vue       | 14 ++++++++---
 .../Template/RightSide/LastTransactions.vue   | 23 ++-----------------
 .../Transactions/TransactionReceive.vue       | 12 ++++++++--
 .../Transactions/TransactionSend.vue          | 12 ++++++++--
 .../src/components/UserSettings/UserCard.vue  | 14 ++++++++---
 6 files changed, 50 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/Contributions/ContributionListItem.vue b/frontend/src/components/Contributions/ContributionListItem.vue
index 2642a9123..46df31b92 100644
--- a/frontend/src/components/Contributions/ContributionListItem.vue
+++ b/frontend/src/components/Contributions/ContributionListItem.vue
@@ -8,7 +8,8 @@
         <b-col cols="2">
           <avatar
             v-if="firstName"
-            :username="username"
+            :username="username.username"
+            :initials="username.initials"
             color="#fff"
             class="font-weight-bold"
           ></avatar>
@@ -269,7 +270,10 @@ export default {
       return 'collapse' + String(this.id)
     },
     username() {
-      return `${this.firstName} ${this.lastName}`
+      return {
+        username: `${this.firstName} ${this.lastName}`,
+        initials: `${this.firstName[0]}${this.lastName[0]}`,
+      }
     },
   },
   methods: {
diff --git a/frontend/src/components/Menu/Navbar.vue b/frontend/src/components/Menu/Navbar.vue
index bf525b97e..c23f2bf5c 100644
--- a/frontend/src/components/Menu/Navbar.vue
+++ b/frontend/src/components/Menu/Navbar.vue
@@ -21,10 +21,15 @@
               <div>
                 <div class="d-flex align-items-center">
                   <div class="mr-3">
-                    <avatar :username="username" :color="'#fff'" :size="81"></avatar>
+                    <avatar
+                      :username="username.username"
+                      :initials="username.initials"
+                      :color="'#fff'"
+                      :size="81"
+                    ></avatar>
                   </div>
                   <div>
-                    <div data-test="navbar-item-username">{{ username }}</div>
+                    <div data-test="navbar-item-username">{{ username.username }}</div>
 
                     <div class="text-right">
                       {{ $store.state.email }}
@@ -64,7 +69,10 @@ export default {
   },
   computed: {
     username() {
-      return `${this.$store.state.firstName} ${this.$store.state.lastName}`
+      return {
+        username: `${this.$store.state.firstName} ${this.$store.state.lastName}`,
+        initials: `${this.$store.state.firstName[0]}${this.$store.state.lastName[0]}`,
+      }
     },
   },
 }
diff --git a/frontend/src/components/Template/RightSide/LastTransactions.vue b/frontend/src/components/Template/RightSide/LastTransactions.vue
index 6d84d2d37..a4bdb29f5 100644
--- a/frontend/src/components/Template/RightSide/LastTransactions.vue
+++ b/frontend/src/components/Template/RightSide/LastTransactions.vue
@@ -6,7 +6,7 @@
         <b-icon icon="three-dots-vertical"></b-icon>
       </b-col> -->
     </b-row>
-    <!-- <b-list-group class="mt-5"> -->
+
     <div v-for="(transaction, index) in transactions" :key="transaction.id">
       <b-row
         align-v="center"
@@ -24,6 +24,7 @@
               :size="72"
               :color="'#fff'"
               :username="`${transaction.linkedUser.firstName} ${transaction.linkedUser.lastName}`"
+              :initials="`${transaction.linkedUser.firstName[0]}${transaction.linkedUser.lastName[0]}`"
             ></avatar>
           </div>
         </b-col>
@@ -49,27 +50,7 @@
           </b-row>
         </b-col>
       </b-row>
-      <!-- <b-list-group-item
-          class="border-0"
-          v-if="
-            index <= 7 &&
-            transaction.typeId !== 'DECAY' &&
-            transaction.typeId !== 'LINK_SUMMARY' &&
-            transaction.typeId !== 'CREATION'
-          "
-        >
-          <div class="d-flex align-items-center">
-            <avatar
-              :username="`${transaction.linkedUser.firstName} ${transaction.linkedUser.lastName}`"
-            ></avatar>
-            <span>
-              <name :linkedUser="transaction.linkedUser" @set-tunneled-email="setTunneledEmail" />
-            </span>
-            <b-badge>{{ transaction.amount | GDD }}</b-badge>
-          </div>
-        </b-list-group-item> -->
     </div>
-    <!-- </b-list-group> -->
   </div>
 </template>
 <script>
diff --git a/frontend/src/components/Transactions/TransactionReceive.vue b/frontend/src/components/Transactions/TransactionReceive.vue
index f5c762828..866ee2665 100644
--- a/frontend/src/components/Transactions/TransactionReceive.vue
+++ b/frontend/src/components/Transactions/TransactionReceive.vue
@@ -3,7 +3,12 @@
     <b-row @click="visible = !visible" class="align-items-center">
       <b-col cols="2">
         <!-- <b-avatar :text="avatarText" variant="success" size="3em"></b-avatar> -->
-        <avatar :username="username" :color="'#fff'" size="42"></avatar>
+        <avatar
+          :username="username.username"
+          :initials="username.initials"
+          :color="'#fff'"
+          size="42"
+        ></avatar>
       </b-col>
       <b-col>
         <div>
@@ -104,7 +109,10 @@ export default {
   },
   computed: {
     username() {
-      return `${this.linkedUser.firstName} ${this.linkedUser.lastName}`
+      return {
+        username: `${this.linkedUser.firstName} ${this.linkedUser.lastName}`,
+        initials: `${this.linkedUser.firstName[0]}${this.linkedUser.lastName[0]}`,
+      }
     },
   },
 }
diff --git a/frontend/src/components/Transactions/TransactionSend.vue b/frontend/src/components/Transactions/TransactionSend.vue
index 5ceecc999..e3f1c3238 100644
--- a/frontend/src/components/Transactions/TransactionSend.vue
+++ b/frontend/src/components/Transactions/TransactionSend.vue
@@ -2,7 +2,12 @@
   <div class="transaction-slot-send">
     <b-row @click="visible = !visible" class="align-items-center">
       <b-col cols="2">
-        <avatar :username="username" :color="'#fff'" size="42"></avatar>
+        <avatar
+          :username="username.username"
+          :initials="username.initials"
+          :color="'#fff'"
+          size="42"
+        ></avatar>
       </b-col>
       <b-col>
         <div>
@@ -104,7 +109,10 @@ export default {
   },
   computed: {
     username() {
-      return `${this.linkedUser.firstName} ${this.linkedUser.lastName}`
+      return {
+        username: `${this.linkedUser.firstName} ${this.linkedUser.lastName}`,
+        initials: `${this.linkedUser.firstName[0]}${this.linkedUser.lastName[0]}`,
+      }
     },
   },
 }
diff --git a/frontend/src/components/UserSettings/UserCard.vue b/frontend/src/components/UserSettings/UserCard.vue
index f1982987c..0d59411b5 100755
--- a/frontend/src/components/UserSettings/UserCard.vue
+++ b/frontend/src/components/UserSettings/UserCard.vue
@@ -2,7 +2,12 @@
   <div class="userdata-card">
     <b-row>
       <b-col class="centerPerMargin">
-        <avatar :username="username" :color="'#fff'" :size="90"></avatar>
+        <avatar
+          :username="username.username"
+          :initials="username.initials"
+          :color="'#fff'"
+          :size="90"
+        ></avatar>
       </b-col>
     </b-row>
     <b-card class="border-0">
@@ -53,13 +58,16 @@ export default {
   },
   computed: {
     username() {
-      return `${this.$store.state.firstName} ${this.$store.state.lastName}`
+      return {
+        username: `${this.$store.state.firstName} ${this.$store.state.lastName}`,
+        initials: `${this.$store.state.firstName[0]}${this.$store.state.lastName[0]}`,
+      }
     },
   },
 }
 </script>
 <style scoped>
 .centerPerMargin {
-  padding-left: 38%;
+  padding-left: 44%;
 }
 </style>