Enable outline view on mobile

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

5 files changed, 46 insertions, 19 deletions

diff --git a/src/components/Editor/Content.vue b/src/components/Editor/Content.vue
index e7c9efac8..5bb6ed0f6 100644
--- a/src/components/Editor/Content.vue
+++ b/src/components/Editor/Content.vue
@@ -53,9 +53,7 @@ export default {
 	mixins: [useEditorMixin, useOutlineStateMixin],
 	computed: {
 		showOutline() {
-			const { visible, enable } = this.$outlineState
-
-			return visible && enable
+			return this.$outlineState.visible
 		},
 	},
 }
diff --git a/src/components/Editor/EditorOutline.vue b/src/components/Editor/EditorOutline.vue
index 709c062f1..474e4ab18 100644
--- a/src/components/Editor/EditorOutline.vue
+++ b/src/components/Editor/EditorOutline.vue
@@ -1,37 +1,48 @@
 <template>
-	<div data-text-el="editor-outline" class="editor--outline">
-		<header v-if="enabled && visible" class="editor--outline__header">
+	<div data-text-el="editor-outline" class="editor--outline" :class="{ 'editor--outline-mobile': mobile }">
+		<header class="editor--outline__header">
 			<h2>{{ t('text', 'Outline') }}</h2>
+			<Button type="tertiary" :aria-label="t('text', 'Close outline view')" @click="$outlineState.visible=false">
+				<template #icon>
+					<Close />
+				</template>
+			</Button>
 		</header>
-		<TableOfContents v-if="enabled" @has-headings="setVisible" />
+		<TableOfContents @has-headings="setVisible" />
 	</div>
 </template>
 
 <script>
 import debounce from 'debounce'
+import Button from '@nextcloud/vue/dist/Components/Button'
 import TableOfContents from './TableOfContents.vue'
+import { useOutlineStateMixin } from './Wrapper.provider.js'
+import { Close } from './../icons.js'
 
 export default {
 	name: 'EditorOutline',
 	components: {
+		Close,
+		Button,
 		TableOfContents,
 	},
+	mixins: [useOutlineStateMixin],
 	data: () => ({
 		visible: false,
-		enabled: true,
+		mobile: false,
 	}),
 	mounted() {
 		this.$onResize = debounce(() => {
-			this.enabled = this.$el.clientWidth >= 275
-		}, 500)
+			this.mobile = this.$el.parentElement.clientWidth < 320
+		}, 10)
 
 		this.$resizeObserver = new ResizeObserver(this.$onResize)
-		this.$resizeObserver.observe(this.$el)
+		this.$resizeObserver.observe(this.$el.parentElement)
 
 		this.$onResize()
 	},
 	beforeDestroy() {
-		this.$resizeObserver.unobserve(this.$el)
+		this.$resizeObserver.unobserve(this.$el.parentElement)
 		this.$resizeObserver = null
 		this.$onResize = null
 	},
@@ -45,17 +56,31 @@ export default {
 
 <style lang="scss" scoped>
 .editor--outline {
-	max-width: var(--text-editor-outline-max-width, 380px);
-	margin: 0 0.75rem;
-	position: sticky;
-	top: 44px; // menu bar
+	max-width: var(--text-editor-outline-max-width, 300px);
+	padding: 0 10px;
+	position: fixed;
+	top: 104px;
+	height: calc(100% - 100px);
+	overflow: auto;
+
+	&-mobile {
+		box-shadow: 8px 0 17px -19px var(--color-box-shadow);
+		background-color: var(--color-main-background-translucent);
+		z-index: 1;
+		width: 300px;
+		max-width: 100%;
+	}
 }
 
 .editor--outline__header {
 	margin: 0rem;
+	position: sticky;
+	padding: 10px;
+	display: flex;
 	h2 {
 		font-size: 1rem;
 		margin-top: 13px;
+		flex-grow: 1;
 	}
 }
 </style>
diff --git a/src/components/Editor/TableOfContents.vue b/src/components/Editor/TableOfContents.vue
index e71ea0fd3..af1b018ce 100644
--- a/src/components/Editor/TableOfContents.vue
+++ b/src/components/Editor/TableOfContents.vue
@@ -133,8 +133,7 @@ export default {
 	}
 
 	&__list {
-		display: inline-block;
-		min-width: 60%;
+		width: 100%;
 		list-style: none;
 		font-size: 0.9rem;
 		padding: 0;
@@ -145,8 +144,12 @@ export default {
 
 	&__item {
 		transition: padding-left 0.8s;
-		animation: initialPadding 1.5s;
+		// Disable per item animation as we currently update all headings data
+		// animation: initialPadding 1.5s;
 		padding-left: var(--padding-left, 0rem);
+		text-overflow: ellipsis;
+		overflow: hidden;
+		white-space: nowrap;
 		a:hover {
 			color: var(--color-primary-hover);
 		}
diff --git a/src/components/Menu/entries.js b/src/components/Menu/entries.js
index 1957dca08..dc533ad1e 100644
--- a/src/components/Menu/entries.js
+++ b/src/components/Menu/entries.js
@@ -184,7 +184,6 @@ export default [
 			{
 				key: 'outline',
 				icon: FormatListBulleted,
-				visible: ({ $outlineState }) => $outlineState.enable,
 				click: ({ $outlineActions }) => $outlineActions.toggle(),
 				label: ({ $outlineState }) => {
 					return $outlineState.visible
diff --git a/src/components/icons.js b/src/components/icons.js
index 926a4d477..75c539e2f 100644
--- a/src/components/icons.js
+++ b/src/components/icons.js
@@ -21,6 +21,7 @@
  *
  */
 
+import MDI_Close from 'vue-material-design-icons/Close.vue'
 import MDI_Check from 'vue-material-design-icons/Check.vue'
 import MDI_CodeTags from 'vue-material-design-icons/CodeTags.vue'
 import MDI_Danger from 'vue-material-design-icons/AlertDecagram.vue'
@@ -88,6 +89,7 @@ export const Loading = {
 	},
 }
 
+export const Close = makeIcon(MDI_Close)
 export const Check = makeIcon(MDI_Check)
 export const CodeTags = makeIcon(MDI_CodeTags)
 export const Danger = makeIcon(MDI_Danger)