minor changes to routing forms (#4333)
* added new combined buttons on all pages * fixed required label in routing forms * i18n for routing forms, minor changes to mobile routing forms action items * full width for routing forms descriptin on mobile * i18n fixes Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>pull/4335/head
parent
5965129851
commit
a385a4bb38
|
@ -1182,5 +1182,8 @@
|
|||
"set_my_availability_later": "I'll set my availability later",
|
||||
"problem_saving_user_profile": "There was a problem saving your data. Please try again or reach out to customer support.",
|
||||
"token_invalid_expired": "Token is either invalid or expired.",
|
||||
"routing_forms_description": "You can see all forms and routes you have created here."
|
||||
"routing_forms_description": "You can see all forms and routes you have created here.",
|
||||
"add_new_form": "Add new form",
|
||||
"form_description": "Create your form to route a booker",
|
||||
"copy_link_to_form": "Copy link to form"
|
||||
}
|
||||
|
|
|
@ -82,10 +82,10 @@ function NewFormDialog({ appUrl }: { appUrl: string }) {
|
|||
<DialogContent className="overflow-y-auto">
|
||||
<div className="mb-4">
|
||||
<h3 className="text-lg font-bold leading-6 text-gray-900" id="modal-title">
|
||||
Add New Form
|
||||
{t("add_new_form")}
|
||||
</h3>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Create your form to route a booker</p>
|
||||
<p className="text-sm text-gray-500">{t("forms_description")}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Form
|
||||
|
@ -136,8 +136,8 @@ export const FormActionsDropdown = ({ form, children }: { form: RoutingForm; chi
|
|||
<Button
|
||||
type="button"
|
||||
size="icon"
|
||||
color="secondary"
|
||||
combined
|
||||
color="secondary"
|
||||
className={classNames(disabled && " opacity-30")}
|
||||
StartIcon={Icon.FiMoreHorizontal}
|
||||
/>
|
||||
|
@ -345,7 +345,7 @@ export const FormAction = forwardRef(function FormAction<T extends typeof Button
|
|||
return <></>;
|
||||
}
|
||||
return (
|
||||
<div {...restProps} className="mx-2 self-center rounded-md p-2 hover:bg-gray-200">
|
||||
<div {...restProps} className="self-center rounded-md p-2 hover:bg-gray-200">
|
||||
<Switch
|
||||
checked={!routingForm.disabled}
|
||||
label={label}
|
||||
|
|
|
@ -43,15 +43,8 @@ const Actions = ({
|
|||
const { t } = useLocale();
|
||||
return (
|
||||
<div className="flex items-center">
|
||||
<div className="hidden md:inline-flex md:items-center ">
|
||||
<FormAction
|
||||
className="self-center pr-2 "
|
||||
data-testid="toggle-form"
|
||||
action="toggle"
|
||||
routingForm={form}
|
||||
/>
|
||||
<VerticalDivider />
|
||||
</div>
|
||||
<FormAction className="self-center" data-testid="toggle-form" action="toggle" routingForm={form} />
|
||||
<VerticalDivider />
|
||||
<ButtonGroup combined containerProps={{ className: "hidden md:inline-flex items-center" }}>
|
||||
<Tooltip content={t("preview")}>
|
||||
<FormAction
|
||||
|
@ -114,7 +107,7 @@ const Actions = ({
|
|||
rel="noreferrer"
|
||||
action="preview"
|
||||
StartIcon={Icon.FiExternalLink}>
|
||||
Preview
|
||||
{t("preview")}
|
||||
</FormAction>
|
||||
<FormAction
|
||||
action="copyLink"
|
||||
|
@ -132,16 +125,7 @@ const Actions = ({
|
|||
color="minimal"
|
||||
type="button"
|
||||
StartIcon={Icon.FiDownload}>
|
||||
Download Responses
|
||||
</FormAction>
|
||||
<FormAction
|
||||
action="download"
|
||||
routingForm={form}
|
||||
className="w-full"
|
||||
color="minimal"
|
||||
type="button"
|
||||
StartIcon={Icon.FiDownload}>
|
||||
Download Responses
|
||||
{t("download_responses")}
|
||||
</FormAction>
|
||||
<FormAction
|
||||
action="embed"
|
||||
|
@ -161,17 +145,6 @@ const Actions = ({
|
|||
StartIcon={Icon.FiTrash}>
|
||||
{t("delete")}
|
||||
</FormAction>
|
||||
<DropdownMenuSeparator className="h-px bg-gray-200" />
|
||||
<div className="inline-flex items-center">
|
||||
<Button color="minimal">
|
||||
<FormAction
|
||||
className="self-center"
|
||||
action="toggle"
|
||||
label={form.disabled ? "Enable Form" : "Disable Form"}
|
||||
routingForm={form}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</FormActionsDropdown>
|
||||
</div>
|
||||
<VerticalDivider />
|
||||
|
@ -232,7 +205,7 @@ export default function SingleForm({
|
|||
CTA={<Actions form={form} mutation={mutation} />}>
|
||||
<div className="-mx-4 px-4 sm:px-6 md:-mx-8 md:px-8">
|
||||
<div className="flex flex-col items-center md:flex-row md:items-start">
|
||||
<div className="min-w-72 max-w-72 mb-6 md:mr-6">
|
||||
<div className="lg:min-w-72 lg:max-w-72 mb-6 md:mr-6">
|
||||
<TextField
|
||||
type="text"
|
||||
containerClassName="mb-6"
|
||||
|
|
|
@ -82,7 +82,7 @@ export default function RoutingForms({
|
|||
size="icon"
|
||||
StartIcon={Icon.FiLink}
|
||||
disabled={disabled}
|
||||
tooltip={t("copy_link")}
|
||||
tooltip={t("copy_link_to_form")}
|
||||
/>
|
||||
<FormActionsDropdown form={form}>
|
||||
<FormAction
|
||||
|
|
Loading…
Reference in New Issue