Working on sticky header + navigation behaviour [SCI-9472] (#6428)

Working on highlighting ScrollSpy when scrolling. Decided on external library [SCI-9472]

Finished not sticky item header v.01 [SCI-9472]

PR fix01 [SCI-9472]

app/javascript/packs/vue/repository_item_sidebar.js

@@ -1,10 +1,12 @@
 /* global notTurbolinksPreview */
 
 import TurbolinksAdapter from 'vue-turbolinks';
+import ScrollSpy from 'vue2-scrollspy';
 import Vue from 'vue/dist/vue.esm';
 import RepositoryItemSidebar from '../../vue/repository_item_sidebar/RepositoryItemSidebar.vue';
 
 Vue.use(TurbolinksAdapter);
+Vue.use(ScrollSpy);
 Vue.prototype.i18n = window.I18n;
 
 function initRepositoryItemSidebar() {

app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue

@@ -3,10 +3,10 @@
     class='bg-white overflow-auto gap-2.5 self-stretch  rounded-tl-4 rounded-bl-4 transition-transform ease-in-out transform shadow-lg'
     :class="{ 'translate-x-0 w-[565px] h-full': isShowing, 'transition-transform ease-in-out duration-400 transform translate-x-0 translate-x-full w-0': !isShowing }">
 
-    <div id="repository-item-sidebar" class="w-full h-full  py-6 px-6 bg-white flex flex-col">
+    <div id="repository-item-sidebar" class="w-full h-auto  pb-6 px-6 bg-white flex flex-col">
 
-      <div id="sticky-header-wrapper">
-        <div class="header flex w-full">
+      <div id="sticky-header-wrapper" class="sticky top-0 right-0 bg-white flex z-50 flex-col h-[102px] pt-6">
+        <div class="header flex w-full h-[30px]">
           <h4 class="item-name my-auto truncate" :title="defaultColumns?.name">
             {{ defaultColumns?.archived ? i18n.t('labels.archived') : '' }}
             {{ defaultColumns?.name }}
@@ -15,8 +15,8 @@
             class="sn-icon sn-icon-close ml-auto cursor-pointer my-auto mx-0"></i>
         </div>
 
-        <div id="divider" class="flex w-500 bg-sn-light-grey my-6 self-stretch h-px items-center pt-px">
-        </div>
+        <div id="divider" class="w-500 bg-sn-light-grey flex items-center self-stretch h-px my-6"></div>
+
       </div>
 
       <div v-if="dataLoading" class="h-full flex flex-grow-1">
@@ -160,13 +160,14 @@
         </div>
 
         <!-- NAVIGATION -->
-        <div id="navigation" class="flex item-end gap-x-4 min-w-[130px] h-[130px] sticky top-0 right-0">
+        <div ref="navigationRef" id="navigation"
+          class="flex item-end gap-x-4 min-w-[130px] min-h-[130px] h-fit absolute top-[102px] right-[24px] ">
           <scroll-spy :itemsToCreate="[
             { id: 'highlight-item-1', textId: 'text-item-1', labelAlias: 'information_label', label: 'information-label' },
             { id: 'highlight-item-2', textId: 'text-item-2', labelAlias: 'custom_columns_label', label: 'custom-columns-label' },
             { id: 'highlight-item-3', textId: 'text-item-3', labelAlias: 'assigned_label', label: 'assigned-label' },
             { id: 'highlight-item-4', textId: 'text-item-4', labelAlias: 'QR_label', label: 'QR-label' }
-          ]">
+          ]" :stickyHeaderHeightPx="102" :cardTopPaddingPx="null">
           </scroll-spy>
         </div>
       </div>

app/javascript/vue/repository_item_sidebar/repository_values/ScrollSpy.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- This will be re-implemented using vue2-scrollspy library in a following ticket -->
   <div class="flex gap-3">
     <div id="navigation-text">
       <div class="flex flex-col py-2 px-0 gap-3 self-stretch w-[130px] h-[130px]  justify-center items-center">
@@ -19,24 +20,41 @@
     </div>
   </div>
 </template>
