Skip to content

Commit 66d5faf

Browse files
sorbaughsorbaugh
authored
Merge pull request #56377 from nextcloud/refactor/files-settings
refactor(files): move hotkeys in app settings to new `NcAppSettingsShortcutsSection`
2 parents 9fdd825 + a15adb1 commit 66d5faf

File tree

179 files changed

+440
-654
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

179 files changed

+440
-654
lines changed

‎apps/files/src/actions/deleteAction.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import NetworkOffSvg from '@mdi/svg/svg/network-off.svg?raw'
99
import TrashCanSvg from '@mdi/svg/svg/trash-can-outline.svg?raw'
1010
import { FileAction, Permission } from '@nextcloud/files'
1111
import { loadState } from '@nextcloud/initial-state'
12+
import { t } from '@nextcloud/l10n'
1213
import PQueue from 'p-queue'
1314
import { TRASHBIN_VIEW_ID } from '../../../files_trashbin/src/files_views/trashbinView.ts'
1415
import logger from '../logger.ts'
@@ -110,4 +111,9 @@ export const action = new FileAction({
110111

111112
destructive: true,
112113
order: 100,
114+
115+
hotkey: {
116+
description: t('files', 'Delete'),
117+
key: 'Delete',
118+
},
113119
})

‎apps/files/src/actions/favoriteAction.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@ export const ACTION_FAVORITE = 'favorite'
2121

2222
const queue = new PQueue({ concurrency: 5 })
2323

24-
// If any of the nodes is not favorited, we display the favorite action.
2524
/**
25+
* If any of the nodes is not favorited, we display the favorite action.
2626
*
27-
* @param nodes
27+
* @param nodes - The nodes to check
2828
*/
2929
function shouldFavorite(nodes: Node[]): boolean {
3030
return nodes.some((node) => node.attributes.favorite !== 1)
@@ -124,4 +124,9 @@ export const action = new FileAction({
124124
},
125125

126126
order: -50,
127+
128+
hotkey: {
129+
description: t('files', 'Add or remove favorite'),
130+
key: 'S',
131+
},
127132
})

‎apps/files/src/actions/renameAction.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,4 +51,9 @@ export const action = new FileAction({
5151
},
5252

5353
order: 10,
54+
55+
hotkey: {
56+
description: t('files', 'Rename'),
57+
key: 'F2',
58+
},
5459
})

‎apps/files/src/components/FilesAppSettingsEntry.vue‎ renamed to ‎apps/files/src/components/FilesAppSettings/FilesAppSettingsEntry.vue‎

File renamed without changes.

‎apps/files/src/components/FilesAppSettings/FilesAppSettingsShortcuts.vue‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!--
2+
- SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
3+
- SPDX-License-Identifier: AGPL-3.0-or-later
4+
-->
5+
6+
<script setup lang="ts">
7+
import type { IHotkeyConfig } from '@nextcloud/files'
8+
9+
import { getFileActions } from '@nextcloud/files'
10+
import { t } from '@nextcloud/l10n'
11+
import NcAppSettingsShortcutsSection from '@nextcloud/vue/components/NcAppSettingsShortcutsSection'
12+
import NcHotkey from '@nextcloud/vue/components/NcHotkey'
13+
import NcHotkeyList from '@nextcloud/vue/components/NcHotkeyList'
14+
15+
const actionHotkeys = getFileActions()
16+
.filter((action) => !!action.hotkey)
17+
.sort((a, b) => (a.order || 0) - (b.order || 0))
18+
.map((action) => ({
19+
id: action.id,
20+
label: action.hotkey!.description,
21+
hotkey: hotkeyToString(action.hotkey!),
22+
}))
23+
24+
/**
25+
* Convert a hotkey configuration to a hotkey string.
26+
*
27+
* @param hotkey - The hotkey configuration
28+
*/
29+
function hotkeyToString(hotkey: IHotkeyConfig): string {
30+
const parts: string[] = []
31+
if (hotkey.ctrl) {
32+
parts.push('Control')
33+
}
34+
if (hotkey.alt) {
35+
parts.push('Alt')
36+
}
37+
if (hotkey.shift) {
38+
parts.push('Shift')
39+
}
40+
parts.push(hotkey.key)
41+
return parts.join(' ')
42+
}
43+
</script>
44+
45+
<template>
46+
<NcAppSettingsShortcutsSection>
47+
<NcHotkeyList :label="t('files', 'Actions')">
48+
<NcHotkey :label="t('files', 'File actions')" hotkey="A" />
49+
50+
<NcHotkey
51+
v-for="hotkey of actionHotkeys"
52+
:key="hotkey.id"
53+
:label="hotkey.label"
54+
:hotkey="hotkey.hotkey" />
55+
</NcHotkeyList>
56+
57+
<NcHotkeyList :label="t('files', 'Selection')">
58+
<NcHotkey :label="t('files', 'Select all files')" hotkey="Control A" />
59+
<NcHotkey :label="t('files', 'Deselect all')" hotkey="Escape" />
60+
<NcHotkey :label="t('files', 'Select or deselect')" hotkey="Control Space" />
61+
<NcHotkey :label="t('files', 'Select a range')" hotkey="Control Shift Space" />
62+
</NcHotkeyList>
63+
64+
<NcHotkeyList :label="t('files', 'Navigation')">
65+
<NcHotkey :label="t('files', 'Go to parent folder')" hotkey="Alt ArrowUp" />
66+
<NcHotkey :label="t('files', 'Go to file above')" hotkey="ArrowUp" />
67+
<NcHotkey :label="t('files', 'Go to file below')" hotkey="ArrowDown" />
68+
<NcHotkey :label="t('files', 'Go left in grid')" hotkey="ArrowLeft" />
69+
<NcHotkey :label="t('files', 'Go right in grid')" hotkey="ArrowRight" />
70+
</NcHotkeyList>
71+
72+
<NcHotkeyList :label="t('files', 'View')">
73+
<NcHotkey :label="t('files', 'Toggle grid view')" hotkey="V" />
74+
<NcHotkey :label="t('files', 'Open file sidebar')" hotkey="D" />
75+
<NcHotkey :label="t('files', 'Show those shortcuts')" hotkey="?" />
76+
</NcHotkeyList>
77+
</NcAppSettingsShortcutsSection>
78+
</template>

