Removed favorite button from file list and added it instead in action…

… dropdown Co-authored-by: Julian Müller <[email protected]> Co-authored-by: Lukas Hirt <[email protected]>
owncloud · May 13, 2020 · 5bc85e6 · 5bc85e6
1 parent 783c82a
commit 5bc85e6
Show file tree

Hide file tree

Showing 15 changed files with 235 additions and 170 deletions.
diff --git a/apps/files/src/components/AllFilesList.vue b/apps/files/src/components/AllFilesList.vue
@@ -8,14 +8,6 @@
     :is-action-enabled="isActionEnabled"
   >
     <template #headerColumns>
-      <div v-if="!publicPage()">
-        <span class="oc-visually-hidden" v-text="favoritesHeaderText" />
-        <oc-star
-          id="files-table-header-star"
-          aria-hidden="true"
-          class="uk-display-block uk-disabled"
-        />
-      </div>
       <div ref="headerNameColumn" class="uk-text-truncate uk-text-meta uk-width-expand">
         <sortable-column-header
           :aria-label="$gettext('Sort files by name')"
@@ -60,13 +52,6 @@
       </div>
     </template>
     <template #rowColumns="{ item: rowItem, index }">
-      <div v-if="!publicPage()">
-        <oc-star
-          class="uk-display-block"
-          :shining="rowItem.starred"
-          @click.native.stop="toggleFileFavorite(rowItem)"
-        />
-      </div>
       <div
         :ref="index === 0 ? 'firstRowNameColumn' : null"
         class="uk-text-truncate uk-width-expand"
@@ -341,12 +326,6 @@ export default {
           })
         })
     },
-    toggleFileFavorite(item) {
-      this.markFavorite({
-        client: this.$client,
-        file: item
-      })
-    },
 
     isActionEnabled(item, action) {
       return action.isEnabled(item, this.parentFolder)

diff --git a/apps/files/src/components/FileDetails.vue b/apps/files/src/components/FileDetails.vue
@@ -19,7 +19,13 @@
           />
         </div>
         <div v-if="$route.name !== 'files-shared-with-others'">
-          <oc-star v-if="!publicPage()" class="uk-inline" :shining="highlightedFile.starred" />
+          <oc-star
+            v-if="!publicPage()"
+            id="files-sidebar-star-icon"
+            class="uk-inline"
+            :shining="highlightedFile.starred"
+            @click.native.stop="toggleFileFavorite(highlightedFile)"
+          />
           <template v-if="highlightedFile.size > -1">
             {{ highlightedFile.size | fileSize }},
           </template>
@@ -96,13 +102,19 @@ export default {
     this.activeTab = this.defaultTab
   },
   methods: {
-    ...mapActions('Files', ['deleteFiles']),
+    ...mapActions('Files', ['deleteFiles', 'markFavorite']),
     ...mapActions(['showMessage']),
     close() {
       this.$emit('reset')
     },
     showSidebar(app) {
       this.activeTab = app
+    },
+    toggleFileFavorite(file) {
+      this.markFavorite({
+        client: this.$client,
+        file: file
+      })
     }
   }
 }

