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 | |
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')
-rw-r--r-- | src/components/Global/ButtonBackToTop.vue | 64 | ||||
-rw-r--r-- | src/layouts/AppLayout.vue | 5 | ||||
-rw-r--r-- | src/locales/en-US.json | 1 |
3 files changed, 70 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> diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue index a4f73daf..228b25cd 100644 --- a/src/layouts/AppLayout.vue +++ b/src/layouts/AppLayout.vue @@ -4,6 +4,8 @@ <app-navigation class="app-navigation" /> <page-container class="app-content"> <router-view ref="routerView" :key="routerKey" /> + <!-- Scroll to top button --> + <button-back-to-top /> </page-container> </div> </template> @@ -12,12 +14,15 @@ import AppHeader from '@/components/AppHeader'; import AppNavigation from '@/components/AppNavigation'; import PageContainer from '@/components/Global/PageContainer'; +import ButtonBackToTop from '@/components/Global/ButtonBackToTop'; + export default { name: 'App', components: { AppHeader, AppNavigation, PageContainer, + ButtonBackToTop, }, data() { return { diff --git a/src/locales/en-US.json b/src/locales/en-US.json index 3e2a09ce..fb0d45a4 100644 --- a/src/locales/en-US.json +++ b/src/locales/en-US.json @@ -21,6 +21,7 @@ "ariaLabel": { "clearSearch": "Clear search input", "hidePassword": "Hide password", + "scrollToTop": "Scroll to top", "showPassword": "Show password as plain text. Note: this will visually expose your password on the screen.", "tooltip": "Tooltip", "progressBar": "Page loading progress bar" |