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

Hides app bars on scroll down and show on scroll up #11551

Merged
merged 5 commits into from
Dec 20, 2023
Merged

Hides app bars on scroll down and show on scroll up #11551

Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fe1099b
Hides app bars on scroll down and show on scroll up
akolson Nov 21, 2023
934d067
adds throttling to the listener. Refactors code
akolson Nov 29, 2023
559c73b
adds throttling to the listener. Refactors code
akolson Nov 29, 2023
ae72750
fixes glitchy scroll bottm nav bar behavior
akolson Dec 12, 2023
2fa55a7
removes css causing glitches during fast scroll in library page
akolson Dec 19, 2023
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
106 changes: 89 additions & 17 deletions kolibri/core/assets/src/views/CorePage/AppBarPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,20 @@
here or in router, but somewhere -->
<div class="main">
<ScrollingHeader :scrollPosition="0">
<AppBar
ref="appBar"
class="app-bar"
:title="title"
@toggleSideNav="navShown = !navShown"
@showLanguageModal="languageModalShown = true"
>
<template #sub-nav>
<slot name="subNav"></slot>
</template>
</AppBar>
<transition mode="out-in">
<AppBar
v-if="showAppBarsOnScroll"
ref="appBar"
class="app-bar"
:title="title"
@toggleSideNav="navShown = !navShown"
@showLanguageModal="languageModalShown = true"
>
<template #sub-nav>
<slot name="subNav"></slot>
</template>
</AppBar>
</transition>
<KLinearLoader
v-if="isLoading"
type="indeterminate"
Expand All @@ -32,12 +35,15 @@
<slot></slot>
</div>

<SideNav
ref="sideNav"
:navShown="navShown"
@toggleSideNav="navShown = !navShown"
@shouldFocusFirstEl="findFirstEl()"
/>
<transition mode="out-in">
<SideNav
v-if="showAppBarsOnScroll"
ref="sideNav"
:navShown="navShown"
@toggleSideNav="navShown = !navShown"
@shouldFocusFirstEl="findFirstEl()"
/>
</transition>
<LanguageSwitcherModal
v-if="languageModalShown"
ref="languageSwitcherModal"
Expand All @@ -55,12 +61,14 @@
<script>

import { mapGetters } from 'vuex';
import { throttle } from 'frame-throttle';
import LanguageSwitcherModal from 'kolibri.coreVue.components.LanguageSwitcherModal';
import ScrollingHeader from 'kolibri.coreVue.components.ScrollingHeader';
import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
import SideNav from 'kolibri.coreVue.components.SideNav';
import { LearnerDeviceStatus } from 'kolibri.coreVue.vuex.constants';
import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
import { isTouchDevice } from 'kolibri.utils.browserInfo';
import MeteredConnectionNotificationModal from 'kolibri-common/components/MeteredConnectionNotificationModal';
import AppBar from '../AppBar';
import StorageNotification from '../StorageNotification';
Expand Down Expand Up @@ -108,10 +116,16 @@
appBarHeight: 0,
languageModalShown: false,
navShown: false,
lastScrollTop: 0,
hideAppBars: true,
throttledHandleScroll: null,
};
},
computed: {
...mapGetters(['isAppContext', 'isPageLoading']),
isAppContextAndTouchDevice() {
return this.isAppContext && isTouchDevice;
},
isLoading() {
return this.isPageLoading || this.loading;
},
Expand Down Expand Up @@ -139,6 +153,13 @@
showStorageNotification() {
return this.userDeviceStatus === LearnerDeviceStatus.INSUFFICIENT_STORAGE;
},
showAppBarsOnScroll() {
let show = true;
if (this.isAppContextAndTouchDevice) {
show = this.hideAppBars;
}
return show;
},
},
watch: {
windowBreakpoint() {
Expand All @@ -150,13 +171,40 @@
this.$nextTick(() => {
this.appBarHeight = this.$refs.appBar.$el.scrollHeight || 0;
});
this.addScrollListener();
},
beforeUnmount() {
this.removeScrollListener();
},
methods: {
addScrollListener() {
if (this.isAppContextAndTouchDevice) {
this.throttledHandleScroll = throttle(this.handleScroll);
window.addEventListener('scroll', this.throttledHandleScroll);
}
},
findFirstEl() {
this.$nextTick(() => {
this.$refs.sideNav.focusFirstEl();
});
},
handleScroll() {
const scrollTop = window.scrollY;
//Is user scrolling up?
if (scrollTop > this.lastScrollTop) {
this.hideAppBars = false;
} else {
this.hideAppBars = true;
}
this.lastScrollTop = scrollTop;
},
removeScrollListener() {
if (this.isAppContextAndTouchDevice) {
window.removeEventListener('scroll', this.throttledHandleScroll);
this.throttledHandleScroll.cancel();
this.throttledHandleScroll = null;
}
},
},
};

Expand All @@ -167,6 +215,30 @@

@import '~kolibri-design-system/lib/styles/definitions';

.v-leave {
opacity: 1;
}

.v-leave-active {
transition: opacity 0.5s;
}

.v-leave-to {
opacity: 0;
}

.v-enter {
opacity: 0;
}

.v-enter-active {
transition: opacity 0.5s;
}

.v-enter-to {
opacity: 1;
}

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like the above custom transition animation(from L218 to L241) is causing the glitches on scroll. The obvious work around for this is get rid of the transition animation and keep it simple. @marcellamaki any additional thoughts?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

that sounds like a great, simple solution @akolson - let's do that!

.app-bar {
@extend %dropshadow-8dp;

Expand Down