Rework account dropdown

changelog/unreleased/rework-account-dropdown

@@ -0,0 +1,8 @@
+Change: Rework account dropdown
+
+We've removed user avatar, user email and version from the account dropdown.
+The log out button has been changed into a link.
+All links in account dropdown are now inside of a list.
+
+https://github.com/owncloud/product/issues/82
+https://github.com/owncloud/phoenix/pull/3605

src/components/UserMenu.vue

@@ -19,30 +19,29 @@
     </oc-button>
     <oc-drop
       ref="menu"
+      drop-id="account-info-container"
       toggle="#_userMenuButton"
       mode="click"
-      :options="{ pos: 'bottom-right' }"
-      class="uk-width-large"
+      close-on-click
+      :options="{ pos: 'bottom-right', delayHide: 0 }"
+      class="uk-width-auto"
     >
-      <div id="account-info-container" class="uk-card-body uk-flex uk-flex-middle uk-flex-column">
-        <avatar-image :userid="userId" :user-name="userDisplayName" :width="128" />
-        <h3 class="uk-card-title">{{ userDisplayName }}</h3>
-        <span v-if="userEmail">{{ userEmail }}</span>
-        <router-link to="/account" target="_blank"
-          ><translate>Manage your account</translate></router-link
-        >
-        <br />
-        <oc-button id="logoutMenuItem" type="a" @click="logout()"
-          ><translate>Log out</translate></oc-button
-        >
-      </div>
-      <div class="uk-card-footer uk-flex uk-flex-middle uk-flex-column">
-        <span
-          >Version: {{ appVersion.version }}-{{ appVersion.hash }} ({{
-            appVersion.buildDate
-          }})</span
-        >
-      </div>
+      <ul class="uk-list">
+        <li class="uk-text-nowrap">
+          <router-link id="oc-topbar-account-manage" v-translate to="/account"
+            >Manage your account</router-link
+          >
+        </li>
+        <li>
+          <router-link
+            id="oc-topbar-account-logout"
+            v-translate
+            to="/"
+            @click.native.prevent="logout"
+            >Log out</router-link
+          >
+        </li>
+      </ul>
     </oc-drop>
   </div>
 </template>

tests/acceptance/pageObjects/accountPage.js

@@ -46,15 +46,12 @@ module.exports = {
       return this.waitForElementVisible('@logoutButton').click('@logoutButton')
     },
     isPageVisible: async function() {
-      let isVisible = false
-      const handle = []
-      await this.api.windowHandles(function(result) {
-        handle.push(result.value[1])
-      })
-      await this.api.switchWindow(handle[0])
+      let isVisible = true
+
       await this.api.element('@accountDisplay', result => {
         isVisible = Object.keys(result.value).length > 0
       })
+
       return isVisible
     }
   },

tests/acceptance/pageObjects/phoenixPage.js

@@ -229,7 +229,7 @@ module.exports = {
       locateStrategy: 'xpath'
     },
     logoutMenuItem: {
-      selector: '#logoutMenuItem'
+      selector: '#oc-topbar-account-logout'
     },
     messageCloseIcon: {
       selector: '.oc-alert-close-icon'

tests/acceptance/pageObjects/profilePage.js

@@ -2,30 +2,26 @@ module.exports = {
   commands: {
     getUserProfileName: async function() {
       let userInfo
-      await this.waitForElementVisible('@profileInfoContainer')
-        .waitForElementVisible('@userProfileName')
-        .api.element('@userProfileName', result => {
+      await this.waitForElementVisible('@userProfileName').api.element(
+        '@userProfileName',
+        result => {
           this.api.elementIdText(result.value.ELEMENT, text => {
             userInfo = text.value
           })
-        })
+        }
+      )
       return userInfo
     },
     browseToManageAccount: function() {
       return this.waitForElementVisible('@manageAccount').click('@manageAccount')
     }
   },
   elements: {
-    profileInfoContainer: {
-      selector: '#account-info-container'
-    },
     userProfileName: {
-      selector: '//div/h3[@class="uk-card-title"]',
-      locateStrategy: 'xpath'
+      selector: '.oc-topbar-personal-label'
     },
     manageAccount: {
-      selector: '//div//span[.="Manage your account"]',
-      locateStrategy: 'xpath'
+      selector: '#oc-topbar-account-manage'
     }
   }
 }