File actions now always appear in dropdown form

Removed the inline file action buttons, they are now always available under the three dots button.
owncloud · Feb 6, 2020 · 605e9ca · 605e9ca
1 parent 27ae807
commit 605e9ca
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 90 deletions.
diff --git a/apps/files/src/components/FileList.vue b/apps/files/src/components/FileList.vue
@@ -16,11 +16,10 @@
         </div>
         <slot name="headerColumns"/>
         <div
-          class="uk-text-meta uk-text-right uk-width-auto "
-          :class="{ 'uk-width-small@s uk-width-medium@m' : !compactMode }"
+          class="uk-text-meta uk-text-right uk-width-small uk-margin-small-right"
           v-translate
         >
-          Actions
+          More
         </div>
       </oc-grid>
       <div id="files-list-container" class="uk-flex-1" v-if="!loading">
@@ -47,32 +46,21 @@
                 />
               </div>
               <slot name="rowColumns" :item="item" :index="item.id" />
-              <div :class="{ 'uk-visible@s' : compactMode, 'uk-width-small@s uk-width-medium@m': !compactMode }" class="uk-width-auto uk-text-right">
-                <div
-                  class="uk-button-group"
-                  :class="{
-                    'uk-visible@m' : !compactMode,
-                    'uk-visible@xl' : compactMode
-                  }"
-                >
-                  <oc-button
-                    v-for="action in actions"
-                    :key="action.ariaLabel"
-                    @click.stop="action.handler(item, action.handlerData)"
-                    :disabled="!$_isActionEnabled(item, action) || $_actionInProgress(item)"
-                    :icon="action.icon"
-                    :ariaLabel="action.ariaLabel"
-                    :uk-tooltip="$_disabledActionTooltip(item)"
-                  />
-                </div>
+              <div class="uk-width-small uk-text-right uk-margin-small-right">
                 <oc-button
                   :id="actionsDropdownButtonId(item.id, active)"
-                  icon="more_vert"
-                  :class="{ 'uk-hidden@m' : !compactMode, 'uk-visible@s uk-hidden@xl' : compactMode }"
+                  class="files-list-row-show-actions"
                   :disabled="$_actionInProgress(item)"
-                  :aria-label="'show-file-actions'"
+                  :aria-label="$gettext('Show file actions')"
                   @click.stop="toggleRowActionsDropdown(item)"
-                />
+                  variation="raw"
+                >
+                  <oc-icon
+                    name="more_vert"
+                    class="uk-text-middle"
+                    size="small"
+                  />
+                </oc-button>
               </div>
             </oc-grid>
           </div>

