okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

tweaks to page transitions

Browse source
This commit is contained in:
booploops 2022-02-22 20:04:55 -08:00
parent 1fb350bba9
commit 982f179684
3 changed files with 47 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/renderer/index.js
View file

@ -210,6 +210,7 @@ const app = new Vue({
tmpVar: [],
notification: false,
chrome: {
desiredPageTransition: "wpfade_transform",
hideUserInfo: ipcRenderer.sendSync("is-dev") || false,
artworkReady: false,
userinfo: {
@ -475,7 +476,15 @@ const app = new Vue({
}
},
navigateBack() {
this.chrome.desiredPageTransition = "wpfade_transform_backwards"
return new Promise((resolve, reject) => {
history.back()
setTimeout(() => {
resolve(this.chrome.desiredPageTransition = "wpfade_transform")
}, 100)
})
},
navigateForward() {
history.forward()
@ -899,7 +908,8 @@ const app = new Vue({
bootbox.confirm(app.getLz('term.confirmLogout'), function (result) {
if (result) {
app.mk.unauthorize()
document.location.reload()}
document.location.reload()
}
});
},
getAppClasses() {

25
src/renderer/style.less
View file

@ -2735,12 +2735,31 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
.wpfade_transform-enter-active,
.wpfade_transform-leave-active {
transition: opacity .1s var(--appleEase), transform .1s var(--appleEase);
--transitionTime: 0.2s;
transition: opacity var(--transitionTime) var(--appleEase), transform var(--transitionTime) var(--appleEase);
}
.wpfade_transform-enter,
.wpfade_transform-enter {
opacity: 0;
transform: translateX(50%);
}
.wpfade_transform-leave-to {
transform: translateX(20px);
opacity: 0;
// transform: translateX(-50%);
}
.wpfade_transform_backwards-enter-active,
.wpfade_transform_backwards-leave-active {
--transitionTime: 0.2s;
transition: opacity var(--transitionTime) var(--appleEase), transform var(--transitionTime) var(--appleEase);
}
.wpfade_transform_backwards-enter {
opacity: 0;
transform: translateX(-50%);
}
.wpfade_transform_backwards-leave-to {
opacity: 0;
}

12
src/renderer/views/app/app-content.ejs
View file

@ -17,7 +17,7 @@
<%
}
%>
name="wpfade_transform"
:name="chrome.desiredPageTransition"
>
<template
v-if="<%- env.appRoutes[i].condition %>"
@ -27,7 +27,7 @@
</transition>
<% } %>
<transition v-on:enter="getRadioStations()" name="wpfade_transform">
<transition v-on:enter="getRadioStations()" :name="chrome.desiredPageTransition">
<template v-if="page == 'radio'" @created="console.log('radio')">
<div class="content-inner">
<h1 class="header-text">{{$root.getLz('term.radio')}}</h1>
@ -37,23 +37,23 @@
</template>
</transition>
<!-- Library - Recently Added -->
<transition name="wpfade_transform" v-on:enter="getLibraryAlbumsFull(null, 0); searchLibraryAlbums(0);">
<transition :name="chrome.desiredPageTransition" v-on:enter="getLibraryAlbumsFull(null, 0); searchLibraryAlbums(0);">
<%- include('../pages/library-recentlyadded') %>');
</transition>
<!-- Library - Albums -->
<transition name="wpfade_transform" v-on:enter="getLibraryAlbumsFull(null, 1); searchLibraryAlbums(1);">
<transition :name="chrome.desiredPageTransition" v-on:enter="getLibraryAlbumsFull(null, 1); searchLibraryAlbums(1);">
<%- include('../pages/library-albums') %>');
%>
</transition>
<!-- Library - Made For You -->
<transition name="wpfade_transform" v-on:enter="getMadeForYou()">
<transition :name="chrome.desiredPageTransition" v-on:enter="getMadeForYou()">
<template v-if="page == 'library-madeforyou'">
<%- include('../pages/madeforyou') %>');
%>
</template>
</transition>
<!-- Library - Artists-->
<transition name="wpfade_transform" v-on:enter="getLibraryArtistsFull(null, 0);">
<transition :name="chrome.desiredPageTransition" v-on:enter="getLibraryArtistsFull(null, 0);">
<template v-if="page == 'library-artists'">
<%- include('../pages/library-artists') %>');
%>