fix(ui): move document status to the bottom

Signed-off-by: Max <[email protected]>

src/components/CollisionResolveDialog.vue

@@ -5,10 +5,10 @@
 
 <template>
 	<div id="resolve-conflicts" class="collision-resolve-dialog" :class="{'icon-loading': clicked }">
-		<NcButton :disabled="clicked" data-cy="resolveThisVersion" @click="resolveThisVersion">
+		<NcButton size="large" :disabled="clicked" data-cy="resolveThisVersion" @click="resolveThisVersion">
 			{{ t('text', 'Use current version') }}
 		</NcButton>
-		<NcButton :disabled="clicked" data-cy="resolveServerVersion" @click="resolveServerVersion">
+		<NcButton size="large" :disabled="clicked" data-cy="resolveServerVersion" @click="resolveServerVersion">
 			{{ t('text', 'Use the saved version') }}
 		</NcButton>
 	</div>

src/components/Editor.vue

@@ -10,14 +10,6 @@
 		class="text-editor"
 		tabindex="-1"
 		@keydown.stop="onKeyDown">
-		<DocumentStatus v-if="displayedStatus"
-			:idle="idle"
-			:lock="lock"
-			:is-resolving-conflict="isResolvingConflict"
-			:sync-error="syncError"
-			:has-connection-issue="hasConnectionIssue"
-			@reconnect="reconnect" />
-
 		<SkeletonLoading v-if="showLoadingSkeleton" />
 		<Wrapper v-if="displayed"
 			:is-resolving-conflict="isResolvingConflict"
@@ -62,6 +54,13 @@
 			<Reader v-if="isResolvingConflict"
 				:content="syncError.data.outsideChange"
 				:is-rich-editor="isRichEditor" />
+			<CollisionResolveDialog v-if="isResolvingConflict" :sync-error="syncError" />
+			<DocumentStatus v-if="displayedStatus"
+				:idle="idle"
+				:lock="lock"
+				:sync-error="syncError"
+				:has-connection-issue="hasConnectionIssue"
+				@reconnect="reconnect" />
 		</Wrapper>
 		<Assistant v-if="hasEditor" />
 		<Translate :show="translateModal"
@@ -124,12 +123,14 @@ import Wrapper from './Editor/Wrapper.vue'
 import SkeletonLoading from './SkeletonLoading.vue'
 import Assistant from './Assistant.vue'
 import Translate from './Modal/Translate.vue'
+import CollisionResolveDialog from './CollisionResolveDialog.vue'
 import { generateRemoteUrl } from '@nextcloud/router'
 import { fetchNode } from '../services/WebdavClient.ts'
 
 export default {
 	name: 'Editor',
 	components: {
+		CollisionResolveDialog,
 		SkeletonLoading,
 		DocumentStatus,
 		Wrapper,

src/components/Editor/DocumentStatus.vue

@@ -33,8 +33,6 @@
 				{{ t('text', 'This file is opened read-only as it is currently locked by {user}.', { user: lock.displayName }) }}
 			</p>
 		</NcNoteCard>
-
-		<CollisionResolveDialog v-if="isResolvingConflict" :sync-error="syncError" />
 	</div>
 </template>
 
@@ -43,13 +41,11 @@
 import { ERROR_TYPE, IDLE_TIMEOUT } from './../../services/SyncService.js'
 import Lock from 'vue-material-design-icons/Lock.vue'
 import { NcNoteCard } from '@nextcloud/vue'
-import CollisionResolveDialog from '../CollisionResolveDialog.vue'
 
 export default {
 	name: 'DocumentStatus',
 
 	components: {
-		CollisionResolveDialog,
 		Lock,
 		NcNoteCard,
 	},
@@ -110,12 +106,14 @@ export default {
 
 <style scoped lang="scss">
 	.document-status {
-		position: sticky;
-		top: 16px;
+		position: absolute;
+		bottom: 34px;
 		z-index: 100000;
 		// max-height: 50px;
-		max-width: var(--text-editor-max-width);
 		margin: auto;
 		background-color: var(--color-main-background);
+		display: flex;
+		width: 100%;
+		justify-content: center;
 	}
 </style>

src/components/Editor/Wrapper.vue

@@ -135,6 +135,7 @@ export default {
 		display: flex;
 		width: 100%;
 		height: 100%;
+		overflow: auto;
 
 		.ProseMirror {
 			margin-top: 0 !important;

src/components/ViewerComponent.vue

@@ -148,7 +148,6 @@ export default {
 </script>
 <style lang="scss" scoped>
 .text-editor:not(.viewer__file--hidden) {
-	overflow: scroll;
 	top: 0;
 	width: 100%;
 	max-width: 100%;