fixup!

Signed-off-by: Ferdinand Thiessen <[email protected]>
nextcloud · Dec 12, 2023 · 8168393 · 8168393
1 parent b0a225c
commit 8168393
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 50 deletions.
diff --git a/src/components/SidebarTabs/SettingsSidebarTab.vue b/src/components/SidebarTabs/SettingsSidebarTab.vue
@@ -88,6 +88,7 @@
 				{{ t('forms', 'Message to show after a user submitted the form. Please note that the message will not be translated!') }}
 			</div>
 		</div>
+
 		<TransferOwnership :form="form" />
 	</div>
 </template>
@@ -289,6 +290,11 @@ export default {
 	margin-inline-start: 40px;
 }
 
+.sidebar-tabs__content {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
 .submission-message {
 	&__description {
 		color: var(--color-text-maxcontrast);

diff --git a/src/components/SidebarTabs/TransferOwnership.vue b/src/components/SidebarTabs/TransferOwnership.vue
@@ -22,42 +22,51 @@
 
 <template>
 	<div>
-		<NcButton @click="openModal">
-			{{ t('forms', 'Transfer ownership') }}
+		<NcButton class="transfer-button"
+			alignment="start"
+			type="tertiary"
+			:wide="true"
+			@click="openModal">
+			<span class="transfer-button__text">{{ t('forms', 'Transfer ownership') }}</span>
 		</NcButton>
+
 		<NcDialog :open.sync="showModal"
+			content-classes="modal-content"
 			:name="t('forms', 'Transfer ownership')"
 			:out-transition="true"
 			@close="closeModal">
-			<div class="modal-content">
-				<div class="modal-content__section">
-					<!-- eslint-disable-next-line vue/no-v-html -->
-					<p class="modal-content__text" v-html="t('forms', 'You\'re going to transfer the ownership of <strong>{name}</strong> to another account. Please select the account to which you want to transfer ownership.', { name: form.title })" />
-					<NcSelect v-model="selected"
-						class="modal-content__select"
-						:reset-focus-on-options-change="false"
-						:clear-search-on-select="true"
-						:close-on-select="true"
-						:loading="loading"
-						:get-option-key="(option) => option.key"
-						:options="options"
-						:placeholder="t('forms', 'Search for a user')"
-						:user-select="true"
-						label="displayName"
-						@search="(query)=>asyncSearch(query,true)">
-						<template #no-options>
-							{{ noResultText }}
-						</template>
-					</NcSelect>
-				</div>
-				<div class="modal-content__section">
-					<!-- eslint-disable-next-line vue/no-v-html -->
-					<p class="modal-content__text" v-html="t('forms', 'Type <strong>{confirmationString}</strong> to confirm.', { confirmationString })" />
-					<NcTextField :value.sync="confirmationInput"
-						:success="confirmationInput === confirmationString" />
-				</div>
+			<template #default>
+				<!-- eslint-disable-next-line vue/no-v-html -->
+				<p v-html="t('forms', 'You\'re going to transfer the ownership of {name} to another account. Please select the account to which you want to transfer ownership.', { name: `<strong>${form.title}</strong>` }, undefined, { escape: false })" />
+				<NcSelect v-model="selected"
+					class="modal-content__select"
+					:reset-focus-on-options-change="false"
+					:clear-search-on-select="true"
+					:close-on-select="true"
+					:loading="loading"
+					:get-option-key="(option) => option.key"
+					:options="options"
+					:placeholder="t('forms', 'Search for a user')"
+					:user-select="true"
+					label="displayName"
+					@search="(query)=>asyncSearch(query,true)">
+					<template #no-options>
+						{{ noResultText }}
+					</template>
+				</NcSelect>
+
+				<br>
+
+				<!-- eslint-disable-next-line vue/no-v-html -->
+				<p v-html="t('forms', 'Type {text} to confirm.', { text: `<strong>${confirmationString}</strong>` }, undefined, { escape: false })" />
+				<NcTextField :label="t('forms', 'Confirmation text')"
+					:value.sync="confirmationInput"
+					:success="confirmationInput === confirmationString" />
+
+				<br>
+
 				<p><strong>{{ t('forms','This can not be undone.') }}</strong></p>
-			</div>
+			</template>
 			<template #actions>
 				<NcButton :disabled="!canTransfer" type="error" @click="onOwnershipTransfer">
 					{{ t('forms', 'I understand, transfer this form') }}
@@ -159,27 +168,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.modal-content {
-
-	&__user {
-		:deep(.user-bubble__content) {
-			align-items: center;
-			margin-top: 10px;
-		}
-	}
+:deep(.modal-content) {
+	padding-inline: 18px;
 
-	&__select{
-		width:100% ;
-	}
-
-	&__text{
-		text-align: start;
-		margin-bottom: 10px;
-	}
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
 
-	&__section{
-		text-align: start;
-		margin-bottom: 10px;
-	}
+.transfer-button__text {
+	color: var(--color-error-text);
 }
 </style>