fix: Improve styles of layout for QuestionFile #2253

Signed-off-by: Konstantin Myakshin <[email protected]>
nextcloud · Jul 28, 2024 · a1b8f64 · a1b8f64
1 parent b653947
commit a1b8f64
Showing 1 changed file with 33 additions and 19 deletions.
diff --git a/src/components/Questions/QuestionFile.vue b/src/components/Questions/QuestionFile.vue
@@ -107,11 +107,7 @@
 					</template>
 
 					<template #actions>
-						<NcActionButton
-							class="delete-button-wrapper"
-							@click="
-								onDeleteUploadedFile(uploadedFile.uploadedFileId)
-							">
+						<NcActionButton @click="onDeleteUploadedFile(uploadedFile.uploadedFileId)">
 							<template #icon>
 								<IconDelete :size="20" />
 							</template>
@@ -121,20 +117,22 @@
 				</NcListItem>
 			</ul>
 
-			<NcLoadingIcon v-show="fileLoading" />
-
-			<input
-				v-show="!fileLoading"
-				ref="fileInput"
-				type="file"
-				:aria-label="
-					t('forms', 'A file answer for the question “{text}”', { text })
-				"
-				:disabled="!readOnly || values.length >= maxAllowedFilesCount"
-				:multiple="maxAllowedFilesCount > 1"
-				:name="name || undefined"
-				:accept="accept.length ? accept.join(',') : null"
-				@input="onFileInput" />
+			<div class="question__input--wrapper">
+				<NcLoadingIcon v-show="fileLoading" />
+
+				<input
+					v-show="!fileLoading"
+					ref="fileInput"
+					type="file"
+					:aria-label="
+						t('forms', 'A file answer for the question “{text}”', { text })
+					"
+					:disabled="!readOnly || values.length >= maxAllowedFilesCount"
+					:multiple="maxAllowedFilesCount > 1"
+					:name="name || undefined"
+					:accept="accept.length ? accept.join(',') : null"
+					@input="onFileInput" />
+			</div>
 		</div>
 	</Question>
 </template>
@@ -382,4 +380,20 @@ export default {
 .file-type-checkbox {
 	margin-left: 30px;
 }
+
+.question__input--wrapper {
+	&:has(input:disabled) {
+		margin-left: -13px;
+	}
+
+	input {
+		height: 44px;
+		padding-top: 8px;
+	}
+
+	input:disabled {
+		height: 35px;
+		padding-top: 3px;
+	}
+}
 </style>