Merge pull request #3665 from nextcloud/show-sidebar-when-viewer-is-opened

Show sidebar when Viewer is opened

src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue

@@ -150,6 +150,12 @@ export default {
 			event.stopPropagation()
 			event.preventDefault()
 
+			// The Viewer expects a file to be set in the sidebar if the sidebar
+			// is open.
+			if (this.$store.getters.getSidebarStatus) {
+				OCA.Files.Sidebar.state.file = this.internalAbsolutePath
+			}
+
 			OCA.Viewer.open({
 				// Viewer expects an internal absolute path starting with "/".
 				path: this.internalAbsolutePath,

src/components/RightSidebar/RightSidebar.vue

@@ -23,6 +23,7 @@
 <template>
 	<AppSidebar
 		v-show="opened"
+		id="app-sidebar"
 		:title="title"
 		:starred="isFavorited"
 		:title-editable="canModerate && isRenamingConversation"
@@ -240,6 +241,12 @@ export default {
 
 <style lang="scss" scoped>
 
+/* Override style set in server for "#app-sidebar" to match the style set in
+ * nextcloud-vue for ".app-sidebar". */
+#app-sidebar {
+	display: flex;
+}
+
 /* Force scroll bars in tabs content instead of in whole sidebar. */
 ::v-deep .app-sidebar-tabs__content {
 	overflow: hidden;

src/main.js

@@ -74,3 +74,78 @@ export default new Vue({
 	},
 	render: h => h(App),
 })
+
+window.store = store
+
+// Setup OCA.Files.Sidebar to be used by the viewer
+window.OCA.Files = {}
+
+const Sidebar = function() {
+	this.state = {
+		file: '',
+	}
+
+	store.watch(
+		(state, getters) => {
+			return getters.getSidebarStatus
+		},
+		(sidebarShown) => {
+			if (!sidebarShown) {
+				this.state.file = ''
+			}
+		}
+	)
+}
+
+const waitForSidebarToBeOpen = function(sidebarElement, resolve) {
+	if ('ontransitionend' in sidebarElement) {
+		const resolveOnceSidebarWidthHasChanged = (event) => {
+			if (event.propertyName !== 'min-width' && event.propertyName !== 'width' && event.propertyName !== 'max-width') {
+				return
+			}
+
+			sidebarElement.removeEventListener('transitionend', resolveOnceSidebarWidthHasChanged)
+
+			resolve()
+		}
+
+		sidebarElement.addEventListener('transitionend', resolveOnceSidebarWidthHasChanged)
+	} else {
+		const animationQuickValue = getComputedStyle(document.documentElement).getPropertyValue('--animation-quick')
+
+		// The browser does not support the "ontransitionend" event, so just
+		// wait a few milliseconds more than the duration of the transition.
+		setTimeout(() => {
+			console.debug('ontransitionend is not supported; the sidebar should have been fully shown by now')
+
+			resolve()
+		}, Number.parseInt(animationQuickValue) + 200)
+	}
+}
+
+Sidebar.prototype.open = function(path) {
+	// The sidebar is already open, so this can return immediately.
+	if (this.state.file) {
+		return
+	}
+
+	store.commit('showSidebar')
+	this.state.file = path
+
+	const sidebarElement = document.getElementById('app-sidebar')
+
+	// The Viewer adjusts its width to the sidebar width once the sidebar has
+	// been opened. The sidebar opens with an animation, so a delay is needed
+	// before the width can be properly adjusted.
+	return new Promise((resolve, reject) => {
+		waitForSidebarToBeOpen(sidebarElement, resolve)
+	})
+}
+Sidebar.prototype.close = function() {
+	store.dispatch('hideSidebar')
+	this.state.file = ''
+}
+
+Object.assign(window.OCA.Files, {
+	Sidebar: new Sidebar(),
+})