‎apps/files/src/views/FilesAppSettings.vue‎

Lines changed: 6 additions & 158 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
</NcAppSettingsSection>
5555

5656
<!-- Appearance -->
57-
<NcAppSettingsSection id="settings" :name="t('files', 'Appearance')">
57+
<NcAppSettingsSection id="appearance" :name="t('files', 'Appearance')">
5858
<NcCheckboxRadioSwitch
5959
data-cy-files-settings-setting="show_hidden"
6060
:checked="userConfig.show_hidden"
@@ -139,161 +139,7 @@
139139
</NcCheckboxRadioSwitch>
140140
</NcAppSettingsSection>
141141

142-
<NcAppSettingsSection
143-
id="shortcuts"
144-
:name="t('files', 'Keyboard shortcuts')">
145-
<h3>{{ t('files', 'Actions') }}</h3>
146-
<dl>
147-
<div>
148-
<dt class="shortcut-key">
149-
<kbd>a</kbd>
150-
</dt>
151-
<dd class="shortcut-description">
152-
{{ t('files', 'File actions') }}
153-
</dd>
154-
</div>
155-
<div>
156-
<dt class="shortcut-key">
157-
<kbd>F2</kbd>
158-
</dt>
159-
<dd class="shortcut-description">
160-
{{ t('files', 'Rename') }}
161-
</dd>
162-
</div>
163-
<div>
164-
<dt class="shortcut-key">
165-
<kbd>Del</kbd>
166-
</dt>
167-
<dd class="shortcut-description">
168-
{{ t('files', 'Delete') }}
169-
</dd>
170-
</div>
171-
<div>
172-
<dt class="shortcut-key">
173-
<kbd>s</kbd>
174-
</dt>
175-
<dd class="shortcut-description">
176-
{{ t('files', 'Add or remove favorite') }}
177-
</dd>
178-
</div>
179-
<div v-if="isSystemtagsEnabled">
180-
<dt class="shortcut-key">
181-
<kbd>t</kbd>
182-
</dt>
183-
<dd class="shortcut-description">
184-
{{ t('files', 'Manage tags') }}
185-
</dd>
186-
</div>
187-
</dl>
188-
189-
<h3>{{ t('files', 'Selection') }}</h3>
190-
<dl>
191-
<div>
192-
<dt class="shortcut-key">
193-
<kbd>Ctrl</kbd> + <kbd>A</kbd>
194-
</dt>
195-
<dd class="shortcut-description">
196-
{{ t('files', 'Select all files') }}
197-
</dd>
198-
</div>
199-
<div>
200-
<dt class="shortcut-key">
201-
<kbd>ESC</kbd>
202-
</dt>
203-
<dd class="shortcut-description">
204-
{{ t('files', 'Deselect all') }}
205-
</dd>
206-
</div>
207-
<div>
208-
<dt class="shortcut-key">
209-
<kbd>Ctrl</kbd> + <kbd>Space</kbd>
210-
</dt>
211-
<dd class="shortcut-description">
212-
{{ t('files', 'Select or deselect') }}
213-
</dd>
214-
</div>
215-
<div>
216-
<dt class="shortcut-key">
217-
<kbd>Ctrl</kbd> + <kbd>Shift</kbd> <span>+ <kbd>Space</kbd></span>
218-
</dt>
219-
<dd class="shortcut-description">
220-
{{ t('files', 'Select a range') }}
221-
</dd>
222-
</div>
223-
</dl>
224-
225-
<h3>{{ t('files', 'Navigation') }}</h3>
226-
<dl>
227-
<div>
228-
<dt class="shortcut-key">
229-
<kbd>Alt</kbd> + <kbd>↑</kbd>
230-
</dt>
231-
<dd class="shortcut-description">
232-
{{ t('files', 'Go to parent folder') }}
233-
</dd>
234-
</div>
235-
<div>
236-
<dt class="shortcut-key">
237-
<kbd>↑</kbd>
238-
</dt>
239-
<dd class="shortcut-description">
240-
{{ t('files', 'Go to file above') }}
241-
</dd>
242-
</div>
243-
<div>
244-
<dt class="shortcut-key">
245-
<kbd>↓</kbd>
246-
</dt>
247-
<dd class="shortcut-description">
248-
{{ t('files', 'Go to file below') }}
249-
</dd>
250-
</div>
251-
<div>
252-
<dt class="shortcut-key">
253-
<kbd>←</kbd>
254-
</dt>
255-
<dd class="shortcut-description">
256-
{{ t('files', 'Go left in grid') }}
257-
</dd>
258-
</div>
259-
<div>
260-
<dt class="shortcut-key">
261-
<kbd>→</kbd>
262-
</dt>
263-
<dd class="shortcut-description">
264-
{{ t('files', 'Go right in grid') }}
265-
</dd>
266-
</div>
267-
</dl>
268-
269-
<h3>{{ t('files', 'View') }}</h3>
270-
<dl>
271-
<div>
272-
<dt class="shortcut-key">
273-
<kbd>V</kbd>
274-
</dt>
275-
<dd class="shortcut-description">
276-
{{ t('files', 'Toggle grid view') }}
277-
</dd>
278-
</div>
279-
<div>
280-
<dt class="shortcut-key">
281-
<kbd>D</kbd>
282-
</dt>
283-
<dd class="shortcut-description">
284-
{{ t('files', 'Open file sidebar') }}
285-
</dd>
286-
</div>
287-
<div>
288-
<dt class="shortcut-key">
289-
<kbd>?</kbd>
290-
</dt>
291-
<dd class="shortcut-description">
292-
{{ t('files', 'Show those shortcuts') }}
293-
</dd>
294-
</div>
295-
</dl>
296-
</NcAppSettingsSection>
142+
<FilesAppSettingsShortcuts />
297143
</NcAppSettingsDialog>
298144
</template>
299145

