mirror/formbricks-formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2025-12-30 10:19:51 -06:00
Code Issues Packages Projects Releases 100 Wiki Activity

fix: Smoothen full screen preview animation

Browse Source 
fix: Smoothen full screen preview animation
This commit is contained in:
Johannes
2023-10-09 00:01:13 +05:30
committed by GitHub
parent fab187d83d 9bab070778
commit c432e323ce
1 changed files with 39 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
apps/web/app/(app)/environments/[environmentId]/surveys/PreviewSurvey.tsx
View File

@@ -56,39 +56,6 @@ const previewParentContainerVariant: Variants = {
zIndex: -1,
},
};
const previewScreenVariants: Variants = {
expanded: {
right: "5%",
bottom: "2%",
width: "90%",
height: "90%",
zIndex: 1050,
boxShadow: "0px 4px 5px 4px rgba(169, 169, 169, 0.25)",
transition: {
ease: "easeInOut",
duration: 0.3,
},
},
expanded_with_fixed_positioning: {
zIndex: 1050,
position: "fixed",
right: "5%",
bottom: "5%",
width: "90%",
height: "90%",
transition: {
ease: "easeOut",
duration: 0.2,
},
},
shrink: {
display: "relative",
width: ["83.33%"],
height: ["95%"],
},
};
export default function PreviewSurvey({
setActiveQuestionId,
activeQuestionId,
@@ -103,9 +70,45 @@ export default function PreviewSurvey({
const [previewMode, setPreviewMode] = useState("desktop");
const [previewPosition, setPreviewPosition] = useState("relative");
const ContentRef = useRef<HTMLDivElement | null>(null);
const [shrink, setshrink] = useState(false);
const { productOverwrites } = survey || {};
const previewScreenVariants: Variants = {
expanded: {
right: "5%",
bottom: "10%",
top: "12%",
width: "40%",
position: "fixed",
height: "80%",
zIndex: 1050,
boxShadow: "0px 4px 5px 4px rgba(169, 169, 169, 0.25)",
transition: {
ease: "easeInOut",
duration: shrink ? 0.3 : 0,
},
},
expanded_with_fixed_positioning: {
zIndex: 1050,
position: "fixed",
top: "5%",
right: "5%",
bottom: "10%",
width: "90%",
height: "90%",
transition: {
ease: "easeOut",
duration: 0.4,
},
},
shrink: {
display: "relative",
width: ["83.33%"],
height: ["95%"],
},
};
const {
brandColor: surveyBrandColor,
highlightBorderColor: surveyHighlightBorderColor,
@@ -240,14 +243,16 @@ export default function PreviewSurvey({
<ArrowsPointingInIcon
className="mr-2 h-4 w-4 cursor-pointer"
onClick={() => {
setIsFullScreenPreview(false);
setshrink(true);
setPreviewPosition("relative");
setTimeout(() => setIsFullScreenPreview(false), 300);
}}
/>
) : (
<ArrowsPointingOutIcon
className="mr-2 h-4 w-4 cursor-pointer"
onClick={() => {
setshrink(false);
setIsFullScreenPreview(true);
setTimeout(() => setPreviewPosition("fixed"), 300);
}}