diff --git a/apps/files/src/components/FileList.vue b/apps/files/src/components/FileList.vue index 2bdcc84b04d..27a9aa0a2db 100644 --- a/apps/files/src/components/FileList.vue +++ b/apps/files/src/components/FileList.vue @@ -16,11 +16,10 @@
- Actions + More
@@ -47,32 +46,21 @@ />
-
-
- -
+
+ variation="raw" + > + +
diff --git a/changelog/unreleased/2974 b/changelog/unreleased/2974 new file mode 100644 index 00000000000..f3da898fd44 --- /dev/null +++ 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 index e741e7c55c8..032370d35f0 100644 --- 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} */ 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: {