Merge pull request #2783 from owncloud/fix-avatar-top-bar

Include avatar placeholder in relevant places

apps/files/src/components/Collaborators/AutocompleteItem.vue

@@ -2,13 +2,13 @@
   <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')" />
     <template v-else>
-      <oc-avatar v-if="avatar" :src="avatar" class="uk-margin-small-right" width=50 height=50 />
+      <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>
     </template>
-    <div>
+    <div class="files-collaborators-autocomplete-user-text">
       <div
         class="uk-text-bold files-collaborators-autocomplete-username"
         v-text="item.label"

apps/files/src/components/Collaborators/Collaborator.vue

@@ -4,13 +4,13 @@
     <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="avatar" :src="avatar" class="uk-margin-small-right" width=50 height=50 />
+        <oc-avatar v-if="collaborator.info.share_type === '0'" :src="avatar" class="uk-margin-small-right" :width="50" :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" />
         </div>
       </div>
-      <div class="uk-flex uk-flex-column uk-flex-center">
+      <div class="uk-flex uk-flex-column uk-flex-center files-collaborators-collaborator-information-text">
         <div class="oc-text">
           <span class="files-collaborators-collaborator-name uk-text-bold">{{ collaborator.displayName }}</span>
           <span v-if="parseInt(collaborator.info.share_type, 10) === 0 && collaborator.info.share_with_additional_info.length > 0" class="uk-text-meta">

package.json

@@ -76,7 +76,7 @@
     "node-fetch": "^2.6.0",
     "npm-run-all": "^4.1.5",
     "oidc-client": "^1.9.1",
-    "owncloud-design-system": "^1.0.0-1065",
+    "owncloud-design-system": "^1.0.0-1068",
     "owncloud-sdk": "^1.0.0-368",
     "p-limit": "^2.2.1",
     "parse-json": "^5.0.0",

src/components/Avatar.vue

@@ -1,6 +1,6 @@
 <template>
   <component :is="type" v-if="enabled">
-    <oc-avatar :width="width" :height="width" :loading="loading" :src="avatarSource" />
+    <oc-avatar :width="width" :loading="loading" :src="avatarSource" :userName="userName" />
   </component>
 </template>
 <script>
@@ -84,6 +84,10 @@ export default {
         return value.match(/(div|span)/)
       }
     },
+    userName: {
+      type: String,
+      default: ''
+    },
     userid: {
       /**
        * Allow empty string to show placeholder

src/components/UserMenu.vue

@@ -1,13 +1,16 @@
 <template>
   <div>
     <oc-button id="_userMenuButton" class="oc-topbar-personal uk-height-1-1" variation="primary" aria-label="$gettext('User Menu')" ref="menuButton">
-      <avatar type="span" class="oc-topbar-personal-avatar" :userid="userId" />
-      <span class="oc-topbar-personal-label">{{ userDisplayName }}</span>
+      <oc-grid gutter="small">
+        <avatar class="oc-topbar-personal-avatar" :width="32" :userid="userId" :userName="userDisplayName"/>
+        <div class="oc-topbar-personal-label">{{ userDisplayName }}</div>
+      </oc-grid>
     </oc-button>
     <oc-drop toggle="#_userMenuButton" mode="click" :options="{pos:'bottom-right'}" class="uk-width-large" ref="menu">
       <div class="uk-card-body uk-flex uk-flex-middle uk-flex-column">
         <avatar
           :userid="userId"
+          :userName="userDisplayName"
           :width="128"
         />
         <h3 class="uk-card-title">{{ userDisplayName }}</h3>
@@ -86,3 +89,12 @@ export default {
   }
 }
 </script>
+<style scoped>
+/* FIXME: https://github.com/owncloud/owncloud-design-system/issues/596 */
+.oc-topbar-personal-avatar {
+  margin-top: 3px;
+}
+.oc-topbar-personal-label {
+  margin-left: 0px !important;
+}
+</style>

tests/acceptance/pageObjects/FilesPageElement/sharingDialog.js

@@ -485,7 +485,7 @@ module.exports = {
       selector: '#oc-sharing-autocomplete .oc-autocomplete-suggestion-list'
     },
     sharingAutoCompleteDropDownElements: {
-      selector: '#oc-sharing-autocomplete .oc-autocomplete-suggestion'
+      selector: '#oc-sharing-autocomplete .oc-autocomplete-suggestion .files-collaborators-autocomplete-user-text'
     },
     sharingAutoCompleteShowAllResultsButton: {
       selector: '.oc-autocomplete-suggestion-overflow'
@@ -496,7 +496,7 @@ module.exports = {
     },
     collaboratorsInformation: {
       // addresses users and groups
-      selector: '.files-collaborators-collaborator .files-collaborators-collaborator-information'
+      selector: '.files-collaborators-collaborator .files-collaborators-collaborator-information-text'
     },
     collaboratorInformationByCollaboratorName: {
       selector: '//*[contains(@class, "files-collaborators-collaborator-name") and .="%s"]/ancestor::div[contains(concat(" ", @class, " "), " files-collaborators-collaborator ")]',

yarn.lock

@@ -6358,10 +6358,10 @@ os-tmpdir@~1.0.1, os-tmpdir@~1.0.2:
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
   integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
 
-owncloud-design-system@^1.0.0-1065:
-  version "1.0.0-1065"
-  resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-1.0.0-1065.tgz#abb78e6ec1b1fdc5859aa002df4e996ca2315dba"
-  integrity sha512-xR26yIvTNbUe3hRXTjdIObrH5RlylCm31FMcOYvOpId51v2l0nwoo0z1HxpX3kOwwW71rS6V6fFQ/sEFzzfstg==
+owncloud-design-system@^1.0.0-1068:
+  version "1.0.0-1069"
+  resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-1.0.0-1069.tgz#46d1ac0b2848dbbd9cc3eb043b2a09adeeb57fe0"
+  integrity sha512-FHTaqkoSqfPbuIm2jwC1eM1/se0QyovJpxtnCi4KOtt7pElCiVUaK4FMInn5NSGbz8np32HcMyJAoZNrC0JdNQ==
   dependencies:
     lodash "^4.17.11"
     mini-css-extract-plugin "^0.7.0"