Right sidebar to views (#7501)

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

@@ -1,60 +1,26 @@
 <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>
-    <side-bar
-      v-if="showSidebar"
-      ref="filesSidebar"
-      tabindex="-1"
-      :sidebar-active-panel="sidebarActivePanel"
-      @beforeDestroy="focusSideBar"
-      @mounted="focusSideBar"
-      @fileChanged="focusSideBar"
-      @selectPanel="setActiveSidebarPanel"
-      @close="closeSidebar"
-    />
+    <router-view tabindex="0" class="oc-width-expand" />
   </main>
 </template>
 <script lang="ts">
-import { mapActions, mapState } from 'vuex'
-import SideBar from './components/SideBar/SideBar.vue'
-import { defineComponent } from '@vue/composition-api'
+import { defineComponent, watch } from '@vue/composition-api'
+import { Route } from 'vue-router'
+import { useRoute, useStore } from 'web-pkg/src/composables'
 import { bus } from 'web-pkg/src/instance'
 
 export default defineComponent({
-  components: {
-    SideBar
+  setup() {
+    const store = useStore<any>()
+    watch(useRoute(), (to: Route, from?: Route) => {
+      store.dispatch('Files/resetFileSelection')
+    })
   },
   data: () => ({
     dragareaEnabled: false
   }),
-  computed: {
-    ...mapState('Files/sidebar', {
-      sidebarClosed: 'closed',
-      sidebarActivePanel: 'activePanel'
-    }),
-
-    showSidebar() {
-      return !this.sidebarClosed
-    }
-  },
-  watch: {
-    $route: {
-      handler: function (to, from) {
-        this.resetFileSelection()
-        if (from?.name !== to.name) {
-          this.closeSidebar()
-        }
-      }
-    }
-  },
   created() {
-    this.$root.$on('upload-end', () => {
-      // delay for screen reader virtual buffer
-      setTimeout(() => this.$refs.filesListWrapper.focus(), 500)
-    })
     const dragOver = bus.subscribe('drag-over', this.onDragOver)
     const dragOut = bus.subscribe('drag-out', this.hideDropzone)
     const drop = bus.subscribe('drop', this.hideDropzone)
@@ -67,23 +33,11 @@ export default defineComponent({
   },
 
   methods: {
-    ...mapActions('Files', ['resetFileSelection']),
-    ...mapActions('Files/sidebar', {
-      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,
-        to: this.$refs.filesSidebar?.$el,
-        revert: event === 'beforeDestroy'
-      })
     }
   }
 })
@@ -106,30 +60,8 @@ main {
   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;
-  grid-template-rows: max-content max-content 1fr;
-  gap: 0 0;
-  grid-template-areas:
-    'header'
-    'upload'
-    'main';
-
-  &:focus {
-    outline: none;
-  }
-}
 
 #files {
   position: relative;
 }
-
-#files-view {
-  grid-area: main;
-  z-index: 0;
-  outline: none;
-}
 </style>

packages/web-app-files/src/components/FilesList/Pagination.vue

@@ -24,7 +24,7 @@ export default {
   watch: {
     currentPage: {
       handler: function () {
-        document.getElementsByClassName('files-list-wrapper')[0]?.scrollTo(0, 0)
+        document.getElementsByClassName('files-view-wrapper')[0]?.scrollTo(0, 0)
       }
     }
   }

packages/web-app-files/src/components/FilesViewWrapper.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="files-view-wrapper oc-width-expand">
+    <div id="files-view" v-bind="$attrs">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api'
+
+export default defineComponent({
+  inheritAttrs: false
+})
+</script>
+
+<style lang="scss" scoped>
+.files-view-wrapper {
+  position: relative;
+  overflow-y: auto;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: max-content max-content 1fr;
+  gap: 0 0;
+  grid-template-areas:
+    'header'
+    'upload'
+    'main';
+
+  &:focus {
+    outline: none;
+  }
+}
+
+#files-view {
+  grid-area: main;
+  z-index: 0;
+  outline: none;
+}
+</style>

packages/web-app-files/src/components/SideBar/SideBar.vue

@@ -1,12 +1,21 @@
 <template>
   <SideBar
+    v-if="showSidebar"
     ref="sidebar"
+    class="files-side-bar"
+    tabindex="-1"
+    :sidebar-active-panel="sidebarActivePanel"
     :available-panels="availablePanels"
     :sidebar-accordions-warning-message="sidebarAccordionsWarningMessage"
     :is-content-displayed="isContentDisplayed"
     :loading="loading"
     :is-header-compact="isSingleResource"
     v-bind="$attrs"
+    @beforeDestroy="destroySideBar"
+    @mounted="focusSideBar"
+    @fileChanged="focusSideBar"
+    @selectPanel="setActiveSideBarPanel"
+    @close="closeSideBar"
     v-on="$listeners"
   >
     <template #header>
@@ -54,9 +63,39 @@ export default defineComponent({
 
   setup() {
     const store = useStore()
+
+    const showSidebar = computed(() => !store.getters['Files/sidebar/closed'])
+    const sidebarActivePanel = computed(() => store.getters['Files/sidebar/activePanel'])
+
+    const closeSideBar = () => {
+      store.dispatch('Files/sidebar/close')
+    }
+    const setActiveSideBarPanel = (panelName) => {
+      store.dispatch('Files/sidebar/setActivePanel', panelName)
+    }
+
+    const focusSideBar = (component, event) => {
+      component.focus({
+        from: document.activeElement,
+        to: component.sidebar?.$el,
+        revert: event === 'beforeDestroy'
+      })
+    }
+
+    const destroySideBar = (component, event) => {
+      focusSideBar(component, event)
+      closeSideBar()
+    }
+
     return {
       hasShareJail: useCapabilityShareJailEnabled(),
-      publicLinkPassword: usePublicLinkPassword({ store })
+      publicLinkPassword: usePublicLinkPassword({ store }),
+      showSidebar,
+      sidebarActivePanel,
+      setActiveSideBarPanel,
+      closeSideBar,
+      destroySideBar,
+      focusSideBar
     }
   },
 
@@ -72,7 +111,6 @@ export default defineComponent({
   computed: {
     ...mapGetters('Files', ['highlightedFile', 'selectedFiles']),
     ...mapGetters(['fileSideBars', 'capabilities']),
-    ...mapState('Files/sidebar', { sidebarActivePanel: 'activePanel' }),
     ...mapState(['user']),
     availablePanels(): Panel[] {
       const { panels } = this.fileSideBars.reduce(
@@ -169,7 +207,7 @@ export default defineComponent({
   methods: {
     async fetchFileInfo() {
       if (!this.highlightedFile) {
-        this.selectedFile = this.highlightedFile
+        this.selectedFile = {}
         return
       }
 
@@ -178,7 +216,7 @@ export default defineComponent({
         isLocationTrashActive(this.$router, 'files-trash-spaces-project') ||
         this.highlightedFileIsSpace
       ) {
-        this.selectedFile = this.highlightedFile
+        this.selectedFile = { ...this.highlightedFile }
         return
       }
 
@@ -209,7 +247,7 @@ export default defineComponent({
         this.selectedFile = buildResource(item)
         this.$set(this.selectedFile, 'thumbnail', this.highlightedFile.thumbnail || null)
       } catch (error) {
-        this.selectedFile = this.highlightedFile
+        this.selectedFile = { ...this.highlightedFile }
         console.error(error)
       }
       this.loading = false
@@ -219,19 +257,23 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.sidebar-panel {
-  &__file_info,
-  &__space_info {
-    background-color: var(--oc-color-background-default);
-    padding: var(--oc-space-small) var(--oc-space-small) 0 var(--oc-space-small);
+.files-side-bar {
+  z-index: 3;
+
+  .sidebar-panel {
+    &__file_info,
+    &__space_info {
+      background-color: var(--oc-color-background-default);
+      padding: var(--oc-space-small) var(--oc-space-small) 0 var(--oc-space-small);
+    }
   }
-}
 
-._clipboard-success-animation {
-  animation-name: _clipboard-success-animation;
-  animation-duration: 0.8s;
-  animation-timing-function: ease-out;
-  animation-fill-mode: both;
+  ._clipboard-success-animation {
+    animation-name: _clipboard-success-animation;
+    animation-duration: 0.8s;
+    animation-timing-function: ease-out;
+    animation-fill-mode: both;
+  }
 }
 
 @keyframes _clipboard-success-animation {