mirror/formbricks-formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-02-21 14:29:20 -06:00
Code Issues Packages Projects Releases 100 Wiki Activity

fixed shrink animation

Browse Source
This commit is contained in:
Dhruwang
2023-10-08 23:49:57 +05:30
parent 4c3a17cdcc
commit e3a18632db
1 changed files with 40 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -56,42 +56,6 @@ const previewParentContainerVariant: Variants = {
zIndex: -1,
},
};
const previewScreenVariants: Variants = {
expanded: {
right: "5%",
bottom: "10%",
top: "10%",
width: "40%",
position: "fixed",
height: "80%",
zIndex: 1050,
boxShadow: "0px 4px 5px 4px rgba(169, 169, 169, 0.25)",
transition: {
ease: "easeInOut",
duration: 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%"],
},
};
export default function PreviewSurvey({
setActiveQuestionId,
activeQuestionId,
@@ -106,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,
@@ -243,16 +243,18 @@ export default function PreviewSurvey({
<ArrowsPointingInIcon
className="mr-2 h-4 w-4 cursor-pointer"
onClick={() => {
setIsFullScreenPreview(true);
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"), 200);
setTimeout(() => setPreviewPosition("fixed"), 300);
}}
/>
)}