From 4f466fd95d1d6a3628b578c81710df157640a85f Mon Sep 17 00:00:00 2001 From: "GitStart-Cal.com" <121884634+gitstart-calcom@users.noreply.github.com> Date: Tue, 2 May 2023 20:57:01 +0200 Subject: [PATCH] [CAL-1095] Embed modal (floating pop up button) - UI/layout/spacing issues (#8217) * [CAL-1095] Embed modal (floating pop up button) - UI/layout/spacing issues * requested changes --------- Co-authored-by: gitstart-calcom Co-authored-by: Peer Richelsen Co-authored-by: Keith Williams --- apps/web/components/Embed.tsx | 537 +++++++++--------- apps/web/public/static/locales/en/common.json | 10 +- .../form/color-picker/colorpicker.tsx | 7 +- 3 files changed, 279 insertions(+), 275 deletions(-) diff --git a/apps/web/components/Embed.tsx b/apps/web/components/Embed.tsx index 72add48117..44d5fa5d1f 100644 --- a/apps/web/components/Embed.tsx +++ b/apps/web/components/Embed.tsx @@ -1,5 +1,6 @@ import { Collapsible, CollapsibleContent } from "@radix-ui/react-collapsible"; import classNames from "classnames"; +import type { TFunction } from "next-i18next"; import type { NextRouter } from "next/router"; import { useRouter } from "next/router"; import type { MutableRefObject, RefObject } from "react"; @@ -21,11 +22,10 @@ import { TextArea, TextField, ColorPicker, + Select, } from "@calcom/ui"; import { Code, Trello, Sun, ArrowLeft } from "@calcom/ui/components/icon"; -import Select from "@components/ui/form/Select"; - type EmbedType = "inline" | "floating-popup" | "element-click"; type EmbedFramework = "react" | "HTML"; @@ -305,190 +305,189 @@ const getEmbedTypeSpecificString = ({ return ""; }; -const embeds: { - illustration: React.ReactElement; - title: string; - subtitle: string; - type: EmbedType; -}[] = [ - { - title: "Inline Embed", - subtitle: "Loads your event type directly inline with your other website content.", - type: "inline", - illustration: ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ), - }, - { - title: "Floating pop-up button", - subtitle: "Adds a floating button on your site that launches Cal in a dialog.", - type: "floating-popup", - illustration: ( - - - - - - - - - - - ), - }, - { - title: "Pop up via element click", - subtitle: "Open your Cal dialog when someone clicks an element.", - type: "element-click", - illustration: ( - - - - - - - - - - - - +const embeds = (t: TFunction) => + (() => { + return [ + { + title: t("inline_embed"), + subtitle: t("load_inline_content"), + type: "inline", + illustration: ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ), + }, + { + title: t("floating_pop_up_button"), + subtitle: t("floating_button_trigger_modal"), + type: "floating-popup", + illustration: ( + + + + + + + + + + + ), + }, + { + title: t("pop_up_element_click"), + subtitle: t("open_dialog_with_element_click"), + type: "element-click", + illustration: ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ), + }, + ]; + })(); - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ), - }, -]; const tabs = [ { name: "HTML", @@ -534,11 +533,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previ ` } /> -

- {t( - "Need help? See our guides for embedding Cal on Wix, Squarespace, or WordPress, check our common questions, or explore advanced embed options." - )} -

+

{t("need_help_embedding")}

); }), @@ -622,7 +617,7 @@ Cal("init", {origin:"${WEBAPP_URL}"}); const ThemeSelectControl = ({ children, ...props }: ControlProps<{ value: Theme; label: string }, false>) => { return ( - + {children} ); @@ -642,7 +637,7 @@ const ChooseEmbedTypesDialogContent = () => {
- {embeds.map((embed, index) => ( + {embeds(t).map((embed, index) => ( {embed.title} -

{embed.subtitle}

+

{embed.subtitle}

{/*TODO: Add Auto/Fixed toggle from Figma */}
Window sizing
-
+
-
Button Text
+
Button text
{/* Default Values should come from preview iframe */}
@@ -935,14 +930,14 @@ const EmbedTypeCodeAndPreviewDialogContent = ({ }); }} /> -
Display Calendar Icon Button
+
Display calendar icon
-
Position of Button
+
Position of button
null, + }} + onChange={(option) => { + if (!option) { + return; + } + setPreviewState((previewState) => { + return { + ...previewState, + theme: option.value, + }; + }); + }} + options={ThemeOptions} + /> +
))} -