diff --git a/apps/files/src/components/FileList.vue b/apps/files/src/components/FileList.vue
@@ -185,7 +185,6 @@ export default {
   methods: {
     ...mapActions('Files', [
       'loadFolder',
-      'markFavorite',
       'setHighlightedFile',
       'setPublicLinkPassword',
       'resetFileSelection',
@@ -201,12 +200,6 @@ export default {
         true
       )
     },
-    toggleFileFavorite(item) {
-      this.markFavorite({
-        client: this.$client,
-        file: item
-      })
-    },
     $_ocFileName(item) {
       if (this.$route.name === 'files-favorites') {
         const pathSplit = item.path.substr(1).split('/')

diff --git a/apps/files/src/components/FilesLists/RowActionsDropdown.vue b/apps/files/src/components/FilesLists/RowActionsDropdown.vue
@@ -9,17 +9,17 @@
     class="uk-open uk-drop-stack"
   >
     <ul class="uk-list">
-      <li v-for="action in actions" :key="action.ariaLabel">
+      <li v-for="action in actions" :key="action.ariaLabel(item)">
         <oc-button
           class="uk-width-1-1"
           :icon="action.icon"
-          :aria-label="action.ariaLabel"
+          :aria-Label="action.ariaLabel(item)"
           @click.native.stop="
             action.handler(item, action.handlerData)
             actionClicked()
           "
         >
-          {{ action.ariaLabel }}
+          {{ action.ariaLabel(item) }}
         </oc-button>
       </li>
     </ul>

diff --git a/apps/files/src/components/Trashbin.vue b/apps/files/src/components/Trashbin.vue
@@ -130,13 +130,13 @@ export default {
       return [
         {
           icon: 'restore',
-          ariaLabel: this.$gettext('Restore'),
+          ariaLabel: () => this.$gettext('Restore'),
           handler: this.$_ocTrashbin_restoreFile,
           isEnabled: () => true
         },
         {
           icon: 'delete',
-          ariaLabel: this.$gettext('Delete'),
+          ariaLabel: () => this.$gettext('Delete'),
           handler: this.$_ocTrashbin_deleteFile,
           isEnabled: () => true
         }

diff --git a/apps/files/src/fileactions.js b/apps/files/src/fileactions.js
@@ -14,14 +14,16 @@ export default {
       'selectedFiles',
       'highlightedFile'
     ]),
-    ...mapGetters(['capabilities', 'fileSideBars']),
+    ...mapGetters(['capabilities', 'fileSideBars', 'isAuthenticated']),
     // Files lists
     actions() {
       const actions = [
         {
           icon: 'edit',
-          ariaLabel: this.$gettext('Rename'),
           handler: this.promptFileRename,
+          ariaLabel: () => {
+            return this.$gettext('Rename')
+          },
           isEnabled: function(item, parent) {
             if (parent && !parent.canRename()) {
               return false
@@ -32,21 +34,38 @@ export default {
         {
           icon: 'file_download',
           handler: this.downloadFile,
-          ariaLabel: this.$gettext('Download'),
+          ariaLabel: () => {
+            return this.$gettext('Download')
+          },
           isEnabled: function(item) {
             return item.canDownload()
           }
         },
         {
           icon: 'delete',
-          ariaLabel: this.$gettext('Delete'),
           handler: this.deleteFile,
+          ariaLabel: () => {
+            return this.$gettext('Delete')
+          },
           isEnabled: function(item, parent) {
             if (parent && !parent.canBeDeleted()) {
               return false
             }
             return item.canBeDeleted()
           }
+        },
+        {
+          icon: 'star',
+          handler: this.toggleFileFavorite,
+          ariaLabel: item => {
+            if (item.starred) {
+              return this.$gettext('Unmark as favorite')
+            }
+            return this.$gettext('Mark as favorite')
+          },
+          isEnabled: () => {
+            return this.isAuthenticated
+          }
         }
       ]
       // FIXME: we are assuming this.fileSideBars and others are available on object
@@ -57,7 +76,9 @@ export default {
         if (sideBar.quickAccess) {
           actions.push({
             icon: sideBar.quickAccess.icon,
-            ariaLabel: sideBar.quickAccess.ariaLabel,
+            ariaLabel: item => {
+              return sideBar.quickAccess.ariaLabel
+            },
             handler: this.openSideBar,
             handlerData: sideBar.app,
             isEnabled: function(item) {
@@ -77,7 +98,8 @@ export default {
       'closePromptFileRename',
       'deleteFiles',
       'promptFileDelete',
-      'closePromptFileDelete'
+      'closePromptFileDelete',
+      'markFavorite'
     ]),
     ...mapActions(['showMessage']),
 
@@ -131,7 +153,19 @@ export default {
           this.closePromptFileRename()
         })
     },
-
+    toggleFileFavorite(file) {
+      this.markFavorite({
+        client: this.$client,
+        file: file
+      }).catch(() => {
+        const translated = this.$gettext('Error while starring "%{file}"')
+        const title = this.$gettextInterpolate(translated, { file: file.name }, true)
+        this.showMessage({
+          title: title,
+          status: 'danger'
+        })
+      })
+    },
     cancelDeleteFile() {
       this.closePromptFileDelete()
     },

diff --git a/changelog/unreleased/3336 b/changelog/unreleased/3336
@@ -0,0 +1,8 @@
+Change: Removed favorite button from file list and added it in the sidebar
+
+We've removed the favorite star button in the file list and added instead a functionality 
+to the before non-working star button in the file's sidebar. We also added a new action in 
+the file action dropdown menu which allows you to toggle the favorite status of your file.
+
+https://github.com/owncloud/phoenix/issues/1987
+https://github.com/owncloud/phoenix/pull/3336
diff --git a/tests/acceptance/features/webUIFavorites/favoritesFile.feature b/tests/acceptance/features/webUIFavorites/favoritesFile.feature
@@ -14,33 +14,34 @@ Feature: Mark file as favorite
   Scenario: mark files as favorites
     When the user marks file "data.tar.gz" as favorite using the webUI
     And the user marks file "data.zip" as favorite using the webUI
-    Then file "data.tar.gz" should be marked as favorite on the webUI
-    And file "data.zip" should be marked as favorite on the webUI
-    When the user reloads the current page of the webUI
-    Then file "data.tar.gz" should be marked as favorite on the webUI
+    Then file "data.tar.gz" should be marked as favorite
+    And file "data.tar.gz" should be marked as favorite on the webUI
+    And file "data.zip" should be marked as favorite
     And file "data.zip" should be marked as favorite on the webUI
     When the user browses to the favorites page
     Then there should be 2 files/folders listed on the webUI
     And file "data.zip" should be listed on the webUI
-    And file "data.zip" should be marked as favorite on the webUI
     And file "data.tar.gz" should be listed on the webUI
-    And file "data.tar.gz" should be marked as favorite on the webUI
-    And file "lorem.txt" should not be listed on the webUI
 
   Scenario: mark folders as favorites
     When the user marks folder "simple-folder" as favorite using the webUI
     And the user marks folder "strängé नेपाली folder" as favorite using the webUI
-    Then folder "simple-folder" should be marked as favorite on the webUI
-    And folder "strängé नेपाली folder" should be marked as favorite on the webUI
-    When the user reloads the current page of the webUI
-    Then folder "simple-folder" should be marked as favorite on the webUI
+    Then folder "simple-folder" should be marked as favorite
+    And folder "simple-folder" should be marked as favorite on the webUI
+    And folder "strängé नेपाली folder" should be marked as favorite
     And folder "strängé नेपाली folder" should be marked as favorite on the webUI
     When the user browses to the favorites page
-    Then folder "simple-folder" should be listed on the webUI
-    And folder "simple-folder" should be marked as favorite on the webUI
+    Then there should be 2 files/folders listed on the webUI
+    And folder "simple-folder" should be listed on the webUI
     And folder "strängé नेपाली folder" should be listed on the webUI
-    And folder "strängé नेपाली folder" should be marked as favorite on the webUI
-    But folder "simple-folder-empty" should not be listed on the webUI
+
+  Scenario: mark files/folders as favorites using the sidebar
+    When the user marks folder "simple-folder" as favorite using the webUI sidebar
+    And the user marks file "data.zip" as favorite using the webUI sidebar
+    Then folder "simple-folder" should be marked as favorite on the webUI
+    And folder "simple-folder" should be marked as favorite
+    And file "data.zip" should be marked as favorite on the webUI
+    And file "data.zip" should be marked as favorite
 
   Scenario: navigate to an empty favorites page
     When the user browses to the favorites page