Added option to have all categories always visible in the navigation list

Signed-off-by: Joachim von Eichborn <joachimeichborn@users.noreply.github.com>

Author: joachimeichborn

l10n/de_DE.js

@@ -20,6 +20,8 @@ OC.L10N.register(
     "File extension for new notes" : "Dateiendung für neue Notizen",
     "Display mode for notes" : "Anzeigemodus für Notizen",
     "User defined" : "Benutzerdefiniert",
+    "Always show all categories" : "Immer alle Kategorien anzeigen",
+    "Collapse categories" : "Kategorien einklappen",
     "Open in edit mode" : "Im Bearbeitungsmodus öffnen",
     "Open in preview mode" : "Im Vorschaumodus öffnen",
     "No notes yet" : "Noch keine Notizen vorhanden",

l10n/de_DE.json

@@ -18,6 +18,8 @@
     "File extension for new notes" : "Dateiendung für neue Notizen",
     "Display mode for notes" : "Anzeigemodus für Notizen",
     "User defined" : "Benutzerdefiniert",
+    "Always show all categories" : "Immer alle Kategorien anzeigen",
+    "Collapse categories" : "Kategorien einklappen",
     "Open in edit mode" : "Im Bearbeitungsmodus öffnen",
     "Open in preview mode" : "Im Vorschaumodus öffnen",
     "No notes yet" : "Noch keine Notizen vorhanden",

lib/Service/SettingsService.php

@@ -46,6 +46,7 @@ public function __construct(
 					return implode(DIRECTORY_SEPARATOR, $path);
 				},
 			],
+			'categoriesMode' => $this->getListAttrs('visible', 'collapsed'),
 			'noteMode' => $this->getListAttrs('edit', 'preview'),
 			'customSuffix' => [
 				'default' => '.txt',

src/components/AppSettings.vue

@@ -32,6 +32,16 @@
 				@change="onChangeSettings"
 			>
 		</div>
+		<div class="settings-block">
+			<p class="settings-hint">
+				<label for="categoriesMode">{{ t('notes', 'Display mode for categories') }}</label>
+			</p>
+			<select id="categoriesMode" v-model="settings.categoriesMode" @change="onChangeSettings">
+				<option v-for="mode in categoriesModes" :key="mode.value" :value="mode.value">
+					{{ mode.label }}
+				</option>
+			</select>
+		</div>
 		<div class="settings-block">
 			<p class="settings-hint">
 				<label for="noteMode">{{ t('notes', 'Display mode for notes') }}</label>
@@ -67,6 +77,10 @@ export default {
 				{ value: '.md', label: '.md' },
 				{ value: 'custom', label: t('notes', 'User defined') },
 			],
+			categoriesModes: [
+				{ value: 'visible', label: t('notes', 'Always show all categories') },
+				{ value: 'collapsed', label: t('notes', 'Collapse categories') },
+			],
 			noteModes: [
 				{ value: 'edit', label: t('notes', 'Open in edit mode') },
 				{ value: 'preview', label: t('notes', 'Open in preview mode') },

src/components/NavigationCategoriesItem.vue

@@ -8,46 +8,27 @@
 		:allow-collapse="true"
 		@click.prevent.stop="onToggleCategories"
 	>
-		<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>
+		<NavigationCategoriesList
+			:selected-category="selectedCategory"
+			@category-selected="onSelectCategory"
+		/>
 	</AppNavigationItem>
 </template>
 
 <script>
 import {
 	AppNavigationItem,
-	AppNavigationCounter,
 } from '@nextcloud/vue'
 
-import { getCategories } from '../NotesService'
 import { categoryLabel } from '../Util'
-
-import store from '../store'
+import NavigationCategoriesList from './NavigationCategoriesList.vue'
 
 export default {
 	name: 'NavigationCategoriesItem',
 
 	components: {
 		AppNavigationItem,
-		AppNavigationCounter,
+		NavigationCategoriesList,
 	},
 
 	props: {
@@ -64,14 +45,6 @@ export default {
 	},
 
 	computed: {
-		numNotes() {
-			return store.getters.numNotes()
-		},
-
-		categories() {
-			return getCategories(1, true)
-		},
-
 		title() {
 			return this.selectedCategory === null ? this.t('notes', 'Categories') : categoryLabel(this.selectedCategory)
 		},

src/components/NavigationCategoriesList.vue

@@ -0,0 +1,89 @@
+<template>
+	<Fragment class="app-navigation-noclose separator-below">
+		<AppNavigationItem
+			:title="t('notes', 'All notes')"
+			icon="icon-recent"
+			:class="{ active: null === selectedCategory }"
+			@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'"
+			:class="{ active: category.name === selectedCategory }"
+			@click.prevent.stop="onSelectCategory(category.name)"
+		>
+			<AppNavigationCounter slot="counter">
+				{{ category.count }}
+			</AppNavigationCounter>
+		</AppNavigationItem>
+
+		<AppNavigationSpacer v-if="showSpacer" class="separator-above" />
+	</Fragment>
+</template>
+
+<script>
+import {
+	AppNavigationItem,
+	AppNavigationCounter,
+	AppNavigationSpacer,
+} from '@nextcloud/vue'
+import { Fragment } from 'vue-fragment'
+
+import { getCategories } from '../NotesService'
+import { categoryLabel } from '../Util'
+
+import store from '../store'
+
+export default {
+	name: 'NavigationCategoriesList',
+
+	components: {
+		Fragment,
+		AppNavigationItem,
+		AppNavigationCounter,
+		AppNavigationSpacer,
+	},
+
+	props: {
+		selectedCategory: {
+			type: String,
+			default: null,
+		},
+		showSpacer: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	computed: {
+		numNotes() {
+			return store.getters.numNotes()
+		},
+
+		categories() {
+			return getCategories(1, true)
+		},
+	},
+
+	methods: {
+		categoryTitle(category) {
+			return categoryLabel(category)
+		},
+
+		onSelectCategory(category) {
+			this.$emit('category-selected', category)
+		},
+	},
+}
+</script>
+<style scoped>
+.separator-above {
+	border-top: 1px solid var(--color-border);
+}
+</style>

src/components/NavigationList.vue

@@ -2,11 +2,18 @@
 	<Fragment>
 		<!-- collapsible categories -->
 		<NavigationCategoriesItem
-			v-if="numNotes"
+			v-if="numNotes && showCollapsed"
 			:selected-category="category"
 			@category-selected="$emit('category-selected', $event)"
 		/>
 
+		<NavigationCategoriesList
+			v-if="numNotes && !showCollapsed"
+			:selected-category="category"
+			:show-spacer="true"
+			@category-selected="$emit('category-selected', $event)"
+		/>
+
 		<!-- list of notes -->
 		<template v-for="item in noteItems">
 			<AppNavigationCaption v-if="category!==null && category!==item.category"
@@ -45,6 +52,7 @@ import { Fragment } from 'vue-fragment'
 
 import { categoryLabel } from '../Util'
 import NavigationCategoriesItem from './NavigationCategoriesItem'
+import NavigationCategoriesList from './NavigationCategoriesList'
 import NavigationNoteItem from './NavigationNoteItem'
 import store from '../store'
 
@@ -58,6 +66,7 @@ export default {
 		AppNavigationItem,
 		Fragment,
 		NavigationCategoriesItem,
+		NavigationCategoriesList,
 		NavigationNoteItem,
 	},
 
@@ -86,6 +95,10 @@ export default {
 	},
 
 	computed: {
+		showCollapsed() {
+			return store.state.app.settings.categoriesMode === 'collapsed'
+		},
+
 		numNotes() {
 			return store.getters.numNotes()
 		},