fix(outline): fix mobile detection and box shadow

Also enable outline on mobile in read-write mode. Fixes: #6410 Fixes: #6693 Signed-off-by: Jonas <[email protected]>
nextcloud · Dec 3, 2024 · b589424 · b589424
1 parent 56be220
commit b589424
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 24 deletions.
diff --git a/src/components/Editor/EditorOutline.vue b/src/components/Editor/EditorOutline.vue
@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<div data-text-el="editor-outline" class="editor--outline" :class="{ 'editor--outline-mobile': mobile }">
+	<div data-text-el="editor-outline" class="editor--outline" :class="{ 'editor--outline-mobile': $isMobile }">
 		<header class="editor--outline__header">
 			<NcButton class="editor--outline__btn-close"
 				type="tertiary"
@@ -26,6 +26,7 @@ import TableOfContents from './TableOfContents.vue'
 import { useOutlineStateMixin, useOutlineActions } from './Wrapper.provider.js'
 import { Close } from './../icons.js'
 import useStore from '../../mixins/store.js'
+import { useIsMobileMixin } from '../Editor.provider.js'
 
 export default {
 	name: 'EditorOutline',
@@ -34,27 +35,12 @@ export default {
 		NcButton,
 		TableOfContents,
 	},
-	mixins: [useStore, useOutlineStateMixin, useOutlineActions],
-	data: () => ({
-		mobile: false,
-	}),
-	mounted() {
-		this.$resizeObserver = new ResizeObserver(this.onResize)
-		this.$resizeObserver.observe(this.$el.parentElement)
-		this.onResize([this.$el.parentElement])
-	},
-	beforeDestroy() {
-		this.$resizeObserver.unobserve(this.$el.parentElement)
-		this.$resizeObserver = null
-		this.$onResize = null
-	},
-	methods: {
-		onResize([el]) {
-			window.requestAnimationFrame(() => {
-				this.mobile = el.clientWidth < 320
-			})
-		},
-	},
+	mixins: [
+		useIsMobileMixin,
+		useStore,
+		useOutlineStateMixin,
+		useOutlineActions,
+	],
 }
 </script>
 
@@ -68,7 +54,8 @@ export default {
 	max-height: calc(100% - 204px);
 
 	&-mobile {
-		box-shadow: 8px 0 17px -19px var(--color-box-shadow);
+		border-radius: var(--border-radius-large);
+		box-shadow: 0 1px 10px var(--color-box-shadow);
 		background-color: var(--color-main-background-translucent);
 		z-index: 1;
 	}

diff --git a/src/components/Editor/Wrapper.vue b/src/components/Editor/Wrapper.vue
@@ -80,7 +80,7 @@ export default {
 				return false
 			}
 
-			return this.viewWidth > 1265
+			return true
 		},
 	},
-Original file line number
+Diff line change
@@ Expand Up / @@ -80,7 +80,7 @@ export default { @@
     				return false
     			}
-    			return this.viewWidth > 1265
+    			return true
     		},
     	},
@@ Expand Down @@