Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Right sidebar to views #7501

Merged
merged 11 commits into from
Aug 23, 2022
Prev Previous commit
Next Next commit
refactor: introduce files-view-wrapper component
  • Loading branch information
kulmann committed Aug 22, 2022

Verified

This commit was signed with the committer’s verified signature. The key has expired.
westonruter Weston Ruter
commit 35b9aa15a441455cf4029898a69a814b22cab7b9
30 changes: 1 addition & 29 deletions packages/web-app-files/src/App.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
<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">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fyi: the wrapper div has been moved into a separate component, which is used inside all relevant views, because otherwise the right sidebar would have been a child of this file list wrapper here.

<router-view id="files-view" tabindex="0" />
</div>
<router-view tabindex="0" class="oc-width-expand" />
</main>
</template>
<script lang="ts">
@@ -15,10 +13,6 @@ export default defineComponent({
dragareaEnabled: false
}),
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)
@@ -58,30 +52,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>
Original file line number Diff line number Diff line change
@@ -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)
}
}
}
40 changes: 40 additions & 0 deletions packages/web-app-files/src/components/FilesViewWrapper.vue
Original file line number Diff line number Diff line change
@@ -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>
6 changes: 4 additions & 2 deletions packages/web-app-files/src/components/TrashBin.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="oc-flex">
<div class="oc-width-expand">
<files-view-wrapper>
<app-bar :breadcrumbs="breadcrumbs" :has-bulk-actions="true" />
<app-loading-spinner v-if="areResourcesLoading" />
<template v-else>
@@ -45,7 +45,7 @@
</template>
</resource-table>
</template>
</div>
</files-view-wrapper>
<side-bar />
</div>
</template>
@@ -68,11 +68,13 @@ import { bus } from 'web-pkg/src/instance'
import { defineComponent } from '@vue/composition-api'
import { Resource } from 'web-client'
import SideBar from '../components/SideBar/SideBar.vue'
import FilesViewWrapper from './FilesViewWrapper.vue'

