From e143b3b0e719e745a1e00756ef88e58b8ba9f2bc Mon Sep 17 00:00:00 2001 From: Nakul Nagargade Date: Fri, 7 Mar 2025 19:31:58 +0530 Subject: [PATCH 01/10] Horizontal and vertical divider revamp --- .../src/AppBuilder/AppCanvas/RenderWidget.jsx | 8 +- .../Inspector/Components/DefaultComponent.jsx | 7 +- .../RightSideBar/Inspector/Inspector.jsx | 2 + .../WidgetManager/widgets/divider.js | 96 +++++++++++++++++-- .../WidgetManager/widgets/verticalDivider.js | 68 +++++++++++-- .../src/AppBuilder/_helpers/editorHelpers.js | 2 +- frontend/src/Editor/Components/Divider.jsx | 79 +++++++++++++-- .../src/Editor/Components/verticalDivider.jsx | 15 ++- .../Editor/WidgetManager/configs/divider.js | 96 +++++++++++++++++-- .../WidgetManager/configs/verticalDivider.js | 68 +++++++++++-- frontend/src/_helpers/editorHelpers.js | 2 +- .../apps/services/widget-config/divider.js | 96 +++++++++++++++++-- .../services/widget-config/verticalDivider.js | 68 +++++++++++-- 13 files changed, 532 insertions(+), 75 deletions(-) diff --git a/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx b/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx index 427cced97b..3bdb18929e 100644 --- a/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx +++ b/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx @@ -7,7 +7,7 @@ import { renderTooltip } from '@/_helpers/appUtils'; import { useTranslation } from 'react-i18next'; import ErrorBoundary from '@/_ui/ErrorBoundary'; -const shouldAddBoxShadowAndVisibility = [ +const SHOULD_ADD_BOX_SHADOW_AND_VISIBILITY = [ 'Table', 'TextInput', 'PasswordInput', @@ -25,6 +25,8 @@ const shouldAddBoxShadowAndVisibility = [ 'DaterangePicker', 'DatePickerV2', 'TimePicker', + 'Divider', + 'VerticalDivider', ]; const RenderWidget = ({ @@ -140,7 +142,7 @@ const RenderWidget = ({ placement={inCanvas ? 'auto' : 'top'} delay={{ show: 500, hide: 0 }} trigger={ - inCanvas && shouldAddBoxShadowAndVisibility.includes(component?.component) + inCanvas && SHOULD_ADD_BOX_SHADOW_AND_VISIBILITY.includes(component?.component) ? !resolvedProperties?.tooltip?.toString().trim() ? null : ['hover', 'focus'] @@ -153,7 +155,7 @@ const RenderWidget = ({ props, text: inCanvas ? `${ - shouldAddBoxShadowAndVisibility.includes(component?.component) + SHOULD_ADD_BOX_SHADOW_AND_VISIBILITY.includes(component?.component) ? resolvedProperties?.tooltip : resolvedGeneralProperties?.tooltip }` diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/DefaultComponent.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/DefaultComponent.jsx index acd1908bba..395c4e5187 100644 --- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/DefaultComponent.jsx +++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/DefaultComponent.jsx @@ -23,6 +23,8 @@ const SHOW_ADDITIONAL_ACTIONS = [ 'Button', 'RichTextEditor', 'Image', + 'Divider', + 'VerticalDivider', ]; const PROPERTIES_VS_ACCORDION_TITLE = { Text: 'Data', @@ -34,6 +36,8 @@ const PROPERTIES_VS_ACCORDION_TITLE = { Button: 'Data', Image: 'Data', Container: 'Data', + Divider: 'Data', + VerticalDivider: 'Data', }; export const DefaultComponent = ({ componentMeta, darkMode, ...restProps }) => { @@ -127,6 +131,8 @@ export const baseComponentProperties = ( 'DropdownV2', 'MultiselectV2', 'Image', + 'Divider', + 'VerticalDivider', ], Layout: [], }; @@ -265,7 +271,6 @@ export const baseComponentProperties = ( ), }); - return items.filter( (item) => !(item.title in accordionFilters && accordionFilters[item.title].includes(componentMeta.component)) ); diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx index 16ed1112b7..585e7ce26e 100644 --- a/frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx +++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx @@ -78,6 +78,8 @@ const NEW_REVAMPED_COMPONENTS = [ 'Icon', 'Image', 'Container', + 'Divider', + 'VerticalDivider', ]; export const Inspector = ({ componentDefinitionChanged, darkMode, pages, selectedComponentId }) => { diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/divider.js b/frontend/src/AppBuilder/WidgetManager/widgets/divider.js index 045f894816..4b35d28719 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/divider.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/divider.js @@ -11,15 +11,12 @@ export const dividerConfig = { showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, }, - properties: {}, - events: {}, - styles: { - dividerColor: { - type: 'color', - displayName: 'Divider color', + properties: { + label: { + type: 'code', + displayName: 'Label', validation: { schema: { type: 'string' }, - defaultValue: '#000000', }, }, visibility: { @@ -29,6 +26,77 @@ export const dividerConfig = { schema: { type: 'boolean' }, defaultValue: true, }, + section: 'additionalActions', + }, + tooltip: { + type: 'code', + displayName: 'Tooltip', + validation: { schema: { type: 'string' }, defaultValue: 'Tooltip text' }, + section: 'additionalActions', + placeholder: 'Enter tooltip text', + }, + }, + events: {}, + styles: { + dividerColor: { + type: 'color', + displayName: 'Divider color', + validation: { + schema: { type: 'string' }, + defaultValue: '#000000', + }, + accordian: 'Divider', + }, + labelAlignment: { + type: 'code', + displayName: 'Label Alignment', + validation: { + schema: { type: 'string' }, + }, + accordian: 'Divider', + }, + dividerStyle: { + type: 'switch', + displayName: 'Style', + validation: { + schema: { type: 'string' }, + }, + options: [ + { displayName: 'Solid', value: 'solid' }, + { displayName: 'Dashed', value: 'dashed' }, + ], + accordian: 'Divider', + }, + labelColor: { + type: 'color', + displayName: 'Label Color', + validation: { + schema: { type: 'string' }, + }, + accordian: 'Divider', + }, + boxShadow: { + type: 'boxShadow', + displayName: 'Box Shadow', + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, + defaultValue: '0px 0px 0px 0px #00000040', + }, + accordian: 'Divider', + }, + padding: { + type: 'switch', + displayName: 'Padding', + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, + defaultValue: 'default', + }, + isFxNotRequired: true, + options: [ + { displayName: 'Default', value: 'default' }, + { displayName: 'None', value: 'none' }, + ], + accordian: 'container', }, }, exposedVariables: { @@ -39,11 +107,19 @@ export const dividerConfig = { showOnDesktop: { value: '{{true}}' }, showOnMobile: { value: '{{false}}' }, }, - properties: {}, + properties: { + label: { value: '' }, + visibility: { value: '{{true}}' }, + tooltip: { value: '' }, + }, events: [], styles: { - visibility: { value: '{{true}}' }, - dividerColor: { value: '#000000' }, + dividerColor: { value: '#CCD1D5' }, + labelAlignment: { value: 'center' }, + dividerStyle: { value: 'solid' }, + labelColor: { value: '#6A727C' }, + padding: { value: 'default' }, + boxShadow: { value: '0px 0px 0px 0px #00000040' }, }, }, }; diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/verticalDivider.js b/frontend/src/AppBuilder/WidgetManager/widgets/verticalDivider.js index 443526c3b8..3e0d1cf740 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/verticalDivider.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/verticalDivider.js @@ -11,7 +11,24 @@ export const verticalDividerConfig = { showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, }, - properties: {}, + properties: { + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + section: 'additionalActions', + }, + tooltip: { + type: 'code', + displayName: 'Tooltip', + validation: { schema: { type: 'string' }, defaultValue: 'Tooltip text' }, + section: 'additionalActions', + placeholder: 'Enter tooltip text', + }, + }, events: {}, styles: { dividerColor: { @@ -21,14 +38,42 @@ export const verticalDividerConfig = { schema: { type: 'string' }, defaultValue: '#000000', }, + accordian: 'Divider', }, - visibility: { - type: 'toggle', - displayName: 'Visibility', + dividerStyle: { + type: 'switch', + displayName: 'Style', validation: { - schema: { type: 'boolean' }, - defaultValue: true, + schema: { type: 'string' }, }, + options: [ + { displayName: 'Solid', value: 'solid' }, + { displayName: 'Dashed', value: 'dashed' }, + ], + accordian: 'Divider', + }, + boxShadow: { + type: 'boxShadow', + displayName: 'Box Shadow', + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, + defaultValue: '0px 0px 0px 0px #00000040', + }, + accordian: 'Divider', + }, + padding: { + type: 'switch', + displayName: 'Padding', + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, + defaultValue: 'default', + }, + isFxNotRequired: true, + options: [ + { displayName: 'Default', value: 'default' }, + { displayName: 'None', value: 'none' }, + ], + accordian: 'container', }, }, exposedVariables: { @@ -39,11 +84,16 @@ export const verticalDividerConfig = { showOnDesktop: { value: '{{true}}' }, showOnMobile: { value: '{{false}}' }, }, - properties: {}, + properties: { + visibility: { value: '{{true}}' }, + tooltip: { value: '' }, + }, events: [], styles: { - visibility: { value: '{{true}}' }, - dividerColor: { value: '#000000' }, + dividerColor: { value: '#CCD1D5' }, + dividerStyle: { value: 'solid' }, + padding: { value: 'default' }, + boxShadow: { value: '0px 0px 0px 0px #00000040' }, }, }, }; diff --git a/frontend/src/AppBuilder/_helpers/editorHelpers.js b/frontend/src/AppBuilder/_helpers/editorHelpers.js index 9abeb9a56b..7120173bb3 100644 --- a/frontend/src/AppBuilder/_helpers/editorHelpers.js +++ b/frontend/src/AppBuilder/_helpers/editorHelpers.js @@ -46,7 +46,7 @@ import { SvgImage } from '@/Editor/Components/SvgImage'; import { Html } from '@/Editor/Components/Html'; import { ButtonGroup } from '@/Editor/Components/ButtonGroup'; import { CustomComponent } from '@/Editor/Components/CustomComponent/CustomComponent'; -import { VerticalDivider } from '@/Editor/Components/verticalDivider'; +import { VerticalDivider } from '@/Editor/Components/VerticalDivider'; import { ColorPicker } from '@/Editor/Components/ColorPicker'; import { KanbanBoard } from '@/Editor/Components/KanbanBoard/KanbanBoard'; // import { Kanban } from '@/Editor/Components/Kanban/Kanban'; diff --git a/frontend/src/Editor/Components/Divider.jsx b/frontend/src/Editor/Components/Divider.jsx index 5935181bf7..e519f64aea 100644 --- a/frontend/src/Editor/Components/Divider.jsx +++ b/frontend/src/Editor/Components/Divider.jsx @@ -1,20 +1,81 @@ import React from 'react'; -export const Divider = function Divider({ styles, dataCy, height, width, darkMode }) { - const { visibility, dividerColor, boxShadow } = styles; - +export const Divider = function Divider({ dataCy, height, width, darkMode, styles, properties }) { + const { labelAlignment, labelColor, dividerColor, boxShadow, dividerStyle } = styles; + const { label, visibility } = properties; const color = dividerColor === '' || ['#000', '#000000'].includes(dividerColor) ? (darkMode ? '#fff' : '#000') : dividerColor; + + const dividerLineStyle = { + width, + padding: '0rem', + boxShadow, + ...(dividerStyle === 'dashed' + ? { + height: 0, // No height for dashed, use border instead + borderTop: `1px dashed ${color}`, + backgroundColor: 'transparent', + } + : { + height: '1px', + backgroundColor: color, + borderTop: 'none', + }), + }; + // If no label, render the original divider + if (!label) { + return ( +
+
+
+ ); + } + + // With label - handle different positions return (
-
+ {labelAlignment === 'start' && ( + <> + {label} +
+ + )} + + {labelAlignment === 'center' && ( +
+
+ {label} +
+
+ )} + + {labelAlignment === 'end' && ( + <> +
+ {label} + + )}
); }; diff --git a/frontend/src/Editor/Components/verticalDivider.jsx b/frontend/src/Editor/Components/verticalDivider.jsx index ba6a38748c..ed9f2d9bfd 100644 --- a/frontend/src/Editor/Components/verticalDivider.jsx +++ b/frontend/src/Editor/Components/verticalDivider.jsx @@ -1,7 +1,8 @@ import React from 'react'; -export const VerticalDivider = function Divider({ styles, height, width, dataCy, darkMode }) { - const { visibility, dividerColor, boxShadow } = styles; +export const VerticalDivider = function Divider({ styles, height, width, dataCy, darkMode, properties }) { + const { dividerColor, boxShadow, dividerStyle } = styles; + const { visibility } = properties; const color = dividerColor === '' || ['#000', '#000000'].includes(dividerColor) ? (darkMode ? '#fff' : '#000') : dividerColor; @@ -14,7 +15,15 @@ export const VerticalDivider = function Divider({ styles, height, width, dataCy,
); diff --git a/frontend/src/Editor/WidgetManager/configs/divider.js b/frontend/src/Editor/WidgetManager/configs/divider.js index 045f894816..4b35d28719 100644 --- a/frontend/src/Editor/WidgetManager/configs/divider.js +++ b/frontend/src/Editor/WidgetManager/configs/divider.js @@ -11,15 +11,12 @@ export const dividerConfig = { showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, }, - properties: {}, - events: {}, - styles: { - dividerColor: { - type: 'color', - displayName: 'Divider color', + properties: { + label: { + type: 'code', + displayName: 'Label', validation: { schema: { type: 'string' }, - defaultValue: '#000000', }, }, visibility: { @@ -29,6 +26,77 @@ export const dividerConfig = { schema: { type: 'boolean' }, defaultValue: true, }, + section: 'additionalActions', + }, + tooltip: { + type: 'code', + displayName: 'Tooltip', + validation: { schema: { type: 'string' }, defaultValue: 'Tooltip text' }, + section: 'additionalActions', + placeholder: 'Enter tooltip text', + }, + }, + events: {}, + styles: { + dividerColor: { + type: 'color', + displayName: 'Divider color', + validation: { + schema: { type: 'string' }, + defaultValue: '#000000', + }, + accordian: 'Divider', + }, + labelAlignment: { + type: 'code', + displayName: 'Label Alignment', + validation: { + schema: { type: 'string' }, + }, + accordian: 'Divider', + }, + dividerStyle: { + type: 'switch', + displayName: 'Style', + validation: { + schema: { type: 'string' }, + }, + options: [ + { displayName: 'Solid', value: 'solid' }, + { displayName: 'Dashed', value: 'dashed' }, + ], + accordian: 'Divider', + }, + labelColor: { + type: 'color', + displayName: 'Label Color', + validation: { + schema: { type: 'string' }, + }, + accordian: 'Divider', + }, + boxShadow: { + type: 'boxShadow', + displayName: 'Box Shadow', + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, + defaultValue: '0px 0px 0px 0px #00000040', + }, + accordian: 'Divider', + }, + padding: { + type: 'switch', + displayName: 'Padding', + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, + defaultValue: 'default', + }, + isFxNotRequired: true, + options: [ + { displayName: 'Default', value: 'default' }, + { displayName: 'None', value: 'none' }, + ], + accordian: 'container', }, }, exposedVariables: { @@ -39,11 +107,19 @@ export const dividerConfig = { showOnDesktop: { value: '{{true}}' }, showOnMobile: { value: '{{false}}' }, }, - properties: {}, + properties: { + label: { value: '' }, + visibility: { value: '{{true}}' }, + tooltip: { value: '' }, + }, events: [], styles: { - visibility: { value: '{{true}}' }, - dividerColor: { value: '#000000' }, + dividerColor: { value: '#CCD1D5' }, + labelAlignment: { value: 'center' }, + dividerStyle: { value: 'solid' }, + labelColor: { value: '#6A727C' }, + padding: { value: 'default' }, + boxShadow: { value: '0px 0px 0px 0px #00000040' }, }, }, }; diff --git a/frontend/src/Editor/WidgetManager/configs/verticalDivider.js b/frontend/src/Editor/WidgetManager/configs/verticalDivider.js index 443526c3b8..3e0d1cf740 100644 --- a/frontend/src/Editor/WidgetManager/configs/verticalDivider.js +++ b/frontend/src/Editor/WidgetManager/configs/verticalDivider.js @@ -11,7 +11,24 @@ export const verticalDividerConfig = { showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, }, - properties: {}, + properties: { + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + section: 'additionalActions', + }, + tooltip: { + type: 'code', + displayName: 'Tooltip', + validation: { schema: { type: 'string' }, defaultValue: 'Tooltip text' }, + section: 'additionalActions', + placeholder: 'Enter tooltip text', + }, + }, events: {}, styles: { dividerColor: { @@ -21,14 +38,42 @@ export const verticalDividerConfig = { schema: { type: 'string' }, defaultValue: '#000000', }, + accordian: 'Divider', }, - visibility: { - type: 'toggle', - displayName: 'Visibility', + dividerStyle: { + type: 'switch', + displayName: 'Style', validation: { - schema: { type: 'boolean' }, - defaultValue: true, + schema: { type: 'string' }, }, + options: [ + { displayName: 'Solid', value: 'solid' }, + { displayName: 'Dashed', value: 'dashed' }, + ], + accordian: 'Divider', + }, + boxShadow: { + type: 'boxShadow', + displayName: 'Box Shadow', + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, + defaultValue: '0px 0px 0px 0px #00000040', + }, + accordian: 'Divider', + }, + padding: { + type: 'switch', + displayName: 'Padding', + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, + defaultValue: 'default', + }, + isFxNotRequired: true, + options: [ + { displayName: 'Default', value: 'default' }, + { displayName: 'None', value: 'none' }, + ], + accordian: 'container', }, }, exposedVariables: { @@ -39,11 +84,16 @@ export const verticalDividerConfig = { showOnDesktop: { value: '{{true}}' }, showOnMobile: { value: '{{false}}' }, }, - properties: {}, + properties: { + visibility: { value: '{{true}}' }, + tooltip: { value: '' }, + }, events: [], styles: { - visibility: { value: '{{true}}' }, - dividerColor: { value: '#000000' }, + dividerColor: { value: '#CCD1D5' }, + dividerStyle: { value: 'solid' }, + padding: { value: 'default' }, + boxShadow: { value: '0px 0px 0px 0px #00000040' }, }, }, }; diff --git a/frontend/src/_helpers/editorHelpers.js b/frontend/src/_helpers/editorHelpers.js index 1f97cc42ee..927dbe00c1 100644 --- a/frontend/src/_helpers/editorHelpers.js +++ b/frontend/src/_helpers/editorHelpers.js @@ -43,7 +43,7 @@ import { SvgImage } from '@/Editor/Components/SvgImage'; import { Html } from '@/Editor/Components/Html'; import { ButtonGroup } from '@/Editor/Components/ButtonGroup'; import { CustomComponent } from '@/Editor/Components/CustomComponent/CustomComponent'; -import { VerticalDivider } from '@/Editor/Components/verticalDivider'; +import { VerticalDivider } from '@/Editor/Components/VerticalDivider'; import { ColorPicker } from '@/Editor/Components/ColorPicker'; import { KanbanBoard } from '@/Editor/Components/KanbanBoard/KanbanBoard'; import { Kanban } from '@/Editor/Components/Kanban/Kanban'; diff --git a/server/src/modules/apps/services/widget-config/divider.js b/server/src/modules/apps/services/widget-config/divider.js index 045f894816..4b35d28719 100644 --- a/server/src/modules/apps/services/widget-config/divider.js +++ b/server/src/modules/apps/services/widget-config/divider.js @@ -11,15 +11,12 @@ export const dividerConfig = { showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, }, - properties: {}, - events: {}, - styles: { - dividerColor: { - type: 'color', - displayName: 'Divider color', + properties: { + label: { + type: 'code', + displayName: 'Label', validation: { schema: { type: 'string' }, - defaultValue: '#000000', }, }, visibility: { @@ -29,6 +26,77 @@ export const dividerConfig = { schema: { type: 'boolean' }, defaultValue: true, }, + section: 'additionalActions', + }, + tooltip: { + type: 'code', + displayName: 'Tooltip', + validation: { schema: { type: 'string' }, defaultValue: 'Tooltip text' }, + section: 'additionalActions', + placeholder: 'Enter tooltip text', + }, + }, + events: {}, + styles: { + dividerColor: { + type: 'color', + displayName: 'Divider color', + validation: { + schema: { type: 'string' }, + defaultValue: '#000000', + }, + accordian: 'Divider', + }, + labelAlignment: { + type: 'code', + displayName: 'Label Alignment', + validation: { + schema: { type: 'string' }, + }, + accordian: 'Divider', + }, + dividerStyle: { + type: 'switch', + displayName: 'Style', + validation: { + schema: { type: 'string' }, + }, + options: [ + { displayName: 'Solid', value: 'solid' }, + { displayName: 'Dashed', value: 'dashed' }, + ], + accordian: 'Divider', + }, + labelColor: { + type: 'color', + displayName: 'Label Color', + validation: { + schema: { type: 'string' }, + }, + accordian: 'Divider', + }, + boxShadow: { + type: 'boxShadow', + displayName: 'Box Shadow', + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, + defaultValue: '0px 0px 0px 0px #00000040', + }, + accordian: 'Divider', + }, + padding: { + type: 'switch', + displayName: 'Padding', + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, + defaultValue: 'default', + }, + isFxNotRequired: true, + options: [ + { displayName: 'Default', value: 'default' }, + { displayName: 'None', value: 'none' }, + ], + accordian: 'container', }, }, exposedVariables: { @@ -39,11 +107,19 @@ export const dividerConfig = { showOnDesktop: { value: '{{true}}' }, showOnMobile: { value: '{{false}}' }, }, - properties: {}, + properties: { + label: { value: '' }, + visibility: { value: '{{true}}' }, + tooltip: { value: '' }, + }, events: [], styles: { - visibility: { value: '{{true}}' }, - dividerColor: { value: '#000000' }, + dividerColor: { value: '#CCD1D5' }, + labelAlignment: { value: 'center' }, + dividerStyle: { value: 'solid' }, + labelColor: { value: '#6A727C' }, + padding: { value: 'default' }, + boxShadow: { value: '0px 0px 0px 0px #00000040' }, }, }, }; diff --git a/server/src/modules/apps/services/widget-config/verticalDivider.js b/server/src/modules/apps/services/widget-config/verticalDivider.js index 443526c3b8..3e0d1cf740 100644 --- a/server/src/modules/apps/services/widget-config/verticalDivider.js +++ b/server/src/modules/apps/services/widget-config/verticalDivider.js @@ -11,7 +11,24 @@ export const verticalDividerConfig = { showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, }, - properties: {}, + properties: { + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + section: 'additionalActions', + }, + tooltip: { + type: 'code', + displayName: 'Tooltip', + validation: { schema: { type: 'string' }, defaultValue: 'Tooltip text' }, + section: 'additionalActions', + placeholder: 'Enter tooltip text', + }, + }, events: {}, styles: { dividerColor: { @@ -21,14 +38,42 @@ export const verticalDividerConfig = { schema: { type: 'string' }, defaultValue: '#000000', }, + accordian: 'Divider', }, - visibility: { - type: 'toggle', - displayName: 'Visibility', + dividerStyle: { + type: 'switch', + displayName: 'Style', validation: { - schema: { type: 'boolean' }, - defaultValue: true, + schema: { type: 'string' }, }, + options: [ + { displayName: 'Solid', value: 'solid' }, + { displayName: 'Dashed', value: 'dashed' }, + ], + accordian: 'Divider', + }, + boxShadow: { + type: 'boxShadow', + displayName: 'Box Shadow', + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, + defaultValue: '0px 0px 0px 0px #00000040', + }, + accordian: 'Divider', + }, + padding: { + type: 'switch', + displayName: 'Padding', + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, + defaultValue: 'default', + }, + isFxNotRequired: true, + options: [ + { displayName: 'Default', value: 'default' }, + { displayName: 'None', value: 'none' }, + ], + accordian: 'container', }, }, exposedVariables: { @@ -39,11 +84,16 @@ export const verticalDividerConfig = { showOnDesktop: { value: '{{true}}' }, showOnMobile: { value: '{{false}}' }, }, - properties: {}, + properties: { + visibility: { value: '{{true}}' }, + tooltip: { value: '' }, + }, events: [], styles: { - visibility: { value: '{{true}}' }, - dividerColor: { value: '#000000' }, + dividerColor: { value: '#CCD1D5' }, + dividerStyle: { value: 'solid' }, + padding: { value: 'default' }, + boxShadow: { value: '0px 0px 0px 0px #00000040' }, }, }, }; From 5df43f3cda99a7eca6b2d9404a65f76a7f6f4b48 Mon Sep 17 00:00:00 2001 From: Nakul Nagargade Date: Tue, 18 Mar 2025 12:59:43 +0530 Subject: [PATCH 02/10] Add mssing icon --- .../AppBuilder/WidgetManager/widgets/divider.js | 16 +++++++++++----- frontend/src/Editor/Components/Divider.jsx | 17 ++++++++++++----- .../src/Editor/WidgetManager/configs/divider.js | 16 +++++++++++----- .../Icon/solidIcons/AlignHorizontalCenter.jsx | 16 ++++++++++++++++ frontend/src/_ui/Icon/solidIcons/index.js | 7 +++++-- .../apps/services/widget-config/divider.js | 16 +++++++++++----- 6 files changed, 66 insertions(+), 22 deletions(-) create mode 100644 frontend/src/_ui/Icon/solidIcons/AlignHorizontalCenter.jsx diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/divider.js b/frontend/src/AppBuilder/WidgetManager/widgets/divider.js index 4b35d28719..6c4478ef55 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/divider.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/divider.js @@ -48,12 +48,18 @@ export const dividerConfig = { accordian: 'Divider', }, labelAlignment: { - type: 'code', - displayName: 'Label Alignment', - validation: { - schema: { type: 'string' }, - }, + type: 'switch', + displayName: 'Label alignment', + validation: { schema: { type: 'string' }, defaultValue: 'left' }, + showLabel: true, + isIcon: true, + options: [ + { displayName: 'alignleftinspector', value: 'left', iconName: 'alignleftinspector' }, + { displayName: 'alignhorizontalcenter', value: 'center', iconName: 'alignhorizontalcenter' }, + { displayName: 'alignrightinspector', value: 'right', iconName: 'alignrightinspector' }, + ], accordian: 'Divider', + isFxNotRequired: true, }, dividerStyle: { type: 'switch', diff --git a/frontend/src/Editor/Components/Divider.jsx b/frontend/src/Editor/Components/Divider.jsx index e519f64aea..18a57ccaee 100644 --- a/frontend/src/Editor/Components/Divider.jsx +++ b/frontend/src/Editor/Components/Divider.jsx @@ -9,7 +9,6 @@ export const Divider = function Divider({ dataCy, height, width, darkMode, style const dividerLineStyle = { width, padding: '0rem', - boxShadow, ...(dividerStyle === 'dashed' ? { height: 0, // No height for dashed, use border instead @@ -27,7 +26,14 @@ export const Divider = function Divider({ dataCy, height, width, darkMode, style return (
@@ -44,11 +50,12 @@ export const Divider = function Divider({ dataCy, height, width, darkMode, style width, height, alignItems: 'center', - justifyContent: labelAlignment === 'start' ? 'flex-start' : labelAlignment === 'end' ? 'flex-end' : 'center', + justifyContent: labelAlignment === 'left' ? 'flex-start' : labelAlignment === 'right' ? 'flex-end' : 'center', + boxShadow, }} data-cy={dataCy} > - {labelAlignment === 'start' && ( + {labelAlignment === 'left' && ( <> {label}
@@ -70,7 +77,7 @@ export const Divider = function Divider({ dataCy, height, width, darkMode, style
)} - {labelAlignment === 'end' && ( + {labelAlignment === 'right' && ( <>
{label} diff --git a/frontend/src/Editor/WidgetManager/configs/divider.js b/frontend/src/Editor/WidgetManager/configs/divider.js index 4b35d28719..6c4478ef55 100644 --- a/frontend/src/Editor/WidgetManager/configs/divider.js +++ b/frontend/src/Editor/WidgetManager/configs/divider.js @@ -48,12 +48,18 @@ export const dividerConfig = { accordian: 'Divider', }, labelAlignment: { - type: 'code', - displayName: 'Label Alignment', - validation: { - schema: { type: 'string' }, - }, + type: 'switch', + displayName: 'Label alignment', + validation: { schema: { type: 'string' }, defaultValue: 'left' }, + showLabel: true, + isIcon: true, + options: [ + { displayName: 'alignleftinspector', value: 'left', iconName: 'alignleftinspector' }, + { displayName: 'alignhorizontalcenter', value: 'center', iconName: 'alignhorizontalcenter' }, + { displayName: 'alignrightinspector', value: 'right', iconName: 'alignrightinspector' }, + ], accordian: 'Divider', + isFxNotRequired: true, }, dividerStyle: { type: 'switch', diff --git a/frontend/src/_ui/Icon/solidIcons/AlignHorizontalCenter.jsx b/frontend/src/_ui/Icon/solidIcons/AlignHorizontalCenter.jsx new file mode 100644 index 0000000000..6b7b2f39ab --- /dev/null +++ b/frontend/src/_ui/Icon/solidIcons/AlignHorizontalCenter.jsx @@ -0,0 +1,16 @@ +import React from 'react'; + +const AlignHorizontalCenter = ({ fill = '', width = '25', className = '', viewBox = '0 0 25 25' }) => { + return ( + + + + ); +}; + +export default AlignHorizontalCenter; diff --git a/frontend/src/_ui/Icon/solidIcons/index.js b/frontend/src/_ui/Icon/solidIcons/index.js index 34a2410e1d..fa22345559 100644 --- a/frontend/src/_ui/Icon/solidIcons/index.js +++ b/frontend/src/_ui/Icon/solidIcons/index.js @@ -171,6 +171,7 @@ import WorkspaceConstants from './WorkspaceConstants.jsx'; import ArrowBackDown from './ArrowBackDown.jsx'; import AlignRightinspector from './AlignRightinspector.jsx'; import AlignLeftinspector from './AlignLeftinspector.jsx'; +import AlignHorizontalCenter from './AlignHorizontalCenter.jsx'; import AlignVerticallyTop from './AlignVerticallyTop.jsx'; import AlignVerticallyBottom from './AlignVerticallyBottom.jsx'; import AlignVerticallyCenter from './AlignVerticallyCenter.jsx'; @@ -241,9 +242,11 @@ const Icon = (props) => { case 'addrectangle': return ; case 'alignleftinspector': - return ; - case 'alignrightinspector': return ; + case 'alignrightinspector': + return ; + case 'alignhorizontalcenter': + return ; case 'alignverticallytop': return ; case 'alignverticallybottom': diff --git a/server/src/modules/apps/services/widget-config/divider.js b/server/src/modules/apps/services/widget-config/divider.js index 4b35d28719..2e53f6d8e0 100644 --- a/server/src/modules/apps/services/widget-config/divider.js +++ b/server/src/modules/apps/services/widget-config/divider.js @@ -48,12 +48,18 @@ export const dividerConfig = { accordian: 'Divider', }, labelAlignment: { - type: 'code', - displayName: 'Label Alignment', - validation: { - schema: { type: 'string' }, - }, + type: 'switch', + displayName: 'Label alignment', + validation: { schema: { type: 'string' }, defaultValue: 'left' }, + isIcon: true, + showLabel: true, + options: [ + { displayName: 'alignleftinspector', value: 'left', iconName: 'alignleftinspector' }, + { displayName: 'alignhorizontalcenter', value: 'center', iconName: 'alignhorizontalcenter' }, + { displayName: 'alignrightinspector', value: 'right', iconName: 'alignrightinspector' }, + ], accordian: 'Divider', + isFxNotRequired: true, }, dividerStyle: { type: 'switch', From ce130241f0884acf3c78d52a5effc0b6f68a003e Mon Sep 17 00:00:00 2001 From: Nakul Nagargade Date: Fri, 21 Mar 2025 12:48:33 +0530 Subject: [PATCH 03/10] fix --- frontend/src/Editor/Components/verticalDivider.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/frontend/src/Editor/Components/verticalDivider.jsx b/frontend/src/Editor/Components/verticalDivider.jsx index ed9f2d9bfd..5dcb402bf7 100644 --- a/frontend/src/Editor/Components/verticalDivider.jsx +++ b/frontend/src/Editor/Components/verticalDivider.jsx @@ -2,14 +2,13 @@ import React from 'react'; export const VerticalDivider = function Divider({ styles, height, width, dataCy, darkMode, properties }) { const { dividerColor, boxShadow, dividerStyle } = styles; - const { visibility } = properties; const color = dividerColor === '' || ['#000', '#000000'].includes(dividerColor) ? (darkMode ? '#fff' : '#000') : dividerColor; return (
From 6a125e4248e24e6f1cfca9dba4120d53e6afcf6f Mon Sep 17 00:00:00 2001 From: Nakul Nagargade Date: Fri, 21 Mar 2025 12:56:31 +0530 Subject: [PATCH 04/10] fix --- .../Components/{verticalDivider.jsx => VerticalDivider.jsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename frontend/src/Editor/Components/{verticalDivider.jsx => VerticalDivider.jsx} (100%) diff --git a/frontend/src/Editor/Components/verticalDivider.jsx b/frontend/src/Editor/Components/VerticalDivider.jsx similarity index 100% rename from frontend/src/Editor/Components/verticalDivider.jsx rename to frontend/src/Editor/Components/VerticalDivider.jsx From c461c04c3d363de350ac58ff96a0d51521d427be Mon Sep 17 00:00:00 2001 From: Nakul Nagargade Date: Mon, 24 Mar 2025 13:46:23 +0530 Subject: [PATCH 05/10] Update names --- frontend/src/AppBuilder/WidgetManager/widgets/divider.js | 4 ++-- .../src/AppBuilder/WidgetManager/widgets/verticalDivider.js | 2 +- frontend/src/Editor/WidgetManager/configs/divider.js | 4 ++-- frontend/src/Editor/WidgetManager/configs/verticalDivider.js | 2 +- server/src/modules/apps/services/widget-config/divider.js | 4 ++-- .../modules/apps/services/widget-config/verticalDivider.js | 2 +- 6 files changed, 9 insertions(+), 9 deletions(-) diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/divider.js b/frontend/src/AppBuilder/WidgetManager/widgets/divider.js index 6c4478ef55..121ca0faac 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/divider.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/divider.js @@ -1,6 +1,6 @@ export const dividerConfig = { - name: 'Divider', - displayName: 'Divider', + name: 'HorizontalDivider', + displayName: 'Horizontal divider', description: 'Separator between components', component: 'Divider', defaultSize: { diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/verticalDivider.js b/frontend/src/AppBuilder/WidgetManager/widgets/verticalDivider.js index 3e0d1cf740..cd3881883f 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/verticalDivider.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/verticalDivider.js @@ -1,6 +1,6 @@ export const verticalDividerConfig = { name: 'VerticalDivider', - displayName: 'Vertical Divider', + displayName: 'Vertical divider', description: 'Vertical line separator', component: 'VerticalDivider', defaultSize: { diff --git a/frontend/src/Editor/WidgetManager/configs/divider.js b/frontend/src/Editor/WidgetManager/configs/divider.js index 6c4478ef55..2682691102 100644 --- a/frontend/src/Editor/WidgetManager/configs/divider.js +++ b/frontend/src/Editor/WidgetManager/configs/divider.js @@ -1,6 +1,6 @@ export const dividerConfig = { - name: 'Divider', - displayName: 'Divider', + name: 'HorizontalDivider', + displayName: 'Horizontal Divider', description: 'Separator between components', component: 'Divider', defaultSize: { diff --git a/frontend/src/Editor/WidgetManager/configs/verticalDivider.js b/frontend/src/Editor/WidgetManager/configs/verticalDivider.js index 3e0d1cf740..cd3881883f 100644 --- a/frontend/src/Editor/WidgetManager/configs/verticalDivider.js +++ b/frontend/src/Editor/WidgetManager/configs/verticalDivider.js @@ -1,6 +1,6 @@ export const verticalDividerConfig = { name: 'VerticalDivider', - displayName: 'Vertical Divider', + displayName: 'Vertical divider', description: 'Vertical line separator', component: 'VerticalDivider', defaultSize: { diff --git a/server/src/modules/apps/services/widget-config/divider.js b/server/src/modules/apps/services/widget-config/divider.js index 2e53f6d8e0..5bd4f4d607 100644 --- a/server/src/modules/apps/services/widget-config/divider.js +++ b/server/src/modules/apps/services/widget-config/divider.js @@ -1,6 +1,6 @@ export const dividerConfig = { - name: 'Divider', - displayName: 'Divider', + name: 'HorizontalDivider', + displayName: 'Horizontal Divider', description: 'Separator between components', component: 'Divider', defaultSize: { diff --git a/server/src/modules/apps/services/widget-config/verticalDivider.js b/server/src/modules/apps/services/widget-config/verticalDivider.js index 3e0d1cf740..cd3881883f 100644 --- a/server/src/modules/apps/services/widget-config/verticalDivider.js +++ b/server/src/modules/apps/services/widget-config/verticalDivider.js @@ -1,6 +1,6 @@ export const verticalDividerConfig = { name: 'VerticalDivider', - displayName: 'Vertical Divider', + displayName: 'Vertical divider', description: 'Vertical line separator', component: 'VerticalDivider', defaultSize: { From 4e59ad56a09cb4c0a011f3800fed961337fc9c20 Mon Sep 17 00:00:00 2001 From: Nakul Nagargade Date: Tue, 25 Mar 2025 01:29:01 +0530 Subject: [PATCH 06/10] fix divider ui feedback --- .../WidgetManager/widgets/divider.js | 24 ++++++------- frontend/src/Editor/Components/Divider.jsx | 35 +++++++++++-------- .../src/Editor/Components/VerticalDivider.jsx | 9 ++--- .../Editor/WidgetManager/configs/divider.js | 24 ++++++------- .../apps/services/widget-config/divider.js | 24 ++++++------- 5 files changed, 59 insertions(+), 57 deletions(-) diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/divider.js b/frontend/src/AppBuilder/WidgetManager/widgets/divider.js index 121ca0faac..f813b847e8 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/divider.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/divider.js @@ -47,6 +47,18 @@ export const dividerConfig = { }, accordian: 'Divider', }, + dividerStyle: { + type: 'switch', + displayName: 'Style', + validation: { + schema: { type: 'string' }, + }, + options: [ + { displayName: 'Solid', value: 'solid' }, + { displayName: 'Dashed', value: 'dashed' }, + ], + accordian: 'Divider', + }, labelAlignment: { type: 'switch', displayName: 'Label alignment', @@ -61,18 +73,6 @@ export const dividerConfig = { accordian: 'Divider', isFxNotRequired: true, }, - dividerStyle: { - type: 'switch', - displayName: 'Style', - validation: { - schema: { type: 'string' }, - }, - options: [ - { displayName: 'Solid', value: 'solid' }, - { displayName: 'Dashed', value: 'dashed' }, - ], - accordian: 'Divider', - }, labelColor: { type: 'color', displayName: 'Label Color', diff --git a/frontend/src/Editor/Components/Divider.jsx b/frontend/src/Editor/Components/Divider.jsx index 18a57ccaee..c5cd06447c 100644 --- a/frontend/src/Editor/Components/Divider.jsx +++ b/frontend/src/Editor/Components/Divider.jsx @@ -1,14 +1,15 @@ import React from 'react'; export const Divider = function Divider({ dataCy, height, width, darkMode, styles, properties }) { - const { labelAlignment, labelColor, dividerColor, boxShadow, dividerStyle } = styles; + const { labelAlignment, labelColor, dividerColor, boxShadow, dividerStyle, padding } = styles; const { label, visibility } = properties; const color = dividerColor === '' || ['#000', '#000000'].includes(dividerColor) ? (darkMode ? '#fff' : '#000') : dividerColor; const dividerLineStyle = { - width, + width: '100%', padding: '0rem', + boxShadow, ...(dividerStyle === 'dashed' ? { height: 0, // No height for dashed, use border instead @@ -21,22 +22,28 @@ export const Divider = function Divider({ dataCy, height, width, darkMode, style borderTop: 'none', }), }; + + const labelStyles = { + color: labelColor, + boxShadow, + fontSize: '11px', + fontWeight: '500', + lineHeight: '16px', + }; + // If no label, render the original divider if (!label) { return (
-
+
); } @@ -46,18 +53,16 @@ export const Divider = function Divider({ dataCy, height, width, darkMode, style
{labelAlignment === 'left' && ( <> - {label} + {label}
)} @@ -72,7 +77,7 @@ export const Divider = function Divider({ dataCy, height, width, darkMode, style }} >
- {label} + {label}
)} @@ -80,7 +85,7 @@ export const Divider = function Divider({ dataCy, height, width, darkMode, style {labelAlignment === 'right' && ( <>
- {label} + {label} )}
diff --git a/frontend/src/Editor/Components/VerticalDivider.jsx b/frontend/src/Editor/Components/VerticalDivider.jsx index 5dcb402bf7..b763e95457 100644 --- a/frontend/src/Editor/Components/VerticalDivider.jsx +++ b/frontend/src/Editor/Components/VerticalDivider.jsx @@ -7,20 +7,17 @@ export const VerticalDivider = function Divider({ styles, height, width, dataCy, return (
-
diff --git a/frontend/src/Editor/WidgetManager/configs/divider.js b/frontend/src/Editor/WidgetManager/configs/divider.js index 2682691102..82bb38da6f 100644 --- a/frontend/src/Editor/WidgetManager/configs/divider.js +++ b/frontend/src/Editor/WidgetManager/configs/divider.js @@ -47,6 +47,18 @@ export const dividerConfig = { }, accordian: 'Divider', }, + dividerStyle: { + type: 'switch', + displayName: 'Style', + validation: { + schema: { type: 'string' }, + }, + options: [ + { displayName: 'Solid', value: 'solid' }, + { displayName: 'Dashed', value: 'dashed' }, + ], + accordian: 'Divider', + }, labelAlignment: { type: 'switch', displayName: 'Label alignment', @@ -61,18 +73,6 @@ export const dividerConfig = { accordian: 'Divider', isFxNotRequired: true, }, - dividerStyle: { - type: 'switch', - displayName: 'Style', - validation: { - schema: { type: 'string' }, - }, - options: [ - { displayName: 'Solid', value: 'solid' }, - { displayName: 'Dashed', value: 'dashed' }, - ], - accordian: 'Divider', - }, labelColor: { type: 'color', displayName: 'Label Color', diff --git a/server/src/modules/apps/services/widget-config/divider.js b/server/src/modules/apps/services/widget-config/divider.js index 5bd4f4d607..4500b89ad3 100644 --- a/server/src/modules/apps/services/widget-config/divider.js +++ b/server/src/modules/apps/services/widget-config/divider.js @@ -47,6 +47,18 @@ export const dividerConfig = { }, accordian: 'Divider', }, + dividerStyle: { + type: 'switch', + displayName: 'Style', + validation: { + schema: { type: 'string' }, + }, + options: [ + { displayName: 'Solid', value: 'solid' }, + { displayName: 'Dashed', value: 'dashed' }, + ], + accordian: 'Divider', + }, labelAlignment: { type: 'switch', displayName: 'Label alignment', @@ -61,18 +73,6 @@ export const dividerConfig = { accordian: 'Divider', isFxNotRequired: true, }, - dividerStyle: { - type: 'switch', - displayName: 'Style', - validation: { - schema: { type: 'string' }, - }, - options: [ - { displayName: 'Solid', value: 'solid' }, - { displayName: 'Dashed', value: 'dashed' }, - ], - accordian: 'Divider', - }, labelColor: { type: 'color', displayName: 'Label Color', From e6a019e004d45c37bfc444487f6d7699478fa28c Mon Sep 17 00:00:00 2001 From: Nakul Nagargade Date: Tue, 25 Mar 2025 14:09:03 +0530 Subject: [PATCH 07/10] Update divider gap --- frontend/src/Editor/Components/Divider.jsx | 10 ++++++++-- .../src/Editor/Components/VerticalDivider.jsx | 16 ++++++++++++++-- 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/frontend/src/Editor/Components/Divider.jsx b/frontend/src/Editor/Components/Divider.jsx index c5cd06447c..349c6f0ddc 100644 --- a/frontend/src/Editor/Components/Divider.jsx +++ b/frontend/src/Editor/Components/Divider.jsx @@ -1,5 +1,8 @@ import React from 'react'; +const DASH_WIDTH = 4; +const DASH_GAP = 4; + export const Divider = function Divider({ dataCy, height, width, darkMode, styles, properties }) { const { labelAlignment, labelColor, dividerColor, boxShadow, dividerStyle, padding } = styles; const { label, visibility } = properties; @@ -12,9 +15,12 @@ export const Divider = function Divider({ dataCy, height, width, darkMode, style boxShadow, ...(dividerStyle === 'dashed' ? { - height: 0, // No height for dashed, use border instead - borderTop: `1px dashed ${color}`, + backgroundImage: `linear-gradient(to right, ${color} ${DASH_WIDTH}px, transparent ${DASH_GAP}px)`, + backgroundSize: `${DASH_WIDTH + DASH_GAP}px 1px`, + backgroundRepeat: 'repeat-x', backgroundColor: 'transparent', + borderTop: 'none', + height: '1px', } : { height: '1px', diff --git a/frontend/src/Editor/Components/VerticalDivider.jsx b/frontend/src/Editor/Components/VerticalDivider.jsx index b763e95457..76042c8908 100644 --- a/frontend/src/Editor/Components/VerticalDivider.jsx +++ b/frontend/src/Editor/Components/VerticalDivider.jsx @@ -1,4 +1,6 @@ import React from 'react'; +const DASH_WIDTH = 4; +const DASH_GAP = 4; export const VerticalDivider = function Divider({ styles, height, width, dataCy, darkMode, properties }) { const { dividerColor, boxShadow, dividerStyle } = styles; @@ -15,8 +17,18 @@ export const VerticalDivider = function Divider({ styles, height, width, dataCy, style={{ height: '100%', width: '1px', - backgroundColor: dividerStyle === 'solid' ? color : 'transparent', - borderLeft: dividerStyle === 'dashed' ? `1px dashed ${color}` : 'none', + ...(dividerStyle === 'dashed' + ? { + backgroundColor: 'transparent', + backgroundImage: `linear-gradient(to bottom, ${color} ${DASH_WIDTH}px, transparent ${DASH_GAP}px)`, + backgroundSize: `1px ${DASH_WIDTH + DASH_GAP}px`, + backgroundRepeat: 'repeat-y', + border: 'none', + } + : { + backgroundColor: dividerStyle === 'solid' ? color : 'transparent', + border: 'none', + }), padding: '0rem', boxShadow, }} From 9be24dc2c20e78c672c2856aa9ae40646037f145 Mon Sep 17 00:00:00 2001 From: Nakul Nagargade Date: Thu, 27 Mar 2025 11:43:04 +0530 Subject: [PATCH 08/10] Add horiizontal icon and migration --- .../icons/widgets/horizontalDivider.jsx | 22 ++++++ .../assets/images/icons/widgets/index.jsx | 9 +-- ...MoveVisibilityDisabledStatesDividerLink.ts | 69 +++++++++++++++++++ .../services/app-import-export.service.ts | 37 +++++----- 4 files changed, 114 insertions(+), 23 deletions(-) create mode 100644 frontend/assets/images/icons/widgets/horizontalDivider.jsx create mode 100644 server/data-migrations/1743053824028-MoveVisibilityDisabledStatesDividerLink.ts diff --git a/frontend/assets/images/icons/widgets/horizontalDivider.jsx b/frontend/assets/images/icons/widgets/horizontalDivider.jsx new file mode 100644 index 0000000000..6f843ae57a --- /dev/null +++ b/frontend/assets/images/icons/widgets/horizontalDivider.jsx @@ -0,0 +1,22 @@ +import React from 'react'; + +const HorizontalDivider = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => ( + + + + + + + + + + + +); + +export default HorizontalDivider; diff --git a/frontend/assets/images/icons/widgets/index.jsx b/frontend/assets/images/icons/widgets/index.jsx index 7ecb678d1b..ee1fed9afb 100644 --- a/frontend/assets/images/icons/widgets/index.jsx +++ b/frontend/assets/images/icons/widgets/index.jsx @@ -13,8 +13,6 @@ import Customcomponent from './customcomponent.jsx'; import Datepicker from './datepicker.jsx'; import DateTimePickerV2 from './datetimepickerV2.jsx'; import Daterangepicker from './daterangepicker.jsx'; -import Divider from './divider.jsx'; -import DividerHorizondal from './dividerhorizontal.jsx'; import Downstatistics from './downstatistics.jsx'; import Dropdown from './dropdown.jsx'; import Filepicker from './filepicker.jsx'; @@ -59,6 +57,7 @@ import Upstatistics from './upstatistics.jsx'; import Verticaldivider from './verticaldivider.jsx'; import TimePicker from './timepicker.jsx'; import DatepickerV2 from './datepickerv2.jsx'; +import HorizontalDivider from './horizontalDivider.jsx'; const WidgetIcon = (props) => { switch (props.name) { @@ -101,10 +100,8 @@ const WidgetIcon = (props) => { return ; case 'daterangepicker': return ; - case 'divider': - return ; - case 'divider-horizondal': - return ; + case 'horizontaldivider': + return ; case 'downstatistics': return ; case 'dropdown': diff --git a/server/data-migrations/1743053824028-MoveVisibilityDisabledStatesDividerLink.ts b/server/data-migrations/1743053824028-MoveVisibilityDisabledStatesDividerLink.ts new file mode 100644 index 0000000000..2a019f0881 --- /dev/null +++ b/server/data-migrations/1743053824028-MoveVisibilityDisabledStatesDividerLink.ts @@ -0,0 +1,69 @@ +import { Component } from '@entities/component.entity'; +import { processDataInBatches } from '@helpers/migration.helper'; +import { EntityManager, MigrationInterface, QueryRunner } from 'typeorm'; + +export class MoveVisibilityDisabledStatesDividerLink1743053824028 implements MigrationInterface { + + public async up(queryRunner: QueryRunner): Promise { + const componentTypes = ['Divider', 'VerticalDivider', 'Link']; + const batchSize = 100; + const entityManager = queryRunner.manager; + + for (const componentType of componentTypes) { + await processDataInBatches( + entityManager, + async (entityManager: EntityManager) => { + return await entityManager.find(Component, { + where: { type: componentType }, + order: { createdAt: 'ASC' }, + }); + }, + async (entityManager: EntityManager, components: Component[]) => { + await this.processUpdates(entityManager, components); + }, + batchSize + ); + } + } + + private async processUpdates(entityManager, components) { + for (const component of components) { + const properties = component.properties; + const styles = component.styles; + const general = component.general; + const generalStyles = component.generalStyles; + const validation = component.validation; + + if (styles.visibility) { + properties.visibility = styles.visibility; + delete styles.visibility; + } + + if (styles.disabledState) { + properties.disabledState = styles.disabledState; + delete styles.disabledState; + } + + if (general?.tooltip) { + properties.tooltip = general?.tooltip; + delete general?.tooltip; + } + + if (generalStyles?.boxShadow) { + styles.boxShadow = generalStyles?.boxShadow; + delete generalStyles?.boxShadow; + } + + await entityManager.update(Component, component.id, { + properties, + styles, + general, + generalStyles, + validation, + }); + } + } + public async down(queryRunner: QueryRunner): Promise { + } + +} diff --git a/server/src/modules/apps/services/app-import-export.service.ts b/server/src/modules/apps/services/app-import-export.service.ts index c80b0ea653..69f1442f5b 100644 --- a/server/src/modules/apps/services/app-import-export.service.ts +++ b/server/src/modules/apps/services/app-import-export.service.ts @@ -51,7 +51,7 @@ type DefaultDataSourceName = | 'tooljetdbdefault' | 'workflowsdefault'; -type NewRevampedComponent = 'Text' | 'TextInput' | 'PasswordInput' | 'NumberInput' | 'Table' | 'Button' | 'Checkbox'; +type NewRevampedComponent = 'Text' | 'TextInput' | 'PasswordInput' | 'NumberInput' | 'Table' | 'Button' | 'Checkbox' | 'Divider' | 'VerticalDivider' | 'Link'; const DefaultDataSourceNames: DefaultDataSourceName[] = [ 'restapidefault', @@ -69,6 +69,9 @@ const NewRevampedComponents: NewRevampedComponent[] = [ 'Table', 'Checkbox', 'Button', + 'Divider', + 'VerticalDivider', + 'Link', ]; @Injectable() @@ -79,7 +82,7 @@ export class AppImportExportService { protected appEnvironmentUtilService: AppEnvironmentUtilService, protected readonly entityManager: EntityManager, protected componentsService: ComponentsService - ) {} + ) { } async export(user: User, id: string, searchParams: any = {}): Promise<{ appV2: App }> { // https://github.com/typeorm/typeorm/issues/3857 @@ -181,13 +184,13 @@ export class AppImportExportService { const components = pages.length > 0 ? await manager - .createQueryBuilder(Component, 'components') - .leftJoinAndSelect('components.layouts', 'layouts') - .where('components.pageId IN(:...pageId)', { - pageId: pages.map((v) => v.id), - }) - .orderBy('components.created_at', 'ASC') - .getMany() + .createQueryBuilder(Component, 'components') + .leftJoinAndSelect('components.layouts', 'layouts') + .where('components.pageId IN(:...pageId)', { + pageId: pages.map((v) => v.id), + }) + .orderBy('components.created_at', 'ASC') + .getMany() : []; const events = await manager @@ -1056,10 +1059,10 @@ export class AppImportExportService { const options = importingDataSource.kind === 'tooljetdb' ? this.replaceTooljetDbTableIds( - importingQuery.options, - externalResourceMappings['tooljet_database'], - organizationId - ) + importingQuery.options, + externalResourceMappings['tooljet_database'], + organizationId + ) : importingQuery.options; const newQuery = manager.create(DataQuery, { @@ -1626,10 +1629,10 @@ export class AppImportExportService { options: dataSourceId == defaultDataSourceIds['tooljetdb'] ? this.replaceTooljetDbTableIds( - query.options, - externalResourceMappings['tooljet_database'], - user.organizationId - ) + query.options, + externalResourceMappings['tooljet_database'], + user.organizationId + ) : query.options, }); await manager.save(newQuery); From f53366ec19ff4e59df828dbb66fd3f51ba8ca81a Mon Sep 17 00:00:00 2001 From: Nakul Nagargade Date: Thu, 27 Mar 2025 11:56:28 +0530 Subject: [PATCH 09/10] fix --- .../1743053824028-MoveVisibilityDisabledStatesDividerLink.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/server/data-migrations/1743053824028-MoveVisibilityDisabledStatesDividerLink.ts b/server/data-migrations/1743053824028-MoveVisibilityDisabledStatesDividerLink.ts index 2a019f0881..21ff07dc0c 100644 --- a/server/data-migrations/1743053824028-MoveVisibilityDisabledStatesDividerLink.ts +++ b/server/data-migrations/1743053824028-MoveVisibilityDisabledStatesDividerLink.ts @@ -39,11 +39,6 @@ export class MoveVisibilityDisabledStatesDividerLink1743053824028 implements Mig delete styles.visibility; } - if (styles.disabledState) { - properties.disabledState = styles.disabledState; - delete styles.disabledState; - } - if (general?.tooltip) { properties.tooltip = general?.tooltip; delete general?.tooltip; From a0992217d176069d5451d82f4c80cf607d6b1117 Mon Sep 17 00:00:00 2001 From: Nakul Nagargade Date: Fri, 28 Mar 2025 13:20:24 +0530 Subject: [PATCH 10/10] make default width 1 grid --- .../src/AppBuilder/WidgetManager/widgets/verticalDivider.js | 2 +- frontend/src/Editor/WidgetManager/configs/verticalDivider.js | 2 +- .../src/modules/apps/services/widget-config/verticalDivider.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/verticalDivider.js b/frontend/src/AppBuilder/WidgetManager/widgets/verticalDivider.js index cd3881883f..34d9029e3a 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/verticalDivider.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/verticalDivider.js @@ -4,7 +4,7 @@ export const verticalDividerConfig = { description: 'Vertical line separator', component: 'VerticalDivider', defaultSize: { - width: 2, + width: 1, height: 100, }, others: { diff --git a/frontend/src/Editor/WidgetManager/configs/verticalDivider.js b/frontend/src/Editor/WidgetManager/configs/verticalDivider.js index cd3881883f..34d9029e3a 100644 --- a/frontend/src/Editor/WidgetManager/configs/verticalDivider.js +++ b/frontend/src/Editor/WidgetManager/configs/verticalDivider.js @@ -4,7 +4,7 @@ export const verticalDividerConfig = { description: 'Vertical line separator', component: 'VerticalDivider', defaultSize: { - width: 2, + width: 1, height: 100, }, others: { diff --git a/server/src/modules/apps/services/widget-config/verticalDivider.js b/server/src/modules/apps/services/widget-config/verticalDivider.js index cd3881883f..34d9029e3a 100644 --- a/server/src/modules/apps/services/widget-config/verticalDivider.js +++ b/server/src/modules/apps/services/widget-config/verticalDivider.js @@ -4,7 +4,7 @@ export const verticalDividerConfig = { description: 'Vertical line separator', component: 'VerticalDivider', defaultSize: { - width: 2, + width: 1, height: 100, }, others: {