RPJosh
/
memories
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix animation

pull/175/head
Varun Patil 2022-11-05 17:37:36 -07:00 committed by Varun Patil
parent 5387586c7a
commit 464c0e819b
2 changed files with 26 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/App.vue
View File

@ -297,19 +297,6 @@ body {
} }
} }
// PhotoSwipe styles
.pswp__button {
color: white;
&,
* {
cursor: pointer;
}
}
.pswp__icn-shadow {
display: none;
}
// Hide horizontal scrollbar on mobile // Hide horizontal scrollbar on mobile
// For the padding removal above // For the padding removal above
#app-content-vue { #app-content-vue {

27
src/components/Viewer.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="memories_viewer outer" v-if="show"> <div class="memories_viewer outer" v-if="show" :class="{ fullyOpened }">
<div class="inner" ref="inner"> <div class="inner" ref="inner">
<div class="top-bar" v-if="photoswipe" :class="{ opened }"> <div class="top-bar" v-if="photoswipe" :class="{ opened }">
<NcActions :inline="3" container=".memories_viewer .pswp"> <NcActions :inline="3" container=".memories_viewer .pswp">
@ -75,6 +75,7 @@ export default class Viewer extends Mixins(GlobalMixin) {
private show = false; private show = false;
private opened = false; private opened = false;
private fullyOpened = false;
/** Base dialog */ /** Base dialog */
private photoswipe: PhotoSwipe | null = null; private photoswipe: PhotoSwipe | null = null;
@ -135,9 +136,14 @@ export default class Viewer extends Mixins(GlobalMixin) {
navElem.style.zIndex = "0"; navElem.style.zIndex = "0";
}); });
this.photoswipe.on("openingAnimationStart", () => { this.photoswipe.on("openingAnimationStart", () => {
this.fullyOpened = false;
this.opened = true; this.opened = true;
}); });
this.photoswipe.on("openingAnimationEnd", () => {
this.fullyOpened = true;
});
this.photoswipe.on("close", () => { this.photoswipe.on("close", () => {
this.fullyOpened = false;
this.opened = false; this.opened = false;
}); });
this.photoswipe.on("destroy", () => { this.photoswipe.on("destroy", () => {
@ -147,6 +153,7 @@ export default class Viewer extends Mixins(GlobalMixin) {
// reset everything // reset everything
this.show = false; this.show = false;
this.opened = false; this.opened = false;
this.fullyOpened = false;
this.photoswipe = null; this.photoswipe = null;
this.list = []; this.list = [];
this.days.clear(); this.days.clear();
@ -423,4 +430,22 @@ export default class Viewer extends Mixins(GlobalMixin) {
opacity: 1; opacity: 1;
} }
} }
.fullyOpened :deep .pswp__container {
transition: transform var(--pswp-transition-duration) ease !important;
}
:deep .pswp {
.pswp__button {
color: white;
&,
* {
cursor: pointer;
}
}
.pswp__icn-shadow {
display: none;
}
}
</style> </style>