✨ (#2904): Able to show outiline in readonly mode

Signed-off-by: Vinicius Reis <vinicius.reis@nextcloud.com>
nextcloud · Oct 11, 2022 · 103d8ef · 103d8ef
1 parent faab200
commit 103d8ef
Show file tree

Hide file tree

Showing 9 changed files with 190 additions and 75 deletions.
diff --git a/css/print.scss b/css/print.scss
@@ -1,7 +1,7 @@
 @media print {
 	@page {
 		size: A4;
-		margin: 2.5cm 2cm 2cm 2.5cm; 
+		margin: 2.5cm 2cm 2cm 2.5cm;
 	}
 
 	body {
@@ -81,4 +81,24 @@
 			}
 		}
 	}
-}
+
+	.menubar-placeholder, .text-editor--readonly-bar {
+		display: none;
+	}
+
+	.text-editor__content-wrapper {
+		&.--show-outline {
+			display: block;
+		}
+
+		.editor--outline {
+			width: auto;
+			height: auto;
+			overflow: unset;
+			position: relative;
+		}
+		.editor--outline__btn-close {
+			display: none;
+		}
+	}
+}
diff --git a/css/prosemirror.scss b/css/prosemirror.scss
@@ -88,6 +88,12 @@ div.ProseMirror {
 		margin-top: 10px;
 	}
 
+	> h1,h2,h3,h4,h5,h6 {
+		&:first-child {
+			margin-top: 0;
+		}
+	}
+
 	a {
 		color: var(--color-primary-element);
 		text-decoration: underline;

diff --git a/cypress/e2e/share.spec.js b/cypress/e2e/share.spec.js
@@ -55,6 +55,14 @@ describe('Open test.md in viewer', function() {
 				cy.getContent()
 					.should('contain', 'Hello world')
 					.find('h2').should('contain', 'Hello world')
+
+				cy.get('.text-editor--readonly-bar')
+					.getActionEntry('outline')
+					.click()
+
+				cy.getOutline()
+					.find('header')
+					.should('exist')
 			})
 	})
 

diff --git a/src/components/Editor.vue b/src/components/Editor.vue
@@ -34,19 +34,26 @@
 			:content-loaded="contentLoaded"
 			:show-author-annotations="showAuthorAnnotations">
 			<MainContainer v-if="$editor">
-				<MenuBar v-if="renderMenus"
-					ref="menubar"
-					:autohide="autohide"
-					:loaded.sync="menubarLoaded">
-					<Status :document="document"
-						:dirty="dirty"
-						:sessions="filteredSessions"
-						:sync-error="syncError"
-						:has-connection-issue="hasConnectionIssue"
-						:last-saved-string="lastSavedString" />
-					<slot name="header" />
-				</MenuBar>
-				<div v-if="!menubarLoaded" class="menubar-placeholder" />
+				<!-- Readonly -->
+				<div v-if="readOnly" class="text-editor--readonly-bar">
+					<ReadonlyBar />
+				</div>
+				<!-- Rich Menu -->
+				<template v-else>
+					<MenuBar v-if="renderMenus"
+						ref="menubar"
+						:autohide="autohide"
+						:loaded.sync="menubarLoaded">
+						<Status :document="document"
+							:dirty="dirty"
+							:sessions="filteredSessions"
+							:sync-error="syncError"
+							:has-connection-issue="hasConnectionIssue"
+							:last-saved-string="lastSavedString" />
+						<slot name="header" />
+					</MenuBar>
+					<div v-else class="menubar-placeholder" />
+				</template>
 				<ContentContainer v-show="contentLoaded"
 					ref="contentWrapper">
 					<MenuBubble v-if="renderMenus"
@@ -84,6 +91,7 @@ import {
 	IS_RICH_WORKSPACE,
 	SYNC_SERVICE,
 } from './Editor.provider.js'
+import ReadonlyBar from './Menu/ReadonlyBar.vue'
 
 import { logger } from '../helpers/logger.js'
 import { SyncService, ERROR_TYPE, IDLE_TIMEOUT } from './../services/SyncService.js'
