AppHelp: Merge into settings dialog

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

Author: theatischbein

src/App.vue

@@ -17,14 +17,6 @@
 					@category-selected="onSelectCategory"
 					@note-deleted="onNoteDeleted"
 				/>
-				<NcAppNavigationItem
-					:title="t('notes', 'Help')"
-					:pinned="true"
-					@click.prevent="openHelp"
-				>
-					<InfoIcon slot="icon" :size="20" />
-				</NcAppNavigationItem>
-				<AppHelp :open.sync="helpVisible" />
 			</template>
 
 			<template #footer>
@@ -71,7 +63,6 @@ import CogIcon from 'vue-material-design-icons/Cog.vue'
 
 import AppSettings from './components/AppSettings.vue'
 import NavigationList from './components/NavigationList.vue'
-import AppHelp from './components/AppHelp.vue'
 import EditorHint from './components/Modal/EditorHint.vue'
 
 import { config } from './config.js'
@@ -82,7 +73,6 @@ export default {
 	name: 'App',
 
 	components: {
-		AppHelp,
 		AppSettings,
 		EditorHint,
 		InfoIcon,
@@ -110,7 +100,6 @@ export default {
 			undoTimer: null,
 			deletedNotes: [],
 			refreshTimer: null,
-			helpVisible: false,
 			editorHint: loadState('notes', 'editorHint', '') === 'yes' && window.OCA.Text?.createEditor,
 			settingsVisible: false,
 		}
@@ -259,10 +248,6 @@ export default {
 			}
 		},
 
-		openHelp() {
-			this.helpVisible = true
-		},
-
 		openSettings() {
 			this.settingsVisible = true
 		},

src/components/AppHelp.vue

@@ -6,6 +6,17 @@
 		:open="settingsOpen"
 		@update:open="setSettingsOpen($event)"
 	>
+		<NcAppSettingsSection id="help-basics" :title="t('notes', 'Basics')">
+				<div class="feature icon-add">
+					{{ t('notes', 'Start writing a note by clicking on “{newnote}” in the app navigation.', { newnote: t('notes', 'New note') }) }}
+				</div>
+				<div class="feature icon-fullscreen">
+					{{ t('notes', 'Write down your thoughts without any distractions.') }}
+				</div>
+				<div class="feature icon-files-dark">
+					{{ t('notes', 'Organize your notes in categories.') }}
+				</div>
+		</NcAppSettingsSection>
 		<NcAppSettingsSection id="notes-path-section" :title="t('notes', 'Notes path')">
 			<p class="app-settings-section__desc">
 				{{ t('notes', 'Folder to store your notes') }}
@@ -48,6 +59,24 @@
 				</option>
 			</select>
 		</NcAppSettingsSection>
+		<NcAppSettingsSection id="help-shortcuts" :title="t('notes', 'Shortcuts')">
+			<div class="feature icon-toggle-filelist">
+				{{ t('notes', 'Use shortcuts to quickly navigate this app.') }}
+			</div>
+			<table class="notes-help">
+				<tr>
+					<th>{{ t('notes', 'Shortcut') }}</th>
+					<th>{{ t('notes', 'Action') }}</th>
+				</tr>
+				<tr v-for="(item, index) in shortcuts" :key="index">
+					<td>{{ item.shortcut }}</td>
+					<td>{{ item.action }}</td>
+				</tr>
+			</table>
+		</NcAppSettingsSection>
+		<NcAppSettingsSection id="help-apps" :title="t('notes', 'Mobile apps')">
+			<HelpMobile />
+		</NcAppSettingsSection>
 	</NcAppSettingsDialog>
 </template>
 
@@ -59,13 +88,15 @@ import {
 
 import { setSettings } from '../NotesService.js'
 import store from '../store.js'
+import HelpMobile from './HelpMobile.vue'
 
 export default {
 	name: 'AppSettings',
 
 	components: {
 		NcAppSettingsDialog,
 		NcAppSettingsSection,
+		HelpMobile,
 	},
 
 	props: {
@@ -86,6 +117,20 @@ export default {
 			],
 			saving: false,
 			settingsOpen: this.open,
+			shortcuts: [
+				{ shortcut: t('notes', 'CTRL') + '+B', action: t('notes', 'Make the selection bold') },
+				{ shortcut: t('notes', 'CTRL') + '+I', action: t('notes', 'Make the selection italic') },
+				{ shortcut: t('notes', 'CTRL') + '+\'', action: t('notes', 'Wrap the selection in quotes') },
+				{ shortcut: t('notes', 'CTRL') + '+' + t('notes', 'ALT') + '+C', action: t('notes', 'The selection will be turned into monospace') },
+				{ shortcut: t('notes', 'CTRL') + '+E', action: t('notes', 'Remove any styles from the selected text') },
+				{ shortcut: t('notes', 'CTRL') + '+L', action: t('notes', 'Makes the current line a list element') },
+				{ shortcut: t('notes', 'CTRL') + '+' + t('notes', 'ALT') + '+L', action: t('notes', 'Makes the current line a list element with a number') },
+				{ shortcut: t('notes', 'CTRL') + '+H', action: t('notes', 'Toggle heading for current line') },
+				{ shortcut: t('notes', 'CTRL') + '+' + t('notes', 'SHIFT') + '+H', action: t('notes', 'Set the current line as a big heading') },
+				{ shortcut: t('notes', 'CTRL') + '+K', action: t('notes', 'Insert link') },
+				{ shortcut: t('notes', 'CTRL') + '+' + t('notes', 'ALT') + '+I', action: t('notes', 'Insert image') },
+				{ shortcut: t('notes', 'CTRL') + '+/', action: t('notes', 'Switch between editor and viewer') },
+			],
 		}
 	},