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

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');
};