Merge pull request #1696 from nextcloud/vue8_compatibility

Make components compatible to nextcloud-vue 8
nextcloud · Nov 28, 2023 · 1dff50a · 1dff50a
2 parents 0471d64 + 3029144
commit 1dff50a
Show file tree

Hide file tree

Showing 10 changed files with 152 additions and 119 deletions.
diff --git a/src/Forms.vue b/src/Forms.vue
@@ -33,7 +33,7 @@
 			</NcAppNavigationNew>
 			<template #list>
 				<!-- Form-Owner-->
-				<NcAppNavigationCaption v-if="!noOwnedForms" :title="t('forms', 'Your Forms')" />
+				<NcAppNavigationCaption v-if="!noOwnedForms" :name="t('forms', 'Your Forms')" />
 				<AppNavigationForm v-for="form in forms"
 					:key="form.id"
 					:form="form"
@@ -44,7 +44,7 @@
 					@delete="onDeleteForm" />
 
 				<!-- Shared Forms-->
-				<NcAppNavigationCaption v-if="!noSharedForms" :title="t('forms', 'Shared with you')" />
+				<NcAppNavigationCaption v-if="!noSharedForms" :name="t('forms', 'Shared with you')" />
 				<AppNavigationForm v-for="form in sharedForms"
 					:key="form.id"
 					:form="form"
@@ -57,14 +57,16 @@
 		<!-- No forms & loading emptycontents -->
 		<NcAppContent v-if="loading || !hasForms || !routeHash || !routeAllowed">
 			<NcEmptyContent v-if="loading"
-				:title="t('forms', 'Loading forms …')">
+				class="forms-emptycontent"
+				:name="t('forms', 'Loading forms …')">
 				<template #icon>
 					<NcLoadingIcon :size="64" />
 				</template>
 			</NcEmptyContent>
 
 			<NcEmptyContent v-else-if="!hasForms"
-				:title="t('forms', 'No forms created yet')">
+				class="forms-emptycontent"
+				:name="t('forms', 'No forms created yet')">
 				<template #icon>
 					<FormsIcon :size="64" />
 				</template>
@@ -76,7 +78,8 @@
 			</NcEmptyContent>
 
 			<NcEmptyContent v-else
-				:title="canCreateForms ? t('forms', 'Select a form or create a new one') : t('forms', 'Please select a form')">
+				class="forms-emptycontent"
+				:name="canCreateForms ? t('forms', 'Select a form or create a new one') : t('forms', 'Please select a form')">
 				<template #icon>
 					<FormsIcon :size="64" />
 				</template>
@@ -378,3 +381,9 @@ export default {
 	},
 }
 </script>
+
+<style scoped lang="scss">
+.forms-emptycontent {
+	height: 100%;
+}
+</style>
diff --git a/src/FormsEmptyContent.vue b/src/FormsEmptyContent.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<NcContent app-name="forms" class="forms-emptycontent">
-		<NcEmptyContent :title="currentModel.title"
+		<NcEmptyContent :name="currentModel.title"
 			:description="currentModel.description">
 			<template #icon>
 				<Icon :is="currentModel.icon" :size="64" />
@@ -82,5 +82,7 @@ export default {
 .forms-emptycontent {
 	flex-basis: 100vw;
 	flex-direction: column;
+	height: 100%;
+	display: flex;
 }
 </style>
diff --git a/src/FormsSettings.vue b/src/FormsSettings.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<div>
-		<NcSettingsSection :title="t('forms', 'Form creation')">
+		<NcSettingsSection :name="t('forms', 'Form creation')">
 			<NcCheckboxRadioSwitch ref="switchRestrictCreation"
 				:checked.sync="appConfig.restrictCreation"
 				class="forms-settings__creation__switch"
@@ -39,7 +39,7 @@
 				label="displayName"
 				@input="onCreationAllowedGroupsChange" />
 		</NcSettingsSection>
-		<NcSettingsSection :title="t('forms', 'Form sharing')">
+		<NcSettingsSection :name="t('forms', 'Form sharing')">
 			<NcCheckboxRadioSwitch ref="switchAllowPublicLink"
 				:checked.sync="appConfig.allowPublicLink"
 				type="switch"

diff --git a/src/components/AppNavigationForm.vue b/src/components/AppNavigationForm.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<NcListItem ref="navigationItem"
-		:title="formTitle"
+		:name="formTitle"
 		:to="{
 			name: routerTarget,
 			params: { hash: form.hash }
@@ -37,7 +37,7 @@
 			<IconCheck v-else-if="isExpired" :size="16" />
 			<FormsIcon v-else :size="16" />
 		</template>
-		<template v-if="hasSubtitle" #subtitle>
+		<template v-if="hasSubtitle" #subname>
 			{{ formSubtitle }}
 		</template>
 		<template v-if="!loading && !readOnly" #actions>

diff --git a/src/components/SidebarTabs/SharingShareDiv.vue b/src/components/SidebarTabs/SharingShareDiv.vue
@@ -31,7 +31,7 @@
 			<span>{{ displayNameAppendix }}</span>
 		</div>
 		<NcActions class="share-div__actions">
-			<NcActionCaption :title="t('forms', 'Permissions')" />
+			<NcActionCaption :name="t('forms', 'Permissions')" />
 			<NcActionCheckbox :checked="canAccessResults" @update:checked="updatePermissionResults">
 				{{ t('forms', 'View responses') }}
 			</NcActionCheckbox>

diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
@@ -198,7 +198,7 @@ export default {
 	align-items: center;
 	align-self: flex-end;
 	justify-content: flex-end;
-	padding: calc(var(--default-grid-baseline, 4px) * 2);
+	padding: var(--app-navigation-padding);
 
 	&__view-select {
 		display: flex;

diff --git a/src/views/Create.vue b/src/views/Create.vue
@@ -24,7 +24,8 @@
 
 <template>
 	<NcAppContent v-if="isLoadingForm">
-		<NcEmptyContent :title="t('forms', 'Loading {title} …', { title: form.title })">
+		<NcEmptyContent class="emtpycontent"
+			:name="t('forms', 'Loading {title} …', { title: form.title })">
 			<template #icon>
 				<NcLoadingIcon :size="64" />
 			</template>
@@ -105,7 +106,7 @@
 			<div class="question-menu">
 				<NcActions ref="questionMenu"
 					:open.sync="questionMenuOpened"
-					:menu-title="t('forms', 'Add a question')"
+					:menu-name="t('forms', 'Add a question')"
 					:aria-label="t('forms', 'Add a question')"
 					:primary="true">
 					<template #icon>
@@ -425,6 +426,11 @@ export default {
 <style lang="scss" scoped>
 @import '../scssmixins/markdownOutput';
 
+.emptycontent {
+	display: flex;
+	height: 100%;
+}
+
 .app-content {
 	display: flex;
 	align-items: center;