Merge pull request #4155 from nextcloud/enh/sticky-shadow

Some better visual feedback for sticky headers

Author: dartcafe

CHANGELOG.md

@@ -12,7 +12,6 @@ All notable changes to this project will be documented in this file.
  - Added a forbidden route and page
  - Added WatchController to OCS-API
  - Sticky option headers in vote table
- - added a variant of the sticky option headers to the user settings
  - Lazy loading of participants on scroll, if too many vote cells are rendered
  - Support Nextcloud 30
 

src/assets/scss/globals.scss

@@ -9,7 +9,40 @@
 }
 
 .sticky-top {
+	--shadow-height: 10px;
 	position: sticky;
 	top: 0;
 	z-index: 4;
+	padding-bottom: 0px;
+	margin-bottom: var(--shadow-height);
+
+	&::after {
+		content: '';
+		position: absolute;
+		bottom: 0;
+		left: -1px;
+		right: 0;
+		height: 0px;
+		background: linear-gradient(
+			to bottom,
+			rgba(var(--color-box-shadow-rgb), 0.3),
+			rgba(var(--color-box-shadow-rgb), 0)
+		);
+		transition:
+			all var(--animation-slow) linear,
+			border 1ms;
+	}
+
+	&.sticky-bottom-shadow {
+		border-top: 0;
+		padding-bottom: var(--shadow-height);
+		margin-bottom: 0;
+		&::after {
+			height: var(--shadow-height);
+		}
+	}
+}
+
+.sticky-top.sticky-left {
+	z-index: 6;
 }

src/components/Base/modules/HeaderBar.vue

@@ -42,20 +42,19 @@ function toggleClamp() {
 	display: none;
 }
 
