Autohide only for rich workspaces

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

4 files changed, 83 insertions, 7 deletions

diff --git a/src/components/EditorWrapper.vue b/src/components/EditorWrapper.vue
index e3395fb14..f1ab885ff 100644
--- a/src/components/EditorWrapper.vue
+++ b/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>
diff --git a/src/components/MenuBar.vue b/src/components/MenuBar.vue
index d8df94393..b848988e0 100644
--- a/src/components/MenuBar.vue
+++ b/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 {
diff --git a/src/files.js b/src/files.js
index b2bab8c1b..8f618d762 100644
--- a/src/files.js
+++ b/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',
diff --git a/src/views/RichWorkspace.vue b/src/views/RichWorkspace.vue
index bc3936daa..f2e5468a6 100644
--- a/src/views/RichWorkspace.vue
+++ b/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" />