Add search nav item (#7210)

* Add search nav item * Bugfix: Sidebar nav highlighter * Add changelog item * Fix unit tests * Lint * Fake index * Fake index Co-authored-by: Paul Neubauer <[email protected]>
owncloud · Jul 12, 2022 · 2449b55 · 2449b55
1 parent f68a3a0
commit 2449b55
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 111 deletions.
diff --git a/changelog/unreleased/bugfix-repair-navigtion-highlighter b/changelog/unreleased/bugfix-repair-navigtion-highlighter
@@ -0,0 +1,5 @@
+Bugfix: Repair navigation highlighter
+
+We've refactored the navigation highlighter to fix several small glitches.
+
+https://github.com/owncloud/web/pull/7210
diff --git a/changelog/unreleased/enhancement-show-search-item-in-left-sidebar b/changelog/unreleased/enhancement-show-search-item-in-left-sidebar
@@ -0,0 +1,7 @@
+Enhancement: Show nav item in left side sidebar while searching
+
+We've introduced a new nav item in the left sidebar which will fade in,
+while using the 'Search all files' search provider.
+
+https://github.com/owncloud/web/pull/7210
+https://github.com/owncloud/web/issues/7190
diff --git a/packages/web-app-files/src/index.js b/packages/web-app-files/src/index.js
@@ -41,6 +41,16 @@ const appInfo = {
   fileSideBars
 }
 const navItems = [
+  {
+    name: $gettext('Search'),
+    icon: 'search',
+    route: {
+      path: `/${appInfo.id}/search/list`
+    },
+    enabled() {
+      return window.location.pathname === this.route.path
+    }
+  },
   {
     name(capabilities) {
       return capabilities.spaces?.enabled ? $gettext('Personal') : $gettext('All files')

diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
@@ -17,10 +17,11 @@
     </oc-button>
     <nav class="oc-sidebar-nav oc-my-m oc-px-xs" :aria-label="$gettext('Sidebar navigation menu')">
       <oc-list>
+        <div id="nav-highlighter" class="oc-ml-s oc-background-primary-gradient" />
         <sidebar-nav-item
-          v-for="(link, index) in navItems"
+          v-for="link in navItems"
           :key="link.route.path"
-          :index="index"
+          :index="getUuid()"
           :target="link.route.path"
           :active="link.active"
           :icon="link.icon"
@@ -39,6 +40,7 @@
 <script>
 import { mapState, mapActions } from 'vuex'
 import SidebarNavItem from './SidebarNavItem.vue'
+import * as uuid from 'uuid'
 
 export default {
   components: {
@@ -50,6 +52,26 @@ export default {
       required: true
     }
   },
+  mounted() {
+    const navItem = document.getElementsByClassName('oc-sidebar-nav-item-link')[0]
+    const highlighter = document.getElementById('nav-highlighter')
+
+    if (!highlighter || !navItem) {
+      return
+    }
+
+    const resizeObserver = new ResizeObserver((data) => {
+      const width = data[0].borderBoxSize[0].inlineSize
+      highlighter.style.setProperty('transition-duration', `0.05s`)
+      highlighter.style.setProperty('width', `${width}px`)
+    }).observe(navItem)
+    highlighter.style.setProperty('width', `${navItem.clientWidth}px`)
+    highlighter.style.setProperty('height', `${navItem.clientHeight}px`)
+
+    this.$on('beforeDestroy', () => {
+      resizeObserver.disconnect()
+    })
+  },
   computed: {
     ...mapState(['navigation']),
 
@@ -68,12 +90,21 @@ export default {
 
     toggleSidebarButtonClick() {
       return this.navigation.closed ? this.openNavigation() : this.closeNavigation()
+    },
+
+    getUuid() {
+      return uuid.v4().replaceAll('-', '')
     }
   }
 }
 </script>
 
 <style lang="scss">
+#nav-highlighter {
+  position: absolute;
+  border-radius: 5px;
+  transition: transform 0.2s cubic-bezier(0.51, 0.06, 0.56, 1.37);
+}
 #web-nav-sidebar {
   background-color: var(--oc-color-background-default);
   border-radius: 15px;
@@ -84,6 +115,10 @@ export default {
   transition: all 0.35s cubic-bezier(0.34, 0.11, 0, 1.12);
   z-index: 4;
 
+  .oc-list {
+    position: relative;
+  }
+
   .toggle-sidebar-button {
     min-height: 3rem;
     transition: all 0.2s ease-out;

diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
@@ -1,5 +1,9 @@
 <template>
-  <li class="oc-sidebar-nav-item oc-pb-xs oc-px-s" :aria-current="active ? 'page' : null">
+  <li
+    ref="item"
+    class="oc-sidebar-nav-item oc-pb-xs oc-px-s"
+    :aria-current="active ? 'page' : null"
+  >
     <oc-button
       v-oc-tooltip="toolTip"
       type="router-link"
@@ -15,25 +19,20 @@
         <span class="oc-ml-m text" :class="{ 'text-invisible': collapsed }" v-text="name" />
       </span>
       <oc-tag v-if="tag" class="oc-py-rm" size="small">{{ tag }}</oc-tag>
-      <sidebar-nav-item-highlight :index="index" :active="active" />
     </oc-button>
   </li>
 </template>
 <script>
-import SidebarNavItemHighlight from './SidebarNavItemHighlight.vue'
 import get from 'lodash-es/get'
 
 export default {
-  components: {
-    SidebarNavItemHighlight
-  },
   props: {
     name: {
       type: String,
       required: true
     },
     index: {
-      type: Number,
+      type: String,
       required: true
     },
     active: {
@@ -82,6 +81,29 @@ export default {
         arrow: false
       }
     }
+  },
+  watch: {
+    active(active) {
+      if (!active) return
+      this.animateHighlightPosition(this.index)
+    }
+  },
+  mounted() {
+    if (!this.active) return
+    this.animateHighlightPosition(this.index)
+  },
+  methods: {
+    animateHighlightPosition(target, durationSeconds = 0.2) {
+      const highlightedElement = document.getElementById('nav-highlighter')
+      if (!highlightedElement) {
+        return
+      }
+      const targetElement = this.$refs.item
+      const offset = targetElement.offsetTop
+      const style = highlightedElement.style
+      style.setProperty('transition-duration', `${durationSeconds}s`)
+      style.setProperty('transform', `translateY(${offset}px)`)
+    }
   }
 }
 </script>

diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNavItemHighlight.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNavItemHighlight.vue
diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/SidebarNav.spec.js b/packages/web-runtime/tests/unit/components/SidebarNav/SidebarNav.spec.js
@@ -7,6 +7,12 @@ import SidebarNav from 'web-runtime/src/components/SidebarNav/SidebarNav.vue'
 import stubs from '../../../../../../tests/unit/stubs'
 import sidebarNavItemFixtures from '../../../../../../__fixtures__/sidebarNavItems'
 
+jest.mock('uuid', () => ({
+  v4: () => {
+    return '00000000-0000-0000-0000-000000000000'
+  }
+}))
+
 const localVue = createLocalVue()
 localVue.use(Vuex)
 localVue.use(DesignSystem)

diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap
@@ -6,9 +6,10 @@ exports[`OcSidebarNav renders navItems into a list 1`] = `
   </button>
   <nav aria-label="Sidebar navigation menu" class="oc-sidebar-nav oc-my-m oc-px-xs">
     <oc-list-stub>
-      <sidebar-nav-item-stub name="Personal" index="0" active="true" target="/files/list/all" icon="folder" filltype="fill"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Shares" index="1" target="/files/list/shared-with-me" icon="share-forward" filltype="fill"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Deleted files" index="2" target="/files/list/trash-bin" icon="delete" filltype="fill"></sidebar-nav-item-stub>
+      <div id="nav-highlighter" class="oc-ml-s oc-background-primary-gradient"></div>
+      <sidebar-nav-item-stub name="Personal" index="00000000000000000000000000000000" active="true" target="/files/list/all" icon="folder" filltype="fill"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shares" index="00000000000000000000000000000000" target="/files/list/shared-with-me" icon="share-forward" filltype="fill"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Deleted files" index="00000000000000000000000000000000" target="/files/list/trash-bin" icon="delete" filltype="fill"></sidebar-nav-item-stub>
     </oc-list-stub>
   </nav> <span class="footer">Footer</span>
 </div>
@@ -20,9 +21,10 @@ exports[`OcSidebarNav toggles back into open state upon button click 1`] = `
   </button>
   <nav aria-label="Sidebar navigation menu" class="oc-sidebar-nav oc-my-m oc-px-xs">
     <oc-list-stub>
-      <sidebar-nav-item-stub name="Personal" index="0" active="true" target="/files/list/all" icon="folder" filltype="fill"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Shares" index="1" target="/files/list/shared-with-me" icon="share-forward" filltype="fill"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Deleted files" index="2" target="/files/list/trash-bin" icon="delete" filltype="fill"></sidebar-nav-item-stub>
+      <div id="nav-highlighter" class="oc-ml-s oc-background-primary-gradient"></div>
+      <sidebar-nav-item-stub name="Personal" index="00000000000000000000000000000000" active="true" target="/files/list/all" icon="folder" filltype="fill"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shares" index="00000000000000000000000000000000" target="/files/list/shared-with-me" icon="share-forward" filltype="fill"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Deleted files" index="00000000000000000000000000000000" target="/files/list/trash-bin" icon="delete" filltype="fill"></sidebar-nav-item-stub>
     </oc-list-stub>
   </nav> <span class="footer">Footer</span>
 </div>
@@ -34,9 +36,10 @@ exports[`OcSidebarNav toggles into closed state upon button click 1`] = `
   </button>
   <nav aria-label="Sidebar navigation menu" class="oc-sidebar-nav oc-my-m oc-px-xs">
     <oc-list-stub>
-      <sidebar-nav-item-stub name="Personal" index="0" active="true" target="/files/list/all" icon="folder" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Shares" index="1" target="/files/list/shared-with-me" icon="share-forward" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Deleted files" index="2" target="/files/list/trash-bin" icon="delete" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
+      <div id="nav-highlighter" class="oc-ml-s oc-background-primary-gradient"></div>
+      <sidebar-nav-item-stub name="Personal" index="00000000000000000000000000000000" active="true" target="/files/list/all" icon="folder" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shares" index="00000000000000000000000000000000" target="/files/list/shared-with-me" icon="share-forward" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Deleted files" index="00000000000000000000000000000000" target="/files/list/trash-bin" icon="delete" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
     </oc-list-stub>
   </nav> <span class="footer">Footer</span>
 </div>

diff --git a/...es/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.js.snap b/...es/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.js.snap
@@ -4,7 +4,6 @@ exports[`OcSidebarNav renders navItem with toolTip if collapsed 1`] = `
 <li class="oc-sidebar-nav-item oc-pb-xs oc-px-s" id="123">
   <router-link-stub to="/files/list/all" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-sidebar-nav-item-link" data-nav-id="5"><span class="oc-flex"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span> <span class="oc-ml-m text text-invisible">Personal</span></span>
     <!---->
-    <!---->
   </router-link-stub>
 </li>
 `;
@@ -13,7 +12,6 @@ exports[`OcSidebarNav renders navItem without toolTip if expanded 1`] = `
 <li class="oc-sidebar-nav-item oc-pb-xs oc-px-s" id="123">
   <router-link-stub to="/files/list/all" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-sidebar-nav-item-link" data-nav-id="5"><span class="oc-flex"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span> <span class="oc-ml-m text">Personal</span></span>
     <!---->
-    <!---->
   </router-link-stub>
 </li>
 `;