Autohide only for rich workspaces

Signed-off-by: Julius Härtl <jus@bitgrid.net>

css/prosemirror.scss

@@ -145,66 +145,6 @@ div.ProseMirror {
 .ProseMirror-focused .ProseMirror-gapcursor {
 	display: block;
 }
-&:not(.richEditor) .ProseMirror {
-	pre {
-		background-color: var(--color-main-background);
-
-		&::before {
-			content: attr(data-language);
-			text-transform: uppercase;
-			display: block;
-			text-align: right;
-			font-weight: bold;
-			font-size: 0.6rem;
-		}
-		code {
-			.hljs-comment,
-			.hljs-quote {
-				color: #999999;
-			}
-			.hljs-variable,
-			.hljs-template-variable,
-			.hljs-attribute,
-			.hljs-tag,
-			.hljs-name,
-			.hljs-regexp,
-			.hljs-link,
-			.hljs-name,
-			.hljs-selector-id,
-			.hljs-selector-class {
-				color: #f2777a;
-			}
-			.hljs-number,
-			.hljs-meta,
-			.hljs-built_in,
-			.hljs-builtin-name,
-			.hljs-literal,
-			.hljs-type,
-			.hljs-params {
-				color: #f99157;
-			}
-			.hljs-string,
-			.hljs-symbol,
-			.hljs-bullet {
-				color: #99cc99;
-			}
-			.hljs-title,
-			.hljs-section {
-				color: #ffcc66;
-			}
-			.hljs-keyword,
-			.hljs-selector-tag {
-				color: #6699cc;
-			}
-			.hljs-emphasis {
-				font-style: italic;
-			}
-			.hljs-strong {
-				font-weight: 700;
-			}
-		}
-	}
-}
 
 .editor__content p.is-empty:first-child::before {
 	content: attr(data-empty-text);

src/components/EditorWrapper.vue

@@ -35,7 +35,8 @@
 				<MenuBar v-if="!syncError && !readOnly"
 					ref="menubar"
 					:editor="tiptap"
-					:is-rich-editor="isRichEditor">
+					:is-rich-editor="isRichEditor"
+					:autohide="autohide">
 					<div v-if="currentSession && active" id="editor-session-list">
 						<div v-tooltip="lastSavedStatusTooltip" class="save-status" :class="lastSavedStatusClass">
 							{{ lastSavedStatus }}
@@ -119,8 +120,12 @@ export default {
 		},
 		mime: {
 			type: String,
-			default: null
-		}
+			default: null,
+		},
+		autohide: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
@@ -569,5 +574,65 @@ export default {
 
 	#editor-wrapper {
 		@import './../../css/prosemirror';
+
+		&:not(.richEditor) .ProseMirror {
+			pre {
+				background-color: var(--color-main-background);
+
+				&::before {
+					content: attr(data-language);
+					text-transform: uppercase;
+					display: block;
+					text-align: right;
+					font-weight: bold;
+					font-size: 0.6rem;
+				}
+				code {
+					.hljs-comment,
+					.hljs-quote {
+						color: #999999;
+					}
+					.hljs-variable,
+					.hljs-template-variable,
+					.hljs-attribute,
+					.hljs-tag,
+					.hljs-name,
+					.hljs-regexp,
+					.hljs-link,
+					.hljs-selector-id,
+					.hljs-selector-class {
+						color: #f2777a;
+					}
+					.hljs-number,
+					.hljs-meta,
+					.hljs-built_in,
+					.hljs-builtin-name,
+					.hljs-literal,
+					.hljs-type,
+					.hljs-params {
+						color: #f99157;
+					}
+					.hljs-string,
+					.hljs-symbol,
+					.hljs-bullet {
+						color: #99cc99;
+					}
+					.hljs-title,
+					.hljs-section {
+						color: #ffcc66;
+					}
+					.hljs-keyword,
+					.hljs-selector-tag {
+						color: #6699cc;
+					}
+					.hljs-emphasis {
+						font-style: italic;
+					}
+					.hljs-strong {
+						font-weight: 700;
+					}
+				}
+			}
+		}
 	}
 </style>

src/components/MenuBar.vue

@@ -22,7 +22,7 @@
 
 <template>
 	<EditorMenuBar v-slot="{ commands, isActive, focused }" :editor="editor">
-		<div class="menubar autohide" :class="{ 'is-focused': focused }">
+		<div class="menubar" :class="{ 'is-focused': focused, 'autohide': autohide }">
 			<div v-if="isRichEditor" ref="menubar" class="menubar-icons">
 				<template v-for="(icon, $index) in allIcons">
 					<button v-if="icon.class"
@@ -102,8 +102,12 @@ export default {
 		},
 		isRichEditor: {
 			type: Boolean,
-			default: true
-		}
+			default: true,
+		},
+		autohide: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data: () => {
 		return {

src/files.js

@@ -34,7 +34,13 @@ document.addEventListener('DOMContentLoaded', () => {
 	if (typeof OCA.Viewer === 'undefined') {
 		console.error('Viewer app is not installed')
 		registerFileActionFallback()
-		return
+	} else {
+		OCA.Viewer.registerHandler({
+			id: 'text',
+			mimes: [...openMimetypesMarkdown, ...openMimetypesPlainText],
+			component: FilesEditor,
+			group: null,
+		})
 	}
 	OCA.Viewer.registerHandler({
 		id: 'text',

src/views/RichWorkspace.vue

@@ -35,6 +35,7 @@
 			:relative-path="file.path"
 			:share-token="shareToken"
 			:active="true"
+			:autohide="true"
 			:mime="file.mimetype"
 			:autofocus="autofocus"
 			@ready="ready=true" />