fix: Fix styling of collission dialog and move it out of the editor

Signed-off-by: Julius Härtl <[email protected]>

Author: juliusknorr

src/components/CollisionResolveDialog.vue

@@ -22,18 +22,34 @@
 
 <template>
 	<div id="resolve-conflicts" class="collision-resolve-dialog" :class="{'icon-loading': clicked }">
-		<button :disabled="clicked" @click="resolveThisVersion" data-cy="resolveThisVersion">
+		<NcButton :disabled="clicked" data-cy="resolveThisVersion" @click="resolveThisVersion">
 			{{ t('text', 'Use current version') }}
-		</button>
-		<button :disabled="clicked" @click="resolveServerVersion" data-cy="resolveServerVersion">
+		</NcButton>
+		<NcButton :disabled="clicked" data-cy="resolveServerVersion" @click="resolveServerVersion">
 			{{ t('text', 'Use the saved version') }}
-		</button>
+		</NcButton>
 	</div>
 </template>
 
 <script>
+import { useEditorMixin, useSyncServiceMixin } from './Editor.provider.js'
+import { NcButton } from '@nextcloud/vue'
+import markdownit from './../markdownit/index.js'
 export default {
 	name: 'CollisionResolveDialog',
+	components: {
+		NcButton,
+	},
+	mixins: [
+		useEditorMixin,
+		useSyncServiceMixin,
+	],
+	props: {
+		syncError: {
+			type: Object,
+			default: null,
+		}
+	},
 	data() {
 		return {
 			clicked: false,
@@ -42,11 +58,17 @@ export default {
 	methods: {
 		resolveThisVersion() {
 			this.clicked = true
-			this.$emit('resolve-use-this-version')
+			this.$syncService.forceSave()
+			this.$editor.setOptions({ editable: !this.readOnly })
+			this.$syncService.startSync()
 		},
 		resolveServerVersion() {
 			this.clicked = true
-			this.$emit('resolve-use-server-version')
+			const markdownItHtml = markdownit.render(this.syncError.data.outsideChange)
+			this.$editor.setOptions({ editable: !this.readOnly })
+			this.$editor.commands.setContent(markdownItHtml)
+			this.$syncService.forceSave()
+			this.$syncService.startSync()
 		},
 	},
 }
@@ -55,17 +77,12 @@ export default {
 <style scoped lang="scss">
 	#resolve-conflicts {
 		display: flex;
-		position: fixed;
-		z-index: 10000;
-		bottom: 0;
-		max-width: 900px;
-		width: 100vw;
+		width: 100%;
 		margin: auto;
 		padding: 20px 0;
 
 		button {
 			margin: auto;
-			box-shadow: 0 0 10px var(--color-box-shadow);
 		}
 	}
 </style>

src/components/Editor.vue

@@ -31,6 +31,7 @@
 			:sync-error="syncError"
 			:has-connection-issue="hasConnectionIssue"
 			@reconnect="reconnect" />
+
 		<Wrapper v-if="displayed"
 			:sync-error="syncError"
 			:has-connection-issue="hasConnectionIssue"
@@ -71,10 +72,6 @@
 				:content="syncError.data.outsideChange"
 				:is-rich-editor="isRichEditor" />
 		</Wrapper>
-
-		<CollisionResolveDialog v-if="hasSyncCollission && !readOnly"
-			@resolve-use-this-version="resolveUseThisVersion"
-			@resolve-use-server-version="resolveUseServerVersion" />
 	</div>
 </template>
 
@@ -132,7 +129,6 @@ export default {
 		MenuBar,
 		Reader: () => import(/* webpackChunkName: "editor" */'./Reader.vue'),
 		Status,
-		CollisionResolveDialog: () => import(/* webpackChunkName: "editor" */'./CollisionResolveDialog.vue'),
 	},
 	mixins: [
 		isMobile,
@@ -423,20 +419,6 @@ export default {
 				.off('save', this.onSave)
 		},
 
-		resolveUseThisVersion() {
-			this.$syncService.forceSave()
-			this.$editor.setOptions({ editable: !this.readOnly })
-			this.$syncService.startSync()
-		},
-
-		resolveUseServerVersion() {
-			const markdownItHtml = markdownit.render(this.syncError.data.outsideChange)
-			this.$editor.setOptions({ editable: !this.readOnly })
-			this.$editor.commands.setContent(markdownItHtml)
-			this.$syncService.forceSave()
-			this.$syncService.startSync()
-		},
-
 		reconnect() {
 			this.contentLoaded = false
 			this.hasConnectionIssue = false
@@ -891,8 +873,9 @@ export default {
 	.text-editor__wrapper.has-conflicts > .content-wrapper {
 		width: 50%;
 		#read-only-editor {
-			margin: 0px;
+			margin: 0px auto;
 			padding-top: 50px;
+			overflow: initial;
 		}
 	}
 

src/components/Editor/DocumentStatus.vue

@@ -43,6 +43,8 @@
 		<p v-if="lock" class="msg msg-locked">
 			<Lock /> {{ t('text', 'This file is opened read-only as it is currently locked by {user}.', { user: lock.displayName }) }}
 		</p>
+
+		<CollisionResolveDialog v-if="hasSyncCollission" :sync-error="syncError" />
 	</div>
 </template>
 
@@ -52,11 +54,13 @@ import { ERROR_TYPE, IDLE_TIMEOUT } from './../../services/SyncService.js'
 import AlertOctagonOutline from 'vue-material-design-icons/AlertOctagonOutline.vue'
 import Lock from 'vue-material-design-icons/Lock.vue'
 import { NcEmptyContent } from '@nextcloud/vue'
+import CollisionResolveDialog from '../CollisionResolveDialog.vue'
 
 export default {
 	name: 'DocumentStatus',
 
 	components: {
+		CollisionResolveDialog,
 		AlertOctagonOutline,
 		Lock,
 		NcEmptyContent,
@@ -107,7 +111,10 @@ export default {
 
 <style scoped lang="scss">
 	.document-status {
-		position: relative;
+		position: sticky;
+		top: 0;
+		z-index: 10000;
+		height: 50px;
 		background-color: var(--color-main-background);
 
 		.msg {