fix(files_sharing): improve file request info messages

Signed-off-by: skjnldsv <skjnldsv@protonmail.com>

apps/files_sharing/src/actions/openInFilesAction.ts

@@ -11,7 +11,7 @@ import { sharesViewId, sharedWithYouViewId, sharedWithOthersViewId, sharingByLin
 
 export const action = new FileAction({
 	id: 'open-in-files',
-	displayName: () => t('files', 'Open in Files'),
+	displayName: () => t('files_sharing', 'Open in Files'),
 	iconSvgInline: () => '',
 
 	enabled: (nodes, view) => [

apps/files_sharing/src/components/NewFileRequestDialog.vue

@@ -398,7 +398,7 @@ export default defineComponent({
 })
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 .file-request-dialog {
 	--margin: 18px;
 
@@ -414,28 +414,40 @@ export default defineComponent({
 		margin-top: calc(-1 * var(--margin));
 	}
 
-	:deep(fieldset) {
+	fieldset {
 		display: flex;
 		flex-direction: column;
 		width: 100%;
 		margin-top: var(--margin);
 
-		:deep(legend) {
+		legend {
 			display: flex;
 			align-items: center;
 			width: 100%;
 		}
 	}
 
-	:deep(.dialog__actions) {
+	// Using a NcNoteCard was a bit much sometimes.
+	// Using a simple paragraph instead does it.
+	&__info {
+		color: var(--color-text-maxcontrast);
+		padding-block: 4px;
+		display: flex;
+		align-items: center;
+		.file-request-dialog__info-icon {
+			margin-inline-end: 8px;
+		}
+	}
+
+	.dialog__actions {
 		width: auto;
 		margin-inline: 12px;
 		span.dialog__actions-separator {
 			margin-left: auto;
 		}
 	}
 
-	:deep(.input-field__helper-text-message) {
+	.input-field__helper-text-message {
 		// reduce helper text standing out
 		color: var(--color-text-maxcontrast);
 	}

apps/files_sharing/src/components/NewFileRequestDialog/NewFileRequestDialogDatePassword.vue

@@ -12,10 +12,6 @@
 
 		<!-- Expiration date -->
 		<fieldset class="file-request-dialog__expiration" data-cy-file-request-dialog-fieldset="expiration">
-			<NcNoteCard v-if="defaultExpireDateEnforced" type="info">
-				{{ t('files_sharing', 'Your administrator has enforced a default expiration date with a maximum of {days} days.', { days: defaultExpireDate }) }}
-			</NcNoteCard>
-
 			<!-- Enable expiration -->
 			<legend>{{ t('files_sharing', 'When should the request expire?') }}</legend>
 			<NcCheckboxRadioSwitch v-show="!defaultExpireDateEnforced"
@@ -39,14 +35,15 @@
 				name="expirationDate"
 				type="date"
 				@update:value="$emit('update:expirationDate', $event)" />
+
+			<p v-if="defaultExpireDateEnforced" class="file-request-dialog__info">
+				<IconInfo :size="18" class="file-request-dialog__info-icon" />
+				{{ t('files_sharing', 'Your administrator has enforced a {count} days expiration policy.', { count: defaultExpireDate }) }}
+			</p>
 		</fieldset>
 
 		<!-- Password -->
 		<fieldset class="file-request-dialog__password" data-cy-file-request-dialog-fieldset="password">
-			<NcNoteCard v-if="enforcePasswordForPublicLink" type="info">
-				{{ t('files_sharing', 'Your administrator has enforced a password protection.') }}
-			</NcNoteCard>
-
 			<!-- Enable password -->
 			<legend>{{ t('files_sharing', 'What password should be used for the request?') }}</legend>
 			<NcCheckboxRadioSwitch v-show="!enforcePasswordForPublicLink"
@@ -75,6 +72,11 @@
 					</template>
 				</NcButton>
 			</div>
+
+			<p v-if="enforcePasswordForPublicLink" class="file-request-dialog__info">
+				<IconInfo :size="18" class="file-request-dialog__info-icon" />
+				{{ t('files_sharing', 'Your administrator has enforced a password protection.') }}
+			</p>
 		</fieldset>
 	</div>
 </template>
@@ -89,6 +91,7 @@ import NcDateTimePickerNative from '@nextcloud/vue/dist/Components/NcDateTimePic
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
 import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
 
+import IconInfo from 'vue-material-design-icons/Information.vue'
 import IconPasswordGen from 'vue-material-design-icons/AutoFix.vue'
 
 import Config from '../../services/ConfigService'
@@ -100,6 +103,7 @@ export default defineComponent({
 	name: 'NewFileRequestDialogDatePassword',
 
 	components: {
+		IconInfo,
 		IconPasswordGen,
 		NcButton,
 		NcCheckboxRadioSwitch,
@@ -232,5 +236,11 @@ export default defineComponent({
 	display: flex;
 	align-items: flex-start;
 	gap: 8px;
+	// Compensate label gab with legend
+	margin-top: 12px;
+	> div {
+		// Force margin to 0 as we handle it above
+		margin: 0;
+	}
 }
 </style>

apps/files_sharing/src/components/NewFileRequestDialog/NewFileRequestDialogIntro.vue

@@ -26,7 +26,6 @@
 			</legend>
 			<NcTextField :value="destination"
 				:disabled="disabled"
-				:helper-text="t('files_sharing', 'The uploaded files are visible only to you unless you choose to share them.')"
 				:label="t('files_sharing', 'Upload destination')"
 				:minlength="2/* cannot share root */"
 				:placeholder="t('files_sharing', 'Select a destination')"
@@ -42,6 +41,11 @@
 				@trailing-button-click="$emit('update:destination', '')">
 				<IconFolder :size="18" />
 			</NcTextField>
+
+			<p class="file-request-dialog__info">
+				<IconLock :size="18" class="file-request-dialog__info-icon" />
+				{{ t('files_sharing', 'The uploaded files are visible only to you unless you choose to share them.') }}
+			</p>
 		</fieldset>
 
 		<!-- Request note -->
@@ -56,6 +60,11 @@
 				:required="false"
 				name="note"
 				@update:value="$emit('update:note', $event)" />
+
+			<p class="file-request-dialog__info">
+				<IconInfo :size="18" class="file-request-dialog__info-icon" />
+				{{ t('files_sharing', 'You can add links, date or any other information that will help the recipient understand what you are requesting.') }}
+			</p>
 		</fieldset>
 	</div>
 </template>
@@ -69,6 +78,8 @@ import { getFilePickerBuilder } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
 
 import IconFolder from 'vue-material-design-icons/Folder.vue'
+import IconInfo from 'vue-material-design-icons/Information.vue'
+import IconLock from 'vue-material-design-icons/Lock.vue'
 import NcTextArea from '@nextcloud/vue/dist/Components/NcTextArea.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
@@ -77,6 +88,8 @@ export default defineComponent({
 
 	components: {
 		IconFolder,
+		IconInfo,
+		IconLock,
 		NcTextArea,
 		NcTextField,
 	},

apps/files_sharing/src/components/SelectShareFolderDialogue.vue

@@ -57,7 +57,7 @@ export default {
 		async pickFolder() {
 
 			// Setup file picker
-			const picker = getFilePickerBuilder(t('files', 'Choose a default folder for accepted shares'))
+			const picker = getFilePickerBuilder(t('files_sharing', 'Choose a default folder for accepted shares'))
 				.startAt(this.readableDirectory)
 				.setMultiSelect(false)
 				.setType(1)
@@ -69,7 +69,7 @@ export default {
 				// Init user folder picking
 				const dir = await picker.pick() || '/'
 				if (!dir.startsWith('/')) {
-					throw new Error(t('files', 'Invalid path selected'))
+					throw new Error(t('files_sharing', 'Invalid path selected'))
 				}
 
 				// Fix potential path issues and save results
@@ -78,7 +78,7 @@ export default {
 					shareFolder: this.directory,
 				})
 			} catch (error) {
-				showError(error.message || t('files', 'Unknown error'))
+				showError(error.message || t('files_sharing', 'Unknown error'))
 			}
 		},
 

apps/files_sharing/src/new/newFileRequest.ts

@@ -16,7 +16,7 @@ const sharingConfig = new Config()
 
 export const entry = {
 	id: 'file-request',
-	displayName: t('files', 'Create new file request'),
+	displayName: t('files_sharing', 'Create file request'),
 	iconSvgInline: FileUploadSvg,
 	order: 30,
 	enabled(context: Folder): boolean {