fix(files_sharing): file request margin and buttons order

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

1 files changed, 26 insertions, 17 deletions

diff --git a/apps/files_sharing/src/components/NewFileRequestDialog.vue b/apps/files_sharing/src/components/NewFileRequestDialog.vue
index 3bca39d4f38..1b29457a677 100644
--- a/apps/files_sharing/src/components/NewFileRequestDialog.vue
+++ b/apps/files_sharing/src/components/NewFileRequestDialog.vue
@@ -50,8 +50,22 @@
 
 		<!-- Controls -->
 		<template #actions>
+			<!-- Back -->
+			<NcButton v-show="currentStep === STEP.SECOND"
+				:aria-label="t('files_sharing', 'Previous step')"
+				:disabled="loading"
+				data-cy-file-request-dialog-controls="back"
+				type="tertiary"
+				@click="currentStep = STEP.FIRST">
+				{{ t('files_sharing', 'Previous step') }}
+			</NcButton>
+
+			<!-- Align right -->
+			<span class="dialog__actions-separator" />
+
 			<!-- Cancel the creation -->
-			<NcButton :aria-label="t('files_sharing', 'Cancel')"
+			<NcButton v-if="currentStep !== STEP.LAST"
+				:aria-label="t('files_sharing', 'Cancel')"
 				:disabled="loading"
 				:title="t('files_sharing', 'Cancel the file request creation')"
 				data-cy-file-request-dialog-controls="cancel"
@@ -60,17 +74,15 @@
 				{{ t('files_sharing', 'Cancel') }}
 			</NcButton>
 
-			<!-- Align right -->
-			<span class="dialog__actions-separator" />
-
-			<!-- Back -->
-			<NcButton v-show="currentStep === STEP.SECOND"
-				:aria-label="t('files_sharing', 'Previous step')"
+			<!-- Cancel email and just close -->
+			<NcButton v-else-if="emails.length !== 0"
+				:aria-label="t('files_sharing', 'Close without sending emails')"
 				:disabled="loading"
-				data-cy-file-request-dialog-controls="back"
+				:title="t('files_sharing', 'Close without sending emails')"
+				data-cy-file-request-dialog-controls="cancel"
 				type="tertiary"
-				@click="currentStep = STEP.FIRST">
-				{{ t('files_sharing', 'Previous step') }}
+				@click="onCancel">
+				{{ t('files_sharing', 'Close') }}
 			</NcButton>
 
 			<!-- Next -->
@@ -388,8 +400,7 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .file-request-dialog {
-	--margin: 36px;
-	--secondary-margin: 18px;
+	--margin: 18px;
 
 	&__header {
 		margin: 0 var(--margin);
@@ -398,16 +409,16 @@ export default defineComponent({
 	&__form {
 		position: relative;
 		overflow: auto;
-		padding: var(--secondary-margin) var(--margin);
+		padding: var(--margin) var(--margin);
 		// overlap header bottom padding
-		margin-top: calc(-1 * var(--secondary-margin));
+		margin-top: calc(-1 * var(--margin));
 	}
 
 	:deep(fieldset) {
 		display: flex;
 		flex-direction: column;
 		width: 100%;
-		margin-top: var(--secondary-margin);
+		margin-top: var(--margin);
 
 		:deep(legend) {
 			display: flex;
@@ -419,8 +430,6 @@ export default defineComponent({
 	:deep(.dialog__actions) {
 		width: auto;
 		margin-inline: 12px;
-		// align left and remove margin
-		margin-left: 0;
 		span.dialog__actions-separator {
 			margin-left: auto;
 		}