Skip to content

Commit 5ccf133

Browse files
authored
Merge pull request #56442 from nextcloud/refactor/files-settings
[stable32] refactor(files): migrate app settings to new `NcForm*` components
2 parents 2cd3b60 + 25bb6ea commit 5ccf133

38 files changed

+369
-414
lines changed
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
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 { t } from '@nextcloud/l10n'
8+
import NcAppSettingsSection from '@nextcloud/vue/components/NcAppSettingsSection'
9+
import NcFormBox from '@nextcloud/vue/components/NcFormBox'
10+
import NcFormBoxSwitch from '@nextcloud/vue/components/NcFormBoxSwitch'
11+
import { useUserConfigStore } from '../../store/userconfig.ts'
12+
13+
const store = useUserConfigStore()
14+
</script>
15+
16+
<template>
17+
<NcAppSettingsSection id="appearance" :name="t('files', 'Appearance')">
18+
<NcFormBox>
19+
<NcFormBoxSwitch
20+
v-model="store.userConfig.show_hidden"
21+
:label="t('files', 'Show hidden files')"
22+
@update:modelValue="store.update('show_hidden', $event)" />
23+
<NcFormBoxSwitch
24+
v-model="store.userConfig.show_mime_column"
25+
:label="t('files', 'Show file type column')"
26+
@update:modelValue="store.update('show_mime_column', $event)" />
27+
<NcFormBoxSwitch
28+
v-model="store.userConfig.show_files_extensions"
29+
:label="t('files', 'Show file extensions')"
30+
@update:modelValue="store.update('show_files_extensions', $event)" />
31+
<NcFormBoxSwitch
32+
v-model="store.userConfig.crop_image_previews"
33+
:label="t('files', 'Crop image previews')"
34+
@update:modelValue="store.update('crop_image_previews', $event)" />
35+
</NcFormBox>
36+
</NcAppSettingsSection>
37+
</template>

apps/files/src/components/FilesAppSettings/FilesAppSettingsEntry.vue

