Settings: Move Settings to NcAppSettingsDialog in favour of the

NcAppNavigationSettings

Signed-off-by: Jonathan Pagel <jonny_tischbein@systemli.org>

Author: theatischbein

src/App.vue

@@ -28,7 +28,15 @@
 			</template>
 
 			<template #footer>
-				<AppSettings v-if="!loading.notes && error !== true" @reload="reloadNotes" />
+				<ul class="app-navigation-entry__settings">
+					<NcAppNavigationItem
+						:title="t('notes', 'Notes settings')"
+						@click.prevent="openSettings"
+					>
+						<CogIcon slot="icon" :size="20" />
+					</NcAppNavigationItem>
+				</ul>
+				<AppSettings v-if="!loading.notes && error !== true" :open.sync="settingsVisible" @reload="reloadNotes" />
 			</template>
 		</NcAppNavigation>
 
@@ -59,6 +67,7 @@ import '@nextcloud/dialogs/dist/index.css'
 
 import InfoIcon from 'vue-material-design-icons/Information.vue'
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
+import CogIcon from 'vue-material-design-icons/Cog.vue'
 
 import AppSettings from './components/AppSettings.vue'
 import NavigationList from './components/NavigationList.vue'
@@ -83,6 +92,7 @@ export default {
 		NcAppNavigationNew,
 		NcAppNavigationItem,
 		NcContent,
+		CogIcon,
 		PlusIcon,
 	},
 
@@ -102,6 +112,7 @@ export default {
 			refreshTimer: null,
 			helpVisible: false,
 			editorHint: loadState('notes', 'editorHint', '') === 'yes' && window.OCA.Text?.createEditor,
+			settingsVisible: false,
 		}
 	},
 
@@ -252,6 +263,10 @@ export default {
 			this.helpVisible = true
 		},
 
+		openSettings() {
+			this.settingsVisible = true
+		},
+
 		onNewNote() {
 			if (this.loading.create) {
 				return
@@ -345,3 +360,14 @@ export default {
 	},
 }
 </script>
+
+<style scoped lang="scss">
+// Source for footer fix: https://github.com/nextcloud/server/blob/master/apps/files/src/views/Navigation.vue
+.app-navigation-entry__settings {
+	height: auto !important;
+	overflow: hidden !important;
+	padding-top: 0 !important;
+	// Prevent shrinking or growing
+	flex: 0 0 auto;
+}
+</style>

src/components/AppSettings.vue

@@ -1,8 +1,14 @@
 <template>
-	<NcAppNavigationSettings :title="t('notes', 'Notes settings')" :class="{ loading: saving }">
-		<div class="settings-block">
-			<p class="settings-hint">
-				<label for="notesPath">{{ t('notes', 'Folder to store your notes') }}</label>
+	<NcAppSettingsDialog
+		:title="t('notes', 'Notes settings')"
+		:class="{ loading: saving }"
+		:show-navigation="true"
+		:open="settingsOpen"
+		@update:open="setSettingsOpen($event)"
+	>
+		<NcAppSettingsSection id="notes-path-section" :title="t('notes', 'Notes path')">
+			<p class="app-settings-section__desc">
+				{{ t('notes', 'Folder to store your notes') }}
 			</p>
 			<form @submit.prevent="onChangeSettingsReload">
 				<input id="notesPath"
@@ -13,10 +19,10 @@
 					@change="onChangeSettingsReload"
 				><input type="submit" class="icon-confirm" value="">
 			</form>
-		</div>
-		<div class="settings-block">
-			<p class="settings-hint">
-				<label for="fileSuffix">{{ t('notes', 'File extension for new notes') }}</label>
+		</NcAppSettingsSection>
+		<NcAppSettingsSection id="file-suffix-section" :title="t('notes', 'File extension')">
+			<p class="app-settings-section__desc">
+				{{ t('notes', 'File extension for new notes') }}
 			</p>
 			<select id="fileSuffix" v-model="settings.fileSuffix" @change="onChangeSettings">
 				<option v-for="extension in extensions" :key="extension.value" :value="extension.value">
@@ -31,23 +37,24 @@
 				placeholder=".txt"
 				@change="onChangeSettings"
 			>
-		</div>
-		<div class="settings-block">
-			<p class="settings-hint">
-				<label for="noteMode">{{ t('notes', 'Display mode for notes') }}</label>
+		</NcAppSettingsSection>
+		<NcAppSettingsSection id="note-mode-section" :title="t('notes', 'Display mode')">
+			<p class="app-settings-section__desc">
+				{{ t('notes', 'Display mode for notes') }}
 			</p>
 			<select id="noteMode" v-model="settings.noteMode" @change="onChangeSettings">
 				<option v-for="mode in noteModes" :key="mode.value" :value="mode.value">
 					{{ mode.label }}
 				</option>
 			</select>
-		</div>
-	</NcAppNavigationSettings>
+		</NcAppSettingsSection>
+	</NcAppSettingsDialog>
 </template>
 
 <script>
 import {
-	NcAppNavigationSettings,
+	NcAppSettingsDialog,
+	NcAppSettingsSection,
 } from '@nextcloud/vue'
 
 import { setSettings } from '../NotesService.js'
@@ -57,7 +64,12 @@ export default {
 	name: 'AppSettings',
 
 	components: {
-		NcAppNavigationSettings,
+		NcAppSettingsDialog,
+		NcAppSettingsSection,
+	},
+
+	props: {
+		open: Boolean,
 	},
 
 	data() {
@@ -73,6 +85,7 @@ export default {
 				{ value: 'preview', label: t('notes', 'Open in preview mode') },
 			],
 			saving: false,
+			settingsOpen: this.open,
 		}
 	},
 
@@ -82,6 +95,12 @@ export default {
 		},
 	},
 
+	watch: {
+		open(newValue) {
+			this.settingsOpen = newValue
+		},
+	},
+
 	created() {
 		if (!window.OCA.Text?.createEditor) {
 			this.noteModes.splice(0, 1)
@@ -105,6 +124,11 @@ export default {
 					this.$emit('reload')
 				})
 		},
+
+		setSettingsOpen(newValue) {
+			this.settingsOpen = newValue
+			this.$emit('update:open', newValue)
+		},
 	},
 }
 </script>