Fix avatar loading spinner size

Refactored avatar component logic to be located only in Phoenix core. Moved spinner into the avatar component. Adjusted spinner size to match the one of the avatar to avoid layout shifting.
owncloud · Jan 28, 2020 · 5a1fd3f · 5a1fd3f
1 parent e0df137
commit 5a1fd3f
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 40 deletions.
diff --git a/apps/files/src/components/Collaborators/AutocompleteItem.vue b/apps/files/src/components/Collaborators/AutocompleteItem.vue
@@ -1,12 +1,9 @@
 <template>
   <div class="uk-flex uk-flex-middle">
-    <oc-spinner v-if="loading" uk-spinner="ratio:1.6" class="uk-margin-small-right" :aria-label="$gettext('Loading avatar')" />
+    <avatar v-if="item.value.shareType === 0" class="uk-margin-small-right" :width="50" :userid="avatar" :userName="item.label" />
     <template v-else>
-      <oc-avatar v-if="item.value.shareType === 0" :src="avatar" class="uk-margin-small-right" :width="50" :userName="item.label" />
-      <template v-else>
-        <oc-icon v-if="item.value.shareType === 1" class="uk-margin-small-right" name="group" size="large" />
-        <oc-icon v-else class="uk-margin-small-right" name="person" size="large" />
-      </template>
+      <oc-icon v-if="item.value.shareType === 1" class="uk-margin-small-right" name="group" size="large" />
+      <oc-icon v-else class="uk-margin-small-right" name="person" size="large" />
     </template>
     <div class="files-collaborators-autocomplete-user-text">
       <div

diff --git a/apps/files/src/components/Collaborators/Collaborator.vue b/apps/files/src/components/Collaborators/Collaborator.vue
@@ -2,9 +2,8 @@
   <div>
     <div v-if="$_reshareInformation" class="uk-text-meta uk-flex uk-flex-middle uk-margin-small-bottom"><oc-icon name="repeat" class="uk-margin-small-right" /> {{ $_reshareInformation }}</div>
     <div class="files-collaborators-collaborator-information uk-flex uk-flex-wrap uk-flex-middle">
-      <oc-spinner v-if="loading" key="collaborator-avatar-spinner" uk-spinner="ratio:1.6" class="uk-margin-small-right" :aria-label="$gettext('Loading')"/>
-      <div v-else key="collaborator-avatar-loaded">
-        <oc-avatar v-if="collaborator.info.share_type === '0'" :src="avatar" class="uk-margin-small-right" :width="50" :userName="collaborator.displayName" />
+      <div key="collaborator-avatar-loaded">
+        <avatar v-if="collaborator.info.share_type === '0'" class="uk-margin-small-right" :width="50" :userid="collaborator.name" :userName="collaborator.displayName" />
         <div v-else key="collaborator-avatar-placeholder">
           <oc-icon v-if="collaborator.info.share_type === '1'" class="uk-margin-small-right" name="group" size="large" />
           <oc-icon v-else class="uk-margin-small-right" name="person" size="large" />
@@ -34,12 +33,6 @@ export default {
   mixins: [
     Mixins
   ],
-  data () {
-    return {
-      avatar: '',
-      loading: false
-    }
-  },
   computed: {
     ...mapGetters(['user']),
 
@@ -65,9 +58,6 @@ export default {
         label: this.$gettext('Unknown Role')
       }
     }
-  },
-  mounted () {
-    this.$_ocCollaborators_loadAvatar(this.collaborator)
   }
 }
 </script>

diff --git a/apps/files/src/store/actions.js b/apps/files/src/store/actions.js
@@ -235,7 +235,6 @@ function _buildShare (s, file) {
     case ('1'): // group share
       share.role = bitmaskToRole(s.permissions, file.type === 'folder')
       share.permissions = s.permissions
-      share.avatar = 'https://picsum.photos/64/64?image=1075' // TODO where do we get the avatar from? by uid? remote.php/dav/avatars/admin/128.png
       share.name = s.share_with // this is the recipient userid, rename to uid or subject? add separate field userName?
       share.displayName = s.share_with_displayname
       // TODO: Refactor to work with roles / prepare for roles API

diff --git a/src/components/Avatar.vue b/src/components/Avatar.vue
@@ -1,12 +1,15 @@
 <template>
   <component :is="type" v-if="enabled">
-    <oc-avatar :width="width" :loading="loading" :src="avatarSource" :userName="userName" />
+    <oc-spinner v-if="loading" size="small" key="collaborator-avatar-spinner" :aria-label="$gettext('Loading')"
+     :style="'width:' + width + 'px;height:' + width + 'px'" />
+    <oc-avatar v-else :width="width" :src="avatarSource" :userName="userName" />
   </component>
 </template>
 <script>
 import { mapGetters } from 'vuex'
 
 export default {
+  name: 'Avatar',
   data () {
     return {
       /**
@@ -35,22 +38,24 @@ export default {
       const url = instance + '/remote.php/dav/avatars/' + this.userid + '/128.png'
       headers.append('Authorization', 'Bearer ' + this.getToken)
       headers.append('X-Requested-With', 'XMLHttpRequest')
-      fetch(url, { headers })
-        .then(response => {
-          if (response.ok) {
-            return response.blob()
-          }
-          throw new Error('Network response was not ok.')
-        })
-        .then(blob => {
-          this.loading = false
-          this.avatarSource = window.URL.createObjectURL(blob)
-        })
-        .catch(error => {
-          this.avatarSource = ''
-          this.loading = false
-          console.log('There has been a problem with your fetch operation: ', error.message)
-        })
+      window.setTimeout(() => {
+        fetch(url, { headers })
+          .then(response => {
+            if (response.ok) {
+              return response.blob()
+            }
+            throw new Error('Network response was not ok.')
+          })
+          .then(blob => {
+            this.loading = false
+            this.avatarSource = window.URL.createObjectURL(blob)
+          })
+          .catch(error => {
+            this.avatarSource = ''
+            this.loading = false
+            console.log('There has been a problem with your fetch operation: ', error.message)
+          })
+      }, 5000)
     }
   },
   watch: {

diff --git a/src/components/UserMenu.vue b/src/components/UserMenu.vue
@@ -28,12 +28,8 @@
 
 <script>
 import appVersionJson from '../../build/version.json'
-import Avatar from './Avatar.vue'
 
 export default {
-  components: {
-    Avatar
-  },
   props: {
     userId: {
       type: String,

diff --git a/src/phoenix.js b/src/phoenix.js
@@ -45,6 +45,8 @@ import { Drag, Drop } from 'vue-drag-drop'
 import DesignSystem from 'owncloud-design-system'
 import 'owncloud-design-system/dist/system/system.css'
 
+import Avatar from './components/Avatar.vue'
+
 import wgxpath from 'wicked-good-xpath'
 wgxpath.install()
 
@@ -64,6 +66,7 @@ Vue.use(VueMeta, {
 
 Vue.component('drag', Drag)
 Vue.component('drop', Drop)
+Vue.component('avatar', Avatar)
 
 // --- Router ----