Extract buttons from pages so the animation does not affect them

Signed-off-by Marco <marcoambrosini@icloud.com>

Author: marcoambrosini

src/App.vue

@@ -62,6 +62,15 @@
 				<Page2 v-else-if="page === 2" @next="goToNextPage" />
 				<Page3 v-else-if="page === 3" @close="close" />
 			</Transition>
+			<NcButton type="primary"
+				alignment="center-reverse"
+				:wide="true"
+				@click="handleButtonCLick">
+				<template v-if="page !== 3" #icon>
+					<ArrowRight :size="20" />
+				</template>
+				{{ buttonText }}
+			</NcButton>
 		</div>
 	</NcModal>
 </template>
@@ -77,6 +86,7 @@ import Page2 from './components/Page2.vue'
 import Page3 from './components/Page3.vue'
 
 import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
+import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 import Close from 'vue-material-design-icons/Close.vue'
 
 export default {
@@ -88,6 +98,7 @@ export default {
 		Page2,
 		NcButton,
 		ArrowLeft,
+		ArrowRight,
 		Page3,
 		Close,
 	},
@@ -122,6 +133,17 @@ export default {
 				return this.page < 3
 			}
 		},
+
+		buttonText() {
+			if (this.page === 1) {
+				return t('firstrunwizard', 'Nextcloud on all your devices')
+			} else if (this.page === 2) {
+				return t('firstrunwizard', 'More about Nextcloud')
+			} else if (this.page === 3) {
+				return t('firstrunwizard', 'Get started!')
+			}
+			return ''
+		},
 	},
 
 	methods: {
@@ -156,6 +178,14 @@ export default {
 			})
 
 		},
+
+		handleButtonCLick() {
+			if (this.page < 3) {
+				this.goToNextPage()
+			} else {
+				this.close()
+			}
+		},
 	},
 }
 </script>
@@ -168,6 +198,8 @@ export default {
 		overflow: hidden;
 		padding: calc(var(--default-grid-baseline) * 5);
 		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
 		min-height: min(520px, 80vh);
 	}
 

src/components/Page1.vue

@@ -46,15 +46,6 @@
 				</Card>
 			</div>
 		</div>
-		<NcButton type="primary"
-			alignment="center-reverse"
-			:wide="true"
-			@click="$emit('next')">
-			<template #icon>
-				<ArrowRight :size="20" />
-			</template>
-			{{ t('firstrunwizard', 'Nextcloud on all your devices') }}
-		</NcButton>
 	</div>
 </template>
 
@@ -65,9 +56,6 @@ import Lock from 'vue-material-design-icons/Lock.vue'
 import BriefcaseCheck from 'vue-material-design-icons/BriefcaseCheck.vue'
 import SwapHorizontal from 'vue-material-design-icons/SwapHorizontal.vue'
 import AccountGroup from 'vue-material-design-icons/AccountGroup.vue'
-import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
-
-import { NcButton } from '@nextcloud/vue'
 
 export default {
 	name: 'Page1',
@@ -78,8 +66,6 @@ export default {
 		BriefcaseCheck,
 		SwapHorizontal,
 		AccountGroup,
-		NcButton,
-		ArrowRight,
 	},
 }
 </script>

src/components/Page2.vue

@@ -40,31 +40,19 @@
 					:title="t('firstrunwizard', 'Calendar and contacts ↗')"
 					:subtitle="t('firstrunwizard', 'Connect your calendar and contacts with your devices.')" />
 			</div>
-		</div><NcButton type="primary"
-			alignment="center-reverse"
-			:wide="true"
-			@click="$emit('next')">
-			<template #icon>
-				<ArrowRight :size="20" />
-			</template>
-			{{ t('firstrunwizard', 'More about Nextcloud') }}
-		</NcButton>
+		</div>
 	</div>
 </template>
 
 <script>
 import Card from './Card.vue'
 import AppStoreBadge from './AppStoreBadge.vue'
-import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
-import { NcButton } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
 
 export default {
 	name: 'Page2',
 
 	components: {
-		NcButton,
-		ArrowRight,
 		Card,
 		AppStoreBadge,
 	},

src/components/Page3.vue

@@ -44,24 +44,17 @@
 			<p class="version-number">
 				{{ versionNumbrer }}
 			</p>
-		</div><NcButton type="primary"
-			alignment="center-reverse"
-			:wide="true"
-			@click="$emit('close')">
-			{{ t('firstrunwizard', 'Get started!') }}
-		</NcButton>
+		</div>
 	</div>
 </template>
 
 <script>
 import Card from './Card.vue'
-import { NcButton } from '@nextcloud/vue'
 
 export default {
 	name: 'Page3',
 
 	components: {
-		NcButton,
 		Card,
 	},