-  
+
 <script>
 export default {
   name: 'ScrollSpy',
   props: {
     itemsToCreate: Array,
+    stickyHeaderHeightPx: Number || null,
+    cardTopPaddingPx: Number || null
   },
   data() {
     return {
       rootContainerEl: null,
       selectedNavText: null,
-      selectedNavIndicator: null
+      selectedNavIndicator: null,
+      positions: []
     }
   },
   created() {
     this.rootContainerEl = this.$parent.$refs.wrapper
+    this.rootContainerEl?.addEventListener('scroll', this.handleScrollBehaviour)
   },
+
   methods: {
+    handleScrollBehaviour() {
+      // used for keeping scroll spy sticky
+      this.updateNavigationPositionOnScroll()
+    },
+    updateNavigationPositionOnScroll() {
+      const navigationDom = this?.$parent?.$refs?.navigationRef
+      // Get the current scroll position
+      const scrollPosition = this?.rootContainerEl?.scrollTop
+      // Adjust navigationDom position equal to the scrollPosition + the header height and the card top padding (if present)
+      navigationDom.style.top = `${scrollPosition + this?.stickyHeaderHeightPx + this?.cardTopPaddingPx}px`;
+    },
+
     handleSideNavClick(e) {
       if (!this.rootContainerEl) {
         return
@@ -56,8 +74,8 @@ export default {
       // scrolling to desired section
       const domElToScrollTo = this.$parent.$refs[refToScrollTo]
       this.rootContainerEl.scrollTo({
-        top: domElToScrollTo.offsetTop,
-        behavior: "smooth"
+        top: domElToScrollTo.offsetTop - this?.stickyHeaderHeightPx - this?.cardTopPaddingPx,
+        behavior: "auto"
       })
 
       // flashing the title color to blue and back over 300ms
@@ -71,6 +89,6 @@ export default {
         clearTimeout(timeoutId)
       }, 500)
     }
-  }
+  },
 }
 </script>

package.json

@@ -81,6 +81,7 @@
     "vue-template-compiler": "^2.6.12",
     "vue-turbolinks": "^2.2.1",
     "vue2-perfect-scrollbar": "^1.5.56",
+    "vue2-scrollspy": "^2.3.1",
     "vuedraggable": "^2.24.3",
     "webpack": "^5.64.4",
     "webpack-cli": "^4.10.0",

yarn.lock

@@ -1441,6 +1441,11 @@
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
   integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
 
+"@tweenjs/tween.js@^17.2.0":
+  version "17.6.0"
+  resolved "https://registry.yarnpkg.com/@tweenjs/tween.js/-/tween.js-17.6.0.tgz#61bc86c372bcc5a9f744e661dd6ae16f5ee7d0ef"
+  integrity sha512-utSXj0WHi4qr/iyfFHGMJBaL+ixQ2N7BAmx1R5g8jBqykJfjBUQ0hKWwXf767hbALC3zOoOIofKYSDWu5n04JQ==
+
 "@types/debug@^4.0.0":
   version "4.1.8"
   resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.8.tgz#cef723a5d0a90990313faec2d1e22aee5eecb317"
@@ -2059,7 +2064,7 @@ babel-plugin-polyfill-regenerator@^0.4.1:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.3.3"
 
-babel-runtime@^6.11.6:
+babel-runtime@^6.11.6, babel-runtime@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   integrity sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==
@@ -7333,6 +7338,14 @@ vue2-perfect-scrollbar@^1.5.56:
     perfect-scrollbar "^1.5.5"
     postcss-import "^12.0.0"
 
+vue2-scrollspy@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/vue2-scrollspy/-/vue2-scrollspy-2.3.1.tgz#7a2aba7ea53e020cdd47851c56594a41731e88f4"
+  integrity sha512-nynFYH9zwfXHfhopQyFT6uxe8Vgz9c46/NibJzI24h8FAHBnlzEe9EXNhUy+wcfr+BEa4Q22V5GvnigTtbmPaQ==
+  dependencies:
+    "@tweenjs/tween.js" "^17.2.0"
+    babel-runtime "^6.26.0"
+
 vue@^2.6.11:
   version "2.7.14"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.14.tgz#3743dcd248fd3a34d421ae456b864a0246bafb17"