From 1497c227206cd7627986b901e4f1edeb73231707 Mon Sep 17 00:00:00 2001 From: Vijaykant Yadav Date: Fri, 21 Mar 2025 04:22:45 +0530 Subject: [PATCH 1/2] feature: add alignment property to components --- .../WidgetManager/widgets/buttonGroup.js | 9 +++ .../AppBuilder/WidgetManager/widgets/link.js | 9 +++ .../WidgetManager/widgets/pagination.js | 9 +++ .../WidgetManager/widgets/svgImage.js | 9 +++ .../AppBuilder/WidgetManager/widgets/tags.js | 9 +++ .../src/Editor/Components/ButtonGroup.jsx | 74 +++++++++++-------- .../src/Editor/Components/Image/Image.jsx | 13 +++- frontend/src/Editor/Components/Link.jsx | 3 +- frontend/src/Editor/Components/Pagination.jsx | 9 ++- frontend/src/Editor/Components/SvgImage.jsx | 7 +- frontend/src/Editor/Components/Tags.jsx | 5 +- .../src/Editor/WidgetManager/configs/link.js | 1 + .../services/widget-config/buttonGroup.js | 9 +++ .../apps/services/widget-config/link.js | 9 +++ .../apps/services/widget-config/pagination.js | 9 +++ .../apps/services/widget-config/svgImage.js | 9 +++ .../apps/services/widget-config/tags.js | 9 +++ 17 files changed, 164 insertions(+), 38 deletions(-) diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js b/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js index c0fa889dd5..4ecdd5feec 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js @@ -123,6 +123,14 @@ export const buttonGroupConfig = { defaultValue: '#007bff', }, }, + alignment: { + type: 'alignButtons', + displayName: 'Alignment', + validation: { + schema: { type: 'string' }, + defaultValue: 'left', + }, + }, }, exposedVariables: { selected: [1], @@ -148,6 +156,7 @@ export const buttonGroupConfig = { disabledState: { value: '{{false}}' }, selectedTextColor: { value: '#FFFFFF' }, selectedBackgroundColor: { value: '#4368E3' }, + alignment: { value: 'left' }, }, }, }; diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/link.js b/frontend/src/AppBuilder/WidgetManager/widgets/link.js index bf419e16c0..fcbf648a61 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/link.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/link.js @@ -82,6 +82,14 @@ export const linkConfig = { defaultValue: true, }, }, + alignment: { + type: 'alignButtons', + displayName: 'Alignment', + validation: { + schema: { type: 'string' }, + defaultValue: 'left', + }, + }, }, exposedVariables: {}, actions: [ @@ -106,6 +114,7 @@ export const linkConfig = { textSize: { value: '{{14}}' }, underline: { value: 'on-hover' }, visibility: { value: '{{true}}' }, + alignment: { value: 'left' }, }, }, }; diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/pagination.js b/frontend/src/AppBuilder/WidgetManager/widgets/pagination.js index 6fabfa889a..116d0e9849 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/pagination.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/pagination.js @@ -50,6 +50,14 @@ export const paginationConfig = { defaultValue: false, }, }, + alignment: { + type: 'alignButtons', + displayName: 'Alignment', + validation: { + schema: { type: 'string' }, + defaultValue: 'left', + }, + }, }, exposedVariables: { totalPages: null, @@ -73,6 +81,7 @@ export const paginationConfig = { styles: { visibility: { value: '{{true}}' }, disabledState: { value: '{{false}}' }, + alignment: { value: 'left' }, }, }, }; diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/svgImage.js b/frontend/src/AppBuilder/WidgetManager/widgets/svgImage.js index 315a6e2c28..9780f0cdd6 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/svgImage.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/svgImage.js @@ -32,6 +32,14 @@ export const svgImageConfig = { defaultValue: true, }, }, + alignment: { + type: 'alignButtons', + displayName: 'Alignment', + validation: { + schema: { type: 'string' }, + defaultValue: 'left', + }, + }, }, exposedVariables: { value: {}, @@ -50,6 +58,7 @@ export const svgImageConfig = { events: [], styles: { visibility: { value: '{{true}}' }, + alignment: { value: 'left' }, }, }, }; diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/tags.js b/frontend/src/AppBuilder/WidgetManager/widgets/tags.js index 8af289b23a..73cd44b550 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/tags.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/tags.js @@ -38,6 +38,14 @@ export const tagsConfig = { defaultValue: true, }, }, + alignment: { + type: 'alignButtons', + displayName: 'Alignment', + validation: { + schema: { type: 'string' }, + defaultValue: 'left', + }, + }, }, exposedVariables: {}, definition: { @@ -54,6 +62,7 @@ export const tagsConfig = { events: [], styles: { visibility: { value: '{{true}}' }, + alignment: { value: 'left' }, }, }, }; diff --git a/frontend/src/Editor/Components/ButtonGroup.jsx b/frontend/src/Editor/Components/ButtonGroup.jsx index 7364348271..af02824367 100644 --- a/frontend/src/Editor/Components/ButtonGroup.jsx +++ b/frontend/src/Editor/Components/ButtonGroup.jsx @@ -25,6 +25,7 @@ export const ButtonGroup = function Button({ selectedBackgroundColor, selectedTextColor, boxShadow, + alignment, } = styles; const computedStyles = { @@ -87,38 +88,53 @@ export const ButtonGroup = function Button({ fireEvent('onClick'); } }; + + const mapAlignment = (alignment) => { + switch (alignment) { + case 'left': + return 'flex-start'; + case 'right': + return 'flex-end'; + case 'center': + return 'center'; + default: + return 'flex-start'; // Default to left alignment if the value is unknown + } + }; return ( -
- {label && ( -

- {label} -

- )} +
- {data?.map((item, index) => ( - - ))} + {label} +

+ )} +
+ {data?.map((item, index) => ( + + ))} +
); diff --git a/frontend/src/Editor/Components/Image/Image.jsx b/frontend/src/Editor/Components/Image/Image.jsx index 0f3ea0e2b0..03b4daefda 100644 --- a/frontend/src/Editor/Components/Image/Image.jsx +++ b/frontend/src/Editor/Components/Image/Image.jsx @@ -23,8 +23,17 @@ export const Image = function Image({ }) { const { imageFormat, source, jsSchema, alternativeText, zoomButtons, rotateButton, loadingState, disabledState } = properties; - const { imageFit, imageShape, backgroundColor, padding, customPadding, boxShadow, borderRadius, borderColor } = - styles; + const { + imageFit, + imageShape, + backgroundColor, + padding, + customPadding, + boxShadow, + borderRadius, + borderColor, + alignment, + } = styles; const isInitialRender = useRef(true); diff --git a/frontend/src/Editor/Components/Link.jsx b/frontend/src/Editor/Components/Link.jsx index ff993acc17..871d092e5e 100644 --- a/frontend/src/Editor/Components/Link.jsx +++ b/frontend/src/Editor/Components/Link.jsx @@ -3,13 +3,14 @@ import cx from 'classnames'; export const Link = ({ height, properties, styles, fireEvent, setExposedVariable, dataCy }) => { const { linkTarget, linkText, targetType } = properties; - const { textColor, textSize, underline, visibility, boxShadow } = styles; + const { textColor, textSize, underline, visibility, boxShadow, alignment } = styles; const clickRef = useRef(); const computedStyles = { fontSize: textSize, height, boxShadow, + justifyContent: alignment, }; useEffect(() => { diff --git a/frontend/src/Editor/Components/Pagination.jsx b/frontend/src/Editor/Components/Pagination.jsx index c7fe5f2993..b2b052def9 100644 --- a/frontend/src/Editor/Components/Pagination.jsx +++ b/frontend/src/Editor/Components/Pagination.jsx @@ -12,7 +12,7 @@ export const Pagination = ({ width, }) => { const isInitialRender = useRef(true); - const { visibility, disabledState, boxShadow } = styles; + const { visibility, disabledState, boxShadow, alignment } = styles; const [currentPage, setCurrentPage] = useState(() => properties?.defaultPageIndex ?? 1); const pageChanged = (number) => { @@ -65,7 +65,12 @@ export const Pagination = ({ }; return ( -
+
    -
    +
); }; diff --git a/frontend/src/Editor/Components/Tags.jsx b/frontend/src/Editor/Components/Tags.jsx index a4d282ca14..c11966106e 100644 --- a/frontend/src/Editor/Components/Tags.jsx +++ b/frontend/src/Editor/Components/Tags.jsx @@ -2,14 +2,15 @@ import React from 'react'; export const Tags = function Tags({ width, height, properties, styles, dataCy }) { const { data } = properties; - const { visibility, boxShadow } = styles; + const { visibility, boxShadow, alignment } = styles; const computedStyles = { width, height, - display: visibility ? '' : 'none', + display: visibility ? 'flex' : 'none', overflowY: 'auto', boxShadow, + justifyContent: alignment, }; function renderTag(item, index) { diff --git a/frontend/src/Editor/WidgetManager/configs/link.js b/frontend/src/Editor/WidgetManager/configs/link.js index bf419e16c0..7252ab7b07 100644 --- a/frontend/src/Editor/WidgetManager/configs/link.js +++ b/frontend/src/Editor/WidgetManager/configs/link.js @@ -106,6 +106,7 @@ export const linkConfig = { textSize: { value: '{{14}}' }, underline: { value: 'on-hover' }, visibility: { value: '{{true}}' }, + alignment: { value: 'left' }, }, }, }; diff --git a/server/src/modules/apps/services/widget-config/buttonGroup.js b/server/src/modules/apps/services/widget-config/buttonGroup.js index c0fa889dd5..4ecdd5feec 100644 --- a/server/src/modules/apps/services/widget-config/buttonGroup.js +++ b/server/src/modules/apps/services/widget-config/buttonGroup.js @@ -123,6 +123,14 @@ export const buttonGroupConfig = { defaultValue: '#007bff', }, }, + alignment: { + type: 'alignButtons', + displayName: 'Alignment', + validation: { + schema: { type: 'string' }, + defaultValue: 'left', + }, + }, }, exposedVariables: { selected: [1], @@ -148,6 +156,7 @@ export const buttonGroupConfig = { disabledState: { value: '{{false}}' }, selectedTextColor: { value: '#FFFFFF' }, selectedBackgroundColor: { value: '#4368E3' }, + alignment: { value: 'left' }, }, }, }; diff --git a/server/src/modules/apps/services/widget-config/link.js b/server/src/modules/apps/services/widget-config/link.js index bf419e16c0..fcbf648a61 100644 --- a/server/src/modules/apps/services/widget-config/link.js +++ b/server/src/modules/apps/services/widget-config/link.js @@ -82,6 +82,14 @@ export const linkConfig = { defaultValue: true, }, }, + alignment: { + type: 'alignButtons', + displayName: 'Alignment', + validation: { + schema: { type: 'string' }, + defaultValue: 'left', + }, + }, }, exposedVariables: {}, actions: [ @@ -106,6 +114,7 @@ export const linkConfig = { textSize: { value: '{{14}}' }, underline: { value: 'on-hover' }, visibility: { value: '{{true}}' }, + alignment: { value: 'left' }, }, }, }; diff --git a/server/src/modules/apps/services/widget-config/pagination.js b/server/src/modules/apps/services/widget-config/pagination.js index 6fabfa889a..116d0e9849 100644 --- a/server/src/modules/apps/services/widget-config/pagination.js +++ b/server/src/modules/apps/services/widget-config/pagination.js @@ -50,6 +50,14 @@ export const paginationConfig = { defaultValue: false, }, }, + alignment: { + type: 'alignButtons', + displayName: 'Alignment', + validation: { + schema: { type: 'string' }, + defaultValue: 'left', + }, + }, }, exposedVariables: { totalPages: null, @@ -73,6 +81,7 @@ export const paginationConfig = { styles: { visibility: { value: '{{true}}' }, disabledState: { value: '{{false}}' }, + alignment: { value: 'left' }, }, }, }; diff --git a/server/src/modules/apps/services/widget-config/svgImage.js b/server/src/modules/apps/services/widget-config/svgImage.js index 315a6e2c28..9780f0cdd6 100644 --- a/server/src/modules/apps/services/widget-config/svgImage.js +++ b/server/src/modules/apps/services/widget-config/svgImage.js @@ -32,6 +32,14 @@ export const svgImageConfig = { defaultValue: true, }, }, + alignment: { + type: 'alignButtons', + displayName: 'Alignment', + validation: { + schema: { type: 'string' }, + defaultValue: 'left', + }, + }, }, exposedVariables: { value: {}, @@ -50,6 +58,7 @@ export const svgImageConfig = { events: [], styles: { visibility: { value: '{{true}}' }, + alignment: { value: 'left' }, }, }, }; diff --git a/server/src/modules/apps/services/widget-config/tags.js b/server/src/modules/apps/services/widget-config/tags.js index 8af289b23a..73cd44b550 100644 --- a/server/src/modules/apps/services/widget-config/tags.js +++ b/server/src/modules/apps/services/widget-config/tags.js @@ -38,6 +38,14 @@ export const tagsConfig = { defaultValue: true, }, }, + alignment: { + type: 'alignButtons', + displayName: 'Alignment', + validation: { + schema: { type: 'string' }, + defaultValue: 'left', + }, + }, }, exposedVariables: {}, definition: { @@ -54,6 +62,7 @@ export const tagsConfig = { events: [], styles: { visibility: { value: '{{true}}' }, + alignment: { value: 'left' }, }, }, }; From ec6e22613069102fb912ca9d52d3186768cf7acb Mon Sep 17 00:00:00 2001 From: Vijaykant Yadav Date: Thu, 3 Apr 2025 14:36:07 +0530 Subject: [PATCH 2/2] fix: image alignment --- .../src/AppBuilder/WidgetManager/widgets/image.js | 13 +++++++++++-- frontend/src/Editor/Components/Image/Image.jsx | 1 + frontend/src/Editor/WidgetManager/configs/image.js | 10 ++++++++++ .../modules/apps/services/widget-config/image.js | 13 +++++++++++-- 4 files changed, 33 insertions(+), 4 deletions(-) diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/image.js b/frontend/src/AppBuilder/WidgetManager/widgets/image.js index c4bd7b6147..b962c270a5 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/image.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/image.js @@ -143,6 +143,15 @@ export const imageConfig = { }, accordian: 'Image', }, + alignment: { + type: 'alignButtons', + displayName: 'Alignment', + validation: { + schema: { type: 'string' }, + defaultValue: 'center', + }, + accordian: 'Image', + }, backgroundColor: { type: 'color', displayName: 'Background', @@ -179,11 +188,11 @@ export const imageConfig = { padding: { type: 'switch', displayName: 'Padding', - validation: { schema: { type: 'string' }, defaultValue: 'default' }, options: [ { displayName: 'Default', value: 'default' }, { displayName: 'Custom', value: 'custom' }, ], + validation: { schema: { type: 'string' }, defaultValue: 'default' }, accordian: 'Container', isFxNotRequired: true, }, @@ -244,7 +253,6 @@ export const imageConfig = { loadingState: { value: '{{false}}' }, disabledState: { value: '{{false}}' }, visibility: { value: '{{true}}' }, - visible: { value: '{{true}}' }, }, events: [], styles: { @@ -256,6 +264,7 @@ export const imageConfig = { boxShadow: { value: '0px 0px 0px 0px #00000090' }, padding: { value: 'default' }, customPadding: { value: '{{0}}' }, + alignment: { value: 'center' }, }, }, }; diff --git a/frontend/src/Editor/Components/Image/Image.jsx b/frontend/src/Editor/Components/Image/Image.jsx index 03b4daefda..6df6bd047e 100644 --- a/frontend/src/Editor/Components/Image/Image.jsx +++ b/frontend/src/Editor/Components/Image/Image.jsx @@ -177,6 +177,7 @@ export const Image = function Image({ border: '1px solid', borderRadius: imageShape === 'circle' ? '50%' : `${borderRadius}px`, borderColor: borderColor ? borderColor : 'transparent', + objectPosition: alignment, }} height={height} onClick={() => fireEvent('onClick')} diff --git a/frontend/src/Editor/WidgetManager/configs/image.js b/frontend/src/Editor/WidgetManager/configs/image.js index 453d9b4ed6..b962c270a5 100644 --- a/frontend/src/Editor/WidgetManager/configs/image.js +++ b/frontend/src/Editor/WidgetManager/configs/image.js @@ -143,6 +143,15 @@ export const imageConfig = { }, accordian: 'Image', }, + alignment: { + type: 'alignButtons', + displayName: 'Alignment', + validation: { + schema: { type: 'string' }, + defaultValue: 'center', + }, + accordian: 'Image', + }, backgroundColor: { type: 'color', displayName: 'Background', @@ -255,6 +264,7 @@ export const imageConfig = { boxShadow: { value: '0px 0px 0px 0px #00000090' }, padding: { value: 'default' }, customPadding: { value: '{{0}}' }, + alignment: { value: 'center' }, }, }, }; diff --git a/server/src/modules/apps/services/widget-config/image.js b/server/src/modules/apps/services/widget-config/image.js index c4bd7b6147..b962c270a5 100644 --- a/server/src/modules/apps/services/widget-config/image.js +++ b/server/src/modules/apps/services/widget-config/image.js @@ -143,6 +143,15 @@ export const imageConfig = { }, accordian: 'Image', }, + alignment: { + type: 'alignButtons', + displayName: 'Alignment', + validation: { + schema: { type: 'string' }, + defaultValue: 'center', + }, + accordian: 'Image', + }, backgroundColor: { type: 'color', displayName: 'Background', @@ -179,11 +188,11 @@ export const imageConfig = { padding: { type: 'switch', displayName: 'Padding', - validation: { schema: { type: 'string' }, defaultValue: 'default' }, options: [ { displayName: 'Default', value: 'default' }, { displayName: 'Custom', value: 'custom' }, ], + validation: { schema: { type: 'string' }, defaultValue: 'default' }, accordian: 'Container', isFxNotRequired: true, }, @@ -244,7 +253,6 @@ export const imageConfig = { loadingState: { value: '{{false}}' }, disabledState: { value: '{{false}}' }, visibility: { value: '{{true}}' }, - visible: { value: '{{true}}' }, }, events: [], styles: { @@ -256,6 +264,7 @@ export const imageConfig = { boxShadow: { value: '0px 0px 0px 0px #00000090' }, padding: { value: 'default' }, customPadding: { value: '{{0}}' }, + alignment: { value: 'center' }, }, }, };