Lines changed: 0 additions & 22 deletions
This file was deleted.
Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
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 { t } from '@nextcloud/l10n'
8+
import NcAppSettingsSection from '@nextcloud/vue/components/NcAppSettingsSection'
9+
import NcFormBox from '@nextcloud/vue/components/NcFormBox'
10+
import NcFormBoxSwitch from '@nextcloud/vue/components/NcFormBoxSwitch'
11+
import NcRadioGroup from '@nextcloud/vue/components/NcRadioGroup'
12+
import NcRadioGroupButton from '@nextcloud/vue/components/NcRadioGroupButton'
13+
import { useUserConfigStore } from '../../store/userconfig.ts'
14+
15+
const store = useUserConfigStore()
16+
</script>
17+
18+
<template>
19+
<NcAppSettingsSection
20+
id="settings"
21+
:name="t('files', 'General')">
22+
<NcFormBox>
23+
<NcFormBoxSwitch
24+
v-model="store.userConfig.sort_favorites_first"
25+
:label="t('files', 'Sort favorites first')"
26+
@update:modelValue="store.update('sort_favorites_first', $event)" />
27+
<NcFormBoxSwitch
28+
v-model="store.userConfig.sort_folders_first"
29+
:label="t('files', 'Sort folders before files')"
30+
@update:modelValue="store.update('sort_folders_first', $event)" />
31+
<NcFormBoxSwitch
32+
v-model="store.userConfig.folder_tree"
33+
:label="t('files', 'Enable folder tree view')"
34+
@update:modelValue="store.update('folder_tree', $event)" />
35+
</NcFormBox>
36+
<NcRadioGroup
37+
v-model="store.userConfig.default_view"
38+
:label="t('files', 'Default view')"
39+
@update:modelValue="store.update('default_view', $event)">
40+
<NcRadioGroupButton :label="t('files', 'All files')" value="files" />
41+
<NcRadioGroupButton :label="t('files', 'Personal files')" value="personal" />
42+
</NcRadioGroup>
43+
</NcAppSettingsSection>
44+
</template>
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
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 Setting from '../../models/Setting.ts'
8+
9+
import { t } from '@nextcloud/l10n'
10+
import NcAppSettingsSection from '@nextcloud/vue/components/NcAppSettingsSection'
11+
import FilesAppSettingsLegacyApiEntry from './FilesAppSettingsLegacyApiEntry.vue'
12+
13+
const apiSettings = ((window.OCA?.Files?.Settings?.settings || []) as Setting[])
14+
.sort((a, b) => {
15+
if (a.order && b.order) {
16+
return a.order - b.order
17+
}
18+
return a.name.localeCompare(b.name)
19+
})
20+
</script>
21+
22+
<template>
23+
<NcAppSettingsSection
24+
v-if="apiSettings.length !== 0"
25+
id="api-settings"
26+
:name="t('files', 'Additional settings')">
27+
<FilesAppSettingsLegacyApiEntry v-for="setting in apiSettings" :key="setting.name" :setting="setting" />
28+
</NcAppSettingsSection>
29+
</template>
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
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 Setting from '../../models/Setting.ts'
8+
9+
import { onBeforeMount, onBeforeUnmount, onMounted, ref } from 'vue'
10+
11+
const props = defineProps<{
12+
setting: Setting
13+
}>()
14+
15+
const el = ref<HTMLElement>()
16+
17+
onBeforeMount(() => props.setting.open())
18+
onBeforeUnmount(() => props.setting.close())
19+
onMounted(() => {
20+
el.value!.appendChild(props.setting.el())
21+
})
22+
</script>
23+
24+
<template>
25+
<div ref="el" />
26+
</template>
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!--
2+
- SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
3+
- SPDX-License-Identifier: AGPL-3.0-or-later
4+
-->
5+
6+
<script lang="ts" setup>
7+
import { t } from '@nextcloud/l10n'
8+
import NcAppSettingsSection from '@nextcloud/vue/components/NcAppSettingsSection'
9+
import NcFormBox from '@nextcloud/vue/components/NcFormBox'
10+
import NcFormBoxSwitch from '@nextcloud/vue/components/NcFormBoxSwitch'
11+
import { useUserConfigStore } from '../../store/userconfig.ts'
12+
13+
const store = useUserConfigStore()
14+
</script>
15+
16+
<template>
17+
<NcAppSettingsSection id="warning" :name="t('files', 'Warnings')">
18+
<NcFormBox>
19+
<NcFormBoxSwitch
20+
v-model="store.userConfig.show_dialog_file_extension"
21+
:label="t('files', 'Warn before changing a file extension')"
22+
@update:modelValue="store.update('show_dialog_file_extension', $event)" />
23+
<NcFormBoxSwitch
24+
v-model="store.userConfig.show_dialog_deletion"
25+
:label="t('files', 'Warn before deleting a file')"
26+
@update:modelValue="store.update('show_dialog_deletion', $event)" />
27+
</NcFormBox>
28+
</NcAppSettingsSection>
29+
</template>
Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!--
2+
- SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
3+
- SPDX-License-Identifier: AGPL-3.0-or-later
4+
-->
5+
6+
<script lang="ts" setup>
7+
import { getCurrentUser } from '@nextcloud/auth'
8+
import { loadState } from '@nextcloud/initial-state'
9+
import { t } from '@nextcloud/l10n'
10+
import { generateRemoteUrl, generateUrl } from '@nextcloud/router'
11+
import NcAppSettingsSection from '@nextcloud/vue/components/NcAppSettingsSection'
12+
import NcFormBox from '@nextcloud/vue/components/NcFormBox'
13+
import NcFormBoxButton from '@nextcloud/vue/components/NcFormBoxButton'
14+
import NcFormBoxCopyButton from '@nextcloud/vue/components/NcFormBoxCopyButton'
15+
16+
const webDavUrl = generateRemoteUrl('dav/files/' + encodeURIComponent(getCurrentUser()!.uid))
17+
const webDavDocsUrl = 'https://docs.nextcloud.com/server/stable/go.php?to=user-webdav'
18+
const appPasswordUrl = generateUrl('/settings/user/security#generate-app-token-section')
19+
const isTwoFactorEnabled = loadState('files', 'isTwoFactorEnabled', false)
20+
</script>
21+
22+
<template>
23+
<NcAppSettingsSection id="webdav" name="WebDAV">
24+
<NcFormBox>
25+
<NcFormBoxCopyButton :label="t('files', 'WebDAV URL')" :value="webDavUrl" />
26+
<NcFormBoxButton
27+
v-if="isTwoFactorEnabled"
28+
:label="t('files', 'Create an app password')"
29+
:description="t('files', 'Required for WebDAV authentication because Two-Factor Authentication is enabled for this account.')"
30+
:href="appPasswordUrl"
31+
target="_blank" />
32+
<NcFormBoxButton
33+
:label="t('files', 'How to access files using WebDAV')"
34+
:href="webDavDocsUrl"
35+
target="_blank" />
36+
</NcFormBox>
37+
</NcAppSettingsSection>
38+
</template>

apps/files/src/eventbus.d.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@
44
*/
55

66
import type { IFileListFilter, Node, View } from '@nextcloud/files'
7-
import type { SearchScope } from './types'
7+
import type { SearchScope, UserConfig } from './types.ts'
88

99
declare module '@nextcloud/event-bus' {
1010
export interface NextcloudEvents {
1111
// mapping of 'event name' => 'event type'
12-
'files:config:updated': { key: string, value: boolean }
13-
'files:view-config:updated': { key: string, value: string|number|boolean, view: string }
12+
'files:config:updated': { key: string, value: UserConfig[string] }
13+
'files:view-config:updated': { key: string, value: string | number | boolean, view: string }
1414

1515
'files:favorites:removed': Node
1616
'files:favorites:added': Node

apps/files/src/main.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22
* SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
33
* SPDX-License-Identifier: AGPL-3.0-or-later
44
*/
5+
56
import { getCSPNonce } from '@nextcloud/auth'
67
import { PiniaVuePlugin } from 'pinia'
78
import Vue from 'vue'
8-
99
import { getPinia } from './store/index.ts'
1010
import FilesApp from './FilesApp.vue'
1111
import router from './router/router'
1212
import RouterService from './services/RouterService'
13-
import SettingsModel from './models/Setting.js'
13+
import SettingsModel from './models/Setting.ts'
1414
import SettingsService from './services/Settings.js'
1515

1616
__webpack_nonce__ = getCSPNonce()

apps/files/src/models/Setting.js

Lines changed: 0 additions & 73 deletions
This file was deleted.

0 commit comments

Comments
 (0)