@@ -310,14 +156,16 @@ import NcAppSettingsSection from '@nextcloud/vue/components/NcAppSettingsSection
310156
import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
311157
import NcInputField from '@nextcloud/vue/components/NcInputField'
312158
import Clipboard from 'vue-material-design-icons/ContentCopy.vue'
313-
import FilesAppSettingsEntry from '../components/FilesAppSettingsEntry.vue'
159+
import FilesAppSettingsEntry from '../components/FilesAppSettings/FilesAppSettingsEntry.vue'
160+
import FilesAppSettingsShortcuts from '../components/FilesAppSettings/FilesAppSettingsShortcuts.vue'
314161
import { useUserConfigStore } from '../store/userconfig.ts'
315162
316163
export default {
317164
name: 'FilesAppSettings',
318165
components: {
319166
Clipboard,
320167
FilesAppSettingsEntry,
168+
FilesAppSettingsShortcuts,
321169
NcAppSettingsDialog,
322170
NcAppSettingsSection,
323171
NcCheckboxRadioSwitch,
@@ -385,7 +233,7 @@ export default {
385233
this.settings.forEach((setting) => setting.open())
386234
},
387235
388-
beforeDestroy() {
236+
beforeUnmount() {
389237
// Update the settings API entries state
390238
this.settings.forEach((setting) => setting.close())
391239
},

0 commit comments

Comments
 (0)