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 @@
-
-
-
+
+ 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