fix(groups): display color avatar in sidebar if no picture found

Satellite-im · Jun 2, 2022 · 9ac6343 · 9ac6343
1 parent d81a482
commit 9ac6343
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 72 deletions.
diff --git a/components/ui/Circle/Circle.html b/components/ui/Circle/Circle.html
@@ -4,8 +4,8 @@
   @click="() => {$emit('click')}"
 >
   <img
-    :src="source"
     v-if="type === 'image' && source"
+    :src="source"
     alt="Circle Image"
     :class="`${square ? 'is-square' : 'is-rounded'} image`"
     data-cy="circle-has-picture"

diff --git a/components/views/group/clickable/Clickable.vue b/components/views/group/clickable/Clickable.vue
@@ -5,21 +5,11 @@ import Vue, { PropType } from 'vue'
 import ContextMenu from '~/components/mixins/UI/ContextMenu'
 import { Group } from '~/store/groups/types'
 
-declare module 'vue/types/vue' {
-  interface Vue {
-    testFunc: () => void
-  }
-}
 export default Vue.extend({
   mixins: [ContextMenu],
   props: {
     group: {
       type: Object as PropType<Group>,
-      default: () => ({
-        name: '',
-        address: '',
-        motd: '',
-      }),
       required: true,
     },
     isSelected: {

diff --git a/components/views/group/icon/GroupIcon.html b/components/views/group/icon/GroupIcon.html
@@ -1,27 +1,37 @@
 <div :class="['group-icon', group.members.length > 3 ? 'unread' : '']">
-  <div v-if="group.members.length > 2" class="group-multi">
+  <div v-if="group.members.length > 2" class="group multi">
     <div
       v-for="(member, i) in group.members.slice(0, 3)"
       :class="[`group-el-${i}`]"
     >
       <UiCircle
-        type="image"
+        :type="getSource(member) ? 'image' : 'random'"
         :source="getSource(member)"
         :size="i === 2 ? 10 : i == 1 ? 20 : 30"
+        :seed="member.address"
       />
     </div>
   </div>
-  <div v-else-if="group.members.length === 2" class="group-double">
+  <div v-else-if="group.members.length === 2" class="group double">
     <div v-for="(member, i) in group.members" :class="[`group-el-${i}`]">
-      <UiCircle type="image" :source="getSource(member)" :size="25" />
+      <UiCircle
+        :type="getSource(member) ? 'image' : 'random'"
+        :source="getSource(member)"
+        :size="25"
+        :seed="member.address"
+      />
     </div>
   </div>
   <div v-else>
-    <div v-for="member in group.members" class="group-single">
-      <UiCircle type="image" :source="getSource(member)" />
+    <div v-for="member in group.members" class="group single">
+      <UiCircle
+        :type="getSource(member) ? 'image' : 'random'"
+        :source="getSource(member)"
+        :seed="member.address"
+      />
     </div>
   </div>
-  <span v-if="group.members.length > 3" class="label"
-    >{{group.members.length}}</span
-  >
+  <span v-if="group.members.length > 3" class="label">
+    {{group.members.length}}
+  </span>
 </div>
diff --git a/components/views/group/icon/GroupIcon.less b/components/views/group/icon/GroupIcon.less
@@ -5,70 +5,67 @@
     border-radius: @half;
   }
 
-  .group-multi {
+  .group {
     width: 40px;
     height: 40px;
     position: relative;
 
-    & > div {
-      position: absolute;
-    }
+    &.multi {
+      & > div {
+        position: absolute;
+      }
 
-    .group-el-1 {
-      left: 0px;
-      bottom: 5px;
-      width: 20px;
-      height: 20px;
-    }
+      .group-el-0 {
+        right: 0;
+        top: 0;
+      }
 
-    .group-el-2 {
-      top: 0;
-      left: 0;
-      width: 15px;
-      height: 15px;
-    }
+      .group-el-1 {
+        left: 0px;
+        bottom: 5px;
+        width: 20px;
+        height: 20px;
+      }
 
-    .group-el-0 {
-      right: 0;
-      top: 0;
+      .group-el-2 {
+        top: 0;
+        left: 0;
+        width: 15px;
+        height: 15px;
+      }
     }
-  }
 
-  .group-double {
-    width: 40px;
-    height: 40px;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-between;
+    &.double {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
 
-    .group-el-0 {
-      position: absolute;
-      top: 5px;
-      left: 0;
-    }
+      & > div {
+        position: absolute;
+      }
 
-    .group-el-1 {
-      position: absolute;
-      bottom: 5px;
-      right: 0;
+      .group-el-0 {
+        top: 5px;
+        left: 0;
+      }
+
+      .group-el-1 {
+        bottom: 5px;
+        right: 0;
+      }
     }
-  }
 
-  .group-single {
-    width: 40px;
-    height: 40px;
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    &.single {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
 
   &.unread {
-    position: relative;
-
     &:extend(.first-layer);
+    position: relative;
 
     .label {
       position: absolute;

diff --git a/components/views/group/icon/GroupIcon.vue b/components/views/group/icon/GroupIcon.vue
@@ -8,11 +8,6 @@ export default Vue.extend({
   props: {
     group: {
       type: Object as PropType<Group>,
-      default: () => ({
-        name: '',
-        address: '',
-        motd: '',
-      }),
       required: true,
     },
   },