Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implemented: Independent scrolling behavior for the job list section and the job config aside elements(#762) #771

Merged
merged 1 commit into from
Feb 12, 2025
Merged

Implemented: Independent scrolling behavior for the job list section and the job config aside elements(#762) #771

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 27 additions & 9 deletions src/views/Pipeline.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,15 +30,15 @@
</div>
</ion-header>

<ion-content ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()" id="filter-content">
<ion-content ref="contentRef" id="filter-content">
<div class="empty-state" v-if="jobsLoading">
<ion-item lines="none">
<ion-spinner name="crescent" slot="start" />
{{ translate("Fetching jobs") }}
</ion-item>
</div>
<main v-else>
<section v-if="segmentSelected === 'pending'">
<section v-if="segmentSelected === 'pending'" class="ion-content-scroll-host" :scroll-events="true" @scroll="enableScrolling()">
<!-- Empty state -->
<div v-if="pendingJobs?.length === 0">
<p class="ion-text-center">{{ translate("There are no jobs pending right now")}}</p>
Expand Down Expand Up @@ -107,13 +107,13 @@
If we do not define an extra variable and just use v-show to check for `isScrollable` then when coming back to the page infinite-scroll is called programatically.
We have added an ionScroll event on ionContent to check whether the infiniteScroll can be enabled or not by toggling the value of isScrollingEnabled whenever the height < 0.
-->
<ion-infinite-scroll @ionInfinite="loadMorePendingJobs($event)" threshold="100px" v-show="isPendingJobsScrollable" ref="infiniteScrollRef">
<ion-infinite-scroll @ionInfinite="loadMorePendingJobs($event)" threshold="300px" v-show="isPendingJobsScrollable" ref="infiniteScrollRef">
<ion-infinite-scroll-content loading-spinner="crescent" :loading-text="translate('Loading')"/>
</ion-infinite-scroll>
</div>
</section>

<section v-if="segmentSelected === 'running'">
<section v-if="segmentSelected === 'running'" class="ion-content-scroll-host" :scroll-events="true" @scroll="enableScrolling()">
<!-- Empty state -->
<div v-if="runningJobs?.length === 0">
<p class="ion-text-center">{{ translate("There are no jobs running right now")}}</p>
Expand Down Expand Up @@ -173,13 +173,13 @@
<ion-refresher slot="fixed" @ionRefresh="refreshJobs($event)">
<ion-refresher-content pullingIcon="crescent" refreshingSpinner="crescent" />
</ion-refresher>
<ion-infinite-scroll @ionInfinite="loadMoreRunningJobs($event)" threshold="100px" v-show="isRunningJobsScrollable" ref="infiniteScrollRef">
<ion-infinite-scroll @ionInfinite="loadMoreRunningJobs($event)" threshold="300px" v-show="isRunningJobsScrollable" ref="infiniteScrollRef">
<ion-infinite-scroll-content loading-spinner="crescent" :loading-text="translate('Loading')"/>
</ion-infinite-scroll>
</div>
</section>

<section v-if="segmentSelected === 'history'">
<section v-if="segmentSelected === 'history'" class="ion-content-scroll-host" :scroll-events="true" @scroll="enableScrolling()">
<!-- Empty state -->
<div v-if="jobHistory?.length === 0">
<p class="ion-text-center">{{ translate("No jobs have run yet")}}</p>
Expand Down Expand Up @@ -257,7 +257,7 @@
<ion-refresher slot="fixed" @ionRefresh="refreshJobs($event)">
<ion-refresher-content pullingIcon="crescent" refreshingSpinner="crescent" />
</ion-refresher>
<ion-infinite-scroll @ionInfinite="loadMoreJobHistory($event)" threshold="100px" v-show="isHistoryJobsScrollable" ref="infiniteScrollRef">
<ion-infinite-scroll @ionInfinite="loadMoreJobHistory($event)" threshold="300px" v-show="isHistoryJobsScrollable" ref="infiniteScrollRef">
<ion-infinite-scroll-content loading-spinner="crescent" :loading-text="translate('Loading')"/>
</ion-infinite-scroll>
</div>
Expand Down Expand Up @@ -492,7 +492,7 @@ export default defineComponent({
},
enableScrolling() {
const parentElement = (this as any).$refs.contentRef.$el
const scrollEl = parentElement.shadowRoot.querySelector("main[part='scroll']")
const scrollEl = parentElement.querySelector("main > section")
let scrollHeight = scrollEl.scrollHeight, infiniteHeight = (this as any).$refs.infiniteScrollRef.$el.offsetHeight, scrollTop = scrollEl.scrollTop, threshold = 100, height = scrollEl.offsetHeight
const distanceFromInfinite = scrollHeight - infiniteHeight - scrollTop - threshold - height
if(distanceFromInfinite < 0) {
Expand Down Expand Up @@ -745,7 +745,7 @@ export default defineComponent({
.selected-job {
box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.14), 0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.20);
scale: 1.03;
margin-block: var(--spacer-sm);
margin-block: var(--spacer-base);
}

ion-card {
Expand Down Expand Up @@ -812,6 +812,24 @@ ion-toolbar > div > ion-chip:first-child {
ion-chip {
flex: 1 0 auto;
}
/* overriding global main element CSS */
main {
margin-block-start: 0;
height: 100%;
overflow-y: hidden;
}
/* allow both columns to scroll independently */
section, aside {
height: 100%;
overflow-y: scroll;
scrollbar-width: none;
scrollbar-color: transparent;
padding-block-start: var(--spacer-base);
}

aside {
padding-block-end: var(--spacer-base);
}

@media (min-width: 991px) {
ion-header > div {
Expand Down
Loading