fix sidebar and scrolling

Signed-off-by: dartcafe <github@dartcafe.de>

src/js/App.vue

@@ -26,7 +26,7 @@
 		:class="appClass">
 		<router-view v-if="getCurrentUser()" name="navigation" />
 		<router-view />
-		<router-view v-if="showSidebar" name="sidebar" :active="activeTab" />
+		<router-view v-show="sideBar.open" name="sidebar" :active="sidebar.activeTab" />
 		<LoadingOverlay v-if="loading" />
 		<UserSettingsDlg />
 	</NcContent>
@@ -61,8 +61,10 @@ export default {
 
 	data() {
 		return {
-			sideBarOpen: (window.innerWidth > 920),
-			activeTab: 'comments',
+			sideBar: {
+				open: (window.innerWidth > 920),
+				activeTab: 'comments',
+			},
 			transitionClass: 'transitions-active',
 			loading: false,
 		}
@@ -94,13 +96,6 @@ export default {
 				},
 			]
 		},
-
-		showSidebar() {
-			if (this.$route.name === 'combo') {
-				return this.sideBarOpen
-			}
-			return this.sideBarOpen && this.poll.id && (this.allowEdit || this.poll.allowComment)
-		},
 	},
 
 	watch: {
@@ -153,30 +148,11 @@ export default {
 		})
 
 		subscribe('polls:sidebar:toggle', (payload) => {
-			if (payload === undefined) {
-				this.sideBarOpen = !this.sideBarOpen
-			} else {
-				if (payload.activeTab !== undefined) {
-					this.activeTab = payload.activeTab
-				}
-				if (payload.open === undefined) {
-					this.sideBarOpen = !this.sideBarOpen
-				} else {
-					this.sideBarOpen = payload.open
-				}
-			}
-
+			this.sideBar.activeTab = payload?.activeTab ?? this.sideBar.activeTab
+			this.sideBar.open = payload?.open ?? !this.sideBar.open
 		})
 	},
 
