Merge pull request #4320 from Ocelot-Social-Community/4236-avatar-has-border

fix: 🍰 Fixing The Avatars unwanted Border

webapp/components/AvatarMenu/AvatarMenu.vue

@@ -46,6 +46,7 @@
     </template>
   </dropdown>
 </template>
+
 <script>
 import { mapGetters } from 'vuex'
 import Dropdown from '~/components/Dropdown'
@@ -118,6 +119,7 @@ export default {
   },
 }
 </script>
+
 <style lang="scss">
 .avatar-menu {
   margin: $space-xxx-small 0px 0px $space-xx-small;

webapp/components/_new/generic/UserAvatar/UserAvatar.story.js

@@ -4,6 +4,7 @@ import StoryRouter from 'storybook-vue-router'
 import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
 import helpers from '~/storybook/helpers'
 import { user } from '~/components/UserTeaser/UserTeaser.story.js'
+import imageFile from './storybook/critical-avatar-white-background.png'
 
 helpers.init()
 const anonymousUser = {
@@ -13,45 +14,64 @@ const anonymousUser = {
 }
 const userWithoutAvatar = {
   ...user,
-  avatar: null,
   name: 'Ana Paula Nunes Marques',
+  avatar: null,
+}
+const userWithAvatar = {
+  ...user,
+  name: 'Jochen Image',
+  avatar: { url: imageFile },
 }
 storiesOf('UserAvatar', module)
   .addDecorator(withA11y)
   .addDecorator(helpers.layout)
   .addDecorator(StoryRouter())
-  .add('with image', () => ({
+  .add('normal, with image', () => ({
     components: { UserAvatar },
     data: () => ({
-      user,
+      user: userWithAvatar,
     }),
     template: '<user-avatar :user="user" />',
   }))
-  .add('without image, anonymous user', () => ({
+  .add('normal without image, anonymous user', () => ({
     components: { UserAvatar },
     data: () => ({
       user: anonymousUser,
     }),
     template: '<user-avatar :user="user" />',
   }))
-  .add('without image, user initials', () => ({
+  .add('normal without image, user initials', () => ({
     components: { UserAvatar },
     data: () => ({
       user: userWithoutAvatar,
     }),
     template: '<user-avatar :user="user" />',
   }))
+  .add('small, with image', () => ({
+    components: { UserAvatar },
+    data: () => ({
+      user: userWithAvatar,
+    }),
+    template: '<user-avatar :user="user" size="small"/>',
+  }))
   .add('small', () => ({
     components: { UserAvatar },
     data: () => ({
-      user,
+      user: userWithoutAvatar,
     }),
     template: '<user-avatar :user="user" size="small"/>',
   }))
+  .add('large, with image', () => ({
+    components: { UserAvatar },
+    data: () => ({
+      user: userWithAvatar,
+    }),
+    template: '<user-avatar :user="user" size="large"/>',
+  }))
   .add('large', () => ({
     components: { UserAvatar },
     data: () => ({
-      user,
+      user: userWithoutAvatar,
     }),
     template: '<user-avatar :user="user" size="large"/>',
   }))

webapp/components/_new/generic/UserAvatar/UserAvatar.vue

@@ -1,9 +1,10 @@
 <template>
-  <div :class="['user-avatar', size && `--${this.size}`]">
+  <div :class="['user-avatar', size && `--${this.size}`, !isAvatar && '--no-image']">
+    <!-- '--no-image' is neccessary, because otherwise we still have a little unwanted boarder araund the image for images with white backgrounds -->
     <span class="initials">{{ userInitials }}</span>
     <base-icon v-if="isAnonymous" name="eye-slash" />
     <img
-      v-if="user && user.avatar"
+      v-if="isAvatar"
       :src="user.avatar | proxyApiUrl"
       class="image"
       :alt="user.name"
@@ -33,6 +34,10 @@ export default {
     isAnonymous() {
       return !this.user || !this.user.name || this.user.name.toLowerCase() === 'anonymous'
     },
+    isAvatar() {
+      // TODO may we could test as well if the image is reachable? otherwise the background gets white and the initails can not be read
+      return this.user && this.user.avatar
+    },
     userInitials() {
       if (this.isAnonymous) return ''
 
@@ -49,7 +54,7 @@ export default {
   width: $size-avatar-base;
   border-radius: 50%;
   overflow: hidden;
-  background-color: $color-primary-dark;
+  background-color: $background-color-base;
   color: $text-color-primary-inverse;
 
   &.--small {
@@ -63,6 +68,10 @@ export default {
     font-size: $font-size-xx-large;
   }
 
+  &.--no-image {
+    background-color: $color-primary-dark;
+  }
+
   > .initials,
   > .base-icon {
     position: absolute;
@@ -77,6 +86,7 @@ export default {
     height: 100%;
     object-fit: cover;
     object-position: center;
+    background-color: $background-color-base;
   }
 }
 </style>