export default defineComponent({
name: 'TrashBin',

components: {
FilesViewWrapper,
AppBar,
ResourceTable,
AppLoadingSpinner,
2 changes: 1 addition & 1 deletion packages/web-app-files/src/mixins/filesListScrolling.js
Original file line number Diff line number Diff line change
@@ -15,7 +15,7 @@ export default {

// top reached
if (resourceElement.getBoundingClientRect().top < topOffset) {
const fileListWrapperElement = document.getElementsByClassName('files-list-wrapper')[0]
const fileListWrapperElement = document.getElementsByClassName('files-view-wrapper')[0]
fileListWrapperElement.scrollBy(0, -resourceElement.offsetHeight)
}
}
6 changes: 4 additions & 2 deletions packages/web-app-files/src/views/Favorites.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="oc-flex">
<div class="oc-width-expand">
<files-view-wrapper>
<app-bar />
<app-loading-spinner v-if="areResourcesLoading" />
<template v-else>
@@ -53,7 +53,7 @@
</template>
</resource-table>
</template>
</div>
</files-view-wrapper>
<side-bar />
</div>
</template>
@@ -82,11 +82,13 @@ import { defineComponent } from '@vue/composition-api'
import { Resource } from 'web-client'
import { useStore } from 'web-pkg/src/composables'
import SideBar from '../components/SideBar/SideBar.vue'
import FilesViewWrapper from '../components/FilesViewWrapper.vue'

const visibilityObserver = new VisibilityObserver()

export default defineComponent({
components: {
FilesViewWrapper,
AppBar,
ResourceTable,
QuickActions,
6 changes: 4 additions & 2 deletions packages/web-app-files/src/views/Personal.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="oc-flex">
<keyboard-actions :paginated-resources="paginatedResources" />
<div class="oc-width-expand">
<files-view-wrapper>
<app-bar
:has-bulk-actions="true"
:breadcrumbs="breadcrumbs"
@@ -71,7 +71,7 @@
</template>
</resource-table>
</template>
</div>
</files-view-wrapper>
<side-bar />
</div>
</template>
@@ -110,11 +110,13 @@ import { useGraphClient } from 'web-client/src/composables'
import { useCapabilityShareJailEnabled, useRouteParam } from 'web-pkg/src/composables'
import KeyboardActions from '../components/FilesList/KeyboardActions.vue'
import SideBar from '../components/SideBar/SideBar.vue'
import FilesViewWrapper from '../components/FilesViewWrapper.vue'

const visibilityObserver = new VisibilityObserver()

export default defineComponent({
components: {
FilesViewWrapper,
AppBar,
CreateAndUpload,
ResourceTable,
6 changes: 4 additions & 2 deletions packages/web-app-files/src/views/PublicFiles.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="oc-flex">
<keyboard-actions :paginated-resources="paginatedResources" />
<div class="oc-width-expand">
<files-view-wrapper>
<app-bar
:has-bulk-actions="true"
:breadcrumbs="breadcrumbs"
@@ -64,7 +64,7 @@
</template>
</resource-table>
</template>
</div>
</files-view-wrapper>
<side-bar />
</div>
</template>
@@ -98,11 +98,13 @@ import { Resource } from 'web-client'
import { usePublicLinkPassword, useStore } from 'web-pkg/src/composables'
import KeyboardActions from '../components/FilesList/KeyboardActions.vue'
import SideBar from '../components/SideBar/SideBar.vue'
import FilesViewWrapper from '../components/FilesViewWrapper.vue'

const visibilityObserver = new VisibilityObserver()

export default defineComponent({
components: {
FilesViewWrapper,
AppBar,
CreateAndUpload,
ResourceTable,
12 changes: 7 additions & 5 deletions packages/web-app-files/src/views/shares/SharedResource.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="oc-flex">
<keyboard-actions :paginated-resources="paginatedResources" />
<div class="oc-width-expand">
<files-view-wrapper>
<app-bar
:has-bulk-actions="true"
:breadcrumbs="breadcrumbs"
@@ -71,7 +71,7 @@
</template>
</resource-table>
</template>
</div>
</files-view-wrapper>
<side-bar />
</div>
</template>
@@ -98,6 +98,9 @@ import NotFoundMessage from '../../components/FilesList/NotFoundMessage.vue'
import ListInfo from '../../components/FilesList/ListInfo.vue'
import Pagination from '../../components/FilesList/Pagination.vue'
import ContextActions from '../../components/FilesList/ContextActions.vue'
import KeyboardActions from '../../components/FilesList/KeyboardActions.vue'
import SideBar from '../../components/SideBar/SideBar.vue'
import FilesViewWrapper from '../../components/FilesViewWrapper.vue'

// misc
import { VisibilityObserver } from 'web-pkg/src/observer'
@@ -111,8 +114,6 @@ import { move } from '../../helpers/resource'
import { Resource } from 'web-client'
import { breadcrumbsFromPath, concatBreadcrumbs } from '../../helpers/breadcrumbs'
import { useRouteParam, useRouteQuery } from 'web-pkg/src/composables'
import KeyboardActions from '../../components/FilesList/KeyboardActions.vue'
import SideBar from '../../components/SideBar/SideBar.vue'

const visibilityObserver = new VisibilityObserver()

@@ -129,7 +130,8 @@ export default defineComponent({
Pagination,
ContextActions,
KeyboardActions,
SideBar
SideBar,
FilesViewWrapper
},

mixins: [
11 changes: 7 additions & 4 deletions packages/web-app-files/src/views/shares/SharedViaLink.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="oc-flex">
<div class="oc-width-expand">
<files-view-wrapper>
<app-bar :has-shares-navigation="true" />
<app-loading-spinner v-if="areResourcesLoading" />
<template v-else>
@@ -46,14 +46,13 @@
</template>
</resource-table>
</template>
</div>
</files-view-wrapper>
<side-bar />
</div>
</template>

<script lang="ts">
import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
import ResourceTable from '../../components/FilesList/ResourceTable.vue'

import FileActions from '../../mixins/fileActions'
import MixinFilesListFilter from '../../mixins/filesListFilter'
@@ -68,17 +67,21 @@ import AppBar from '../../components/AppBar/AppBar.vue'
import ListInfo from '../../components/FilesList/ListInfo.vue'
import Pagination from '../../components/FilesList/Pagination.vue'
import ContextActions from '../../components/FilesList/ContextActions.vue'
import SideBar from '../../components/SideBar/SideBar.vue'
import FilesViewWrapper from '../../components/FilesViewWrapper.vue'
import ResourceTable from '../../components/FilesList/ResourceTable.vue'

import { createLocationSpaces } from '../../router'
import { useResourcesViewDefaults } from '../../composables'
import { defineComponent } from '@vue/composition-api'
import { Resource } from 'web-client'
import { useStore } from 'web-pkg/src/composables'
import SideBar from '../../components/SideBar/SideBar.vue'

const visibilityObserver = new VisibilityObserver()

export default defineComponent({
components: {
FilesViewWrapper,
AppBar,
ResourceTable,
AppLoadingSpinner,
6 changes: 4 additions & 2 deletions packages/web-app-files/src/views/shares/SharedWithMe.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="oc-flex">
<div class="oc-width-expand oc-flex-column">
<files-view-wrapper class="oc-flex-column">
<app-bar :has-shares-navigation="true" :has-bulk-actions="true" />
<app-loading-spinner v-if="areResourcesLoading" />
<template v-else>
@@ -45,7 +45,7 @@
:resource-clickable="false"
/>
</template>
</div>
</files-view-wrapper>
<side-bar />
</div>
</template>
@@ -61,9 +61,11 @@ import { ShareStatus } from 'web-client/src/helpers/share'
import { computed, defineComponent, unref } from '@vue/composition-api'
import { Resource } from 'web-client'
import SideBar from '../../components/SideBar/SideBar.vue'
import FilesViewWrapper from '../../components/FilesViewWrapper.vue'

export default defineComponent({
components: {
FilesViewWrapper,
AppBar,
AppLoadingSpinner,
SharedWithMeSection,
Loading