fix(shares): replace FilePicker in SettingsDialog

Signed-off-by: Maksim Sukharev <[email protected]>
nextcloud · Dec 26, 2023 · 58da47a · 58da47a
1 parent f06ac36
commit 58da47a
Showing 1 changed file with 55 additions and 36 deletions.
diff --git a/src/components/SettingsDialog/SettingsDialog.vue b/src/components/SettingsDialog/SettingsDialog.vue
@@ -38,12 +38,11 @@
 				{{ locationHint }}
 			</h3>
 			<div class="app-settings-section__wrapper">
-				<NcTextField class="app-settings-section__input"
-					:value="attachmentFolder"
-					:disabled="true"
-					@click="selectAttachmentFolder" />
+				<p class="app-settings-section__input" @click="showFilePicker = true">
+					{{ attachmentFolder }}
+				</p>
 				<NcButton type="primary"
-					@click="selectAttachmentFolder">
+					@click="showFilePicker = true">
 					{{ t('spreed', 'Browse …') }}
 				</NcButton>
 			</div>
@@ -161,20 +160,30 @@
 				</div>
 			</dl>
 		</NcAppSettingsSection>
+
+		<FilePickerVue v-if="showFilePicker"
+			:name="t('spreed', 'Select location for attachments')"
+			:path="attachmentFolder"
+			:container="container"
+			:buttons="filePickerButtons"
+			:multiselect="false"
+			:mimetype-filter="['httpd/unix-directory']"
+			allow-pick-directory
+			@close="showFilePicker = false" />
 	</NcAppSettingsDialog>
 </template>
 
 <script>
 import { getCapabilities } from '@nextcloud/capabilities'
-import { getFilePickerBuilder, showError, showSuccess } from '@nextcloud/dialogs'
+import { showError, showSuccess } from '@nextcloud/dialogs'
+import { FilePickerVue } from '@nextcloud/dialogs/filepicker.js'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { generateUrl } from '@nextcloud/router'
 
 import NcAppSettingsDialog from '@nextcloud/vue/dist/Components/NcAppSettingsDialog.js'
 import NcAppSettingsSection from '@nextcloud/vue/dist/Components/NcAppSettingsSection.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
-import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 import MediaDevicesPreview from '../MediaDevicesPreview.vue'
 
@@ -188,12 +197,12 @@ export default {
 	name: 'SettingsDialog',
 
 	components: {
+		FilePickerVue,
 		MediaDevicesPreview,
 		NcAppSettingsDialog,
 		NcAppSettingsSection,
 		NcButton,
 		NcCheckboxRadioSwitch,
-		NcTextField,
 	},
 
 	setup() {
@@ -208,6 +217,7 @@ export default {
 	data() {
 		return {
 			showSettings: false,
+			showFilePicker: false,
 			attachmentFolderLoading: true,
 			privacyLoading: false,
 			playSoundsLoading: false,
@@ -251,6 +261,14 @@ export default {
 		disableKeyboardShortcuts() {
 			return OCP.Accessibility.disableKeyboardShortcuts()
 		},
+
+		filePickerButtons() {
+			return [{
+				label: t('spreed', 'Choose'),
+				callback: (nodes) => this.selectAttachmentFolder(nodes),
+				type: 'primary'
+			}]
+		},
 	},
 
 	created() {
@@ -268,30 +286,25 @@ export default {
 	},
 
 	methods: {
+		async selectAttachmentFolder(nodes) {
+			const path = nodes[0]?.path
+			if (!path) {
+				return
+			}
+
+			console.debug(`Path '${path}' selected for talk attachments`)
+			if (path !== '' && !path.startsWith('/')) {
+				throw new Error(t('spreed', 'Invalid path selected'))
+			}
 
-		selectAttachmentFolder() {
-			const picker = getFilePickerBuilder(t('spreed', 'Select location for attachments'))
-				.setMultiSelect(false)
-				.setType(1)
-				.addMimeTypeFilter('httpd/unix-directory')
-				.allowDirectories()
-				.startAt(this.attachmentFolder)
-				.build()
-			picker.pick()
-				.then(async (path) => {
-					console.debug(`Path '${path}' selected for talk attachments`)
-					if (path !== '' && !path.startsWith('/')) {
-						throw new Error(t('spreed', 'Invalid path selected'))
-					}
-
-					this.attachmentFolderLoading = true
-					try {
-						this.$store.dispatch('setAttachmentFolder', path)
-					} catch (exception) {
-						showError(t('spreed', 'Error while setting attachment folder'))
-					}
-					this.attachmentFolderLoading = false
-				})
+			this.attachmentFolderLoading = true
+			try {
+				this.$store.dispatch('setAttachmentFolder', path)
+			} catch (exception) {
+				showError(t('spreed', 'Error while setting attachment folder'))
+			}
+			this.attachmentFolderLoading = false
+			this.showFilePicker = false
 		},
 
 		async toggleReadStatusPrivacy() {
@@ -374,13 +387,19 @@ export default {
 		gap: 8px;
 	}
 
-	& &__input {
+	&__input {
 		width: 300px;
 		height: var(--default-clickable-area);
-		:deep(input) {
-			height: var(--default-clickable-area) !important;
-			cursor: default;
-		}
+		margin: 0;
+		padding: 10px 6px 10px 12px;
+		border: 2px solid var(--color-border-maxcontrast);
+		border-radius: var(--border-radius-large);
+		background-color: var(--color-main-background);
+		font-size: var(--default-font-size);
+		text-overflow: ellipsis;
+		color: var(--color-main-text);
+		opacity: 0.7;
+		cursor: pointer;
 	}
 
 	.shortcut-description {