@@ -112,6 +120,7 @@ export default {
 		DocumentStatus,
 		Wrapper,
 		MainContainer,
+		ReadonlyBar,
 		ContentContainer,
 		MenuBar,
 		MenuBubble: () => import(/* webpackChunkName: "editor-rich" */'./MenuBubble.vue'),
@@ -686,61 +695,74 @@ export default {
 </script>
 
 <style scoped lang="scss">
-	.modal-container .text-editor {
-		top: 0;
-		height: calc(100vh - var(--header-height));
-	}
+.modal-container .text-editor {
+	top: 0;
+	height: calc(100vh - var(--header-height));
+}
 
-	.text-editor {
-		display: block;
-		width: 100%;
-		max-width: 100%;
-		height: 100%;
-		left: 0;
-		margin: 0 auto;
-		position: relative;
-		background-color: var(--color-main-background);
-	}
+.text-editor {
+	display: block;
+	width: 100%;
+	max-width: 100%;
+	height: 100%;
+	left: 0;
+	margin: 0 auto;
+	position: relative;
+	background-color: var(--color-main-background);
+}
 
-	.text-editor .text-editor__wrapper.has-conflicts {
-		height: calc(100% - 50px);
+.text-editor .text-editor__wrapper.has-conflicts {
+	height: calc(100% - 50px);
 
-		.text-editor__main, #read-only-editor {
-			width: 50%;
-			height: 100%;
-		}
+	.text-editor__main, #read-only-editor {
+		width: 50%;
+		height: 100%;
 	}
+}
 
-	#body-public {
-		height: auto;
-	}
+#body-public {
+	height: auto;
+}
 
-	#files-public-content {
-		.text-editor {
-			top: 0;
-			width: 100%;
+#files-public-content {
+	.text-editor {
+		top: 0;
+		width: 100%;
 
-			.text-editor__main {
-				overflow: auto;
-				z-index: 20;
-			}
-			.has-conflicts .text-editor__main {
-				padding-top: 0;
-			}
+		.text-editor__main {
+			overflow: auto;
+			z-index: 20;
+		}
+		.has-conflicts .text-editor__main {
+			padding-top: 0;
 		}
 	}
+}
 
-	.menubar-placeholder {
-		position: fixed;
-		position: -webkit-sticky;
-		position: sticky;
-		top: 0;
-		opacity: 0;
-		visibility: hidden;
-		height: 44px; // important for mobile so that the buttons are always inside the container
-		padding-top:3px;
-		padding-bottom: 3px;
-	}
+.menubar-placeholder,
+.text-editor--readonly-bar {
+	position: fixed;
+	position: -webkit-sticky;
+	position: sticky;
+	top: 0;
+	opacity: 0;
+	visibility: hidden;
+	height: 44px; // important for mobile so that the buttons are always inside the container
+	padding-top:3px;
+	padding-bottom: 3px;
+}
+
+.text-editor--readonly-bar,
+.menubar-placeholder--with-slot {
+	opacity: unset;
+	visibility: unset;
+
+	z-index: 50;
+	max-width: var(--text-editor-max-width);
+	margin: auto;
+	width: 100%;
+	background-color: var(--color-main-background);
+}
 
 </style>
 

diff --git a/src/components/Editor/EditorOutline.vue b/src/components/Editor/EditorOutline.vue
@@ -1,12 +1,15 @@
 <template>
 	<div data-text-el="editor-outline" class="editor--outline" :class="{ 'editor--outline-mobile': mobile }">
 		<header class="editor--outline__header">
-			<h2>{{ t('text', 'Outline') }}</h2>
-			<NcButton type="tertiary" :aria-label="t('text', 'Close outline view')" @click="$outlineActions.toggle">
+			<NcButton class="editor--outline__btn-close"
+				type="tertiary"
+				:aria-label="t('text', 'Close outline view')"
+				@click="$outlineActions.toggle">
 				<template #icon>
 					<Close />
 				</template>
 			</NcButton>
