[stable31] Refactor document status and menubar padding

cypress/e2e/conflict.spec.js

@@ -9,13 +9,13 @@ const variants = [
 	{ fixture: 'lines.txt', mime: 'text/plain' },
 	{ fixture: 'test.md', mime: 'text/markdown' },
 ]
+const getWrapper = () => cy.get('.text-editor__wrapper.has-conflicts')
 
 variants.forEach(function({ fixture, mime }) {
 	const user = randUser()
 	const fileName = fixture
 	const prefix = mime.replaceAll('/', '-')
 	describe(`${mime} (${fileName})`, function() {
-		const getWrapper = () => cy.get('.text-editor__wrapper.has-conflicts')
 
 		before(() => {
 			cy.createUser(user)
@@ -117,6 +117,36 @@ variants.forEach(function({ fixture, mime }) {
 	})
 })
 
+describe('conflict dialog scroll behaviour', function() {
+	const user = randUser()
+	const fileName = 'long.md'
+
+	before(() => {
+		cy.createUser(user)
+	})
+
+	it('document status and collision resolution dialog elements are sticky', function() {
+		cy.login(user)
+		cy.createTestFolder()
+
+		createConflict(fileName, 'text/markdown')
+
+		cy.openFile(fileName)
+
+		cy.get('.text-editor .document-status')
+			.should('contain', 'The file was overwritten.')
+		getWrapper()
+			.find('.text-editor__main h2')
+			.contains('Third subheading')
+			.scrollIntoView()
+
+		cy.get('.text-editor #resolve-conflicts')
+			.should('be.visible')
+		cy.get('.text-editor .document-status')
+			.should('be.visible')
+	})
+})
+
 /**
  * @param {string} fileName - filename
  * @param {string} mime - mimetype

cypress/e2e/nodes/CodeBlock.spec.js

@@ -77,7 +77,7 @@ describe('Front matter support', function() {
 				cy.getContent().find('code').eq(1).find('.hljs-keyword').eq(1).contains('function')
 
 				// Mermaid diagram
-				cy.getEditor().find('.text-editor__wrapper').scrollTo('bottom')
+				cy.get('#viewer .modal-container__content').scrollTo('bottom')
 				cy.getContent().find('.split-view__preview').eq(2).should('be.visible')
 				cy.get('.code-block').eq(2).find('code').should('not.be.visible')
 				cy.get('.split-view__preview').find('svg .erDiagramTitleText')

cypress/fixtures/long.md

@@ -0,0 +1,21 @@
+# Hello world
+
+## First subheading
+
+Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+
+Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+
+Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+
+## Second subheading
+
+Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+
+Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+
+Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+
+## Third subheading
+
+Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

src/components/CollisionResolveDialog.vue

@@ -70,7 +70,9 @@ export default {
 
 <style scoped lang="scss">
 	#resolve-conflicts {
+		position: sticky;
 		display: flex;
+		z-index: 1;
 		margin: auto;
 		padding: 0 var(--default-grid-baseline);
 		button {

src/components/Editor.vue

@@ -8,6 +8,7 @@
 		ref="el"
 		data-text-el="editor-container"
 		class="text-editor"
+		:class="{ 'is-mobile': isMobile }"
 		tabindex="-1"
 		@keydown.stop="onKeyDown">
 		<SkeletonLoading v-if="showLoadingSkeleton" />
@@ -55,12 +56,12 @@
 			<Reader v-if="isResolvingConflict"
 				:content="syncError.data.outsideChange"
 				:is-rich-editor="isRichEditor" />
-			<DocumentStatus :idle="idle"
-				:lock="lock"
-				:sync-error="syncError"
-				:has-connection-issue="requireReconnect"
-				@reconnect="reconnect" />
 		</Wrapper>
+		<DocumentStatus :idle="idle"
+			:lock="lock"
+			:sync-error="syncError"
+			:has-connection-issue="requireReconnect"
+			@reconnect="reconnect" />
 		<Assistant v-if="hasEditor" />
 		<Translate :show="translateModal"
 			:content="translateContent"
@@ -259,6 +260,7 @@ export default {
 			filteredSessions: {},
 
 			idle: false,
+			lock: null,
 			dirty: false,
 			contentLoaded: false,
 			syncError: null,
@@ -911,10 +913,18 @@ export default {
 .modal-container .text-editor {
 	top: 0;
 	height: calc(100vh - var(--header-height));
+
+	&.is-mobile {
+		// TODO: Why is this required to prevent small scrolling container on mobile with short content?
+		height: calc(
+			100vh - var(--header-height) - 2 * var(--default-grid-baseline)
+		);
+	}
 }
 
 .text-editor {
-	display: block;
+	display: flex;
+	flex-direction: column;
 	width: 100%;
 	max-width: 100%;
 	height: 100%;
@@ -925,7 +935,9 @@ export default {
 }
 
 .text-editor .text-editor__wrapper.has-conflicts {
-	height: calc(100% - 50px);
+	// Make space for document status and conflict resolving dialog
+	height: calc(100% - 48px - 54px);
+	overflow-y: auto;
 }
 
 #body-public {
@@ -955,9 +967,11 @@ export default {
 	top: 0;
 	opacity: 0;
 	visibility: hidden;
-	height: var(--default-clickable-area); // important for mobile so that the buttons are always inside the container
-	padding-top:3px;
-	padding-bottom: 3px;
+	height: var(
+		--default-clickable-area
+	); // important for mobile so that the buttons are always inside the container
+	border-bottom: 1px solid var(--color-border);
+	padding-block: var(--default-grid-baseline);
 }
 
 .text-editor--readonly-bar,
@@ -1000,7 +1014,10 @@ export default {
 	width: 50%;
 	#read-only-editor {
 		margin: 0px auto;
-		padding-top: 50px;
+		// Add height of the menubar as padding-top
+		padding-top: calc(
+			var(--default-clickable-area) + 2 * var(--default-grid-baseline)
+		);
 		overflow: initial;
 	}
 }

src/components/Editor/DocumentStatus.vue

@@ -70,11 +70,11 @@ export default {
 
 <style scoped lang="scss">
 	.document-status {
-		position: absolute;
+		position: sticky;
 		bottom: calc(var(--default-grid-baseline) * 2);
 		z-index: 100000;
 		// max-height: 50px;
-		margin: auto;
+		margin-inline: auto;
 		display: flex;
 		width: 100%;
 		justify-content: center;

src/components/Editor/MainContainer.vue

@@ -29,6 +29,8 @@ export default {
 
 <style scoped lang="scss">
 	.text-editor__main, .editor {
+		display: flex;
+		flex-direction: column;
 		background: var(--color-main-background);
 		color: var(--color-main-text);
 		background-clip: padding-box;
@@ -37,4 +39,11 @@ export default {
 		position: relative;
 		width: 100%;
 	}
+
+	.text-editor__main {
+		&.is-mobile {
+			flex-grow: 1;
+			flex-direction: column-reverse;
+		}
+	}
 </style>

src/components/Editor/Wrapper.vue

@@ -48,7 +48,7 @@ export default {
 	props: {
 		isResolvingConflict: {
 			type: Boolean,
-			require: true,
+			default: false,
 		},
 		hasConnectionIssue: {
 			type: Boolean,
@@ -130,16 +130,14 @@ export default {
 </script>
 
 <style scoped lang="scss">
-
 	.text-editor__wrapper {
 		display: flex;
+		flex-grow: 1;
+
 		width: 100%;
-		height: 100%;
-		overflow: auto;
 
 		.ProseMirror {
 			margin-top: 0 !important;
 		}
 	}
-
 </style>

src/components/Menu/MenuBar.vue

@@ -12,7 +12,8 @@
 		:class="{
 			'text-menubar--ready': isReady,
 			'text-menubar--hide': isHidden,
-			'text-menubar--is-workspace': $isRichWorkspace
+			'text-menubar--is-workspace': $isRichWorkspace,
+			'is-mobile': $isMobile,
 		}">
 		<HelpModal v-if="displayHelp" @close="hideHelp" />
 
@@ -227,20 +228,26 @@ export default {
 		--background-blur: blur(10px);
 		position: sticky;
 		top: 0;
+		bottom: var(--default-grid-baseline);
+		width: 100%;
 		z-index: 10021; // above modal-header so menubar is always on top
 		background-color: var(--color-main-background-translucent);
 		backdrop-filter: var(--background-blur);
 		max-height: var(--default-clickable-area); // important for mobile so that the buttons are always inside the container
 		border-bottom: 1px solid var(--color-border);
-		padding-top:3px;
-		padding-bottom: 3px;
+		padding-block: var(--default-grid-baseline);
 
 		visibility: hidden;
 
 		display: flex;
 		justify-content: flex-end;
 		align-items: center;
 
+		&.is-mobile {
+			border-top: 1px solid var(--color-border);
+			border-bottom: unset;
+		}
+
 		&.text-menubar--ready:not(.text-menubar--hide) {
 			visibility: visible;
 			animation-name: fadeInDown;

src/components/Menu/ReadonlyBar.vue

@@ -55,9 +55,9 @@ export default defineComponent({
 <style scoped>
 .text-readonly-bar {
 	display: flex;
+	height: var(--default-clickable-area);
 	border-bottom: 1px solid var(--color-border);
-	padding-top: 3px;
-	padding-bottom: 3px;
+	padding-block: var(--default-grid-baseline);
 }
 .text-readonly-bar__entries {
 	display: flex;