fix: Avoid layout jump with rich workspace

Signed-off-by: Julius Härtl <jus@bitgrid.net>

src/files.js

@@ -21,7 +21,7 @@
  */
 import { linkTo } from '@nextcloud/router'
 import { loadState } from '@nextcloud/initial-state'
-import { registerFileListHeaders } from '@nextcloud/files'
+import { registerFileListHeaders, registerDavProperty } from '@nextcloud/files'
 import Vue from 'vue'
 
 import { logger } from './helpers/logger.js'
@@ -35,6 +35,9 @@ __webpack_public_path__ = linkTo('text', 'js/') // eslint-disable-line
 const workspaceAvailable = loadState('text', 'workspace_available')
 const workspaceEnabled = loadState('text', 'workspace_enabled')
 
+registerDavProperty('nc:rich-workspace', { nc: 'http://nextcloud.org/ns' })
+registerDavProperty('nc:rich-workspace-file', { nc: 'http://nextcloud.org/ns' })
+
 document.addEventListener('DOMContentLoaded', () => {
 	if (typeof OCA.Viewer === 'undefined') {
 		logger.error('Viewer app is not installed')

src/helpers/files.js

@@ -29,6 +29,7 @@ import { getSharingToken } from './token.js'
 import { openMimetypes } from './mime.js'
 import RichWorkspace from '../views/RichWorkspace.vue'
 import store from '../store/index.js'
+import { has } from 'lodash'
 
 const FILE_ACTION_IDENTIFIER = 'Edit with text app'
 
@@ -187,6 +188,8 @@ export const FilesWorkspaceHeader = new Header({
 
 	render(el, folder, view) {
 		addMenuRichWorkspace()
+		console.log(el, folder, view)
+		const hasRichWorkspace = folder.attributes['rich-workspace-file']
 
 		import('vue').then((module) => {
 			el.id = 'files-workspace-wrapper'
@@ -201,14 +204,19 @@ export const FilesWorkspaceHeader = new Header({
 			vm = new View({
 				propsData: {
 					path: folder.path,
+					hasRichWorkspace,
 				},
 				store,
 			}).$mount(el)
+			console.log('mounted => ' , vm)
 		})
 	},
 
 	updated(folder, view) {
+		const hasRichWorkspace = folder.attributes['rich-workspace-file']
 		vm.path = folder.path
+		vm.hasRichWorkspace = hasRichWorkspace
+		console.log('updated => ' , vm)
 	},
 })
 

src/views/RichWorkspace.vue

@@ -22,9 +22,9 @@
 
 <template>
 	<div v-if="enabled"
-		v-show="file"
+		v-show="hasRichWorkspace"
 		id="rich-workspace"
-		:class="{'focus': focus, 'dark': darkTheme, 'creatable': canCreate }">
+		:class="{'focus': focus, 'dark': darkTheme }">
 		<SkeletonLoading v-if="!loaded || !ready" />
 		<Editor v-if="file"
 			v-show="ready"
@@ -69,6 +69,10 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+		hasRichWorkspace: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
@@ -87,9 +91,6 @@ export default {
 		shareToken() {
 			return document.getElementById('sharingToken')?.value
 		},
-		canCreate() {
-			return !!(this.folder && (this.folder.permissions & OC.PERMISSION_CREATE))
-		},
 	},
 	watch: {
 		path() {
@@ -134,9 +135,12 @@ export default {
 			})
 		},
 		getFileInfo(autofocus) {
-			this.loaded = false
-			this.autofocus = false
+			if (!this.hasRichWorkspace) {
+				return
+			}
 			this.ready = false
+			this.loaded = true
+			this.autofocus = false
 			const params = { path: this.path }
 			if (IS_PUBLIC) {
 				params.shareToken = this.shareToken
@@ -209,9 +213,7 @@ export default {
 		transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
 		z-index: 61;
 		position: relative;
-		&.creatable {
-			min-height: 100px;
-		}
+		min-height: 30vh;
 	}
 
 	/* For subfolders, where there are no Recommendations */