diff options
author | Dixsie Wolmers <dixsie@ibm.com> | 2020-11-17 01:46:01 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-12-01 04:19:33 +0300 |
commit | 970ea7d7af09246294474693eca4e6d275a3e27b (patch) | |
tree | 51a76aee2ca0bb54de1bfa5480b51910de26511f /src/components/Global/ButtonBackToTop.vue | |
parent | 2aac4d331c88a5b8b1e51749fc00a2a5d1ee3751 (diff) | |
download | webui-vue-970ea7d7af09246294474693eca4e6d275a3e27b.tar.xz |
Add back to top button to hardware status page
- Created global back to top button
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I32022613e1ba62667b46150463c8f407b0b4ff11
Diffstat (limited to 'src/components/Global/ButtonBackToTop.vue')
-rw-r--r-- | src/components/Global/ButtonBackToTop.vue | 64 |
1 files changed, 64 insertions, 0 deletions
diff --git a/src/components/Global/ButtonBackToTop.vue b/src/components/Global/ButtonBackToTop.vue new file mode 100644 index 00000000..9608c4a2 --- /dev/null +++ b/src/components/Global/ButtonBackToTop.vue @@ -0,0 +1,64 @@ +<template> + <b-button + id="scrollToTopBtn" + class="btn-top btn-icon-only" + :class="{ showBtn: showButton }" + variant="secondary" + :title="$t('global.ariaLabel.scrollToTop')" + :aria-label="$t('global.ariaLabel.scrollToTop')" + @click="scrollToTop" + > + <icon-up-to-top /> + </b-button> +</template> + +<script> +import UpToTop24 from '@carbon/icons-vue/es/up-to-top/24'; + +import { debounce } from 'lodash'; + +export default { + name: 'BackToTop', + components: { IconUpToTop: UpToTop24 }, + data() { + return { + showButton: false, + }; + }, + created() { + window.addEventListener('scroll', debounce(this.handleScroll, 200)); + }, + methods: { + handleScroll() { + document.documentElement.scrollTop > 500 + ? (this.showButton = true) + : (this.showButton = false); + }, + scrollToTop() { + document.documentElement.scrollTo({ + top: 0, + behavior: 'smooth', + }); + }, + }, +}; +</script> + +<style lang="scss" scoped> +.btn-top { + position: fixed; + bottom: 24px; + right: 24px; + z-index: $zindex-fixed; + box-shadow: $box-shadow; + opacity: 0; + transition: $transition-base; + @media (min-width: 1600px) { + left: 1485px; + right: auto; + } +} +.showBtn { + opacity: 1; +} +</style> |