-	mounted() {
-		window.addEventListener('scroll', this.handleScroll)
-	},
-
-	destroyed() {
-		window.removeEventListener('scroll', this.handleScroll)
-	},
-
 	beforeDestroy() {
 		this.cancelToken.cancel()
 		unsubscribe('polls:poll:load')
@@ -189,13 +165,6 @@ export default {
 		...mapActions({
 			setFilter: 'polls/setFilter',
 		}),
-		handleScroll() {
-			if (window.scrollY > 20) {
-				document.body.classList.add('page--scrolled')
-			} else {
-				document.body.classList.remove('page--scrolled')
-			}
-		},
 
 		transitionsOn() {
 			this.transitionClass = 'transitions-active'

src/js/assets/scss/hacks.scss

@@ -1,13 +1,8 @@
 // some hacks, do alter the display of third parity components
 
-// until NC24: compatibility hack
-:root body {
-	&:not([data-themes]) {
-	--color-main-background-blur: rgba(var(--color-main-background-rgb), .8);
-	--color-main-background-rgb: 255, 255, 255;
-	&.theme--dark {
-		--color-main-background-rgb: 23, 23, 23;
-	}}
+// raltive position to be able to get sticky toolbar
+.app-content {
+	position: relative !important;
 }
 
 // fill full input with background color

src/js/components/Poll/PollHeaderButtons.vue

@@ -42,7 +42,6 @@
 <script>
 import { mapState } from 'vuex'
 import { NcButton, NcPopover } from '@nextcloud/vue'
-import { emit } from '@nextcloud/event-bus'
 import ActionToggleSidebar from '../Actions/ActionToggleSidebar.vue'
 import PollInformationIcon from 'vue-material-design-icons/InformationOutline.vue'
 
@@ -71,10 +70,6 @@ export default {
 		},
 	},
 
-	created() {
-		emit('polls:sidebar:toggle', { open: (window.innerWidth > 920) })
-	},
-
 	beforeDestroy() {
 		this.$store.dispatch({ type: 'poll/reset' })
 	},

src/js/views/Administration.vue

@@ -122,7 +122,6 @@
 <script>
 import { mapGetters } from 'vuex'
 import { showError } from '@nextcloud/dialogs'
-import { emit } from '@nextcloud/event-bus'
 import { NcActions, NcActionButton, NcAppContent, NcButton, NcEmptyContent, NcModal } from '@nextcloud/vue'
 import { sortBy } from 'lodash'
 import HeaderBar from '../components/Base/HeaderBar.vue'
@@ -238,10 +237,6 @@ export default {
 
 		refreshView() {
 			window.document.title = `${t('polls', 'Polls')} - ${this.title}`
-			if (!this.filteredPolls(this.$route.params.type).find((poll) => poll.id === this.$store.state.poll.id)) {
-				emit('polls:sidebar:toggle', { open: false })
-			}
-
 		},
 
 		setSort(payload) {

src/js/views/Combo.vue

@@ -55,7 +55,6 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex'
 import { NcAppContent, NcEmptyContent } from '@nextcloud/vue'
-import { emit } from '@nextcloud/event-bus'
 import ComboTable from '../components/Combo/ComboTable.vue'
 import ActionToggleSidebar from '../components/Actions/ActionToggleSidebar.vue'
 import HeaderBar from '../components/Base/HeaderBar.vue'
@@ -107,7 +106,6 @@ export default {
 	},
 
 	created() {
-		emit('polls:sidebar:toggle', { open: (window.innerWidth > 920) })
 		this.verifyPolls()
 	},
 

src/js/views/PollList.vue

@@ -103,7 +103,6 @@
 <script>
 import { mapGetters, mapState, mapActions } from 'vuex'
 import { showError } from '@nextcloud/dialogs'
-import { emit } from '@nextcloud/event-bus'
 import { NcActions, NcActionButton, NcAppContent, NcEmptyContent } from '@nextcloud/vue'
 import HeaderBar from '../components/Base/HeaderBar.vue'
 import DeletePollIcon from 'vue-material-design-icons/Delete.vue'
@@ -192,7 +191,6 @@ export default {
 		async loadPoll(pollId) {
 			try {
 				await this.$store.dispatch({ type: 'poll/get', pollId })
-				emit('polls:sidebar:toggle', { open: true })
 			} catch {
 				showError(t('polls', 'Error loading poll'))
 			}
@@ -200,10 +198,6 @@ export default {
 
 		refreshView() {
 			window.document.title = `${t('polls', 'Polls')} - ${this.title}`
-			if (!this.filteredPolls(this.$route.params.type).find((poll) => poll.id === this.$store.state.poll.id)) {
-				emit('polls:sidebar:toggle', { open: false })
-			}
-
 		},
 
 		async toggleArchive(pollId) {

src/js/views/SideBar.vue

@@ -133,12 +133,12 @@ export default {
 			useCollaboration: (state) => state.appSettings.useCollaboration,
 		}),
 	},
+
 	methods: {
 		closeSideBar() {
 			emit('polls:sidebar:toggle', { open: false })
 		},
 	},
-
 }
 
 </script>

src/js/views/SideBarCombo.vue

@@ -22,7 +22,6 @@
 
 <template>
 	<NcAppSidebar ref="sideBar"
-		:active="active"
 		:title="t('polls', 'Select polls to combine')"
 		@close="closeSideBar()">
 		<NcAppSidebarTab :id="'polls'"
@@ -52,18 +51,12 @@ export default {
 		PollsAppIcon,
 	},
 
-	props: {
-		active: {
-			type: String,
-			default: t('polls', 'Polls').toLowerCase(),
-		},
-	},
-
 	computed: {
 		...mapGetters({
 			polls: 'polls/datePolls',
 		}),
 	},
+
 	methods: {
 		closeSideBar() {
 			emit('polls:sidebar:toggle', { open: false })

src/js/views/Vote.vue

@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<NcAppContent :class="[{ closed: closed }, poll.type]">
+	<NcAppContent :class="[{ closed: closed, 'page--scrolled': scrolled }, poll.type]">
 		<HeaderBar class="area__header">
 			<template #title>
 				{{ poll.title }}
@@ -116,6 +116,8 @@ export default {
 	data() {
 		return {
 			isLoading: false,
+			scrolled: false,
+			scrollElement: null,
 		}
 	},
 
@@ -157,16 +159,25 @@ export default {
 
 	},
 
-	created() {
-
-		emit('polls:sidebar:toggle', { open: (window.innerWidth > 920) })
+	mounted() {
+		this.scrollElement = document.getElementById('app-content-vue')
+		this.scrollElement.addEventListener('scroll', this.handleScroll)
 	},
 
 	beforeDestroy() {
+		this.scrollElement.removeEventListener('scroll', this.handleScroll)
 		this.$store.dispatch({ type: 'poll/reset' })
 	},
 
 	methods: {
+		handleScroll() {
+			if (this.scrollElement.scrollTop > 20) {
+				this.scrolled = true
+			} else {
+				this.scrolled = false
+			}
+		},
+
 		openOptions() {
 			emit('polls:sidebar:toggle', { open: true, activeTab: 'options' })
 		},