revert "Extract buttons from pages so the animation does not affect t…

…hem #993"

Signed-off-by: Simon L <[email protected]>

src/App.vue

@@ -58,19 +58,10 @@
 			<div v-if="page === 1" class="first-run-wizard__logo" :style="logoStyle" />
 			<Transition :name="pageSlideDirection"
 				mode="out-in">
-				<Page1 v-if="page === 1" />
-				<Page2 v-else-if="page === 2" />
-				<Page3 v-else-if="page === 3" />
+				<Page1 v-if="page === 1" @next="goToNextPage" />
+				<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>
@@ -86,7 +77,6 @@ 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 {
@@ -98,7 +88,6 @@ export default {
 		Page2,
 		NcButton,
 		ArrowLeft,
-		ArrowRight,
 		Page3,
 		Close,
 	},
@@ -133,17 +122,6 @@ 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: {
@@ -178,14 +156,6 @@ export default {
 			})
 
 		},
-
-		handleButtonCLick() {
-			if (this.page < 3) {
-				this.goToNextPage()
-			} else {
-				this.close()
-			}
-		},
 	},
 }
 </script>
@@ -198,8 +168,6 @@ 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,6 +46,15 @@
 				</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>
 
@@ -56,6 +65,9 @@ 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',
@@ -66,6 +78,8 @@ export default {
 		BriefcaseCheck,
 		SwapHorizontal,
 		AccountGroup,
+		NcButton,
+		ArrowRight,
 	},
 }
 </script>

src/components/Page2.vue

@@ -40,19 +40,31 @@
 					:title="t('firstrunwizard', 'Calendar and contacts ↗')"
 					:subtitle="t('firstrunwizard', 'Connect your calendar and contacts with your devices.')" />
 			</div>
-		</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>
 </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,17 +44,24 @@
 			<p class="version-number">
 				{{ versionNumbrer }}
 			</p>
-		</div>
+		</div><NcButton type="primary"
+			alignment="center-reverse"
+			:wide="true"
+			@click="$emit('close')">
+			{{ t('firstrunwizard', 'Get started!') }}
+		</NcButton>
 	</div>
 </template>
 
 <script>
 import Card from './Card.vue'
+import { NcButton } from '@nextcloud/vue'
 
 export default {
 	name: 'Page3',
 
 	components: {
+		NcButton,
 		Card,
 	},