+			<h2>{{ t('text', 'Outline') }}</h2>
 		</header>
 		<TableOfContents />
 	</div>
@@ -72,18 +75,21 @@ export default {
 		background-color: var(--color-main-background-translucent);
 		z-index: 1;
 	}
-}
 
-.editor--outline__header {
-	margin: 0rem;
-	position: sticky;
-	padding: 10px;
-	display: flex;
-	height: 44px;
-	h2 {
-		font-size: 1rem;
-		margin-top: 13px;
-		flex-grow: 1;
+	&__header {
+		margin: 0;
+		position: sticky;
+		padding: 0.6em 0.6em 0.6em 0;
+		display: flex;
+		align-items: center;
+
+		h2 {
+			font-size: 1rem;
+			line-height: 1.1rem;
+			flex-grow: 1;
+			padding: 0;
+			margin: 0;
+		}
 	}
 }
 </style>
diff --git a/src/components/Menu/ActionSingle.vue b/src/components/Menu/ActionSingle.vue
@@ -113,7 +113,7 @@ export default {
 		// do not use title if is a item of action list
 		const title = isItem ? undefined : label
 
-		if (isItem) {
+		if (isItem || actionEntry.forceLabel) {
 			// add label
 			children.push(label)
 		}

diff --git a/src/components/Menu/BaseActionEntry.js b/src/components/Menu/BaseActionEntry.js
@@ -66,7 +66,10 @@ const BaseActionEntry = {
 			return getKeyshortcuts(this.actionEntry)
 		},
 		tooltip() {
-			return [this.actionEntry.label, getKeys(this.$isMobile, this.actionEntry)].join(' ')
+			return [
+				this.label,
+				getKeys(this.$isMobile, this.actionEntry),
+			].join(' ')
 		},
 	},
 	mounted() {

diff --git a/src/components/Menu/ReadonlyBar.vue b/src/components/Menu/ReadonlyBar.vue
@@ -0,0 +1,35 @@
+<template>
+	<div data-text-el="readonly-bar" class="text-readonly-bar">
+		<div ref="menubar"
+			role="group"
+			class="text-readonly-bar__entries"
+			:aria-label="t('text', 'Editor actions')">
+			<ActionEntry v-for="actionEntry of visibleEntries"
+				v-bind="{ actionEntry }"
+				:key="`text-action--${actionEntry.key}`" />
+		</div>
+	</div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import { ReadonlyEntries as entries } from './entries.js'
+import ActionEntry from './ActionEntry.js'
+
+export default defineComponent({
+	name: 'ReadonlyBar',
+	components: { ActionEntry },
+	setup() {
+		return {
+			visibleEntries: entries,
+		}
+	},
+})
+</script>
+
+<style scoped>
+.text-readonly-bar__entries {
+	display: flex;
+	flex-grow: 1;
+}
+</style>
diff --git a/src/components/Menu/entries.js b/src/components/Menu/entries.js
@@ -51,6 +51,18 @@ import ActionAttachmentUpload from './ActionAttachmentUpload.vue'
 
 import { MODIFIERS } from './keys.js'
 
+export const ReadonlyEntries = [{
+	key: 'outline',
+	forceLabel: true,
+	icon: FormatListBulleted,
+	click: ({ $outlineActions }) => $outlineActions.toggle(),
+	label: ({ $outlineState }) => {
+		return $outlineState.visible
+			? t('text', 'Hide outline')
+			: t('text', 'Show outline')
+	},
+}]
+
 export default [
 	{
 		key: 'undo',
@@ -184,6 +196,9 @@ export default [
 				key: 'outline',
 				icon: FormatListBulleted,
 				click: ({ $outlineActions }) => $outlineActions.toggle(),
+				visible: ({ $outlineState }) => {
+					return $outlineState.enable
+				},
 				label: ({ $outlineState }) => {
 					return $outlineState.visible
 						? t('text', 'Hide outline')