From f94fbc7d09d4039538b1d508c2db2fb50a861b0a Mon Sep 17 00:00:00 2001 From: skjnldsv Date: Fri, 13 Dec 2024 12:09:44 +0100 Subject: feat(files): add keyboard shortcuts helper section Signed-off-by: skjnldsv --- apps/files/src/views/Navigation.vue | 2 +- apps/files/src/views/Settings.vue | 157 +++++++++++++++++++++++++++++++++++- 2 files changed, 155 insertions(+), 4 deletions(-) (limited to 'apps/files/src') diff --git a/apps/files/src/views/Navigation.vue b/apps/files/src/views/Navigation.vue index 1420e8e1d9e..4fa4f72fe3c 100644 --- a/apps/files/src/views/Navigation.vue +++ b/apps/files/src/views/Navigation.vue @@ -16,7 +16,7 @@ - diff --git a/apps/files/src/views/Settings.vue b/apps/files/src/views/Settings.vue index c64f3b898b2..0ff7a56e37d 100644 --- a/apps/files/src/views/Settings.vue +++ b/apps/files/src/views/Settings.vue @@ -82,6 +82,129 @@ + + + {{ t('files', 'Speed up your Files experience with these quick shortcuts.') }} + +

{{ t('files', 'Actions') }}

+
+
+
a
+
+ {{ t('files', 'Open the actions menu for a file') }} +
+
+
+
F2
+
+ {{ t('files', 'Rename a file') }} +
+
+
+
Del
+
+ {{ t('files', 'Delete a file') }} +
+
+
+
s
+
+ {{ t('files', 'Favorite or remove a file from favorites') }} +
+
+
+
t
+
+ {{ t('files', 'Manage tags for a file') }} +
+
+
+ +

{{ t('files', 'Selection') }}

+
+
+
Ctrl + A
+
+ {{ t('files', 'Select all files') }} +
+
+
+
ESC
+
+ {{ t('files', 'Deselect all files') }} +
+
+
+
Ctrl + Space
+
+ {{ t('files', 'Select or deselect a file') }} +
+
+
+
Ctrl + Shift + Space
+
+ {{ t('files', 'Select a range of files') }} +
+
+
+ +

{{ t('files', 'Navigation') }}

+
+
+
↑
+
+ {{ t('files', 'Navigate to the file above') }} +
+
+
+
Alt + ↑
+
+ {{ t('files', 'Navigate to the parent folder') }} +
+
+
+
↓
+
+ {{ t('files', 'Navigate to the file below') }} +
+
+
+
←
+
+ {{ t('files', 'Navigate to the file on the left (in grid mode)') }} +
+
+
+
→
+
+ {{ t('files', 'Navigate to the file on the right (in grid mode)') }} +
+
+
+ +

{{ t('files', 'View') }}

+
+
+
V
+
+ {{ t('files', 'Toggle the grid view') }} +
+
+
+
D
+
+ {{ t('files', 'Open the sidebar for a file') }} +
+
+
+
?
+
+ {{ t('files', 'Show those shortcuts') }} +
+
+
+ @@ -95,9 +218,10 @@ import Setting from '../components/Setting.vue' import { generateRemoteUrl, generateUrl } from '@nextcloud/router' import { getCurrentUser } from '@nextcloud/auth' -import { showError, showSuccess } from '@nextcloud/dialogs' -import { translate } from '@nextcloud/l10n' import { loadState } from '@nextcloud/initial-state' +import { showError, showSuccess } from '@nextcloud/dialogs' +import { t } from '@nextcloud/l10n' +import { useHotKey } from '@nextcloud/vue/dist/Composables/useHotKey.js' import { useUserConfigStore } from '../store/userconfig.ts' export default { @@ -122,6 +246,7 @@ export default { const userConfigStore = useUserConfigStore() return { userConfigStore, + t, } }, @@ -145,6 +270,14 @@ export default { }, }, + created() { + // ? opens the settings dialog on the keyboard shortcuts section + useHotKey('?', this.showKeyboardShortcuts, { + stop: true, + prevent: true, + }) + }, + beforeMount() { // Update the settings API entries state this.settings.forEach(setting => setting.open()) @@ -181,7 +314,15 @@ export default { }, 5000) }, - t: translate, + async showKeyboardShortcuts() { + this.$emit('update:open', true) + + await this.$nextTick() + document.getElementById('settings-section_shortcuts').scrollIntoView({ + behavior: 'smooth', + inline: 'nearest', + }) + }, }, } @@ -190,4 +331,14 @@ export default { .setting-link:hover { text-decoration: underline; } + +.shortcut-key { + width: 160px; + // some shortcuts are too long to fit in one line + white-space: normal; + span { + // force portion of a shortcut on a new line for nicer display + white-space: nowrap; + } +} -- cgit v1.2.3