rename and re-arrange navbar child components

Author: indirectlylit

kolibri/core/assets/src/core-app/apiSpec.js

@@ -37,8 +37,8 @@ import kButton from '../views/k-button';
 import textbox from '../views/textbox';
 import dropdownMenu from '../views/dropdown-menu';
 import kNavbar from '../views/k-navbar';
-import tabLink from '../views/tab-link';
-import tabButton from '../views/tab-button';
+import kNavbarButton from '../views/k-navbar/button';
+import kNavbarLink from '../views/k-navbar/link';
 import logo from '../views/logo';
 import immersiveFullScreen from '../views/immersive-full-screen';
 import elapsedTime from '../views/elapsed-time';
@@ -92,8 +92,8 @@ export default {
       textbox,
       dropdownMenu,
       kNavbar,
-      tabLink,
-      tabButton,
+      kNavbarButton,
+      kNavbarLink,
       logo,
       immersiveFullScreen,
       elapsedTime,

kolibri/core/assets/src/views/tab-button/index.vue renamed to kolibri/core/assets/src/views/k-navbar/button/index.vue

@@ -26,7 +26,7 @@
 
   import uiIcon from 'keen-ui/src/UiIcon';
   export default {
-    name: 'tab-button',
+    name: 'k-navbar-button',
     props: {
       /**
         * The type of tab. title, icon, or icon-and-title.
@@ -74,6 +74,6 @@
 
 <style lang="stylus" scoped>
 
-  @require '../tab-items.styl'
+  @require '../items.styl'
 
 </style>

kolibri/core/assets/src/views/tab-items.styl renamed to kolibri/core/assets/src/views/k-navbar/items.styl

@@ -25,7 +25,7 @@
   import ValidateLinkObject from 'kolibri.utils.validateLinkObject';
   import uiIcon from 'keen-ui/src/UiIcon';
   export default {
-    name: 'tab-link',
+    name: 'k-navbar-link',
     props: {
       /**
         * The type of tab. title, icon, or icon-and-title.
@@ -68,6 +68,6 @@
 
 <style lang="stylus" scoped>
 
-  @require '../tab-items.styl'
+  @require '../items.styl'
 
 </style>

kolibri/core/assets/src/views/tab-link/index.vue renamed to kolibri/core/assets/src/views/k-navbar/link/index.vue

@@ -1,31 +1,31 @@
 <template>
 
   <k-navbar>
-    <tab-link
+    <k-navbar-link
       type="icon-and-title"
       :title="$tr('topics')"
       icon="folder"
       :link="topicsLink"
     />
-    <tab-link
+    <k-navbar-link
       type="icon-and-title"
       :title="$tr('recent')"
       icon="access_time"
       :link="recentLink"
     />
-    <tab-link
+    <k-navbar-link
       type="icon-and-title"
       :title="$tr('exams')"
       icon="assignment_late"
       :link="examsLink"
     />
-    <tab-link
+    <k-navbar-link
       type="icon-and-title"
       :title="$tr('learners')"
       icon="people"
       :link="learnersLink"
     />
-    <tab-link
+    <k-navbar-link
       type="icon-and-title"
       :title="$tr('groups')"
       icon="group_work"
@@ -40,7 +40,7 @@
 
   import * as Constants from '../../constants';
   import kNavbar from 'kolibri.coreVue.components.kNavbar';
-  import tabLink from 'kolibri.coreVue.components.tabLink';
+  import kNavbarLink from 'kolibri.coreVue.components.kNavbarLink';
   export default {
     name: 'topNav',
     $trs: {
@@ -52,7 +52,7 @@
     },
     components: {
       kNavbar,
-      tabLink,
+      kNavbarLink,
     },
     computed: {
       Constants() {

kolibri/plugins/coach/assets/src/views/top-nav/index.vue

@@ -6,21 +6,21 @@
       <channel-switcher @switch="switchChannel"/>
     </template>
 
-    <div v-if="tabLinksAreVisible" class="tab-links">
+    <div v-if="tabLinksAreVisible" class="k-navbar-links">
       <k-navbar>
-        <tab-link
+        <k-navbar-link
           type="icon-and-title"
           :title="$tr('recommended')"
           icon="forum"
           :link="recommendedLink"
         />
-        <tab-link
+        <k-navbar-link
           type="icon-and-title"
           :title="$tr('topics')"
           icon="folder"
           :link="topicsLink"
         />
-        <tab-link
+        <k-navbar-link
           name="exam-link"
           v-if="isUserLoggedIn && userHasMemberships"
           type="icon-and-title"
@@ -63,7 +63,7 @@
   import breadcrumbs from './breadcrumbs';
   import searchPage from './search-page';
   import kNavbar from 'kolibri.coreVue.components.kNavbar';
-  import tabLink from 'kolibri.coreVue.components.tabLink';
+  import kNavbarLink from 'kolibri.coreVue.components.kNavbarLink';
   import examList from './exam-list';
   import examPage from './exam-page';
   import totalPoints from './total-points';
@@ -88,7 +88,7 @@
       breadcrumbs,
       searchPage,
       kNavbar,
-      tabLink,
+      kNavbarLink,
       examList,
       examPage,
       totalPoints,

kolibri/plugins/learn/assets/src/views/index.vue

@@ -1,31 +1,31 @@
 <template>
 
   <k-navbar>
-    <tab-link
+    <k-navbar-link
       type="icon-and-title"
       :title="$tr('classes')"
       icon="domain"
       :link="classesLink"
     />
-    <tab-link
+    <k-navbar-link
       type="icon-and-title"
       :title="$tr('users')"
       icon="people"
       :link="usersLink"
     />
-    <tab-link
+    <k-navbar-link
       type="icon-and-title"
       :title="$tr('facilities')"
       icon="settings"
       :link="facilitiesConfigLink"
     />
-    <tab-link
+    <k-navbar-link
       type="icon-and-title"
       :title="$tr('data')"
       icon="save"
       :link="dataLink"
     />
-    <tab-link
+    <k-navbar-link
       type="icon-and-title"
       :title="$tr('content')"
       icon="view_module"
@@ -41,7 +41,7 @@
   import { PageNames } from '../../constants';
   const linkify = name => ({ name });
   import kNavbar from 'kolibri.coreVue.components.kNavbar';
-  import tabLink from 'kolibri.coreVue.components.tabLink';
+  import kNavbarLink from 'kolibri.coreVue.components.kNavbarLink';
   export default {
     name: 'topNav',
     $trs: {
@@ -53,7 +53,7 @@
     },
     components: {
       kNavbar,
-      tabLink,
+      kNavbarLink,
     },
     computed: {
       classesLink() {

kolibri/plugins/management/assets/src/views/top-nav/index.vue

@@ -1,24 +1,24 @@
 <template>
 
   <k-navbar>
-    <tab-link
+    <k-navbar-link
       type="icon-and-title"
       title="Trending"
       icon="trending_up"
       :link="{}">
-    </tab-link>
-    <tab-link
+    </k-navbar-link>
+    <k-navbar-link
       type="icon-and-title"
       title="Lit"
       icon="whatshot"
       :link="{}">
-    </tab-link>
-    <tab-link
+    </k-navbar-link>
+    <k-navbar-link
       type="icon-and-title"
       title="Favorites"
       icon="favorite"
       :link="{}">
-    </tab-link>
+    </k-navbar-link>
   </k-navbar>
 
 </template>

kolibri/plugins/style_guide/assets/src/views/content/components/k-navbar-example.html

@@ -32,8 +32,8 @@
   FullVue.component('k-navbar', kNavbar);
   import kTabsExample from 'raw-loader!./k-navbar-example.html';
 
-  import tabLink from 'kolibri.coreVue.components.tabLink';
-  FullVue.component('tab-link', tabLink);
+  import kNavbarLink from 'kolibri.coreVue.components.kNavbarLink';
+  FullVue.component('k-navbar-link', kNavbarLink);
 
   export default {
     components: {

kolibri/plugins/style_guide/assets/src/views/content/components/k-navbar.vue

@@ -18,7 +18,7 @@
   // set up a fake $tr, and use it in the code example.
   FullVue.prototype.$tr = text => text;
 
-  // Some components (e.g. <tab-link>) need the router.
+  // Some components (e.g. <k-navbar-link>) need the router.
   FullVue.use(VueRouter);
 
   export default {