Skip to content

Commit a46cb6b

Browse files
christianmemijechristianmemije
authored
Merge pull request #1922 from indirectlylit/navbar-refactor
k-navbar refactor and cleanup
2 parents ccc9627 + 87d6adc commit a46cb6b

File tree

11 files changed

+73
-37
lines changed

11 files changed

+73
-37
lines changed

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,8 @@ import kButton from '../views/k-button';
3737
import textbox from '../views/textbox';
3838
import dropdownMenu from '../views/dropdown-menu';
3939
import kNavbar from '../views/k-navbar';
40-
import tabLink from '../views/tab-link';
41-
import tabButton from '../views/tab-button';
40+
import kNavbarButton from '../views/k-navbar/button';
41+
import kNavbarLink from '../views/k-navbar/link';
4242
import logo from '../views/logo';
4343
import immersiveFullScreen from '../views/immersive-full-screen';
4444
import elapsedTime from '../views/elapsed-time';
@@ -92,8 +92,8 @@ export default {
9292
textbox,
9393
dropdownMenu,
9494
kNavbar,
95-
tabLink,
96-
tabButton,
95+
kNavbarButton,
96+
kNavbarLink,
9797
logo,
9898
immersiveFullScreen,
9999
elapsedTime,

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

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
class="tab"
66
:class="{ 'tab-has-icon-and-title': type === 'icon-and-title', 'tab-selected': selected }"
77
@click="handleClick"
8-
ref="tab">
8+
ref="tab"
9+
>
910

1011
<div v-if="type === 'icon' || type === 'icon-and-title'" class="tab-icon">
1112
<ui-icon :icon="icon" :ariaLabel="title" class="icon"/>
@@ -25,22 +26,35 @@
2526
2627
import uiIcon from 'keen-ui/src/UiIcon';
2728
export default {
29+
name: 'k-navbar-button',
2830
props: {
31+
/**
32+
* The type of tab. title, icon, or icon-and-title.
33+
*/
2934
type: {
3035
type: String,
3136
validator(type) {
3237
return ['title', 'icon', 'icon-and-title'].includes(type);
3338
},
3439
required: true,
3540
},
41+
/**
42+
* The text
43+
*/
3644
title: {
3745
type: String,
3846
required: false,
3947
},
48+
/**
49+
* A material icon name.
50+
*/
4051
icon: {
4152
type: String,
4253
required: false,
4354
},
55+
/**
56+
* Whether or not to display as selected
57+
*/
4458
selected: {
4559
type: Boolean,
4660
default: false,
@@ -60,6 +74,6 @@
6074

6175
<style lang="stylus" scoped>
6276
63-
@require '../tab-items.styl'
77+
@require '../items.styl'
6478
6579
</style>

‎kolibri/core/assets/src/views/k-navbar/index.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
<nav class="tabs">
44
<ul>
5+
<!-- Can contain either tab-buttons or tab-links. -->
56
<slot/>
67
</ul>
78
</nav>
@@ -11,6 +12,10 @@
1112

1213
<script>
1314
15+
/**
16+
* Used for navigation within a plugin
17+
*/
18+
1419
export default {
1520
name: 'k-navbar',
1621
};

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

File renamed without changes.

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

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
<template>
22

33
<li>
4-
<router-link :to="link" class="tab" :class="{ 'tab-has-icon-and-title': type === 'icon-and-title' }">
4+
<router-link
5+
class="tab"
6+
:class="{ 'tab-has-icon-and-title': type === 'icon-and-title' }"
7+
:to="link"
8+
>
59

610
<div v-if="type === 'icon' || type === 'icon-and-title'" class="tab-icon">
711
<ui-icon :icon="icon" :ariaLabel="title" class="icon"/>
@@ -21,22 +25,35 @@
2125
import ValidateLinkObject from 'kolibri.utils.validateLinkObject';
2226
import uiIcon from 'keen-ui/src/UiIcon';
2327
export default {
28+
name: 'k-navbar-link',
2429
props: {
30+
/**
31+
* The type of tab. title, icon, or icon-and-title.
32+
*/
2533
type: {
2634
type: String,
2735
validator(type) {
2836
return ['title', 'icon', 'icon-and-title'].includes(type);
2937
},
3038
required: true,
3139
},
40+
/**
41+
* The text
42+
*/
3243
title: {
3344
type: String,
3445
required: false,
3546
},
47+
/**
48+
* A material icon name.
49+
*/
3650
icon: {
3751
type: String,
3852
required: false,
3953
},
54+
/**
55+
* A router link object
56+
*/
4057
link: {
4158
type: Object,
4259
required: true,
@@ -51,6 +68,6 @@
5168

5269
<style lang="stylus" scoped>
5370
54-
@require '../tab-items.styl'
71+
@require '../items.styl'
5572
5673
</style>

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,31 @@
11
<template>
22

33
<k-navbar>
4-
<tab-link
4+
<k-navbar-link
55
type="icon-and-title"
66
:title="$tr('topics')"
77
icon="folder"
88
:link="topicsLink"
99
/>
10-
<tab-link
10+
<k-navbar-link
1111
type="icon-and-title"
1212
:title="$tr('recent')"
1313
icon="access_time"
1414
:link="recentLink"
1515
/>
16-
<tab-link
16+
<k-navbar-link
1717
type="icon-and-title"
1818
:title="$tr('exams')"
1919
icon="assignment_late"
2020
:link="examsLink"
2121
/>
22-
<tab-link
22+
<k-navbar-link
2323
type="icon-and-title"
2424
:title="$tr('learners')"
2525
icon="people"
2626
:link="learnersLink"
2727
/>
28-
<tab-link
28+
<k-navbar-link
2929
type="icon-and-title"
3030
:title="$tr('groups')"
3131
icon="group_work"
@@ -40,7 +40,7 @@
4040
4141
import * as Constants from '../../constants';
4242
import kNavbar from 'kolibri.coreVue.components.kNavbar';
43-
import tabLink from 'kolibri.coreVue.components.tabLink';
43+
import kNavbarLink from 'kolibri.coreVue.components.kNavbarLink';
4444
export default {
4545
name: 'topNav',
4646
$trs: {
@@ -52,7 +52,7 @@
5252
},
5353
components: {
5454
kNavbar,
55-
tabLink,
55+
kNavbarLink,
5656
},
5757
computed: {
5858
Constants() {

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,21 @@
66
<channel-switcher @switch="switchChannel"/>
77
</template>
88

9-
<div v-if="tabLinksAreVisible" class="tab-links">
9+
<div v-if="tabLinksAreVisible" class="k-navbar-links">
1010
<k-navbar>
11-
<tab-link
11+
<k-navbar-link
1212
type="icon-and-title"
1313
:title="$tr('recommended')"
1414
icon="forum"
1515
:link="recommendedLink"
1616
/>
17-
<tab-link
17+
<k-navbar-link
1818
type="icon-and-title"
1919
:title="$tr('topics')"
2020
icon="folder"
2121
:link="topicsLink"
2222
/>
23-
<tab-link
23+
<k-navbar-link
2424
name="exam-link"
2525
v-if="isUserLoggedIn && userHasMemberships"
2626
type="icon-and-title"
@@ -63,7 +63,7 @@
6363
import breadcrumbs from './breadcrumbs';
6464
import searchPage from './search-page';
6565
import kNavbar from 'kolibri.coreVue.components.kNavbar';
66-
import tabLink from 'kolibri.coreVue.components.tabLink';
66+
import kNavbarLink from 'kolibri.coreVue.components.kNavbarLink';
6767
import examList from './exam-list';
6868
import examPage from './exam-page';
6969
import totalPoints from './total-points';
@@ -88,7 +88,7 @@
8888
breadcrumbs,
8989
searchPage,
9090
kNavbar,
91-
tabLink,
91+
kNavbarLink,
9292
examList,
9393
examPage,
9494
totalPoints,

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,31 @@
11
<template>
22

33
<k-navbar>
4-
<tab-link
4+
<k-navbar-link
55
type="icon-and-title"
66
:title="$tr('classes')"
77
icon="domain"
88
:link="classesLink"
99
/>
10-
<tab-link
10+
<k-navbar-link
1111
type="icon-and-title"
1212
:title="$tr('users')"
1313
icon="people"
1414
:link="usersLink"
1515
/>
16-
<tab-link
16+
<k-navbar-link
1717
type="icon-and-title"
1818
:title="$tr('facilities')"
1919
icon="settings"
2020
:link="facilitiesConfigLink"
2121
/>
22-
<tab-link
22+
<k-navbar-link
2323
type="icon-and-title"
2424
:title="$tr('data')"
2525
icon="save"
2626
:link="dataLink"
2727
/>
28-
<tab-link
28+
<k-navbar-link
2929
type="icon-and-title"
3030
:title="$tr('content')"
3131
icon="view_module"
@@ -41,7 +41,7 @@
4141
import { PageNames } from '../../constants';
4242
const linkify = name => ({ name });
4343
import kNavbar from 'kolibri.coreVue.components.kNavbar';
44-
import tabLink from 'kolibri.coreVue.components.tabLink';
44+
import kNavbarLink from 'kolibri.coreVue.components.kNavbarLink';
4545
export default {
4646
name: 'topNav',
4747
$trs: {
@@ -53,7 +53,7 @@
5353
},
5454
components: {
5555
kNavbar,
56-
tabLink,
56+
kNavbarLink,
5757
},
5858
computed: {
5959
classesLink() {

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
<template>
22

33
<k-navbar>
4-
<tab-link
4+
<k-navbar-link
55
type="icon-and-title"
66
title="Trending"
77
icon="trending_up"
88
:link="{}">
9-
</tab-link>
10-
<tab-link
9+
</k-navbar-link>
10+
<k-navbar-link
1111
type="icon-and-title"
1212
title="Lit"
1313
icon="whatshot"
1414
:link="{}">
15-
</tab-link>
16-
<tab-link
15+
</k-navbar-link>
16+
<k-navbar-link
1717
type="icon-and-title"
1818
title="Favorites"
1919
icon="favorite"
2020
:link="{}">
21-
</tab-link>
21+
</k-navbar-link>
2222
</k-navbar>
2323

2424
</template>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@
3232
FullVue.component('k-navbar', kNavbar);
3333
import kTabsExample from 'raw-loader!./k-navbar-example.html';
3434
35-
import tabLink from 'kolibri.coreVue.components.tabLink';
36-
FullVue.component('tab-link', tabLink);
35+
import kNavbarLink from 'kolibri.coreVue.components.kNavbarLink';
36+
FullVue.component('k-navbar-link', kNavbarLink);
3737
3838
export default {
3939
components: {

0 commit comments

Comments
 (0)