-.scrolled .header_bar {
-	box-shadow: 6px 6px 6px var(--color-box-shadow);
-}
-
 .header_bar {
 	position: sticky;
 	top: 0;
 	margin-inline: -8px;
 	padding-inline: 56px 8px;
 	background-color: var(--color-main-background);
-	border-bottom: 1px solid var(--color-border);
 	z-index: 9;
 	transition: all var(--animation-slow) linear;
 
+	&::after {
+		border-top: 1px solid var(--color-border);
+	}
+
 	.header_bar_top {
 		display: flex;
 		flex-wrap: wrap-reverse;

src/components/Base/modules/IntersectionObserver.vue

@@ -7,22 +7,25 @@
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 
-const inViewport = ref(false)
+// const model = ref(false)
+const model = defineModel<boolean>()
+
 const observer = ref<null | IntersectionObserver>(null)
 
 const observerTarget = ref<null | Element>(null)
-const emit = defineEmits(['visible'])
+const emit = defineEmits(['visible', 'invisible'])
 
-const { loading } = defineProps<{ loading: boolean }>()
+const { loading = false } = defineProps<{ loading?: boolean }>()
 
 onMounted(() => {
 	const observer = new IntersectionObserver((entries) => {
 		entries.forEach((entry) => {
 			if (entry.isIntersecting) {
-				inViewport.value = true
+				model.value = true
 				emit('visible')
 			} else {
-				inViewport.value = false
+				model.value = false
+				emit('invisible')
 			}
 		})
 	})
@@ -40,6 +43,6 @@ onBeforeUnmount(() => {
 <template>
 	<div ref="observerTarget">
 		<NcLoadingIcon v-if="loading" :size="15" />
-		<slot v-else :in-viewport="inViewport" />
+		<slot v-else :in-viewport="model" />
 	</div>
 </template>

src/components/Modals/TransferPollDialog.vue

@@ -22,7 +22,7 @@ const model = defineModel<boolean>({ required: true })
 
 const pollsStore = usePollsStore()
 const pollStore = usePollStore()
-const newUser = ref<User | null>(null)
+const newUser = ref<User | undefined>(undefined)
 
 async function dialogOK() {
 	try {

src/components/VoteTable/VoteTable.vue

@@ -26,10 +26,15 @@ import VoteParticipant from './VoteParticipant.vue'
 import IntersectionObserver from '../Base/modules/IntersectionObserver.vue'
 import { showError } from '@nextcloud/dialogs'
 
+const emit = defineEmits(['headerSticky', 'headerUnSticky'])
+
 const pollStore = usePollStore()
 const optionsStore = useOptionsStore()
 const votesStore = useVotesStore()
 const preferencesStore = usePreferencesStore()
+
+const downPage = defineModel<boolean>('downPage', { default: false })
+
 const chunksLoading = ref(false)
 
 const tableStyle = computed(() => ({
@@ -63,7 +68,14 @@ function loadMore() {
 </script>
 
 <template>
+	<IntersectionObserver
+		key="top-observer"
+		v-model="downPage"
+		@visible="emit('headerSticky')"
+		@invisible="emit('headerUnSticky')" />
+
 	<TransitionGroup
+		id="vote-table"
 		tag="div"
 		name="list"
 		:class="pollStore.viewMode"
@@ -88,7 +100,8 @@ function loadMore() {
 		<div
 			v-if="pollStore.viewMode === ViewMode.TableView"
 			key="option-spacer"
-			class="option-spacer sticky-left" />
+			class="option-spacer sticky-left sticky-top"
+			:class="{ 'sticky-bottom-shadow': !downPage }" />
 		<div
 			v-if="pollStore.permissions.seeResults"
 			class="counter-spacer sticky-left" />
@@ -122,6 +135,7 @@ function loadMore() {
 			<OptionItem
 				:id="`option-${option.id}`"
 				class="sticky-top"
+				:class="{ 'sticky-bottom-shadow': !downPage }"
 				:option="option" />
 			<Counter
 				v-if="pollStore.permissions.seeResults"
@@ -149,7 +163,7 @@ function loadMore() {
 		"
 		class="observer-container sticky-left">
 		<IntersectionObserver
-			key="observer"
+			key="bottom-observer"
 			class="observer_section"
 			:loading="chunksLoading"
 			@visible="loadMore">
@@ -269,7 +283,6 @@ function loadMore() {
 
 		.option-item {
 			grid-row: 2;
-			opacity: 0.85;
 			background-color: var(--color-main-background);
 			border-inline-start: 1px solid var(--color-border);
 		}

src/views/Vote.vue

@@ -4,7 +4,7 @@
 -->
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { t } from '@nextcloud/l10n'
 
@@ -14,7 +14,6 @@ import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
 import DatePollIcon from 'vue-material-design-icons/CalendarBlank.vue'
 import TextPollIcon from 'vue-material-design-icons/FormatListBulletedSquare.vue'
 
-import { useHandleScroll } from '../composables/handleScroll.ts'
 import MarkDownDescription from '../components/Poll/MarkDownDescription.vue'
 import ActionAddOption from '../components/Actions/modules/ActionAddOption.vue'
 import PollInfoLine from '../components/Poll/PollInfoLine.vue'
@@ -34,12 +33,14 @@ import { Event } from '../Types/index.ts'
 import Collapsible from '../components/Base/modules/Collapsible.vue'
 import type { CollapsibleProps } from '../components/Base/modules/Collapsible.vue'
 import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
+import IntersectionObserver from '../components/Base/modules/IntersectionObserver.vue'
 
 const pollStore = usePollStore()
 const optionsStore = useOptionsStore()
 const preferencesStore = usePreferencesStore()
 const voteMainId = 'watched-scroll-area'
-const scrolled = useHandleScroll(voteMainId)
+const topObserverVisible = ref(false)
+const voteHeaderDownPage = ref(false)
 
 const loadingOverlayProps = {
 	name: t('polls', 'Loading poll…'),
@@ -94,6 +95,10 @@ const collapsibleProps = computed<CollapsibleProps>(() => ({
 	initialState: pollStore.currentUserStatus.countVotes === 0 ? 'max' : 'min',
 }))
 
+const scrolled = computed(
+	() => !topObserverVisible.value && voteHeaderDownPage.value,
+)
+
 onBeforeRouteUpdate(async () => {
 	pollStore.load()
 	emit(Event.TransitionsOff, 500)
@@ -122,11 +127,11 @@ onUnmounted(() => {
 			pollStore.viewMode,
 			voteMainId,
 			{
-				scrolled: scrolled,
+				scrolled,
 				'vote-style-beta-510': preferencesStore.user.useAlternativeStyling,
 			},
 		]">
-		<HeaderBar>
+		<HeaderBar class="sticky-top" :class="{ 'sticky-bottom-shadow': scrolled }">
 			<template #title>
 				{{ pollStore.configuration.title }}
 			</template>
@@ -139,6 +144,7 @@ onUnmounted(() => {
 		</HeaderBar>
 
 		<div class="vote_main">
+			<IntersectionObserver id="top-observer" v-model="topObserverVisible" />
 			<Collapsible
 				v-if="pollStore.configuration.description"
 				class="sticky-left"
@@ -148,7 +154,9 @@ onUnmounted(() => {
 
 			<VoteInfoCards class="sticky-left" />
 
-			<VoteTable v-show="optionsStore.options.length" />
+			<VoteTable
+				v-show="optionsStore.options.length"
+				v-model:down-page="voteHeaderDownPage" />
 
 			<NcEmptyContent
 				v-if="!optionsStore.options.length"