Switch to existing HeaderTabs for topics page tabs, and update routes…

… accordingly
learningequality · Dec 10, 2021 · 979d464 · 979d464
1 parent 89c6284
commit 979d464
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 62 deletions.
diff --git a/kolibri/plugins/learn/assets/src/routes/index.js b/kolibri/plugins/learn/assets/src/routes/index.js
@@ -115,6 +115,22 @@ export default [
       };
     },
   },
+  {
+    // Handle redirect for links without the /folder appended
+    path: '/topics/t/:id',
+    redirect: '/topics/t/:id/:subtopic?/folders',
+    handler: (toRoute, fromRoute) => {
+      if (unassignedContentGuard()) {
+        return unassignedContentGuard();
+      }
+      // If navigation is triggered by a custom navigation updating the
+      // context query param, do not run the handler
+      if (toRoute.params.id === fromRoute.params.id) {
+        return;
+      }
+      showTopicsTopic(store, { id: toRoute.params.id, pageName: toRoute.name });
+    },
+  },
   // Have to put TOPICS_TOPIC_SEARCH before TOPICS_TOPIC to ensure
   // search gets picked up before being interpreted as a subtopic id.
   {
@@ -134,7 +150,7 @@ export default [
   },
   {
     name: PageNames.TOPICS_TOPIC,
-    path: '/topics/t/:id/:subtopic?',
+    path: '/topics/t/:id/:subtopic?/folders',
     handler: (toRoute, fromRoute) => {
       if (unassignedContentGuard()) {
         return unassignedContentGuard();

diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage.vue
@@ -64,55 +64,30 @@
         </KGrid>
         <!-- Nested tabs within the header, for toggling sidebar options -->
         <!-- larger screens -->
-        <div class="tabs">
-          <KRouterLink
-            v-if="topics && topics.length"
-            ref="tab_button"
-            :to="foldersLink"
+        <HeaderTabs>
+          <HeaderTab
             :text="coreString('folders')"
-            appearance="flat-button"
-            class="tab-button"
-            :style="!searchActive ? {
-              color: `${this.$themeTokens.primary} !important`,
-              borderBottom: `2px solid ${this.$themeTokens.primary}`,
-              paddingBottom: '2px',
-            } : {}"
-            :appearanceOverrides="customTabButtonOverrides"
+            :to="foldersLink"
           />
-          <KRouterLink
-            ref="tab_button"
-            :to="searchLink"
+          <HeaderTab
             :text="coreString('searchLabel')"
-            appearance="flat-button"
-            class="tab-button"
-            :style="searchActive ? {
-              color: `${this.$themeTokens.primary} !important`,
-              borderBottom: `2px solid ${this.$themeTokens.primary}`,
-              paddingBottom: '2px',
-            } : {}"
-            :appearanceOverrides="customTabButtonOverrides"
+            :to="searchLink"
           />
-        </div>
+        </HeaderTabs>
       </div>
       <!-- mobile tabs (different alignment and interactions) -->
       <div v-if="windowIsSmall" class="mobile-header">
         <div class="mobile-header-contents">
-          <div class="mobile-tabs">
-            <KRouterLink
-              ref="tab_button"
-              :to="foldersLink"
+          <HeaderTabs>
+            <HeaderTab
               :text="coreString('folders')"
-              appearance="flat-button"
-              :appearanceOverrides="customTabButtonOverrides"
+              :to="foldersLink"
             />
-            <KRouterLink
-              ref="tab_button"
-              :to="searchLink"
+            <HeaderTab
               :text="coreString('searchLabel')"
-              appearance="flat-button"
-              :appearanceOverrides="customTabButtonOverrides"
+              :to="searchLink"
             />
-          </div>
+          </HeaderTabs>
           <img
             :src="topic.thumbnail"
             class="channel-logo"
@@ -371,6 +346,8 @@
   import { normalizeContentNode } from '../modules/coreLearn/utils.js';
   import useSearch from '../composables/useSearch';
   import genContentLink from '../utils/genContentLink';
+  import HeaderTabs from '../../../../coach/assets/src/views/common/HeaderTabs';
+  import HeaderTab from '../../../../coach/assets/src/views/common/HeaderTabs/HeaderTab';
   import HybridLearningCardGrid from './HybridLearningCardGrid';
   import EmbeddedSidePanel from './EmbeddedSidePanel';
   import BrowseResourceMetadata from './BrowseResourceMetadata';
@@ -410,6 +387,8 @@
       BrowseResourceMetadata,
       SearchChips,
       TextTruncator,
+      HeaderTab,
+      HeaderTabs,
     },
     mixins: [responsiveWindowMixin, commonCoreStrings],
     setup() {
@@ -577,18 +556,6 @@
         }
         return false;
       },
-      customTabButtonOverrides() {
-        return {
-          textTransform: 'capitalize',
-          paddingBottom: '10px',
-          fontWeight: 'normal',
-          ':hover': {
-            color: this.$themeTokens.primary,
-            'background-color': this.$themeTokens.surface,
-            borderBottom: `2px solid ${this.$themeTokens.primary}`,
-          },
-        };
-      },
       sidePanelWidth() {
         if (this.windowIsSmall || (this.windowIsMedium && this.searchActive)) {
           return 0;
@@ -775,14 +742,10 @@
     margin: 12px;
   }
 
-  .tabs {
+  .tab-block {
     position: absolute;
     bottom: 0;
-  }
-
-  .tab-button {
-    padding: 18px;
-    border-bottom: 2px solid transparent;
+    margin-bottom: 0;
   }
 
   .main-content-grid {
@@ -828,15 +791,10 @@
 
   .mobile-header {
     position: relative;
-    height: 100px;
+    height: 120px;
     background-color: white;
   }
 
-  .mobile-tabs {
-    position: absolute;
-    bottom: 0;
-  }
-
   .channel-logo {
     position: absolute;
     top: 24px;