[GSoC] Quick navigation UI

src/components/Filter/FilterInput.vue

@@ -16,7 +16,7 @@
     :aria-labelledby="searchAriaLabelledBy"
     :class="{ 'focus': showSuggestedTags }"
     @blur.capture="handleBlur"
-    @focus.capture="showSuggestedTags = true"
+    @focus.capture="handleFocus"
   >
     <div :class="['filter__wrapper', { 'filter__wrapper--reversed': positionReversed }]">
       <div class="filter__top-wrapper">
@@ -76,7 +76,7 @@
               @keydown.left="leftKeyInputHandler"
               @keydown.right="rightKeyInputHandler"
               @keydown.delete="deleteHandler"
-              @keydown.meta.a.prevent="selectInputAndTags"
+              @keydown.meta.a.prevent.stop="selectInputAndTags"
               @keydown.ctrl.a.prevent="selectInputAndTags"
               @keydown.exact="inputKeydownHandler"
               @keydown.enter.exact="enterHandler"
@@ -93,6 +93,7 @@
             aria-label="Reset Filter"
             class="filter__delete-button"
             @click="resetFilters(true)"
+            @keydown.enter.exact.stop="resetFilters(true)"
             @mousedown.prevent
           >
             <ClearRoundedIcon />
@@ -194,6 +195,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    focusInputWhenEmpty: {
+      type: Boolean,
+      default: false,
+    },
     clearFilterOnTagSelect: {
       type: Boolean,
       default: true,
@@ -395,12 +400,15 @@ export default {
         this.$emit('focus-prev');
       }
     },
