Use custom slot for hc-avatar

webapp/components/Upload/index.vue

@@ -1,24 +1,26 @@
 <template>
-  <div>
-    <vue-dropzone
-      id="customdropzone"
-      :key="user.avatar"
-      ref="el"
-      :options="dropzoneOptions"
-      :include-styling="false"
-      :style="backgroundImage"
-      @vdropzone-thumbnail="thumbnail"
-      @vdropzone-error="verror"
-    />
-  </div>
+  <vue-dropzone
+    id="customdropzone"
+    :key="user.avatar"
+    ref="el"
+    :use-custom-slot="true"
+    :options="dropzoneOptions"
+    @vdropzone-error="verror"
+  >
+    <div class="dz-message">
+      <hc-avatar :user="user" class="profile-avatar" size="x-large"/>
+    </div>
+  </vue-dropzone>
 </template>
 <script>
 import vueDropzone from 'nuxt-dropzone'
+import HcAvatar from '~/components/Avatar/Avatar.vue'
 import gql from 'graphql-tag'
 
 export default {
   components: {
     vueDropzone,
+    HcAvatar,
   },
   props: {
     user: { type: Object, default: null },
@@ -28,23 +30,11 @@ export default {
       dropzoneOptions: {
         url: this.vddrop,
         maxFilesize: 5.0,
-        previewTemplate: this.template(),
         dictDefaultMessage: '',
       },
       error: false,
     }
   },
-  computed: {
-    backgroundImage() {
-      const avatar =
-        this.user.avatar ||
-        'https://human-connection.org/wp-content/uploads/2019/03/human-connection-logo.svg'
-      const userAvatar = avatar.startsWith('/') ? avatar.replace('/', '/api/') : avatar
-      return {
-        backgroundImage: `url(${userAvatar})`,
-      }
-    },
-  },
   watch: {
     error() {
       let that = this
@@ -54,28 +44,6 @@ export default {
     },
   },
   methods: {
-    template() {
-      return `<div class="dz-preview dz-file-preview">
-                <div class="dz-image">
-                  <div data-dz-thumbnail-bg></div>
-                </div>
-              </div>
-      `
-    },
-    thumbnail(file, dataUrl) {
-      let j, len, ref, thumbnailElement
-      if (file.previewElement) {
-        this.$refs.el.$el.style.backgroundImage = ''
-        file.previewElement.classList.remove('dz-file-preview')
-        ref = file.previewElement.querySelectorAll('[data-dz-thumbnail-bg]')
-        for (j = 0, len = ref.length; j < len; j++) {
-          thumbnailElement = ref[j]
-          thumbnailElement.alt = file.name
-          thumbnailElement.style.backgroundImage = 'url("' + dataUrl + '")'
-        }
-        file.previewElement.classList.add('dz-image-preview')
-      }
-    },
     vddrop(file) {
       const avatarUpload = file[0]
       this.$apollo
@@ -107,21 +75,7 @@ export default {
   },
 }
 </script>
-<style>
-#customdropzone {
-  margin: -60px auto auto;
-  width: 122px;
-  min-height: 122px;
-  background-size: cover;
-  background-repeat: no-repeat;
-  border-radius: 50%;
-  font-family: 'Arial', sans-serif;
-  letter-spacing: 0.2px;
-  color: #777;
-  transition: background-color 0.2s linear;
-  padding: 40px;
-}
-
+<style lang="scss">
 #customdropzone:hover {
   cursor: pointer;
 }
@@ -155,10 +109,4 @@ export default {
   transition: opacity 0.2s linear;
   text-align: center;
 }
-
-#customdropzone .dz-success-mark,
-.dz-error-mark,
-.dz-remove {
-  display: none;
-}
 </style>

webapp/package.json

@@ -74,9 +74,9 @@
     "tiptap-extensions": "1.20.1",
     "v-tooltip": "~2.0.2",
     "vue-count-to": "~1.0.13",
+    "vue-in-viewport-mixin": "^2.0.0",
     "vue-izitoast": "1.1.2",
     "vue-sweetalert-icons": "~3.2.0",
-    "vue2-dropzone": "^3.5.9",
     "vuex-i18n": "~1.11.0",
     "zxcvbn": "^4.4.2"
   },

webapp/yarn.lock

@@ -11167,6 +11167,11 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz#2756f46cb3258054c5f4723de8ae7e87302a1ccf"
   integrity sha512-KmvZVtmM26BQOMK1rwUZsrqxEGeKiYSZGA7SNWE6uExx8UX/cj9hq2MRV/wWC3Cq6AoeDGk57rL9YMFRel/q+g==
 
+vue-in-viewport-mixin@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/vue-in-viewport-mixin/-/vue-in-viewport-mixin-2.0.0.tgz#696058b06608cfe777cc37c30321d71b11746f55"
+  integrity sha512-crTph/eA7Sub2rzCnHiCuEXrpEfFSqahCxrv2wtFkMBRtwjVUkN9knHMiYvcciVewxXyOvIRUzMAiSKImUGgsg==
+
 vue-izitoast@1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vue-izitoast/-/vue-izitoast-1.1.2.tgz#0cf8290f045f8a389ccce4c238836c75a130eb03"
@@ -11281,13 +11286,6 @@ vue2-dropzone@3.5.8:
   dependencies:
     dropzone "^5.5.1"
 
-vue2-dropzone@^3.5.9:
-  version "3.5.9"
-  resolved "https://registry.yarnpkg.com/vue2-dropzone/-/vue2-dropzone-3.5.9.tgz#a63999a45a7aad24d4c21e3d35be409b4e6bdce8"
-  integrity sha512-nJz6teulVKlZIAeKgvPU7wBI/gzfIgqDOrEp1okSkQIkdprDVCoM0U7XWM0NOM4AAVX+4XGRtMoocYWdTYb3bQ==
-  dependencies:
-    dropzone "^5.5.1"
-
 vue@^2.6.10, vue@^2.6.6:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"