Extract buttons from pages so the animation does not affect them 2

Signed-off-by: Marco Ambrosini <marcoambrosini@icloud.com> Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>
nextcloud · Nov 20, 2023 · 345379b · 345379b
1 parent 5f2a7ef
commit 345379b
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 43 deletions.
diff --git a/js/firstrunwizard-main.js b/js/firstrunwizard-main.js
diff --git a/js/firstrunwizard-main.js.map b/js/firstrunwizard-main.js.map
diff --git a/src/App.vue b/src/App.vue
@@ -58,10 +58,19 @@
 			<div v-if="page === 1" class="first-run-wizard__logo" :style="logoStyle" />
 			<Transition :name="pageSlideDirection"
 				mode="out-in">
-				<Page1 v-if="page === 1" @next="goToNextPage" />
-				<Page2 v-else-if="page === 2" @next="goToNextPage" />
-				<Page3 v-else-if="page === 3" @close="close" />
+				<Page1 v-if="page === 1" />
+				<Page2 v-else-if="page === 2" />
+				<Page3 v-else-if="page === 3" />
 			</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,7 +198,8 @@ export default {
 		overflow: hidden;
 		padding: calc(var(--default-grid-baseline) * 5);
 		display: flex;
-		min-height: min(520px, 80vh);
+		flex-direction: column;
+		justify-content: space-between;
 	}
 
 	&__background-circle {
@@ -227,7 +258,7 @@ export default {
 
 @media only screen and (max-width: 512px) {
 	:deep .modal-wrapper .modal-container {
-		height: 100vh;
+		height: 100dvh;
 		top: 0;
 	}
 

diff --git a/src/components/Page1.vue b/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>

diff --git a/src/components/Page2.vue b/src/components/Page2.vue
@@ -40,23 +40,13 @@
 					: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'
 import { loadState } from '@nextcloud/initial-state'
 
@@ -66,8 +56,6 @@ export default {
 	name: 'Page2',
 
 	components: {
-		NcButton,
-		ArrowRight,
 		Card,
 		AppStoreBadge,
 	},

diff --git a/src/components/Page3.vue b/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,
 	},
 

diff --git a/src/components/pageStyles.scss b/src/components/pageStyles.scss
@@ -26,6 +26,7 @@
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
+		min-height: min(520px, 50dvh);
 	}
 
 	&__scroller {