Skip to content

Commit 60bf18e

Browse files
korelstarkorelstar
committed
preparations for nextcloud-vue 0.13
1 parent 752ad09 commit 60bf18e

File tree

4 files changed

+103
-86
lines changed

4 files changed

+103
-86
lines changed

‎css/app-navigation.scss

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
#app-navigation li.collapsible.category-header:not(.open) a {
1+
.app-navigation-entry.category-header:not(.app-navigation-entry--opened) .app-navigation-entry__title {
22
font-weight: bold;
33
}
44

@@ -12,25 +12,25 @@
1212
}
1313

1414
/* icons for sidebar */
15-
.nav-icon-files {
15+
.icon-files {
1616
@include icon-color('folder', 'notes', $color-black);
1717
}
1818

19-
.nav-icon-emptyfolder {
19+
.icon-emptyfolder {
2020
@include icon-color('folder-empty', 'notes', $color-black);
2121
}
2222

23-
.nav-icon-recent {
23+
.icon-recent {
2424
@include icon-color('recent', 'notes', $color-black);
2525
}
2626

27-
.app-navigation-entry-utils-menu-button {
27+
.app-navigation-entry__utils .action-item {
2828
visibility: hidden;
2929
}
3030

31-
.active .app-navigation-entry-utils-menu-button,
32-
li:hover .app-navigation-entry-utils-menu-button,
33-
li:focus .app-navigation-entry-utils-menu-button {
31+
.active .app-navigation-entry__utils .action-item,
32+
li:hover .app-navigation-entry__utils .action-item,
33+
li:focus .app-navigation-entry__utils .action-item {
3434
visibility: visible;
3535
}
3636

‎src/components/NavigationCategoriesItem.vue

Lines changed: 42 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,42 @@
11
<template>
22
<AppNavigationItem
3-
:item="mainItem"
3+
:title="title"
4+
icon="icon-files"
5+
class="app-navigation-noclose separator-below"
6+
:class="{ 'category-header': selectedCategory !== null }"
47
:open.sync="open"
5-
/>
8+
:allow-collapse="true"
9+
@click.prevent.stop="onToggleCategories"
10+
>
11+
<template>
12+
<AppNavigationItem
13+
:title="t('notes', 'All notes')"
14+
icon="icon-recent"
15+
@click.prevent.stop="onSelectCategory(null)"
16+
>
17+
<AppNavigationCounter slot="counter">
18+
{{ numNotes }}
19+
</AppNavigationCounter>
20+
</AppNavigationItem>
21+
22+
<AppNavigationItem v-for="category in categories"
23+
:key="category.name"
24+
:title="categoryTitle(category.name)"
25+
:icon="category.name === '' ? 'icon-emptyfolder' : 'icon-files'"
26+
@click.prevent.stop="onSelectCategory(category.name)"
27+
>
28+
<AppNavigationCounter slot="counter">
29+
{{ category.count }}
30+
</AppNavigationCounter>
31+
</AppNavigationItem>
32+
</template>
33+
</AppNavigationItem>
634
</template>
735

836
<script>
937
import {
1038
AppNavigationItem,
39+
AppNavigationCounter,
1140
} from 'nextcloud-vue'
1241
import NotesService from '../NotesService'
1342
import store from '../store'
@@ -17,6 +46,7 @@ export default {
1746
1847
components: {
1948
AppNavigationItem,
49+
AppNavigationCounter,
2050
},
2151
2252
props: {
@@ -41,40 +71,20 @@ export default {
4171
return NotesService.getCategories(1, true)
4272
},
4373
44-
categoryItems() {
45-
const itemAllNotes = {
46-
text: this.t('notes', 'All notes'),
47-
icon: 'nav-icon-recent',
48-
action: this.onSelectCategory.bind(this, null),
49-
utils: {
50-
counter: this.numNotes,
51-
},
52-
}
53-
const itemsCategories = this.categories.map(category => (
54-
{
55-
text: NotesService.categoryLabel(category.name),
56-
icon: category.name === '' ? 'nav-icon-emptyfolder' : 'nav-icon-files',
57-
action: this.onSelectCategory.bind(this, category.name),
58-
utils: {
59-
counter: category.count,
60-
},
61-
}
62-
))
63-
return [ itemAllNotes, ...itemsCategories ]
64-
},
65-
66-
mainItem() {
67-
return {
68-
text: this.selectedCategory === null ? this.t('notes', 'Categories') : NotesService.categoryLabel(this.selectedCategory),
69-
icon: 'nav-icon-files',
70-
collapsible: true,
71-
classes: 'app-navigation-noclose separator-below' + (this.selectedCategory === null ? '' : ' category-header'),
72-
children: this.categoryItems,
73-
}
74+
title() {
75+
return this.selectedCategory === null ? this.t('notes', 'Categories') : NotesService.categoryLabel(this.selectedCategory)
7476
},
7577
},
7678
7779
methods: {
80+
categoryTitle(category) {
81+
return NotesService.categoryLabel(category)
82+
},
83+
84+
onToggleCategories() {
85+
this.open = !this.open
86+
},
87+
7888
onSelectCategory(category) {
7989
this.open = false
8090
this.$emit('category-selected', category)

‎src/components/NavigationList.vue

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,15 @@
3636

3737
<!-- list of notes -->
3838
<template v-for="item in noteItems">
39-
<AppNavigationItem v-if="category!==null && category!==item.category"
40-
:key="item.category" :item="categoryToItem(item.category)"
39+
<AppNavigationCaption v-if="category!==null && category!==item.category"
40+
:key="item.category"
41+
icon="icon-files"
42+
class="app-navigation-noclose"
43+
:title="categoryToLabel(item.category)"
44+
@click.native="$emit('category-selected', item.category)"
4145
/>
4246
<AppNavigationCaption v-if="category===null && item.timeslot"
43-
:key="item.timeslot" :text="item.timeslot"
47+
:key="item.timeslot" :title="item.timeslot"
4448
/>
4549
<NavigationNoteItem v-for="note in item.notes"
4650
:key="note.id" :note="note"
@@ -53,7 +57,6 @@
5357

5458
<script>
5559
import {
56-
AppNavigationItem,
5760
AppNavigationCaption,
5861
} from 'nextcloud-vue'
5962
import NavigationCategoriesItem from './NavigationCategoriesItem'
@@ -66,7 +69,6 @@ export default {
6669
6770
components: {
6871
AppNavigationCaption,
69-
AppNavigationItem,
7072
NavigationCategoriesItem,
7173
NavigationNoteItem,
7274
},
@@ -145,14 +147,8 @@ export default {
145147
]
146148
},
147149
148-
categoryToItem(category) {
149-
const label = '…/' + category.substring(this.category.length + 1)
150-
return {
151-
text: NotesService.categoryLabel(label),
152-
classes: 'app-navigation-caption caption-item app-navigation-noclose',
153-
icon: 'nav-icon-files',
154-
action: this.$emit.bind(this, 'category-selected', category),
155-
}
150+
categoryToLabel(category) {
151+
return NotesService.categoryLabel(category.substring(this.category.length + 1))
156152
},
157153
158154
getTimeslotFromNote(note) {

‎src/components/NavigationNoteItem.vue

Lines changed: 44 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,27 @@
11
<template>
2-
<AppNavigationItem :item="item" :menu-open.sync="menuOpen" />
2+
<AppNavigationItem
3+
:title="title"
4+
:icon="icon"
5+
:menu-open.sync="menuOpen"
6+
:to="{ name: 'note', params: { noteId: note.id.toString() } }"
7+
>
8+
<template slot="actions">
9+
<ActionButton :icon="actionFavoriteIcon" @click="onToggleFavorite">
10+
{{ actionFavoriteText }}
11+
</ActionButton>
12+
<ActionButton icon="icon-files-dark" @click="onCategorySelected">
13+
{{ actionCategoryText }}
14+
</ActionButton>
15+
<ActionButton :icon="actionDeleteIcon" @click="onDeleteNote">
16+
{{ t('notes', 'Delete note') }}
17+
</ActionButton>
18+
</template>
19+
</AppNavigationItem>
320
</template>
421

522
<script>
623
import {
24+
ActionButton,
725
AppNavigationItem,
826
} from 'nextcloud-vue'
927
import NotesService from '../NotesService'
@@ -12,6 +30,7 @@ export default {
1230
name: 'NavigationNoteItem',
1331
1432
components: {
33+
ActionButton,
1534
AppNavigationItem,
1635
},
1736
@@ -33,46 +52,38 @@ export default {
3352
},
3453
3554
computed: {
36-
item() {
55+
icon() {
3756
let icon = ''
3857
if (this.note.error) {
3958
icon = 'nav-icon icon-error-color'
4059
} else if (this.note.favorite) {
4160
icon = 'nav-icon icon-starred'
4261
}
43-
let iconActionFavorite = this.note.favorite ? 'icon-star-dark' : 'icon-starred'
62+
return icon
63+
},
64+
65+
title() {
66+
return this.note.title + (this.note.unsaved ? ' *' : '')
67+
},
68+
69+
actionFavoriteText() {
70+
return this.note.favorite ? this.t('notes', 'Remove from favorites') : this.t('notes', 'Add to favorites')
71+
},
72+
73+
actionFavoriteIcon() {
74+
let icon = this.note.favorite ? 'icon-star-dark' : 'icon-starred'
4475
if (this.loading.favorite) {
45-
iconActionFavorite += ' loading'
46-
}
47-
return {
48-
text: this.note.title + (this.note.unsaved ? ' *' : ''),
49-
icon: icon,
50-
router: {
51-
name: 'note',
52-
params: {
53-
noteId: this.note.id.toString(),
54-
},
55-
},
56-
utils: {
57-
actions: [
58-
{
59-
text: this.note.favorite ? this.t('notes', 'Remove from favorites') : this.t('notes', 'Add to favorites'),
60-
icon: iconActionFavorite,
61-
action: this.onToggleFavorite,
62-
},
63-
{
64-
text: NotesService.categoryLabel(this.note.category),
65-
icon: 'icon-files-dark',
66-
action: this.onCategorySelected,
67-
},
68-
{
69-
text: this.t('notes', 'Delete note'),
70-
icon: 'icon-delete' + (this.loading.delete ? ' loading' : ''),
71-
action: this.onDeleteNote,
72-
},
73-
],
74-
},
76+
icon += ' loading'
7577
}
78+
return icon
79+
},
80+
81+
actionCategoryText() {
82+
return NotesService.categoryLabel(this.note.category)
83+
},
84+
85+
actionDeleteIcon() {
86+
return 'icon-delete' + (this.loading.delete ? ' loading' : '')
7687
},
7788
},
7889

0 commit comments

Comments
 (0)