fix(files): active and open sidebar on mount

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

diff --git a/apps/files/src/actions/openFolderAction.ts b/apps/files/src/actions/openFolderAction.ts
index ccb3f1a43ea078a12aa532fb7fd8ea67536d11c7..9e8325159766cd1c4937ad23ac5f6817e68145d7 100644 (file)
--- a/apps/files/src/actions/openFolderAction.ts
+++ b/apps/files/src/actions/openFolderAction.ts
@@ -59,8 +59,8 @@ export const action = new FileAction({
 
                window.OCP.Files.Router.goToRoute(
                        null,
-                       null,
-                       { dir: join(dir, node.basename) },
+                       { fileid: undefined },
+                       { dir: join(dir, node.basename), fileid: undefined },
                )
                return null
        },

diff --git a/apps/files/src/components/FileEntry.vue b/apps/files/src/components/FileEntry.vue
index e3feda819b8b856cf632abb54fec3f06fa7b11f3..d189c83e63a7af0e220e3546202d0c689a8d0888 100644 (file)
--- a/apps/files/src/components/FileEntry.vue
+++ b/apps/files/src/components/FileEntry.vue
@@ -21,11 +21,15 @@
   -->
 
 <template>
-       <tr :class="{'list__row--active': active}" class="list__row" @contextmenu="onRightClick">
+       <tr :class="{'files-list__row--visible': visible, 'files-list__row--active': isActive}"
+               class="list__row"
+               @contextmenu="onRightClick">
+               <!-- Failed indicator -->
                <span v-if="source.attributes.failed" class="files-list__row--failed" />
 
+               <!-- Checkbox -->
                <td class="files-list__row-checkbox">
-                       <NcCheckboxRadioSwitch v-if="active"
+                       <NcCheckboxRadioSwitch v-if="visible"
                                :aria-label="t('files', 'Select the row for {displayName}', { displayName })"
                                :checked="selectedFiles"
                                :value="fileid"
@@ -98,7 +102,7 @@
                                :source="source" />
 
                        <!-- Menu actions -->
-                       <NcActions v-if="active"
+                       <NcActions v-if="visible"
                                ref="actionsMenu"
                                :boundaries-element="getBoundariesElement()"
                                :container="getBoundariesElement()"
@@ -142,7 +146,7 @@
                        :class="`files-list__row-${currentView?.id}-${column.id}`"
                        class="files-list__row-column-custom"
                        @click="openDetailsIfAvailable">
-                       <CustomElementRender v-if="active"
+                       <CustomElementRender v-if="visible"
                                :current-view="currentView"
                                :render="column.render"
                                :source="source" />
@@ -208,7 +212,7 @@ export default Vue.extend({
        },
 
        props: {
-               active: {
+               visible: {
                        type: Boolean,
                        default: false,
                },
@@ -279,10 +283,13 @@ export default Vue.extend({
                        return this.currentView?.columns || []
                },
 
-               dir() {
+               currentDir() {
                        // Remove any trailing slash but leave root slash
                        return (this.$route?.query?.dir || '/').replace(/^(.+)\/$/, '$1')
                },
+               currentFileId() {
+                       return this.$route.params.fileid || this.$route.query.fileid || null
+               },
                fileid() {
                        return this.source?.fileid?.toString?.()
                },
@@ -418,7 +425,7 @@ export default Vue.extend({
 
                // Enabled action that are displayed inline with a custom render function
                enabledRenderActions() {
-                       if (!this.active) {
+                       if (!this.visible) {
                                return []
                        }
                        return this.enabledActions.filter(action => typeof action.renderInline === 'function')
@@ -472,6 +479,10 @@ export default Vue.extend({
                                this.renamingStore.newName = newName
                        },
                },
+
+               isActive() {
+                       return this.fileid === this.currentFileId
+               },
        },
 
        watch: {
@@ -482,7 +493,6 @@ export default Vue.extend({
                source() {
                        this.resetState()
                        this.debounceIfNotCached()
-                       logger.debug('FileEntry source changed', { source: this.source })
                },
 
                /**
@@ -492,6 +502,16 @@ export default Vue.extend({
                isRenaming() {
                        this.startRenaming()
                },
+
+               /**
+                * Open the sidebar if the file is active
+                */
+               isActive(active) {
+                       const Sidebar = window?.OCA?.Files?.Sidebar
+                       if (active && Sidebar && Sidebar.file !== this.source.path) {
+                               Sidebar.open(this.source.path)
+                       }
+               },
        },
 
        /**
@@ -545,8 +565,8 @@ export default Vue.extend({
                        // Store the promise to be able to cancel it
                        this.previewPromise = new CancelablePromise((resolve, reject, onCancel) => {
                                const img = new Image()
-                               // If active, load the preview with higher priority
-                               img.fetchpriority = this.active ? 'high' : 'auto'
+                               // If visible, load the preview with higher priority
+                               img.fetchpriority = this.visible ? 'high' : 'auto'
                                img.onload = () => {
                                        this.backgroundImage = `url(${this.previewUrl})`
                                        this.backgroundFailed = false
@@ -595,7 +615,7 @@ export default Vue.extend({
                                this.loading = action.id
                                Vue.set(this.source, '_loading', true)
 
-                               const success = await action.exec(this.source, this.currentView, this.dir)
+                               const success = await action.exec(this.source, this.currentView, this.currentDir)
 
                                // If the action returns null, we stay silent
                                if (success === null) {
@@ -621,7 +641,7 @@ export default Vue.extend({
                                event.preventDefault()
                                event.stopPropagation()
                                // Execute the first default action if any
-                               this.enabledDefaultActions[0].exec(this.source, this.currentView, this.dir)
+                               this.enabledDefaultActions[0].exec(this.source, this.currentView, this.currentDir)
                        }
                },
 
@@ -798,7 +818,7 @@ export default Vue.extend({
                                        showError(this.t('files', 'Could not rename "{oldName}", it does not exist any more', { oldName }))
                                        return
                                } else if (error?.response?.status === 412) {
-                                       showError(this.t('files', 'The name "{newName}"" is already used in the folder "{dir}". Please choose a different name.', { newName, dir: this.dir }))
+                                       showError(this.t('files', 'The name "{newName}"" is already used in the folder "{dir}". Please choose a different name.', { newName, dir: this.currentDir }))
                                        return
                                }
 
@@ -830,7 +850,7 @@ export default Vue.extend({
 tr {
        &:hover,
        &:focus,
-       &:active {
+       &:visible {
                background-color: var(--color-background-dark);
        }
 }

diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
index 05de0a38750eba5226fed6920036b05e099839a9..18c58a6c41b5f92624117e12f3828c0ef8cd549d 100644 (file)
--- a/apps/files/src/components/FilesListVirtual.vue
+++ b/apps/files/src/components/FilesListVirtual.vue
@@ -170,6 +170,16 @@ export default Vue.extend({
                },
        },
 
+       mounted() {
+               // Open the sidebar on the file if it's in the url and
+               // we're just loaded the app for the first time.
+               const Sidebar = window?.OCA?.Files?.Sidebar
+               const node = this.nodes.find(node => node.fileid === this.fileId)
+               if (Sidebar && node) {
+                       Sidebar.open(node.path)
+               }
+       },
+
        methods: {
                getFileId(node) {
                        return node.fileid
@@ -292,9 +302,14 @@ export default Vue.extend({
                        }
                }
 
-               // Hover state of the row should also change the favorite markers background
-               .files-list__row:hover .favorite-marker-icon svg path {
-                       stroke: var(--color-background-dark);
+               .files-list__row{
+                       &:hover, &:focus, &:active, &--active {
+                               background-color: var(--color-background-dark);
+                               // Hover state of the row should also change the favorite markers background
+                               .favorite-marker-icon svg path {
+                                       stroke: var(--color-background-dark);
+                               }
+                       }
                }
 
                // Entry preview or mime icon

diff --git a/apps/files/src/components/VirtualList.vue b/apps/files/src/components/VirtualList.vue
index 252be00413a5d1c93fa6174ea8a01fd07c506ea0..b14be529c09d1c88cb4d0ce478cf47f9af1a45d1 100644 (file)
--- a/apps/files/src/components/VirtualList.vue
+++ b/apps/files/src/components/VirtualList.vue
@@ -15,14 +15,14 @@
                        <component :is="dataComponent"
                                v-for="(item, i) in renderedItems"
                                :key="i"
-                               :active="(i >= bufferItems || index <= bufferItems) && (i < shownItems - bufferItems)"
+                               :visible="(i >= bufferItems || index <= bufferItems) && (i < shownItems - bufferItems)"
                                :source="item"
                                :index="i"
                                v-bind="extraProps" />
                </tbody>
 
                <!-- Footer -->
-               <tfoot ref="tfoot" class="files-list__tfoot">
+               <tfoot v-show="isReady" ref="tfoot" class="files-list__tfoot">
                        <slot name="footer" />
                </tfoot>
        </table>
@@ -72,7 +72,6 @@ export default Vue.extend({
                        bufferItems,
                        index: this.scrollToIndex,
                        beforeHeight: 0,
-                       footerHeight: 0,
                        headerHeight: 0,
                        tableHeight: 0,
                        resizeObserver: null as ResizeObserver | null,
@@ -80,6 +79,11 @@ export default Vue.extend({
        },
 
        computed: {
+               // Wait for measurements to be done before rendering
+               isReady() {
+                       return this.tableHeight > 0
+               },
+
                startIndex() {
                        return Math.max(0, this.index - bufferItems)
                },
@@ -87,6 +91,9 @@ export default Vue.extend({
                        return Math.ceil((this.tableHeight - this.headerHeight) / this.itemHeight) + bufferItems * 2
                },
                renderedItems(): (File | Folder)[] {
+                       if (!this.isReady) {
+                               return []
+                       }
                        return this.dataSources.slice(this.startIndex, this.startIndex + this.shownItems)
                },
 
@@ -115,7 +122,6 @@ export default Vue.extend({
 
                this.resizeObserver = new ResizeObserver(debounce(() => {
                        this.beforeHeight = before?.clientHeight ?? 0
-                       this.footerHeight = tfoot?.clientHeight ?? 0
                        this.headerHeight = thead?.clientHeight ?? 0
                        this.tableHeight = root?.clientHeight ?? 0
                        logger.debug('VirtualList resizeObserver updated')