From 80dae07a3a6f9de9baeceafc91f0a8ef372d06b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gustavs=20G=C5=ABtmanis?= Date: Tue, 12 Nov 2024 18:38:57 +0200 Subject: [PATCH] * feat(SFT-1555): add the possibility to add separators for object properties (#1624) * feat(SFT-1555): translations for object property separators in builder * feat(SFT-1555): added object separators for various CRM integrations in builder --------- Co-authored-by: kjmartens --- .../components/form-controls/delimiter.tsx | 58 +++++++++++++++++++ .../app/components/form-controls/index.tsx | 3 + .../app/components/layout/sidebar/sidebar.tsx | 3 + .../property-editor/property-editor.styles.ts | 5 +- packages/client/src/types/properties.ts | 6 ++ .../src/Attributes/Property/Delimiter.php | 22 +++++++ .../src/Attributes/Property/Property.php | 1 + .../Attributes/Property/PropertyProvider.php | 7 +++ .../Versions/ActiveCampaignV3.php | 4 ++ .../CRM/HubSpot/Versions/HubSpotV3.php | 4 ++ .../CRM/Insightly/Versions/InsightlyV31.php | 2 + .../Integrations/CRM/Keap/Versions/KeapV2.php | 3 + .../CRM/Pipedrive/Versions/PipedriveV1.php | 5 ++ .../CRM/Salesforce/Versions/SalesforceV58.php | 5 ++ .../Integrations/CRM/Zoho/Versions/ZohoV2.php | 5 ++ .../plugin/src/Resources/js/client/client.js | 2 +- .../plugin/src/translations/de/freeform.php | 4 ++ .../src/translations/en-US/freeform.php | 4 ++ .../plugin/src/translations/fr/freeform.php | 4 ++ .../plugin/src/translations/nl/freeform.php | 4 ++ 20 files changed, 149 insertions(+), 2 deletions(-) create mode 100644 packages/client/src/app/components/form-controls/delimiter.tsx create mode 100644 packages/plugin/src/Attributes/Property/Delimiter.php diff --git a/packages/client/src/app/components/form-controls/delimiter.tsx b/packages/client/src/app/components/form-controls/delimiter.tsx new file mode 100644 index 000000000..c3be2651e --- /dev/null +++ b/packages/client/src/app/components/form-controls/delimiter.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import type { Delimiter } from '@ff-client/types/properties'; + +type Props = { + delimiter?: Delimiter; +}; + +import { labelText } from '@ff-client/styles/mixins'; +import { shadows } from '@ff-client/styles/variables'; +import styled from 'styled-components'; + +const DelimiterWrapper = styled.div` + position: relative; + min-height: 10px; + + &:before { + content: ''; + position: absolute; + top: 9px; + left: 0; + right: 0; + z-index: 1; + + height: 1px; + margin: 0 var(--margins); + + box-shadow: ${shadows.bottom}; + } + + div { + position: absolute; + left: -5px; + top: 0; + z-index: 2; + + background: var(--background-color); + padding: 0 5px; + + ${labelText}; + font-size: 11px; + + &:empty { + display: none; + } + } +`; + +export const DelimiterElement: React.FC = ({ delimiter }) => { + if (!delimiter) { + return null; + } + + return ( + +
{delimiter.name}
+
+ ); +}; diff --git a/packages/client/src/app/components/form-controls/index.tsx b/packages/client/src/app/components/form-controls/index.tsx index c3a2a7c9b..971a46991 100644 --- a/packages/client/src/app/components/form-controls/index.tsx +++ b/packages/client/src/app/components/form-controls/index.tsx @@ -10,6 +10,7 @@ import type { import { ErrorBoundary } from './boundaries/ErrorBoundary'; import { useVisibility } from './hooks/use-visibility'; +import { DelimiterElement } from './delimiter'; export type UpdateValue = (value: T) => void; @@ -55,6 +56,8 @@ export const FormComponent: React.FC = ({ return ( `}> + + ` background: ${colors.gray050}; overflow-y: auto; + + --background-color: ${colors.gray050}; + --margins: -18px; `; diff --git a/packages/client/src/app/pages/forms/edit/builder/tabs/integrations/property-editor/property-editor.styles.ts b/packages/client/src/app/pages/forms/edit/builder/tabs/integrations/property-editor/property-editor.styles.ts index c6c0999c7..2efdf90f2 100644 --- a/packages/client/src/app/pages/forms/edit/builder/tabs/integrations/property-editor/property-editor.styles.ts +++ b/packages/client/src/app/pages/forms/edit/builder/tabs/integrations/property-editor/property-editor.styles.ts @@ -9,13 +9,16 @@ export const PropertyEditorWrapper = styled.div` flex-direction: column; gap: ${spacings.xl}; - background: ${colors.white}; padding: ${spacings.xl}; + background: ${colors.white}; overflow-y: auto; ${scrollBar}; + --background-color: ${colors.white}; + --margins: -24px; + h1 { padding: 0; margin-top: -11px; diff --git a/packages/client/src/types/properties.ts b/packages/client/src/types/properties.ts index 10d53de50..1ded7c5dd 100644 --- a/packages/client/src/types/properties.ts +++ b/packages/client/src/types/properties.ts @@ -62,6 +62,11 @@ export type OptionGroup = { export type OptionCollection = Array