jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dialog stack animations complete

Browse Source
This commit is contained in:
Stefan Zermatten
2019-01-24 14:40:38 +02:00
parent 00e8cbc1c8
commit 2e6ef52594
6 changed files with 113 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/imports/ui/dialogStack/DialogBase.Story.vue
View File

@@ -4,7 +4,8 @@
Test Dialog
</div>
<div>
<v-btn @click="openDialog(_uid + 'btn')" :id="_uid + 'btn'">Open Dialog</v-btn>
<v-btn @click="openDialog(_uid + 'btn')" :id="_uid + 'btn'">Open Dialog</v-btn>
<v-btn fab @click="openDialog(_uid + 'fab')" :id="_uid + 'fab'" color="green">Open Dialog</v-btn>
</div>
</dialog-base>
</template>

34
app/imports/ui/dialogStack/DialogBase.vue
View File

@@ -1,20 +1,25 @@
<template>
<v-card>
<v-layout column style="height: 100%;">
<v-toolbar color="primary" dark class="base-dialog-toolbar" :flat="!offsetTop">
<slot name="toolbar"></slot>
</v-toolbar>
<div id="base-dialog-body" v-scroll:#base-dialog-body="onScroll">
<slot></slot>
</div>
<v-card-actions>
<slot name="actions"></slot>
</v-card-actions>
</v-layout>
</v-card>
<v-layout column style="height: 100%;">
<v-toolbar color="primary" dark class="base-dialog-toolbar" :flat="!offsetTop">
<v-btn icon flat @click="close">
<v-icon>
arrow_back
</v-icon>
</v-btn>
<slot name="toolbar"></slot>
</v-toolbar>
<v-card-text id="base-dialog-body" v-scroll:#base-dialog-body="onScroll">
<slot></slot>
</v-card-text>
<v-card-actions>
<slot name="actions"></slot>
</v-card-actions>
</v-layout>
</template>
<script>
import store from "/imports/ui/vuexStore.js";
export default {
data(){ return {
offsetTop: 0,
@@ -23,6 +28,9 @@
onScroll(e){
this.offsetTop = e.target.scrollTop
},
close(){
store.dispatch("popDialogStack");
},
},
}
</script>

4
app/imports/ui/dialogStack/DialogStack.Story.vue
View File

@@ -1,7 +1,9 @@
<template lang="html">
<v-card-text>
<v-layout align-center justify-center>
<v-btn @click="openDialog(_uid + 'btn')" :id="_uid + 'btn'"/>
<v-btn @click="openDialog(_uid + 'btn')" :id="_uid + 'btn'">
Open Dialog
</v-btn>
</v-layout>
</v-card-text>
</template>

107
app/imports/ui/dialogStack/DialogStack.vue
View File

@@ -1,10 +1,12 @@
<template>
<v-layout class="dialog-stack" align-center justify-center>
<div
class="backdrop"
@click="backdropClicked"
:class="dialogs.length ? '' : 'hidden' "
></div>
<transition name="backdrop-fade">
<div
class="backdrop"
@click="backdropClicked"
v-if="dialogs.length"
></div>
</transition>
<transition-group
name="dialog-list"
class="dialog-sizer"
@@ -13,16 +15,17 @@
@leave="leave"
>
<div class="sibling" key="sibling"/>
<div
<v-card
v-for="(dialog, index) in dialogs"
:key="dialog._id"
class="dialog"
:data-element-id="dialog.elementId"
:data-index="index"
:style="getDialogStyle(index)"
:elevation="6"
>
<component :is="dialog.component" :data="dialog.data" @pop="popDialogStack($event)" class="dialog-component"></component>
</div>
</v-card>
</transition-group>
</v-layout>
</template>
@@ -35,7 +38,7 @@
import Vue from "vue";
const OFFSET = 16;
const MOCK_DURATION = 8000; // Keep in sync with css transition of .dialog
const MOCK_DURATION = 400; // Keep in sync with css transition of .dialog
export default {
computed: {
@@ -64,7 +67,7 @@
// Get the original styles so we can repair them later
let originalStyle = {
transform: target.style.transform,
background: target.style.background,
backgroundColor: target.style.backgroundColor,
borderRadius: target.style.borderRadius,
transition: target.style.transition,
boxShadow: target.style.boxShadow,
@@ -73,21 +76,21 @@
// hide the source
source.style.transition = "none";
source.style.visibility = "hidden";
source.style.opacity = "0";
// Instantly mock the source
target.style.transition = 'none';
mockElement({source, target});
// After a full tick, repair the original styles
Vue.nextTick(() => {
// on the next animation frame, repair the styles
requestAnimationFrame(() => {
target.style.transform = originalStyle.transform;
target.style.background = originalStyle.background;
target.style.backgroundColor = originalStyle.backgroundColor;
target.style.borderRadius = originalStyle.borderRadius;
target.style.transition = originalStyle.transition;
target.style.boxShadow = originalStyle.boxShadow;
source.style.transition = originalStyle.sourceTransition;
setTimeout(done, MOCK_DURATION);
setTimeout(() => done, MOCK_DURATION);
});
},
leave(target, done){
@@ -101,8 +104,17 @@
mockElement({source, target});
}
setTimeout(() => {
source.style.visibility = null;
done();
let originalTransition = source.style.transition;
source.style.opacity = null;
source.style.transition = 'none';
target.style.transition = `opacity ${MOCK_DURATION / 4}ms, pointer-events 0s`
requestAnimationFrame(() => {
source.style.transition = originalTransition;
target.style.opacity = "0";
target.style.pointerEvents = "none";
target.style.setProperty('box-shadow', "none", 'important');
setTimeout(done, MOCK_DURATION / 4);
});
}, MOCK_DURATION);
}
},
@@ -110,6 +122,22 @@
</script>
<style scoped>
.backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
z-index: 4;
pointer-events: initial;
}
.backdrop-fade-enter-active, .backdrop-fade-leave-active {
transition: opacity 0.3s;
}
.backdrop-fade-enter, .backdrop-fade-leave-to {
opacity: 0;
}
.dialog-stack {
position: fixed;
top: 0;
@@ -121,35 +149,45 @@
}
.dialog-sizer {
position: relative;
height: 600px;
width: 600px;
width: 80%;
width: calc(100% - 64px);
max-width: 1000px;
height: 80%;
height: calc(100% - 64px);
max-height: 800px;
z-index: 5;
flex: initial;
}
.backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
z-index: 4;
pointer-events: initial;
}
.backdrop.hidden {
display: none
}
/* sm */
@media only screen and (max-width: 960px) and (min-width: 601px){
.dialog-sizer {
width: calc(100% - 32px);
height: calc(100% - 32px);
}
}
/* xs */
@media only screen and (max-width: 600px) {
.dialog-sizer {
width: 100%;
height: 100%;
}
}
.dialog-list-enter .dialog-component, .dialog-list-leave-to .dialog-component {
opacity: 0;
}
.dialog-list-enter-active .dialog-component {
transition: opacity 4s;
transition: opacity 0.3s;
}
.dialog-list-leave-active .dialog-component {
transition: opacity 4s 4s;
transition: opacity 0.3s 0.1s;
}
.dialog-list-enter-active {
transition: all 0.4s, box-shadow 0.1s;
}
.dialog-list-leave-active {
transition: all 0.4s, box-shadow 0.1s 0.3s, opacity 0.1s, pointer-events 0s;
}
.dialog {
transition: all 8s;
transform-origin: top left;
position: absolute;
height: 100%;
@@ -157,7 +195,6 @@
pointer-events: initial;
z-index: 1;
overflow: hidden;
background: white;
}
.dialog > * {
height: 100%;

2
app/imports/ui/dialogStack/dialogStackStore.js
View File

@@ -9,7 +9,6 @@ const dialogStackStore = {
mutations: {
pushDialogStack(state, {component, data, elementId, returnElement, callback}){
// Generate a new _id so that Vue knows how to shuffle the array
console.log({elementId});
const _id = Random.id();
state.dialogs.push({
_id,
@@ -22,7 +21,6 @@ const dialogStackStore = {
updateHistory();
},
popDialogStackMutation (state, result){
console.log({popped: result});
const dialog = state.dialogs.pop();
state.currentResult = null;
updateHistory();

26
app/imports/ui/dialogStack/mockElement.js
View File

@@ -17,20 +17,20 @@ const transformedBoxShadow = (shadowString, deltaWidth, deltaHeight) => {
if (shadowString[0] === 'r'){
let strings = shadowString.match(/rgba\([^)]+\)[^,]+/g);
strings = strings.map(string => {
// TODO move color to end
strings.match(/(rgba\([^)]+\))([^,]+)/)
// Move color to end
let m = string.match(/(rgba\([^)]+\))([^,]+)/);
return `${m[2].trim()} ${m[1]}`;
});
shadowString = strings.join(', ');
}
let scaleAverage = (deltaWidth + deltaHeight) / 2;
let shadows = parse(shadowString);
console.log({shadowString, shadows});
shadows.forEach(shadow => {
shadow.offsetX /= deltaWidth;
shadow.offsetY /= deltaHeight;
shadow.blurRadius /= scaleAverage;
shadow.spreadRadius /= scaleAverage;
})
console.log({newShadows: shadows});
return stringify(shadows);
}
@@ -48,11 +48,15 @@ export default function mockElement({source, target, offset = {x: 0, y: 0}}){
target.style.transform = `translate(${deltaLeft}px, ${deltaTop}px) ` +
`scale(${deltaWidth}, ${deltaHeight})`;
target.style.background = getComputedStyle(source).background;
target.style.borderRadius = transformedRadius(
getComputedStyle(source).borderRadius, deltaWidth, deltaHeight
);
//target.style.boxShadow = transformedBoxShadow(
// getComputedStyle(source).boxShadow, deltaWidth, deltaHeight
//);
target.style.backgroundColor = getComputedStyle(source).backgroundColor;
// Edge might not combine all border radii into a single value,
// So we just sample the top left one if we need to
let oldRadius = getComputedStyle(source).borderRadius ||
getComputedStyle(source).borderTopLeftRadius;
let borderRadius = transformedRadius(oldRadius, deltaWidth, deltaHeight);
target.style.borderRadius = borderRadius;
let boxShadow = transformedBoxShadow(
getComputedStyle(source).boxShadow, deltaWidth, deltaHeight
);
target.style.setProperty('box-shadow', boxShadow, 'important');
};