[stable31] fix(readonly-bar): Clean up read-only menu bar to behave consistently with normal menu bar

cypress/e2e/openreadonly.spec.js

@@ -25,7 +25,7 @@ describe('Open read-only mode', function() {
 
 	describe('Disabled', function() {
 		const checkMenubar = function() {
-			cy.get('.text-editor--readonly-bar').should('not.exist')
+			cy.get('[data-text-el="readonly-bar"]').should('not.exist')
 			cy.get('.text-menubar', { timeout: 10000 })
 				.getActionEntry('done').should('not.exist')
 		}
@@ -52,12 +52,12 @@ describe('Open read-only mode', function() {
 
 	describe('Enabled', function() {
 		const requireReadOnlyBar = function() {
-			cy.get('.text-editor--readonly-bar').should('exist')
-			cy.get('.text-editor--readonly-bar').getActionEntry('edit').should('exist')
+			cy.get('[data-text-el="readonly-bar"]').should('exist')
+			cy.get('[data-text-el="readonly-bar"]').getActionEntry('edit').should('exist')
 		}
 
 		const requireMenubar = function() {
-			cy.get('.text-editor--readonly-bar').should('not.exist')
+			cy.get('[data-text-el="readonly-bar"]').should('not.exist')
 			cy.get('.text-menubar').getActionEntry('done').should('exist')
 		}
 
@@ -76,7 +76,7 @@ describe('Open read-only mode', function() {
 			requireReadOnlyBar()
 
 			// Switch to edit-mode
-			cy.get('.text-editor--readonly-bar').getActionEntry('edit').click()
+			cy.get('[data-text-el="readonly-bar"]').getActionEntry('edit').click()
 
 			requireMenubar()
 
@@ -92,10 +92,10 @@ describe('Open read-only mode', function() {
 			requireReadOnlyBar()
 
 			// Switch to edit-mode
-			cy.get('.text-editor--readonly-bar').getActionEntry('edit').click()
+			cy.get('[data-text-el="readonly-bar"]').getActionEntry('edit').click()
 
 			// Check that read-only bar does not exist
-			cy.get('.text-editor--readonly-bar').should('not.exist')
+			cy.get('[data-text-el="readonly-bar"]').should('not.exist')
 		})
 	})
 })

cypress/e2e/share.spec.js

@@ -40,7 +40,7 @@ describe('Open test.md in viewer', function() {
 					.should('contain', 'Hello world')
 					.find('h2').should('contain', 'Hello world')
 
-				cy.get('.text-editor--readonly-bar')
+				cy.get('[data-text-el="readonly-bar"]')
 					.getActionEntry('outline')
 					.click()
 

src/components/Editor.vue

@@ -21,17 +21,17 @@
 			@outline-toggled="outlineToggled">
 			<MainContainer v-if="hasEditor">
 				<!-- Readonly -->
-				<div v-if="readOnly || (openReadOnlyEnabled && !editMode)" class="text-editor--readonly-bar">
+				<template v-if="readOnly || (openReadOnlyEnabled && !editMode)">
 					<slot name="readonlyBar">
-						<ReadonlyBar :open-read-only="openReadOnlyEnabled">
+						<ReadonlyBar :is-hidden="hideMenu" :open-read-only="openReadOnlyEnabled">
 							<Status :document="document"
 								:dirty="dirty"
 								:sessions="filteredSessions"
 								:sync-error="syncError"
 								:has-connection-issue="requireReconnect" />
 						</ReadonlyBar>
 					</slot>
-				</div>
+				</template>
 				<!-- Rich Menu -->
 				<template v-else>
 					<MenuBar v-if="renderMenus"
@@ -945,8 +945,7 @@ export default {
 	}
 }
 
-.menubar-placeholder,
-.text-editor--readonly-bar {
+.menubar-placeholder {
 	position: fixed;
 	position: -webkit-sticky;
 	position: sticky;
@@ -960,7 +959,6 @@ export default {
 	padding-block: var(--default-grid-baseline);
 }
 
-.text-editor--readonly-bar,
 .menubar-placeholder--with-slot {
 	opacity: unset;
 	visibility: unset;

src/components/Menu/ReadonlyBar.vue

@@ -4,7 +4,14 @@
 -->
 
 <template>
-	<div data-text-el="readonly-bar" class="text-readonly-bar">
+	<div data-text-el="readonly-bar"
+		class="text-readonly-bar"
+		:class="{
+			'text-readonly-bar--ready': isReady,
+			'text-readonly-bar--is-workspace': $isRichWorkspace,
+			'text-readonly-bar--hide': isHidden,
+			'is-mobile': $isMobile,
+		}">
 		<div ref="menubar"
 			role="toolbar"
 			class="text-readonly-bar__entries"
@@ -17,7 +24,7 @@
 				:can-be-focussed="activeMenuEntry === index"
 				@disabled="disableMenuEntry(actionEntry.key, $event)" />
 		</div>
-		<div class="text-menubar__slot">
+		<div class="text-readonly-bar__slot">
 			<slot />
 		</div>
 	</div>
@@ -27,40 +34,113 @@
 import { defineComponent } from 'vue'
 import { ReadOnlyEditEntries, OutlineEntries } from './entries.js'
 
+import { useIsMobileMixin } from '../Editor.provider.js'
 import ActionList from './ActionList.vue'
 import ActionSingle from './ActionSingle.vue'
 import ToolBarLogic from './ToolBarLogic.js'
 
 export default defineComponent({
 	name: 'ReadonlyBar',
+
 	components: {
 		ActionList,
 		ActionSingle,
 	},
+
 	extends: ToolBarLogic,
+
+	mixins: [useIsMobileMixin],
+
 	props: {
+		isHidden: {
+			type: Boolean,
+			default: false,
+		},
 		openReadOnly: {
 			type: Boolean,
 			default: false,
 		},
 	},
+
+	emits: ['update:loaded'],
+
 	data() {
 		return {
 			entries: this.openReadOnly ? [...ReadOnlyEditEntries, ...OutlineEntries] : [...OutlineEntries],
+			isReady: false,
 		}
 	},
+
+	mounted() {
+		this.$nextTick(() => {
+			this.isReady = true
+			this.$emit('update:loaded', true)
+		})
+	},
 })
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .text-readonly-bar {
-	display: flex;
-	height: var(--default-clickable-area);
+	--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-block: var(--default-grid-baseline);
-}
-.text-readonly-bar__entries {
+
+	visibility: hidden;
+
 	display: flex;
-	flex-grow: 1;
+	justify-content: flex-end;
+	align-items: center;
+
+	&.is-mobile {
+		border-top: 1px solid var(--color-border);
+		border-bottom: unset;
+	}
+
+	&.text-readonly-bar--ready:not(.text-readonly-bar--hide) {
+		visibility: visible;
+		animation-name: fadeInDown;
+		animation-duration: 0.3s;
+	}
+
+	&.text-readonly-bar--hide {
+		opacity: 0;
+		transition:
+			visibility 0.2s 0.4s,
+			opacity 0.2s 0.4s;
+	}
+	.text-readonly-bar__entries {
+		display: flex;
+		flex-grow: 1;
+		margin-left: max(0px, calc((100% - var(--text-editor-max-width)) / 2));
+	}
+
+	.text-readonly-bar__slot {
+		justify-content: flex-end;
+		display: flex;
+		min-width: max(0px, min(100px, (100% - var(--text-editor-max-width)) / 2));
+	}
+
+	&.text-readonly-bar--is-workspace {
+		.text-readonly-bar__entries {
+			margin-left: 0;
+		}
+	}
+
+	@media (max-width: 660px) {
+		.text-readonly-bar__entries {
+			margin-left: 0;
+		}
+	}
 }
 </style>

src/css/print.scss

@@ -53,7 +53,7 @@
 	.text-editor {
 		height: fit-content!important;
 
-		.text-menubar {
+		.text-menubar, .text-readonly-bar {
 			// Hide menu bar
 			display: none!important;
 		}
@@ -113,7 +113,7 @@
 		}
 	}
 
-	.menubar-placeholder, .text-editor--readonly-bar {
+	.menubar-placeholder {
 		display: none;
 	}