[stable31] fix(ui): style conflict resolution buttons

cypress/e2e/conflict.spec.js

@@ -57,7 +57,7 @@ variants.forEach(function({ fixture, mime }) {
 			cy.openFile(fileName)
 
 			cy.get('.text-editor .document-status')
-				.should('contain', 'Document has been changed outside of the editor.')
+				.should('contain', 'The file was overwritten.')
 			getWrapper()
 				.find('#read-only-editor')
 				.should('contain', 'Hello world')

cypress/e2e/sync.spec.js

@@ -50,14 +50,14 @@ describe('Sync', () => {
 		cy.intercept('**/apps/text/session/*/*', req => req.destroy()).as('dead')
 		cy.wait('@dead', { timeout: 30000 })
 		cy.get('#editor-container .document-status', { timeout: 30000 })
-			.should('contain', 'Document could not be loaded.')
+			.should('contain', 'The document could not be loaded.')
 		cy.intercept('**/apps/text/session/*/*', req => req.continue()).as('alive')
 		cy.wait('@alive', { timeout: 30000 })
 		cy.intercept({ method: 'POST', url: '**/apps/text/session/*/sync' })
 			.as('syncAfterRecovery')
 		cy.wait('@syncAfterRecovery', { timeout: 30000 })
 		cy.get('#editor-container .document-status', { timeout: 30000 })
-			.should('not.contain', 'Document could not be loaded.')
+			.should('not.contain', 'The document could not be loaded.')
 		// FIXME: There seems to be a bug where typed words maybe lost if not waiting for the new session
 		cy.wait('@syncAfterRecovery', { timeout: 10000 })
 		cy.insertLine('* more content added after the lost connection')
@@ -73,13 +73,13 @@ describe('Sync', () => {
 		cy.intercept('**/apps/text/session/*/*', req => req.destroy()).as('dead')
 		cy.wait('@dead', { timeout: 30000 })
 		cy.get('#editor-container .document-status', { timeout: 30000 })
-			.should('contain', 'Document could not be loaded.')
+			.should('contain', 'The document could not be loaded.')
 		cy.get('#editor-container .document-status')
 			.find('.button.primary').click()
 		cy.get('.toastify').should('contain', 'Connection failed.')
 		cy.get('.toastify', { timeout: 30000 }).should('not.exist')
 		cy.get('#editor-container .document-status', { timeout: 30000 })
-			.should('contain', 'Document could not be loaded.')
+			.should('contain', 'The document could not be loaded.')
 		// bring back the network connection
 		cy.intercept('**/apps/text/session/*/*', req => { req.continue() }).as('alive')
 		cy.intercept('**/apps/text/session/*/create').as('create')
@@ -107,7 +107,7 @@ describe('Sync', () => {
 
 		cy.wait('@sessionRequests', { timeout: 30000 })
 		cy.get('#editor-container .document-status', { timeout: 30000 })
-			.should('contain', 'Document could not be loaded.')
+			.should('contain', 'The document could not be loaded.')
 
 		// Reconnect button works - it closes and reopens the session
 		cy.get('#editor-container .document-status a.button')
@@ -117,7 +117,7 @@ describe('Sync', () => {
 		cy.wait('@syncAfterRecovery', { timeout: 60000 })
 
 		cy.get('#editor-container .document-status', { timeout: 30000 })
-			.should('not.contain', 'Document could not be loaded.')
+			.should('not.contain', 'The document could not be loaded.')
 		// FIXME: There seems to be a bug where typed words maybe lost if not waiting for the new session
 		cy.wait('@syncAfterRecovery', { timeout: 10000 })
 		cy.insertLine('* more content added after the lost connection')

src/components/CollisionResolveDialog.vue

@@ -5,17 +5,18 @@
 
 <template>
 	<div id="resolve-conflicts" class="collision-resolve-dialog" :class="{'icon-loading': clicked }">
-		<NcButton size="large"
+		<NcButton :wide="true"
+			size="large"
 			:disabled="clicked"
 			data-cy="resolveThisVersion"
 			@click="resolveThisVersion">
-			{{ t('text', 'Use current version') }}
+			{{ t('text', 'Overwrite the file and save the current changes') }}
 		</NcButton>
-		<NcButton size="large"
+		<NcButton :wide="true"
 			:disabled="clicked"
 			data-cy="resolveServerVersion"
 			@click="resolveServerVersion">
-			{{ t('text', 'Use the saved version') }}
+			{{ t('text', 'Discard the current changes and load the latest version') }}
 		</NcButton>
 	</div>
 </template>
@@ -70,12 +71,10 @@ export default {
 <style scoped lang="scss">
 	#resolve-conflicts {
 		display: flex;
-		width: 100%;
 		margin: auto;
-		padding: 20px 0;
-
+		padding: 0 var(--default-grid-baseline);
 		button {
-			margin: auto;
+			margin: 0 var(--default-grid-baseline) ;
 		}
 	}
 </style>

src/components/Editor.vue

@@ -11,6 +11,7 @@
 		tabindex="-1"
 		@keydown.stop="onKeyDown">
 		<SkeletonLoading v-if="showLoadingSkeleton" />
+		<CollisionResolveDialog v-if="isResolvingConflict" :sync-error="syncError" />
 		<Wrapper v-if="displayed"
 			:is-resolving-conflict="isResolvingConflict"
 			:has-connection-issue="hasConnectionIssue"
@@ -54,7 +55,6 @@
 			<Reader v-if="isResolvingConflict"
 				:content="syncError.data.outsideChange"
 				:is-rich-editor="isRichEditor" />
-			<CollisionResolveDialog v-if="isResolvingConflict" :sync-error="syncError" />
 			<DocumentStatus :idle="idle"
 				:lock="lock"
 				:sync-error="syncError"

src/components/Editor/DocumentStatus.vue

@@ -71,7 +71,7 @@ export default {
 <style scoped lang="scss">
 	.document-status {
 		position: absolute;
-		bottom: var(--default-clickable-area);
+		bottom: calc(var(--default-grid-baseline) * 2);
 		z-index: 100000;
 		// max-height: 50px;
 		margin: auto;

src/components/Editor/DocumentStatus/SyncStatus.vue

@@ -14,7 +14,7 @@
 
 <script>
 
-import { ERROR_TYPE, IDLE_TIMEOUT } from '../../../services/SyncService.js'
+import { ERROR_TYPE } from '../../../services/SyncService.js'
 import { NcNoteCard } from '@nextcloud/vue'
 
 export default {
@@ -39,12 +39,6 @@ export default {
 		},
 	},
 
-	data() {
-		return {
-			IDLE_TIMEOUT,
-		}
-	},
-
 	computed: {
 		card() {
 			if (this.isLoadingError) {
@@ -56,20 +50,20 @@ export default {
 			}
 			if (this.hasSyncCollission) {
 				return {
-					message: t('text', 'Document has been changed outside of the editor. The changes cannot be applied'),
+					message: t('text', 'The file was overwritten. Your current changes cannot be auto-saved. Please choose how to proceed.'),
 				}
 			}
 			if (this.hasConnectionIssue) {
 				return {
-					message: t('text', 'Document could not be loaded. Please check your internet connection.'),
+					message: t('text', 'The document could not be loaded. Please check your internet connection.'),
 					action: this.reconnect,
 					actionLabel: t('text', 'Reconnect'),
 				}
 			}
 			if (this.idle) {
 				return {
 					type: 'info',
-					message: t('text', 'Document idle for {timeout} minutes, click to continue editing', { timeout: IDLE_TIMEOUT }),
+					message: t('text', 'You\'ve been disconnected from the server.'),
 					action: this.reconnect,
 					actionLabel: t('text', 'Reconnect'),
 				}

src/tests/components/__snapshots__/SyncStatus.spec.js.snap

@@ -2,19 +2,19 @@
 
 exports[`renders hasConnectionIssue 1`] = `
 "<ncnotecard-stub data-v-56029fad="" type="warning" heading="" text="">
-  <p data-v-56029fad=""> Document could not be loaded. Please check your internet connection. <a data-v-56029fad="" class="button primary">Reconnect</a></p>
+  <p data-v-56029fad=""> The document could not be loaded. Please check your internet connection. <a data-v-56029fad="" class="button primary">Reconnect</a></p>
 </ncnotecard-stub>"
 `;
 
 exports[`renders idle 1`] = `
 "<ncnotecard-stub data-v-56029fad="" type="info" heading="" text="">
-  <p data-v-56029fad=""> Document idle for {timeout} minutes, click to continue editing <a data-v-56029fad="" class="button primary">Reconnect</a></p>
+  <p data-v-56029fad=""> You've been disconnected from the server. <a data-v-56029fad="" class="button primary">Reconnect</a></p>
 </ncnotecard-stub>"
 `;
 
 exports[`renders sync error 0 1`] = `
 "<ncnotecard-stub data-v-56029fad="" type="warning" heading="" text="">
-  <p data-v-56029fad=""> Document has been changed outside of the editor. The changes cannot be applied
+  <p data-v-56029fad=""> The file was overwritten. Your current changes cannot be auto-saved. Please choose how to proceed.
     <!---->
   </p>
 </ncnotecard-stub>"