Skip to content

Commit

Permalink
Merge pull request #991 from nextcloud/enh/985/new-first-run-wizard-f…
Browse files Browse the repository at this point in the history
…ollow-up

Add transitions
  • Loading branch information
marcoambrosini authored Nov 8, 2023
2 parents 5ebb8e2 + b3935c8 commit f978dde
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 23 deletions.
4 changes: 2 additions & 2 deletions js/firstrunwizard-main.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion js/firstrunwizard-main.js.map

Large diffs are not rendered by default.

104 changes: 84 additions & 20 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,10 @@
<Page0 v-if="page === 0" @next="goToNextPage" />
<div v-else
class="first-run-wizard__wrapper">
<div class="first-run-wizard__background-circle--first-page" :style="backgroundCircleStyle" />
<Transition :name="circleSlideDirection">
<div v-if="page === 1" class="first-run-wizard__background-circle" />
</Transition>
<div class="first-run-wizard__background-bar" />
<NcButton v-if="page > 1"
type="tertiary"
class="first-run-wizard__back-button"
Expand All @@ -53,9 +56,12 @@
</template>
</NcButton>
<div v-if="page === 1" class="first-run-wizard__logo" :style="logoStyle" />
<Page1 v-if="page === 1" @next="goToNextPage" />
<Page2 v-if="page === 2" @next="goToNextPage" />
<Page3 v-if="page === 3" @close="close" />
<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" />
</Transition>
</div>
</NcModal>
</template>
Expand Down Expand Up @@ -91,22 +97,12 @@ export default {
showModal: false,
page: 0,
logoURL: imagePath('firstrunwizard', 'nextcloudLogo.svg'),
pageSlideDirection: undefined,
circleSlideDirection: undefined,
}
},
computed: {
backgroundCircleStyle() {
return this.page === 1
? { top: '-5900px' }
: {
top: '0',
left: '0',
width: '100%',
height: '10px',
borderRadius: '0',
}
},
logoStyle() {
return { backgroundImage: 'url(' + this.logoURL + ')' }
},
Expand Down Expand Up @@ -141,13 +137,25 @@ export default {
},
goToNextPage() {
this.page++
this.pageSlideDirection = 'slide-left'
if (this.page === 1) {
this.circleSlideDirection = 'slide-up'
}
this.$nextTick(() => {
this.page++
})
},
goToPreviousPage() {
this.page--
},
this.pageSlideDirection = 'slide-right'
if (this.page === 2) {
this.circleSlideDirection = 'slide-down'
}
this.$nextTick(() => {
this.page--
})
},
},
}
</script>
Expand All @@ -163,14 +171,23 @@ export default {
min-height: min(520px, 80vh);
}
&__background-circle--first-page {
&__background-circle {
height: 6000px;
width: 6000px;
border-radius: 3000px;
background-color: var(--color-primary-element);
position: absolute;
top: -5900px;
left: calc( -3000px + 50%);
}
&__background-bar {
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 10px;
background-color: var(--color-primary-element);
}
&__back-button {
Expand Down Expand Up @@ -223,4 +240,51 @@ export default {
display: none;
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active,
.slide-up-enter-active,
.slide-up-leave-active,
.slide-down-enter-active,
.slide-down-leave-active {
transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-left-enter {
opacity: 0;
transform: translateX(30%);
}
.slide-left-leave-to {
opacity: 0;
transform: translateX(-30%);
}
.slide-right-enter {
opacity: 0;
transform: translateX(-30%);
}
.slide-right-leave-to {
opacity: 0;
transform: translateX(30%);
}
.slide-up-enter {
top: calc(-5900px);
}
.slide-up-leave-to {
top: calc(-5900px - 80px);
}
.slide-down-enter {
top: calc(-5900px - 80px);
}
.slide-down-leave-to {
top: calc(-5900px);
}
</style>

0 comments on commit f978dde

Please sign in to comment.