preparations for nextcloud-vue 0.13

nextcloud · Sep 14, 2019 · 2008d02 · 2008d02
1 parent c7d99cb
commit 2008d02
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 87 deletions.
diff --git a/css/app-navigation.scss b/css/app-navigation.scss
@@ -1,4 +1,4 @@
-#app-navigation li.collapsible.category-header:not(.open) a {
+.app-navigation-entry.category-header:not(.app-navigation-entry--opened) .app-navigation-entry__title {
 	font-weight: bold;
 }
 
@@ -12,25 +12,25 @@
 }
 
 /* icons for sidebar */
-.nav-icon-files {
+.icon-files {
 	@include icon-color('folder', 'notes', $color-black);
 }
 
-.nav-icon-emptyfolder {
+.icon-emptyfolder {
 	@include icon-color('folder-empty', 'notes', $color-black);
 }
 
-.nav-icon-recent {
+.icon-recent {
 	@include icon-color('recent', 'notes', $color-black);
 }
 
-.app-navigation-entry-utils-menu-button {
+.app-navigation-entry__utils .action-item {
 	visibility: hidden;
 }
 
-.active  .app-navigation-entry-utils-menu-button,
-li:hover .app-navigation-entry-utils-menu-button,
-li:focus .app-navigation-entry-utils-menu-button {
+.active  .app-navigation-entry__utils .action-item,
+li:hover .app-navigation-entry__utils .action-item,
+li:focus .app-navigation-entry__utils .action-item {
 	visibility: visible;
 }
 
diff --git a/src/components/NavigationCategoriesItem.vue b/src/components/NavigationCategoriesItem.vue
@@ -1,13 +1,42 @@
 <template>
 	<AppNavigationItem
-		:item="mainItem"
+		:title="title"
+		icon="icon-files"
+		class="app-navigation-noclose separator-below"
+		:class="{ 'category-header': selectedCategory !== null }"
 		:open.sync="open"
-	/>
+		:allow-collapse="true"
+		@click.prevent.stop="onToggleCategories"
+	>
+		<template>
+			<AppNavigationItem
+				:title="t('notes', 'All notes')"
+				icon="icon-recent"
+				@click.prevent.stop="onSelectCategory(null)"
+			>
+				<AppNavigationCounter slot="counter">
+					{{ numNotes }}
+				</AppNavigationCounter>
+			</AppNavigationItem>
+
+			<AppNavigationItem v-for="category in categories"
+				:key="category.name"
+				:title="categoryTitle(category.name)"
+				:icon="category.name === '' ? 'icon-emptyfolder' : 'icon-files'"
+				@click.prevent.stop="onSelectCategory(category.name)"
+			>
+				<AppNavigationCounter slot="counter">
+					{{ category.count }}
+				</AppNavigationCounter>
+			</AppNavigationItem>
+		</template>
+	</AppNavigationItem>
 </template>
 
 <script>
 import {
 	AppNavigationItem,
+	AppNavigationCounter,
 } from 'nextcloud-vue'
 import NotesService from '../NotesService'
 import store from '../store'
@@ -17,6 +46,7 @@ export default {
 
 	components: {
 		AppNavigationItem,
+		AppNavigationCounter,
 	},
 
 	props: {
@@ -41,40 +71,20 @@ export default {
 			return NotesService.getCategories(1, true)
 		},
 
-		categoryItems() {
-			const itemAllNotes = {
-				text: this.t('notes', 'All notes'),
-				icon: 'nav-icon-recent',
-				action: this.onSelectCategory.bind(this, null),
-				utils: {
-					counter: this.numNotes,
-				},
-			}
-			const itemsCategories = this.categories.map(category => (
-				{
-					text: NotesService.categoryLabel(category.name),
-					icon: category.name === '' ? 'nav-icon-emptyfolder' : 'nav-icon-files',
-					action: this.onSelectCategory.bind(this, category.name),
-					utils: {
-						counter: category.count,
-					},
-				}
-			))
-			return [ itemAllNotes, ...itemsCategories ]
-		},
-
-		mainItem() {
-			return {
-				text: this.selectedCategory === null ? this.t('notes', 'Categories') : NotesService.categoryLabel(this.selectedCategory),
-				icon: 'nav-icon-files',
-				collapsible: true,
-				classes: 'app-navigation-noclose separator-below' + (this.selectedCategory === null ? '' : ' category-header'),
-				children: this.categoryItems,
-			}
+		title() {
+			return this.selectedCategory === null ? this.t('notes', 'Categories') : NotesService.categoryLabel(this.selectedCategory)
 		},
 	},
 
 	methods: {
+		categoryTitle(category) {
+			return NotesService.categoryLabel(category)
+		},
+
+		onToggleCategories() {
+			this.open = !this.open
+		},
+
 		onSelectCategory(category) {
 			this.open = false
 			this.$emit('category-selected', category)

diff --git a/src/components/NavigationList.vue b/src/components/NavigationList.vue
@@ -36,11 +36,15 @@
 
 		<!-- list of notes -->
 		<template v-for="item in noteItems">
-			<AppNavigationItem v-if="category!==null && category!==item.category"
-				:key="item.category" :item="categoryToItem(item.category)"
+			<AppNavigationCaption v-if="category!==null && category!==item.category"
+				:key="item.category"
+				icon="icon-files"
+				class="app-navigation-noclose"
+				:title="categoryToLabel(item.category)"
+				@click.native="$emit('category-selected', item.category)"
 			/>
 			<AppNavigationCaption v-if="category===null && item.timeslot"
-				:key="item.timeslot" :text="item.timeslot"
+				:key="item.timeslot" :title="item.timeslot"
 			/>
 			<NavigationNoteItem v-for="note in item.notes"
 				:key="note.id" :note="note"
@@ -53,7 +57,6 @@
 
 <script>
 import {
-	AppNavigationItem,
 	AppNavigationCaption,
 } from 'nextcloud-vue'
 import NavigationCategoriesItem from './NavigationCategoriesItem'
@@ -66,7 +69,6 @@ export default {
 
 	components: {
 		AppNavigationCaption,
-		AppNavigationItem,
 		NavigationCategoriesItem,
 		NavigationNoteItem,
 	},
@@ -145,14 +147,8 @@ export default {
 			]
 		},
 
-		categoryToItem(category) {
-			const label = '…/' + category.substring(this.category.length + 1)
-			return {
-				text: NotesService.categoryLabel(label),
-				classes: 'app-navigation-caption caption-item app-navigation-noclose',
-				icon: 'nav-icon-files',
-				action: this.$emit.bind(this, 'category-selected', category),
-			}
+		categoryToLabel(category) {
+			return NotesService.categoryLabel(category.substring(this.category.length + 1))
 		},
 
 		getTimeslotFromNote(note) {

diff --git a/src/components/NavigationNoteItem.vue b/src/components/NavigationNoteItem.vue
@@ -1,9 +1,27 @@
 <template>
-	<AppNavigationItem :item="item" :menu-open.sync="menuOpen" />
+	<AppNavigationItem
+		:title="title"
+		:icon="icon"
+		:menu-open.sync="menuOpen"
+		:to="{ name: 'note', params: { noteId: note.id.toString() } }"
+	>
+		<template slot="actions">
+			<ActionButton :icon="actionFavoriteIcon" @click="onToggleFavorite">
+				{{ actionFavoriteText }}
+			</ActionButton>
+			<ActionButton icon="icon-files-dark" @click="onCategorySelected">
+				{{ actionCategoryText }}
+			</ActionButton>
+			<ActionButton :icon="actionDeleteIcon" @click="onDeleteNote">
+				{{ t('notes', 'Delete note') }}
+			</ActionButton>
+		</template>
+	</AppNavigationItem>
 </template>
 
 <script>
 import {
+	ActionButton,
 	AppNavigationItem,
 } from 'nextcloud-vue'
 import NotesService from '../NotesService'
@@ -12,6 +30,7 @@ export default {
 	name: 'NavigationNoteItem',
 
 	components: {
+		ActionButton,
 		AppNavigationItem,
 	},
 
@@ -33,46 +52,38 @@ export default {
 	},
 
 	computed: {
-		item() {
+		icon() {
 			let icon = ''
 			if (this.note.error) {
 				icon = 'nav-icon icon-error-color'
 			} else if (this.note.favorite) {
 				icon = 'nav-icon icon-starred'
 			}
-			let iconActionFavorite = this.note.favorite ? 'icon-star-dark' : 'icon-starred'
+			return icon
+		},
+
+		title() {
+			return this.note.title + (this.note.unsaved ? ' *' : '')
+		},
+
+		actionFavoriteText() {
+			return this.note.favorite ? this.t('notes', 'Remove from favorites') : this.t('notes', 'Add to favorites')
+		},
+
+		actionFavoriteIcon() {
+			let icon = this.note.favorite ? 'icon-star-dark' : 'icon-starred'
 			if (this.loading.favorite) {
-				iconActionFavorite += ' loading'
-			}
-			return {
-				text: this.note.title + (this.note.unsaved ? ' *' : ''),
-				icon: icon,
-				router: {
-					name: 'note',
-					params: {
-						noteId: this.note.id.toString(),
-					},
-				},
-				utils: {
-					actions: [
-						{
-							text: this.note.favorite ? this.t('notes', 'Remove from favorites') : this.t('notes', 'Add to favorites'),
-							icon: iconActionFavorite,
-							action: this.onToggleFavorite,
-						},
-						{
-							text: NotesService.categoryLabel(this.note.category),
-							icon: 'icon-files-dark',
-							action: this.onCategorySelected,
-						},
-						{
-							text: this.t('notes', 'Delete note'),
-							icon: 'icon-delete' + (this.loading.delete ? ' loading' : ''),
-							action: this.onDeleteNote,
-						},
-					],
-				},
+				icon += ' loading'
 			}
+			return icon
+		},
+
+		actionCategoryText() {
+			return NotesService.categoryLabel(this.note.category)
+		},
+
+		actionDeleteIcon() {
+			return 'icon-delete' + (this.loading.delete ? ' loading' : '')
 		},
 	},
 

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
@@ -113,7 +113,7 @@ export default {
 				).length
 				return n('notes', '%n word', '%n words', wordCount)
 			} else {
-				return null
+				return ''
 			}
 		},
 		subtitle() {