Skip to content

Commit

Permalink
add linear gradients to top and bottom of HistoryScrollList
Browse files Browse the repository at this point in the history
  • Loading branch information
ahmedhamidawan committed Feb 1, 2024
1 parent f31e23a commit 6ebf181
Showing 1 changed file with 56 additions and 2 deletions.
58 changes: 56 additions & 2 deletions client/src/components/History/HistoryScrollList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import { computed, onMounted, onUnmounted, type PropType, type Ref, ref, watch }
import { useRouter } from "vue-router/composables";
import type { HistoryDetailed, HistorySummary } from "@/api";
import { useAnimationFrameResizeObserver } from "@/composables/sensors/animationFrameResizeObserver";
import { useAnimationFrameScroll } from "@/composables/sensors/animationFrameScroll";
import { useHistoryStore } from "@/stores/historyStore";
import { useUserStore } from "@/stores/userStore";
import localize from "@/utils/localization";
Expand Down Expand Up @@ -55,6 +57,15 @@ const hasNoResults = computed(() => props.filter && filtered.value.length == 0);
const validFilter = computed(() => props.filter && props.filter.length > 2);
const allLoaded = computed(() => totalHistoryCount.value <= filtered.value.length);
// check if we have scrolled to the top or bottom of the scrollable div
const { arrived } = useAnimationFrameScroll(scrollableDiv);
const isScrollable = ref(false);
useAnimationFrameResizeObserver(scrollableDiv, ({ clientSize, scrollSize }) => {
isScrollable.value = scrollSize.height >= clientSize.height + 1;
});
const scrolledTop = computed(() => !isScrollable.value || arrived.top);
const scrolledBottom = computed(() => !isScrollable.value || arrived.bottom);
onMounted(async () => {
useInfiniteScroll(scrollableDiv.value, () => loadMore());
// if mounted with a filter, load histories for filter
Expand Down Expand Up @@ -190,7 +201,13 @@ async function loadMore(noScroll = false) {
<b-alert v-else-if="!busy && hasNoResults" class="mb-2" variant="danger" show>No histories found.</b-alert>
</div>

<div class="history-list-container" :class="{ 'in-panel': isMultiviewPanel }">
<div
class="history-list-container"
:class="{
'in-panel': isMultiviewPanel,
'scrolled-top': scrolledTop,
'scrolled-bottom': scrolledBottom,
}">
<div
v-show="!showAdvanced"
ref="scrollableDiv"
Expand Down Expand Up @@ -345,14 +362,51 @@ async function loadMore(noScroll = false) {
}
.history-list-container {
position: relative;
&.in-panel {
position: relative;
flex-grow: 1;
}
&:not(&.in-panel) {
@extend .flex-column-overflow;
}
&:before,
&:after {
position: absolute;
content: "";
pointer-events: none;
z-index: 10;
height: 30px;
width: 100%;
opacity: 0;
background-repeat: no-repeat;
transition: opacity 0.4s;
}
&:before {
top: 0;
background-image: linear-gradient(to bottom, rgba(3, 0, 48, 0.1), rgba(3, 0, 48, 0.02), rgba(3, 0, 48, 0));
}
&:not(.scrolled-top) {
&:before {
opacity: 1;
}
}
&:after {
bottom: 0;
background-image: linear-gradient(to top, rgba(3, 0, 48, 0.1), rgba(3, 0, 48, 0.02), rgba(3, 0, 48, 0));
}
&:not(.scrolled-bottom) {
&:after {
opacity: 1;
}
}
}
.history-scroll-list {
Expand Down

0 comments on commit 6ebf181

Please sign in to comment.