From cb7eb8b19f857af930e720d8fd12cb973307d39d Mon Sep 17 00:00:00 2001 From: Yatharth Verma Date: Mon, 2 Oct 2023 11:40:14 +0530 Subject: [PATCH 1/7] feat: Add full screen preview feature --- .../[environmentId]/surveys/PreviewSurvey.tsx | 189 ++++++++++++------ apps/web/package.json | 1 + pnpm-lock.yaml | 3 + 3 files changed, 128 insertions(+), 65 deletions(-) diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/PreviewSurvey.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/PreviewSurvey.tsx index fd9243d063..0ff8e5381b 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/PreviewSurvey.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/PreviewSurvey.tsx @@ -8,7 +8,13 @@ import type { TProduct } from "@formbricks/types/v1/product"; import { TSurvey } from "@formbricks/types/v1/surveys"; import { Button } from "@formbricks/ui"; import { ArrowPathRoundedSquareIcon } from "@heroicons/react/24/outline"; -import { ComputerDesktopIcon, DevicePhoneMobileIcon } from "@heroicons/react/24/solid"; +import { + ComputerDesktopIcon, + DevicePhoneMobileIcon, + ArrowsPointingOutIcon, + ArrowsPointingInIcon, +} from "@heroicons/react/24/solid"; +import { Variants, motion } from "framer-motion"; import { useEffect, useRef, useState } from "react"; interface PreviewSurveyProps { @@ -21,6 +27,37 @@ interface PreviewSurveyProps { } let surveyNameTemp; +const previewParentContainerVariant: Variants = { + expanded: { + position: "fixed", + height: "100vh", + width: "100vw", + backgroundColor: "rgba(0, 0, 0, 0.4)", + backdropFilter: "blur(15px)", + left: 0, + top: 0, + zIndex: 1040, + }, + shrink: { + backgroundColor: "transparent", + }, +}; + +const previewScreenVariants: Variants = { + expanded: { + position: "absolute", + width: "90%", + height: "90%", + left: "5%", + top: "5%", + transform: "translate(0%, 0%)", + boxShadow: "0px 4px 5px 4px rgba(169, 169, 169, 0.25)", + }, + preview: { + position: "relative", + }, +}; + export default function PreviewSurvey({ survey, setActiveQuestionId, @@ -30,6 +67,7 @@ export default function PreviewSurvey({ environment, }: PreviewSurveyProps) { const [isModalOpen, setIsModalOpen] = useState(true); + const [isFullScreenPreview, setIsFullScreenPreview] = useState(false); const [widgetSetupCompleted, setWidgetSetupCompleted] = useState(false); const [previewMode, setPreviewMode] = useState("desktop"); const ContentRef = useRef(null); @@ -82,21 +120,89 @@ export default function PreviewSurvey({ return (
-
- {previewMode === "mobile" && ( - <> -
- -
-
- {/* below element is use to create notch for the mobile device mockup */} -
+ + + {previewMode === "mobile" && ( + <> +
+ +
+
+ {/* below element is use to create notch for the mobile device mockup */} +
+ {previewType === "modal" ? ( + + + + ) : ( +
+
+
+ +
+
+
+ )} +
+ + )} + {previewMode === "desktop" && ( +
+
+
+
+
+
+
+

+ {previewType === "modal" ? "Your web app" : "Preview"} +

+ {isFullScreenPreview ? ( + setIsFullScreenPreview(false)} + /> + ) : ( + setIsFullScreenPreview(true)} + /> + )} + +
+

+
+ {previewType === "modal" ? ( + previewMode="desktop"> ) : ( -
-
-
+
+
+
)}
- - )} - {previewMode === "desktop" && ( -
-
-
-
-
-
-
-

- {previewType === "modal" ? "Your web app" : "Preview"} - -

-
+ )} + + - {previewType === "modal" ? ( - - - - ) : ( -
-
-
- -
-
-
- )} -
- )} -
{/* for toggling between mobile and desktop mode */}
Date: Mon, 2 Oct 2023 18:19:51 +0530 Subject: [PATCH 2/7] feat: Improve animation --- .../[environmentId]/Navigation.tsx | 2 +- .../[environmentId]/surveys/PreviewSurvey.tsx | 25 ++++++++++++++----- 2 files changed, 20 insertions(+), 7 deletions(-) diff --git a/apps/web/app/(app)/environments/[environmentId]/Navigation.tsx b/apps/web/app/(app)/environments/[environmentId]/Navigation.tsx index 00a054f784..32b04c3afc 100644 --- a/apps/web/app/(app)/environments/[environmentId]/Navigation.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/Navigation.tsx @@ -221,7 +221,7 @@ export default function Navigation({ return ( <> {product && ( -