+    handleFocus() {
+      this.showSuggestedTags = true;
+    },
   },
   created() {
     if (
       this.focusInputWhenCreated
       && document.activeElement !== this.$refs.input
-      && this.inputIsNotEmpty
+      && (this.inputIsNotEmpty || this.focusInputWhenEmpty)
     ) {
       this.focusInput();
     }
@@ -437,9 +445,9 @@ $input-height: rem(28px);
 
   &__filter-button {
     position: relative;
-    margin-left: rem(10px);
     z-index: 1;
     cursor: text;
+    margin-left: rem(10px);
     margin-right: rem(3px);
 
     @include breakpoint(small) {
@@ -531,17 +539,19 @@ $input-height: rem(28px);
     border-radius: 100%;
 
     .clear-rounded-icon {
-      height: $icon-size-default;
-      width: $icon-size-default;
+      height: rem(14px);
+      width: rem(14px);
       fill: var(--input-text);
       display: block;
+      padding: rem(5px);
     }
   }
 
   &__delete-button-wrapper {
     display: flex;
     align-items: center;
-    padding: 0 10px;
+    padding-right: rem(10px);
+    padding-left: rem(3px);
     border-top-right-radius: $small-border-radius;
     border-bottom-right-radius: $small-border-radius;
   }

src/components/GenericModal.vue

@@ -18,7 +18,11 @@
       :style="modalColors"
     >
       <div class="backdrop" @click="onClickOutside" />
-      <div class="container" ref="container" :style="{ width }">
+      <div
+        class="container"
+        ref="container"
+        :style="modalStyle"
+      >
         <button
           v-if="showClose"
           class="close"
@@ -87,6 +91,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    styleProps: {
+      type: Object,
+      default: null,
+    },
   },
   data() {
     return {
@@ -107,6 +115,12 @@ export default {
         '--background': this.codeBackgroundColorOverride,
       };
     },
+    modalStyle({ styleProps, width }) {
+      return ({
+        width,
+        ...styleProps,
+      });
+    },
     themeClass({ theme, prefersDarkStyle, isThemeDynamic }) {
       let dynamicThemeClasses = {};
       // if we use the `dynamic` theme, use the OS darkmode preference.
@@ -223,6 +237,7 @@ export default {
         this.selectContent();
       }
       if (key !== 'Escape') return;
+      event.preventDefault();
       this.closeModal();
     },
     /**

src/components/Icons/ClearRoundedIcon.vue

@@ -15,7 +15,7 @@
     themeId="clear-rounded"
   >
     <title>Clear</title>
-    <path d="M9.864,3.5l.636.636L7.632,7l2.862,2.861-.636.636L7,7.639,4.142,10.494l-.636-.636L6.36,7,3.5,4.142l.636-.636L7,6.367Z" fill-rule="evenodd"/>
+    <path d="M14.55,0l1.45,1.45-6.56,6.55,6.54,6.54-1.45,1.45-6.53-6.53L1.47,15.99,.01,14.53l6.52-6.53L0,1.47,1.45,.02l6.55,6.54L14.55,0Z" fill-rule="evenodd"/>
   </SVGIcon>
 </template>
 

src/components/Icons/MagnifierIcon.vue

@@ -18,7 +18,7 @@
 import SVGIcon from 'docc-render/components/SVGIcon.vue';
 
 export default {
-  name: 'MafnifierIcon',
+  name: 'MagnifierIcon',
   components: { SVGIcon },
 };
 </script>

src/components/Navigator.vue

@@ -26,7 +26,6 @@
       :render-filter-on-top="renderFilterOnTop"
       :api-changes="apiChanges"
       :allow-hiding="allowHiding"
-      :enableQuickNavigation="enableQuickNavigation"
       :navigator-references="navigatorReferences"
       @close="$emit('close')"
     />
@@ -42,13 +41,11 @@
 </template>
 
 <script>
-import QuickNavigationStore from 'docc-render/stores/QuickNavigationStore';
 import NavigatorCard from 'theme/components/Navigator/NavigatorCard.vue';
 import SpinnerIcon from 'theme/components/Icons/SpinnerIcon.vue';
 import NavigatorCardInner from 'docc-render/components/Navigator/NavigatorCardInner.vue';
 import { INDEX_ROOT_KEY } from 'docc-render/constants/sidebar';
 import { TopicTypes } from 'docc-render/constants/TopicTypes';
-import { getSetting } from 'docc-render/utils/theme-settings';
 
 /**
  * @typedef NavigatorFlatItem
@@ -82,10 +79,13 @@ export default {
   data() {
     return {
       INDEX_ROOT_KEY,
-      store: QuickNavigationStore,
     };
   },
   props: {
+    flatChildren: {
+      type: Array,
+      required: true,
+    },
     parentTopicIdentifiers: {
       type: Array,
       required: true,
@@ -127,9 +127,6 @@ export default {
       default: true,
     },
   },
-  provide() {
-    return { store: this.store };
-  },
   computed: {
     // gets the paths for each parent in the breadcrumbs
     parentTopicReferences({ references, parentTopicIdentifiers }) {
@@ -155,104 +152,11 @@ export default {
       }
       return parentTopicReferences.slice(itemsToSlice).map(r => r.url).concat(path);
     },
-    enableQuickNavigation: () => (
-      getSetting(['features', 'docs', 'quickNavigation', 'enable'], false)
-    ),
-    /**
-     * Recomputes the list of flat children.
-     * @return NavigatorFlatItem[]
-     */
-    flatChildren: ({
-      enableQuickNavigation, flattenNestedData, technology = {}, store,
-    }) => {
-      const flatIndex = flattenNestedData(technology.children || [], null, 0, technology.beta);
-      if (enableQuickNavigation) {
-        store.setFlattenIndex(flatIndex);
-      }
-      return flatIndex;
-    },
     /**
      * The root item is always a module
      */
     type: () => TopicTypes.module,
   },
-  methods: {
-    /**
-     * Generates a unique hash, from a string, generating a signed number.
-     * @returns Number
-     */
-    hashCode(str) {
-      return str.split('').reduce((prevHash, currVal) => (
-        // eslint-disable-next-line no-bitwise
-        (((prevHash << 5) - prevHash) + currVal.charCodeAt(0)) | 0
-      ), 0);
-    },
-    /**
-     * @param {{path: string, type: string, title: string, children?: [] }[]} childrenNodes
-     * @param {NavigatorFlatItem | null} parent
-     * @param {Number} depth
-     * @param {Boolean} parentBetaStatus
-     * @return {NavigatorFlatItem[]}
-     */
-    flattenNestedData(childrenNodes, parent = null, depth = 0, parentBetaStatus = false) {
-      let items = [];
-      const len = childrenNodes.length;
-      let index;
-      // reference to the last label node
-      let groupMarkerNode = null;
-      for (index = 0; index < len; index += 1) {
-        // get the children
-        const { children, ...node } = childrenNodes[index];
-        // generate the extra properties
-        const { uid: parentUID = INDEX_ROOT_KEY } = parent || {};
-        // generate a uid to track by
-        node.uid = this.hashCode(`${parentUID}+${node.path}_${depth}_${index}`);
-        // store the parent uid
-        node.parent = parentUID;
-        // store the current groupMarker reference
-        if (node.type === TopicTypes.groupMarker) {
-          node.deprecatedChildrenCount = 0;
-          groupMarkerNode = node;
-        } else if (groupMarkerNode) {
-          // push the current node to the group marker before it
-          groupMarkerNode.childUIDs.push(node.uid);
-          // store the groupMarker UID for each item
-          node.groupMarkerUID = groupMarkerNode.uid;
-          if (node.deprecated) {
-            // count deprecated children, so we can hide the entire group when filtering
-            groupMarkerNode.deprecatedChildrenCount += 1;
-          }
-        }
-        // store which item it is
-        node.index = index;
-        // store how many siblings it has
-        node.siblingsCount = len;
-        // store the depth
-        node.depth = depth;
-        // store child UIDs
-        node.childUIDs = [];
-        // if the parent is not the root, push to its childUIDs the current node uid
-        if (parent) {
-          // push child to parent
-          parent.childUIDs.push(node.uid);
-        }
-        // if the parent or the entire technology are marked as `Beta`,
-        // child elements do not get marked as `Beta`.
-        if (node.beta && parentBetaStatus) {
-          node.beta = false;
-        }
-
-        items.push(node);
-        if (children) {
-          // return the children to the parent
-          items = items.concat(this.flattenNestedData(
-            children, node, depth + 1, parentBetaStatus || node.beta,
-          ));
-        }
-      }
-      return items;
-    },
-  },
 };
 </script>