mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

Improve iframe embed UI (#990)

Browse source
This commit is contained in:
Bailey Pumfleet 2021-10-19 11:35:52 +01:00 committed by GitHub
parent 9e69029943
commit 687af03cc3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 76 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
pages/integrations/index.tsx
View file

@ -1,4 +1,5 @@
import { PencilAltIcon, TrashIcon } from "@heroicons/react/outline";
import { ClipboardIcon } from "@heroicons/react/solid";
import { WebhookTriggerEvents } from "@prisma/client";
import Image from "next/image";
import { getErrorFromUnknown } from "pages/_error";
@ -52,8 +53,8 @@ function WebhookListItem(props: { webhook: TWebhook; onEditWebhook: () => void }
});
return (
<ListItem className="p-4 flex w-full">
<div className="flex w-full justify-between my-4">
<ListItem className="flex w-full p-4">
<div className="flex justify-between w-full my-4">
<div className="flex pr-2 border-r border-gray-100">
<span className="flex flex-col space-y-2 text-xs">
{props.webhook.eventTriggers.map((eventTrigger, ind) => (
@ -284,40 +285,68 @@ function WebhookEmbed(props: { webhooks: TWebhook[] }) {
</div>
</div>
<ShellSubHeading className="mt-10" title={t("iframe_embed")} subtitle={t("embed_calcom")} />
<div className="py-6 lg:pb-8 lg:col-span-9">
<div className="mb-6">
<h2 className="text-lg font-medium leading-6 text-gray-900 font-cal"></h2>
<p className="mt-1 text-sm text-gray-500"></p>
</div>
<ShellSubHeading title={t("iframe_embed")} subtitle={t("embed_calcom")} />
<div className="lg:pb-8 lg:col-span-9">
<List>
<ListItem className={classNames("flex-col")}>
<div className={classNames("flex flex-1 space-x-2 w-full p-3 items-center")}>
<Image width={40} height={40} src="/integrations/embed.svg" alt="Embed" />
<div className="flex-grow pl-2 truncate">
<ListItemTitle component="h3">{t("standard_iframe")}</ListItemTitle>
<ListItemText component="p">Embed your calendar within your webpage</ListItemText>
</div>
<div>
<input
id="iframe"
className="px-2 py-1 text-sm text-gray-500 focus:ring-black focus:border-black"
placeholder={t("loading")}
defaultValue={iframeTemplate}
readOnly
/>
<button
onClick={() => {
navigator.clipboard.writeText(iframeTemplate);
showToast("Copied to clipboard", "success");
}}>
<ClipboardIcon className="w-4 h-4 -mb-0.5 mr-2 text-gray-800" />
</button>
</div>
</div>
</ListItem>
<ListItem className={classNames("flex-col")}>
<div className={classNames("flex flex-1 space-x-2 w-full p-3 items-center")}>
<Image width={40} height={40} src="/integrations/embed.svg" alt="Embed" />
<div className="flex-grow pl-2 truncate">
<ListItemTitle component="h3">{t("responsive_fullscreen_iframe")}</ListItemTitle>
<ListItemText component="p">A fullscreen scheduling experience on your website</ListItemText>
</div>
<div>
<input
id="fullscreen"
className="px-2 py-1 text-sm text-gray-500 focus:ring-black focus:border-black"
placeholder={t("loading")}
defaultValue={htmlTemplate}
readOnly
/>
<button
onClick={() => {
navigator.clipboard.writeText(htmlTemplate);
showToast("Copied to clipboard", "success");
}}>
<ClipboardIcon className="w-4 h-4 -mb-0.5 mr-2 text-gray-800" />
</button>
</div>
</div>
</ListItem>
</List>
<div className="grid grid-cols-2 space-x-4">
<div>
<label htmlFor="iframe" className="block text-sm font-medium text-gray-700">
{t("standard_iframe")}
</label>
<div className="mt-1">
<textarea
id="iframe"
className="block w-full h-32 border-gray-300 rounded-sm shadow-sm focus:ring-black focus:border-black sm:text-sm"
placeholder={t("loading")}
defaultValue={iframeTemplate}
readOnly
/>
</div>
<label htmlFor="iframe" className="block text-sm font-medium text-gray-700"></label>
<div className="mt-1"></div>
</div>
<div>
<label htmlFor="fullscreen" className="block text-sm font-medium text-gray-700">
{t("responsive_fullscreen_iframe")}
</label>
<div className="mt-1">
<textarea
id="fullscreen"
className="block w-full h-32 border-gray-300 rounded-sm shadow-sm focus:ring-black focus:border-black sm:text-sm"
placeholder={t("loading")}
defaultValue={htmlTemplate}
readOnly
/>
</div>
<label htmlFor="fullscreen" className="block text-sm font-medium text-gray-700"></label>
<div className="mt-1"></div>
</div>
</div>

15
public/integrations/embed.svg Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 2500 2334" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(5.24539,0,0,5.24539,-1593.99,-1974.38)">
<g transform="matrix(288,0,0,288,283.235,692.769)">
<path d="M0.082,-0.21L0.611,0.001L0.611,-0.178L0.28,-0.292L0.28,-0.299L0.611,-0.413L0.611,-0.592L0.082,-0.381L0.082,-0.21Z" style="fill:rgb(41,41,41);fill-rule:nonzero;"/>
</g>
<g transform="matrix(288,0,0,288,482.871,692.769)">
<path d="M0.406,-0.761L0.24,-0.761L0.006,0.109L0.172,0.109L0.406,-0.761Z" style="fill:rgb(41,41,41);fill-rule:nonzero;"/>
</g>
<g transform="matrix(288,0,0,288,601.507,692.769)">
<path d="M0.611,-0.21L0.611,-0.381L0.082,-0.592L0.082,-0.413L0.413,-0.299L0.413,-0.292L0.082,-0.178L0.082,0.001L0.611,-0.21Z" style="fill:rgb(41,41,41);fill-rule:nonzero;"/>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB