Add dragarea again

changelog/unreleased/bugfix-add-droparea-again

@@ -0,0 +1,6 @@
+Bugfix: Add Droparea again
+
+We've added the visual droparea again to indicate drag and drop upload
+
+https://github.com/owncloud/web/issues/7080
+https://github.com/owncloud/web/pull/7251

packages/web-app-files/src/App.vue

@@ -1,5 +1,6 @@
 <template>
   <main id="files" class="oc-flex oc-height-1-1">
+    <div v-if="dragareaEnabled" class="dragarea" />
     <div ref="filesListWrapper" tabindex="-1" class="files-list-wrapper oc-width-expand">
       <router-view id="files-view" tabindex="0" />
     </div>
@@ -23,12 +24,16 @@ import Mixins from './mixins'
 import { mapActions, mapState } from 'vuex'
 import SideBar from './components/SideBar/SideBar.vue'
 import { defineComponent } from '@vue/composition-api'
+import { bus } from 'web-pkg/src/instance'
 
 export default defineComponent({
   components: {
     SideBar
   },
   mixins: [Mixins],
+  data: () => ({
+    dragareaEnabled: false
+  }),
   computed: {
     ...mapState('Files/sidebar', {
       sidebarClosed: 'closed',
@@ -53,6 +58,15 @@ export default defineComponent({
     this.$root.$on('upload-end', () => {
       this.delayForScreenreader(() => this.$refs.filesListWrapper.focus())
     })
+    const dragOver = bus.subscribe('drag-over', this.onDragOver)
+    const dragOut = bus.subscribe('drag-out', this.hideDropzone)
+    const drop = bus.subscribe('drop', this.hideDropzone)
+
+    this.$on('beforeDestroy', () => {
+      bus.unsubscribe('drag-over', dragOver)
+      bus.unsubscribe('drag-out', dragOut)
+      bus.unsubscribe('drop', drop)
+    })
   },
 
   methods: {
@@ -61,7 +75,12 @@ export default defineComponent({
       closeSidebar: 'close',
       setActiveSidebarPanel: 'setActivePanel'
     }),
-
+    hideDropzone() {
+      this.dragareaEnabled = false
+    },
+    onDragOver(event) {
+      this.dragareaEnabled = (event.dataTransfer.types || []).some((e) => e === 'Files')
+    },
     focusSideBar(component, event) {
       this.focus({
         from: document.activeElement,
@@ -78,7 +97,20 @@ main {
   max-height: 100%;
 }
 
+.dragarea {
+  background-color: rgba(60, 130, 225, 0.21);
+  pointer-events: none;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  position: absolute;
+  z-index: 9;
+  border-radius: 14px;
+  border: 2px dashed var(--oc-color-swatch-primary-muted);
+}
 .files-list-wrapper {
+  position: relative;
   overflow-y: auto;
   display: grid;
   grid-template-columns: 1fr;
@@ -94,6 +126,10 @@ main {
   }
 }
 
+#files {
+  position: relative;
+}
+
 #files-sidebar {
   position: relative;
   overflow: hidden;

packages/web-app-files/src/views/FilesDrop.vue

@@ -1,5 +1,6 @@
 <template>
   <div id="files-drop-container" class="oc-height-1-1 oc-flex oc-flex-column oc-flex-between">
+    <div v-if="dragareaEnabled" class="dragarea" />
     <h1 class="oc-invisible-sr">{{ pageTitle }}</h1>
     <div class="oc-p oc-height-1-1">
       <div v-if="loading" key="loading-drop" class="oc-flex oc-flex-column oc-flex-middle">
@@ -44,6 +45,7 @@ import { getCurrentInstance, onMounted } from '@vue/composition-api/dist/vue-com
 import { useUpload } from 'web-runtime/src/composables/upload'
 import * as uuid from 'uuid'
 import { usePublicLinkPassword, useStore } from 'web-pkg/src/composables'
+import { bus } from 'web-pkg/src/instance'
 
 export default {
   components: {
@@ -78,7 +80,8 @@ export default {
   data() {
     return {
       loading: true,
-      errorMessage: null
+      errorMessage: null,
+      dragareaEnabled: false
     }
   },
   computed: {
@@ -106,11 +109,27 @@ export default {
     }
   },
   mounted() {
+    const dragOver = bus.subscribe('drag-over', this.onDragOver)
+    const dragOut = bus.subscribe('drag-out', this.hideDropzone)
+    const drop = bus.subscribe('drop', this.hideDropzone)
+
+    this.$on('beforeDestroy', () => {
+      bus.unsubscribe('drag-over', dragOver)
+      bus.unsubscribe('drag-out', dragOut)
+      bus.unsubscribe('drop', drop)
+    })
     this.resolvePublicLink()
   },
   methods: {
     ...mapActions(['showMessage']),
 
+    hideDropzone() {
+      this.dragareaEnabled = false
+    },
+    onDragOver(event) {
+      this.dragareaEnabled = (event.dataTransfer.types || []).some((e) => e === 'Files')
+    },
+
     resolvePublicLink() {
       this.loading = true
 
@@ -173,8 +192,21 @@ export default {
 
 <style lang="scss">
 #files-drop-container {
+  position: relative;
   background: transparent;
   border: 1px dashed var(--oc-color-input-border);
   margin: var(--oc-space-xlarge);
 }
+.dragarea {
+  background-color: rgba(60, 130, 225, 0.21);
+  pointer-events: none;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  position: absolute;
+  z-index: 9;
+  border-radius: 14px;
+  border: 2px dashed var(--oc-color-swatch-primary-muted);
+}
 </style>

packages/web-app-files/tests/unit/views/__snapshots__/FilesDrop.spec.js.snap

@@ -2,6 +2,7 @@
 
 exports[`FilesDrop should show page title and configuration theme general slogan 1`] = `
 <div id="files-drop-container" class="oc-height-1-1 oc-flex oc-flex-column oc-flex-between">
+  <!---->
   <h1 class="oc-invisible-sr">page route title</h1>
   <div class="oc-p oc-height-1-1">
     <div class="oc-flex oc-flex-column oc-flex-middle oc-height-1-1">
@@ -21,6 +22,7 @@ exports[`FilesDrop should show page title and configuration theme general slogan
 
 exports[`FilesDrop should show spinner with loading text if wrapper is loading 1`] = `
 <div id="files-drop-container" class="oc-height-1-1 oc-flex oc-flex-column oc-flex-between">
+  <!---->
   <h1 class="oc-invisible-sr">page route title</h1>
   <div class="oc-p oc-height-1-1">
     <div class="oc-flex oc-flex-column oc-flex-middle">
@@ -38,6 +40,7 @@ exports[`FilesDrop should show spinner with loading text if wrapper is loading 1
 
 exports[`FilesDrop when "loading" is set to false should show error message if only it has truthy value 1`] = `
 <div id="files-drop-container" class="oc-height-1-1 oc-flex oc-flex-column oc-flex-between">
+  <!---->
   <h1 class="oc-invisible-sr">page route title</h1>
   <div class="oc-p oc-height-1-1">
     <div class="oc-flex oc-flex-column oc-flex-middle oc-height-1-1">
@@ -62,6 +65,7 @@ exports[`FilesDrop when "loading" is set to false should show error message if o
 
 exports[`FilesDrop when "loading" is set to false should show share information title 1`] = `
 <div id="files-drop-container" class="oc-height-1-1 oc-flex oc-flex-column oc-flex-between">
+  <!---->
   <h1 class="oc-invisible-sr">page route title</h1>
   <div class="oc-p oc-height-1-1">
     <div class="oc-flex oc-flex-column oc-flex-middle oc-height-1-1">

packages/web-runtime/src/services/uppyService.ts

@@ -17,6 +17,9 @@ type UppyServiceTopics =
   | 'progress'
   | 'addedForUpload'
   | 'upload-progress'
+  | 'drag-over'
+  | 'drag-out'
+  | 'drop'
 
 export class UppyService {
   uppy: Uppy
@@ -110,7 +113,16 @@ export class UppyService {
       target: targetSelector,
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
-      uppyService
+      uppyService,
+      onDragOver: (event) => {
+        this.publish('drag-over', event)
+      },
+      onDragLeave: (event) => {
+        this.publish('drag-out', event)
+      },
+      onDrop: (event) => {
+        this.publish('drop', event)
+      }
     })
   }