Merge pull request #7309 from owncloud/implement-context-menu-clipboa…

…rd-copy-move [full-ci] Implement copy, cut, paste in ContextMenu | Fix nav icon flickering in lightmode
owncloud · Aug 10, 2022 · cd6b493 · cd6b493
2 parents f1cbfa3 + 58d0990
commit cd6b493
Show file tree

Hide file tree

Showing 58 changed files with 463 additions and 939 deletions.
diff --git a/changelog/unreleased/bugfix-nav-icon-flickering-lightmode b/changelog/unreleased/bugfix-nav-icon-flickering-lightmode
@@ -0,0 +1,6 @@
+Bugfix: SidebarNavItem icon flickering
+
+We've fixed a bug which caused the icons on the SidebarNav 
+to flicker when transitioning in lightmode
+
+https://github.com/owncloud/web/pull/7309
diff --git a/changelog/unreleased/enhancement-keyboard-shortcut-indicators b/changelog/unreleased/enhancement-keyboard-shortcut-indicators
@@ -0,0 +1,6 @@
+Enhancement: Keyboard shortcut indicators in ContextMenu
+
+We've added the option to display relevant keyboard shortcuts in the contextmenu to give notice to the user which shortcuts are available
+
+https://github.com/owncloud/web/pull/7309
+https://github.com/owncloud/web/issues/6892
diff --git a/changelog/unreleased/enhancement-lowlight-cut-resources b/changelog/unreleased/enhancement-lowlight-cut-resources
@@ -0,0 +1,5 @@
+Enhancement: Lowlight cut resources
+
+We've added a visual indication to show which resources are being cut
+
+https://github.com/owncloud/web/pull/7309
diff --git a/changelog/unreleased/enhancement-replace-locationpicker-clipboard b/changelog/unreleased/enhancement-replace-locationpicker-clipboard
@@ -0,0 +1,7 @@
+Enhancement: Replace locationpicker with clipboard actions
+
+We've replaced the locationpicker in batchactions and contextmenu with
+the new cut/copy/paste clipboard actions.
+
+https://github.com/owncloud/web/pull/7309
+https://github.com/owncloud/web/issues/6892
diff --git a/packages/web-app-files/src/components/ActionMenuItem.vue b/packages/web-app-files/src/components/ActionMenuItem.vue
@@ -32,6 +32,11 @@
       <span class="oc-files-context-action-label" data-testid="action-label">{{
         action.label(filterParams)
       }}</span>
+      <span
+        v-if="action.shortcut && shortcutHint"
+        class="oc-files-context-action-shortcut"
+        v-text="action.shortcut"
+      />
       <span
         v-if="action.opensInNewWindow"
         data-testid="action-sr-hint"