diff --git a/changelog/unreleased/2974 b/changelog/unreleased/2974
@@ -0,0 +1,7 @@
+Change: File actions now always behind three dots button
+
+The inline file actions button didn't look very nice and made the UI look cluttered.
+This change hides them behind a three dots button on the line, the same that was already visible in responsive mode.
+The three dots button also now has no more border and looks nicer.
+
+https://github.com/owncloud/phoenix/pull/2974
diff --git a/tests/acceptance/pageObjects/FilesPageElement/filesList.js b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
@@ -18,29 +18,18 @@ const FileAction = Object.freeze({
 module.exports = {
   commands: {
     /**
-     * Action button selector for Low Resolution screens
+     * Action button selector
      *
      * @param {string} action
      * @param {string} fileName
      * @returns {string}
      */
-    getActionSelectorLowRes: function (action) {
+    getActionSelector: function (action) {
       const actionsDropdownSelector = this.elements.itemActionsDropdown.selector
       const actionSelector = this.elements[action + 'ButtonInFileRow'].selector
 
       return `${actionsDropdownSelector}${actionSelector}`
     },
-    /**
-     * Action button selector for High Resolution screens
-     *
-     * @param {string} action
-     * @param {string} fileName
-     * @returns {string}
-     */
-    getActionSelectorHighRes: function (action, fileName) {
-      return '(' + this.getFileRowSelectorByFileName(fileName) +
-        this.elements[action + 'ButtonInFileRow'].selector + ')[1]'
-    },
     /**
      * Get Selector for File Actions expander
      *
@@ -60,23 +49,16 @@ module.exports = {
      * @returns {*}
      */
     performFileAction: function (fileName, action) {
-      const { btnSelectorHighResolution, btnSelectorLowResolution, fileActionsBtnSelector } =
+      const { btnSelector, fileActionsBtnSelector } =
         this.getFileRowButtonSelectorsByFileName(fileName, action)
 
       return this.initAjaxCounters()
         .useXpath()
-        .isVisible(fileActionsBtnSelector, (result) => {
-          if (result.value === true) {
-            this
-              .click(fileActionsBtnSelector)
-              .waitForElementVisible(btnSelectorLowResolution)
-              .click(btnSelectorLowResolution)
-          } else {
-            this
-              .waitForElementVisible(btnSelectorHighResolution)
-              .click(btnSelectorHighResolution)
-          }
-        })
+        .waitForElementVisible(fileActionsBtnSelector)
+        .click(fileActionsBtnSelector)
+        .waitForElementVisible(btnSelector)
+        .click(btnSelector)
+        .useCss()
     },
 
     /**
@@ -89,30 +71,18 @@ module.exports = {
      * @returns {*}
      */
     isActionDisabled: function (fileName, action, callback) {
-      const { btnSelectorHighResolution, btnSelectorLowResolution, fileActionsBtnSelector } =
+      const { btnSelector, fileActionsBtnSelector } =
         this.getFileRowButtonSelectorsByFileName(fileName, action)
 
       return this
         .useXpath()
-        .moveToElement(this.getFileRowSelectorByFileName(fileName), 0, 0)
-        .isVisible(fileActionsBtnSelector, (result) => {
-          let btnSelector
-          if (result.value === true) {
-            this
-              .click(fileActionsBtnSelector)
-            btnSelector = btnSelectorLowResolution
-          } else {
-            btnSelector = btnSelectorHighResolution
-          }
-
-          this
-            .waitForElementVisible(btnSelector)
-            .useXpath()
-            .getAttribute(btnSelector, 'disabled', (disabledResult) => {
-              const isDisabled = disabledResult.value === 'true'
-              callback(isDisabled)
-            })
+        .click(fileActionsBtnSelector)
+        .waitForElementVisible(btnSelector)
+        .getAttribute(btnSelector, 'disabled', (disabledResult) => {
+          const isDisabled = disabledResult.value === 'true'
+          callback(isDisabled)
         })
+        .useCss()
     },
     /**
      *
@@ -453,11 +423,10 @@ module.exports = {
         .useCss()
     },
     getFileRowButtonSelectorsByFileName: function (fileName, action) {
-      const btnSelectorHighResolution = this.getActionSelectorHighRes(action, fileName)
-      const btnSelectorLowResolution = this.getActionSelectorLowRes(action, fileName)
+      const btnSelector = this.getActionSelector(action, fileName)
       const fileActionsBtnSelector = this.getFileActionBtnSelector(fileName)
 
-      return { btnSelectorHighResolution, btnSelectorLowResolution, fileActionsBtnSelector }
+      return { btnSelector, fileActionsBtnSelector }
     },
     /**
      *
@@ -587,28 +556,19 @@ module.exports = {
      * @returns {Promise<boolean>}
      */
     getActionDisabledAttr: async function (action, fileName) {
-      const btnSelectorHighResolution = this.getActionSelectorHighRes(action, fileName)
-      const btnSelectorLowResolution = this.getActionSelectorLowRes(action, fileName)
+      const btnSelector = this.getActionSelector(action, fileName)
       const fileActionsBtnSelector = this.getFileActionBtnSelector(fileName)
       let disabledState
       await this
         .useXpath()
-        .moveToElement(this.getFileRowSelectorByFileName(fileName), 0, 0)
-        .isVisible(fileActionsBtnSelector, (result) => {
-          if (result.value === true) {
-            this.click(fileActionsBtnSelector)
-              .waitForElementVisible(btnSelectorLowResolution)
-              .getAttribute(btnSelectorLowResolution, 'disabled', result => {
-                disabledState = result.value
-              })
-          } else {
-            this.waitForElementVisible(btnSelectorHighResolution)
-              .getAttribute(btnSelectorHighResolution, 'disabled', result => {
-                disabledState = result.value
-              })
-          }
+        .click(fileActionsBtnSelector)
+      await this.api
+        .element('xpath', btnSelector, result => {
+          // action is disabled when not visible in dropdown menu
+          disabledState = result.status === -1
         })
         .useCss()
+
       return disabledState
     },
     /**
@@ -843,7 +803,7 @@ module.exports = {
       selector: '#files-list-progress'
     },
     fileActionsButtonInFileRow: {
-      selector: '//button[@aria-label="show-file-actions"]',
+      selector: '//button[contains(@class, "files-list-row-show-actions")]',
       locateStrategy: 'xpath'
     },
     deleteFileConfirmationDialog: {