From f55736780e1ed1531cd8ba228374ae5829a16edf Mon Sep 17 00:00:00 2001 From: "julia.kirschenheuter" Date: Tue, 11 Nov 2025 18:53:41 +0100 Subject: [PATCH] feat(ui): adapt notes settings to new UI components Signed-off-by: julia.kirschenheuter --- src/components/AppSettings.vue | 184 +++++++++++++++++++-------------- src/components/HelpMobile.vue | 65 ++++++------ 2 files changed, 140 insertions(+), 109 deletions(-) diff --git a/src/components/AppSettings.vue b/src/components/AppSettings.vue index 4d086dd48..3dc7fa110 100644 --- a/src/components/AppSettings.vue +++ b/src/components/AppSettings.vue @@ -9,77 +9,79 @@ :class="{ loading: saving }" :show-navigation="true" :open="settingsOpen" + :legacy="false" @update:open="setSettingsOpen($event)" > - -
- {{ t('notes', 'Start writing a note by clicking on “{newnote}” in the app navigation.', { newnote: t('notes', 'New note') }) }} -
-
- {{ t('notes', 'Write down your thoughts without any distractions.') }} -
-
- {{ t('notes', 'Organize your notes in categories.') }} -
- - -

- {{ t('notes', 'Folder to store your notes') }} -

- + - - -

- {{ t('notes', 'File extension for new notes') }} -

- - + + + + + + + + + /> + + + + + + + + - -

- {{ t('notes', 'Display mode for notes') }} -

- - - -
- {{ t('notes', 'Use shortcuts to quickly navigate this app.') }} -
- - - - - - - - - -
{{ t('notes', 'Shortcut') }}{{ t('notes', 'Action') }}
{{ item.shortcut }}{{ item.action }}
- - + + + + + + + + @@ -87,6 +89,15 @@ import { NcAppSettingsDialog, NcAppSettingsSection, + NcAppSettingsShortcutsSection, + NcHotkeyList, + NcHotkey, + NcRadioGroup, + NcRadioGroupButton, + NcFormBox, + NcFormBoxButton, + NcFormGroup, + NcTextField, } from '@nextcloud/vue' import { getFilePickerBuilder } from '@nextcloud/dialogs' @@ -94,14 +105,31 @@ import { getFilePickerBuilder } from '@nextcloud/dialogs' import { setSettings } from '../NotesService.js' import store from '../store.js' import HelpMobile from './HelpMobile.vue' +import EyeOutlineIcon from 'vue-material-design-icons/EyeOutline.vue' +import FormatAlignLeftIcon from 'vue-material-design-icons/FormatAlignLeft.vue' +import NewspaperVariantOutlineIcon from 'vue-material-design-icons/NewspaperVariantOutline.vue' +import FolderOpenOutlineIcon from 'vue-material-design-icons/FolderOpenOutline.vue' export default { name: 'AppSettings', components: { + NcTextField, NcAppSettingsDialog, NcAppSettingsSection, HelpMobile, + NcAppSettingsShortcutsSection, + NcHotkeyList, + NcHotkey, + NcRadioGroup, + NcRadioGroupButton, + NcFormBox, + NcFormBoxButton, + NcFormGroup, + EyeOutlineIcon, + FormatAlignLeftIcon, + NewspaperVariantOutlineIcon, + FolderOpenOutlineIcon, }, props: { @@ -113,28 +141,28 @@ export default { extensions: [ { value: '.md', label: '.md' }, { value: '.txt', label: '.txt' }, - { value: 'custom', label: t('notes', 'User defined') }, + { value: 'custom', label: t('notes', 'Custom') }, ], noteModes: [ - { value: 'rich', label: t('notes', 'Open in rich text mode') }, - { value: 'edit', label: t('notes', 'Open in edit mode') }, - { value: 'preview', label: t('notes', 'Open in preview mode') }, + { value: 'rich', label: t('notes', 'Rich text'), icon: 'NewspaperVariantOutlineIcon' }, + { value: 'edit', label: t('notes', 'Plain text'), icon: 'FormatAlignLeftIcon' }, + { value: 'preview', label: t('notes', 'Preview'), icon: 'EyeOutlineIcon' }, ], 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') }, + { shortcut: 'Control B', action: t('notes', 'Make the selection bold') }, + { shortcut: 'Control I', action: t('notes', 'Make the selection italic') }, + { shortcut: 'Control +', action: t('notes', 'Wrap the selection in quotes') }, + { shortcut: 'Control Alt C', action: t('notes', 'The selection will be turned into monospace') }, + { shortcut: 'Control E', action: t('notes', 'Remove any styles from the selected text') }, + { shortcut: 'Control L', action: t('notes', 'Makes the current line a list element') }, + { shortcut: 'Control Alt L', action: t('notes', 'Makes the current line a list element with a number') }, + { shortcut: 'Control H', action: t('notes', 'Toggle heading for current line') }, + { shortcut: 'Control Shift H', action: t('notes', 'Set the current line as a big heading') }, + { shortcut: 'Control K', action: t('notes', 'Insert link') }, + { shortcut: 'Control Alt I', action: t('notes', 'Insert image') }, + { shortcut: 'Control /', action: t('notes', 'Switch between editor and viewer') }, ], } }, diff --git a/src/components/HelpMobile.vue b/src/components/HelpMobile.vue index 075b7baeb..93b4b67a6 100644 --- a/src/components/HelpMobile.vue +++ b/src/components/HelpMobile.vue @@ -5,37 +5,35 @@ @@ -44,10 +42,12 @@ import { generateFilePath } from '@nextcloud/router' import { Fragment } from 'vue-frag' +import { NcFormGroup } from '@nextcloud/vue' export default { components: { Fragment, + NcFormGroup, }, methods: { @@ -59,9 +59,12 @@ export default {