Merge pull request #1344 from nextcloud/feature/vue-keyboards-page

Add keyboard shortcuts page

src/components/AppSettingsMenu.vue

@@ -19,8 +19,9 @@
 		</p>
 
 		<p class="app-settings-hint">
-			<a id="keyboard-shortcuts"
-			   href="">{{ t('mail','Keyboard shortcuts')}}</a>
+			<router-link :to="{ name: 'keyboardShortcuts' }">
+				{{ t('mail', 'Keyboard shortcuts') }}
+			</router-link>
 		</p>
 	</div>
 </template>

src/router.js

@@ -4,6 +4,7 @@ import {generateUrl} from 'nextcloud-server/dist/router'
 
 const AccountSettings = () => import('./views/AccountSettings')
 const Home = () => import('./views/Home')
+const KeyboardShortcuts = () => import('./views/KeyboardShortcuts')
 const Setup = () => import('./views/Setup')
 
 Vue.use(Router)
@@ -37,6 +38,11 @@ export default new Router({
 			name: 'accountSettings',
 			component: AccountSettings
 		},
+		{
+			path: '/keyboard-shortcuts',
+			name: 'keyboardShortcuts',
+			component: KeyboardShortcuts
+		},
 		{
 			path: '/setup',
 			name: 'setup',

src/views/KeyboardShortcuts.vue

+<template>
+	<div id="content" class="app-mail">
+		<app-navigation :menu="menu">
+			<AppSettingsMenu slot="settings-content"/>
+		</app-navigation>
+
+		<div id="app-content">
+			<div class="app-content-details">
+				<h2>{{ t('mail', 'Keyboard shortcuts') }}</h2>
+
+				<p>{{ t('mail', 'Speed up your Mail experience with these quick shortcuts.') }}</p>
+
+				<dl>
+					<div>
+						<dt><kbd>C</kbd></dt>
+						<dd>{{ t('mail', 'Compose new message') }}</dd>
+					</div>
+					<div>
+						<dt><kbd>K</kbd> or <kbd>←</kbd></dt>
+						<dd>{{ t('mail', 'Newer message') }}</dd>
+					</div>
+					<div>
+						<dt><kbd>J</kbd> or <kbd>→</kbd></dt>
+						<dd>{{ t('mail', 'Older message') }}</dd>
+					</div>
+
+					<div>
+						<dt><kbd>S</kbd></dt>
+						<dd>{{ t('mail', 'Toggle star') }}</dd>
+					</div>
+					<div>
+						<dt><kbd>U</kbd></dt>
+						<dd>{{ t('mail', 'Toggle unread') }}</dd>
+					</div>
+					<div>
+						<dt><kbd>Del</kbd></dt>
+						<dd>{{ t('mail', 'Delete') }}</dd>
+					</div>
+
+					<div>
+						<dt><kbd>Ctrl</kbd> + <kbd>F</kbd></dt>
+						<dd>{{ t('mail', 'Search') }}</dd>
+					</div>
+					<div>
+						<dt><kbd>Ctrl</kbd> + <kbd>Enter</kbd></dt>
+						<dd>{{ t('mail', 'Send') }}</dd>
+					</div>
+					<div>
+						<dt><kbd>R</kbd></dt>
+						<dd>{{ t('mail', 'Refresh') }}</dd>
+					</div>
+				</dl>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import {AppNavigation} from 'nextcloud-vue'
+
+	import AppSettingsMenu from '../components/AppSettingsMenu'
+	import SidebarItems from '../mixins/SidebarItems'
+
+	export default {
+		name: 'KeyboardShortcuts',
+		extends: SidebarItems,
+		components: {
+			AppNavigation,
+			AppSettingsMenu,
+		},
+		computed: {
+			menu () {
+				return this.buildMenu()
+			}
+		},
+	}
+</script>
+
+<style>
+</style>
\ No newline at end of file