@@ -57,6 +62,11 @@ export default {
     appearance: {
       type: String,
       default: 'raw'
+    },
+    shortcutHint: {
+      type: Boolean,
+      default: true,
+      required: false
     }
   },
   computed: {
@@ -110,4 +120,10 @@ export default {
 .action-menu-item {
   vertical-align: middle;
 }
+.oc-files-context-action-shortcut {
+  justify-content: right !important;
+  font-size: 0.85rem;
+  font-weight: bold !important;
+  opacity: 0.7;
+}
 </style>
diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -110,6 +110,15 @@
         </li>
       </oc-list>
     </oc-drop>
+    <div id="clipboard-btns" class="oc-button-group">
+      <oc-button v-if="showPasteHereButton" @click="pasteFilesHere">
+        <oc-icon fill-type="line" name="clipboard" />
+        <span v-translate>Paste here</span>
+      </oc-button>
+      <oc-button v-if="showPasteHereButton" @click="clearClipboardFiles">
+        <oc-icon fill-type="line" name="close" />
+      </oc-button>
+    </div>
   </div>
 </template>
 
@@ -130,7 +139,8 @@ import {
   useCapabilitySpacesEnabled,
   useStore,
   usePublicLinkPassword,
-  useUserContext
+  useUserContext,
+  usePublicLinkContext
 } from 'web-pkg/src/composables'
 
 import { DavProperties, DavProperty } from 'web-pkg/src/constants'
@@ -184,7 +194,8 @@ export default defineComponent({
       hasShareJail: useCapabilityShareJailEnabled(),
       hasSpaces: useCapabilitySpacesEnabled(),
       publicLinkPassword: usePublicLinkPassword({ store }),
-      isUserContext: useUserContext({ store })
+      isUserContext: useUserContext({ store }),
+      isPublicLinkContext: usePublicLinkContext({ store })
     }
   },
   data: () => ({
@@ -194,10 +205,13 @@ export default defineComponent({
   }),
   computed: {
     ...mapGetters(['capabilities', 'configuration', 'newFileHandlers', 'user']),
-    ...mapGetters('Files', ['files', 'currentFolder', 'selectedFiles']),
+    ...mapGetters('Files', ['files', 'currentFolder', 'selectedFiles', 'clipboardResources']),
     ...mapGetters('runtime/spaces', ['spaces']),
     ...mapState('Files', ['areFileExtensionsShown']),
 
+    showPasteHereButton() {
+      return this.clipboardResources && this.clipboardResources.length !== 0
+    },
     mimetypesAllowedForCreation() {
       // we can't use `mapGetters` here because the External app doesn't exist in all deployments
       const mimeTypes = this.$store.getters['External/mimeTypes']
@@ -275,7 +289,12 @@ export default defineComponent({
     }
   },
   methods: {
-    ...mapActions('Files', ['loadPreview', 'loadIndicators']),
+    ...mapActions('Files', [
+      'loadPreview',
+      'loadIndicators',
+      'clearClipboardFiles',
+      'pasteSelectedFiles'
+    ]),
     ...mapActions([
       'openFile',
       'showMessage',
@@ -287,6 +306,23 @@ export default defineComponent({
     ...mapMutations('runtime/spaces', ['UPDATE_SPACE_FIELD']),
     ...mapMutations(['SET_QUOTA']),
 
+    pasteFilesHere() {
+      this.pasteSelectedFiles({
+        client: this.$client,
+        createModal: this.createModal,
+        hideModal: this.hideModal,
+        showMessage: this.showMessage,
+        $gettext: this.$gettext,
+        $gettextInterpolate: this.$gettextInterpolate,
+        $ngettext: this.$ngettext,
+        isPublicLinkContext: this.isPublicLinkContext,
+        publicLinkPassword: this.publicLinkPassword,
+        upsertResource: this.UPSERT_RESOURCE
+      }).then(() => {
+        ;(document.activeElement as HTMLElement).blur()
+      })
+    },
+
     async onUploadComplete(result) {
       if (result.successful) {
         const file = result.successful[0]
@@ -810,7 +846,7 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 #create-list {
   li {
     border: 1px solid transparent;
@@ -843,4 +879,12 @@ export default defineComponent({
     height: 100% !important;
   }
 }
+#clipboard-btns {
+  :nth-child(1) {
+    border-right: 0px !important;
+  }
+  :nth-child(2) {
+    border-left: 0px !important;
+  }
+}
 </style>
diff --git a/packages/web-app-files/src/components/AppBar/SelectedResources/BatchActions.vue b/packages/web-app-files/src/components/AppBar/SelectedResources/BatchActions.vue
@@ -7,6 +7,7 @@
       :items="selectedFiles"
       appearance="outline"
       class="oc-mr-s"
+      :shortcut-hint="false"
     />
   </oc-list>
 </template>

diff --git a/packages/web-app-files/src/components/FilesList/ContextActions.vue b/packages/web-app-files/src/components/FilesList/ContextActions.vue
@@ -16,6 +16,7 @@ import DownloadFile from '../../mixins/actions/downloadFile'
 import EmptyTrashBin from '../../mixins/actions/emptyTrashBin'
 import Favorite from '../../mixins/actions/favorite'
 import Move from '../../mixins/actions/move'
+import Paste from '../../mixins/actions/paste'
 import Navigate from '../../mixins/actions/navigate'
 import Rename from '../../mixins/actions/rename'
 import Restore from '../../mixins/actions/restore'
@@ -43,6 +44,7 @@ export default {
     EmptyTrashBin,
     Favorite,
     Move,
+    Paste,
     Navigate,
     Rename,
     Restore,
@@ -148,6 +150,7 @@ export default {
         ...this.$_delete_items,
         ...this.$_move_items,
         ...this.$_copy_items,
+        ...this.$_paste_items,
         ...this.$_rename_items,
         ...this.$_restore_items,
         ...this.$_acceptShare_items,

diff --git a/packages/web-app-files/src/components/FilesList/KeyboardActions.vue b/packages/web-app-files/src/components/FilesList/KeyboardActions.vue
@@ -7,6 +7,7 @@ import { bus } from 'web-pkg/src/instance'
 import { mapActions, mapState, mapMutations } from 'vuex'
 import { defineComponent } from '@vue/composition-api'
 import MixinFilesListScrolling from '../../mixins/filesListScrolling'
+import { usePublicLinkContext, usePublicLinkPassword, useStore } from 'web-pkg/src/composables'
 
 export default defineComponent({
   mixins: [MixinFilesListScrolling],
@@ -21,6 +22,13 @@ export default defineComponent({
       default: 'files-view'
     }
   },
+  setup() {
+    const store = useStore()
+    return {
+      publicLinkPassword: usePublicLinkPassword({ store }),
+      isPublicLinkContext: usePublicLinkContext({ store })
+    }
+  },
   data: () => {
     return {
       selectionCursor: 0
@@ -202,6 +210,8 @@ export default defineComponent({
         $gettext: this.$gettext,
         $gettextInterpolate: this.$gettextInterpolate,
         $ngettext: this.$ngettext,
+        isPublicLinkContext: this.isPublicLinkContext,
+        publicLinkPassword: this.publicLinkPassword,
         upsertResource: this.upsertResource
       })
     },

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -61,6 +61,7 @@
           :is-resource-clickable="isResourceClickable(item.id)"
           :folder-link="folderLink(item)"
           :parent-folder-link="parentFolderLink(item)"
+          :class="{ 'resource-table-resource-cut': isResourceCut(item) }"
           @click="emitFileClick(item)"
         />
         <oc-button
@@ -186,6 +187,7 @@ import Rename from '../../mixins/actions/rename'
 import { defineComponent, PropType } from '@vue/composition-api'
 import { extractDomSelector } from 'web-client/src/helpers/resource'
 import { Resource } from 'web-client'
+import { ClipboardActions } from '../../helpers/clipboardActions'
 import { ShareTypes } from 'web-client/src/helpers/share'
 import { createLocationSpaces } from '../../router'
 
@@ -400,7 +402,12 @@ export default defineComponent({
   },
   computed: {
     ...mapGetters(['configuration']),
-    ...mapState('Files', ['areFileExtensionsShown', 'latestSelectedId']),
+    ...mapState('Files', [
+      'areFileExtensionsShown',
+      'latestSelectedId',
+      'clipboardResources',
+      'clipboardAction'
+    ]),
     ...mapState('runtime/spaces', ['spaces']),
     popperOptions() {
       return {
@@ -563,6 +570,10 @@ export default defineComponent({
     isResourceSelected(item) {
       return this.selectedIds.includes(item.id)
     },
+    isResourceCut(resource) {
+      if (this.clipboardAction !== ClipboardActions.Cut) return false
+      return this.clipboardResources.some((r) => r.id === resource.id)
+    },
     isLatestSelectedItem(item) {
       return item.id === this.latestSelectedId
     },
@@ -801,6 +812,9 @@ export default defineComponent({
 </script>
 <style lang="scss">
 .resource-table {
+  &-resource-cut {
+    opacity: 0.6;
+  }
   &-resource-wrapper {
     &-limit-max-width {
       max-width: calc(100% - var(--oc-space-medium));