Accessible Photos directory settings

Signed-off-by: Christopher Ng <chrng8@gmail.com>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

js/photos-main.js.LICENSE.txt

@@ -57,6 +57,10 @@
 
 /*! @license DOMPurify 2.4.5 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/2.4.5/LICENSE */
 
+/*! For license information please see NcButton.js.LICENSE.txt */
+
+/*! For license information please see NcTextField.js.LICENSE.txt */
+
 /*! For license information please see index.module.js.LICENSE.txt */
 
 /*! Hammer.JS - v2.0.7 - 2016-04-22

src/components/Settings/PhotosLocationSettings.vue

@@ -21,27 +21,28 @@
  -->
 
 <template>
-	<div>
-		<!-- Description -->
-		<p class="app-settings-section__desc">
-			{{ t('photos', 'Default Photos upload and Albums location') }}
-		</p>
-
-		<!-- Picker -->
-		<input v-model="photosLocation"
-			class="app-settings-section__input"
-			type="text"
-			@input="debounceUpdatePhotosFolder(photosLocation)"
-			@change="debounceUpdatePhotosFolder(photosLocation)"
-			@click="debounceSelectPhotosFolder"
-			@focus.once="debounceSelectPhotosFolder"
-			@keyboard.enter="debounceSelectPhotosFolder">
+	<div class="photos-location">
+		<NcTextField class="photos-location__text-field"
+			:label="t('photos', 'Default Photos upload and Albums location')"
+			:label-visible="true"
+			:value.sync="photosLocation"
+			@update:value="debounceUpdatePhotosFolder(photosLocation)" />
+		<NcButton :aria-label="t('photos', 'Choose default Photos upload and Albums location')"
+			@click="debounceSelectPhotosFolder">
+			<template #icon>
+				<Folder :size="20" />
+			</template>
+		</NcButton>
 	</div>
 </template>
 
 <script>
 import debounce from 'debounce'
 
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
+import Folder from 'vue-material-design-icons/Folder.vue'
+
 import { getFilePickerBuilder, showError } from '@nextcloud/dialogs'
 
 import UserConfig from '../../mixins/UserConfig.js'
@@ -53,6 +54,12 @@ export default {
 		UserConfig,
 	],
 
+	components: {
+		NcButton,
+		NcTextField,
+		Folder,
+	},
+
 	methods: {
 		debounceSelectPhotosFolder: debounce(function() {
 			this.selectPhotosFolder()
@@ -93,3 +100,22 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.photos-location {
+	display: flex;
+	align-items: flex-end;
+	gap: 0 8px;
+
+	&__text-field {
+		max-width: 300px;
+
+		:deep {
+			.input-field__main-wrapper,
+			input {
+				height: var(--default-clickable-area) !important;
+			}
+		}
+	}
+}
+</style>