Skip to content

Commit

Permalink
fix(outline): fix mobile detection and box shadow
Browse files Browse the repository at this point in the history
Also enable outline on mobile in read-write mode.

Fixes: #6410
Fixes: #6693

Signed-off-by: Jonas <jonas@freesources.org>
  • Loading branch information
mejo- committed Dec 17, 2024
1 parent bee20ee commit 22c822d
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 24 deletions.
33 changes: 10 additions & 23 deletions src/components/Editor/EditorOutline.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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',
Expand All @@ -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>

Expand All @@ -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;
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Editor/Wrapper.vue
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export default {
return false
}

return this.viewWidth > 1265
return true
},
},

Expand Down

0 comments on commit 22c822d

Please sign in to comment.