Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-24 09:28:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #12324 from ToolJet/feat/add-alignments-property

Browse source 
Feature: add alignment property to components
This commit is contained in:
Johnson Cherian 2025-04-07 09:55:24 +05:30 committed by GitHub
commit 3b46d4a6ca
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 192 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js
View file

@ -123,6 +123,14 @@ export const buttonGroupConfig = {
defaultValue: '#007bff', defaultValue: '#007bff',
}, },
}, },
alignment: {
type: 'alignButtons',
displayName: 'Alignment',
validation: {
schema: { type: 'string' },
defaultValue: 'left',
},
},
}, },
exposedVariables: { exposedVariables: {
selected: [1], selected: [1],
@ -155,6 +163,7 @@ export const buttonGroupConfig = {
disabledState: { value: '{{false}}' }, disabledState: { value: '{{false}}' },
selectedTextColor: { value: '#FFFFFF' }, selectedTextColor: { value: '#FFFFFF' },
selectedBackgroundColor: { value: '#4368E3' }, selectedBackgroundColor: { value: '#4368E3' },
alignment: { value: 'left' },
}, },
}, },
}; };

13
frontend/src/AppBuilder/WidgetManager/widgets/image.js
View file

@ -143,6 +143,15 @@ export const imageConfig = {
}, },
accordian: 'Image', accordian: 'Image',
}, },
alignment: {
type: 'alignButtons',
displayName: 'Alignment',
validation: {
schema: { type: 'string' },
defaultValue: 'center',
},
accordian: 'Image',
},
backgroundColor: { backgroundColor: {
type: 'color', type: 'color',
displayName: 'Background', displayName: 'Background',
@ -179,11 +188,11 @@ export const imageConfig = {
padding: { padding: {
type: 'switch', type: 'switch',
displayName: 'Padding', displayName: 'Padding',
validation: { schema: { type: 'string' }, defaultValue: 'default' },
options: [ options: [
{ displayName: 'Default', value: 'default' }, { displayName: 'Default', value: 'default' },
{ displayName: 'Custom', value: 'custom' }, { displayName: 'Custom', value: 'custom' },
], ],
validation: { schema: { type: 'string' }, defaultValue: 'default' },
accordian: 'Container', accordian: 'Container',
isFxNotRequired: true, isFxNotRequired: true,
}, },
@ -244,7 +253,6 @@ export const imageConfig = {
loadingState: { value: '{{false}}' }, loadingState: { value: '{{false}}' },
disabledState: { value: '{{false}}' }, disabledState: { value: '{{false}}' },
visibility: { value: '{{true}}' }, visibility: { value: '{{true}}' },
visible: { value: '{{true}}' },
}, },
events: [], events: [],
styles: { styles: {
@ -256,6 +264,7 @@ export const imageConfig = {
boxShadow: { value: '0px 0px 0px 0px #00000090' }, boxShadow: { value: '0px 0px 0px 0px #00000090' },
padding: { value: 'default' }, padding: { value: 'default' },
customPadding: { value: '{{0}}' }, customPadding: { value: '{{0}}' },
alignment: { value: 'center' },
}, },
}, },
}; };

8
frontend/src/AppBuilder/WidgetManager/widgets/link.js
View file

@ -159,6 +159,14 @@ export const linkConfig = {
], ],
accordian: 'container', accordian: 'container',
}, },
alignment: {
type: 'alignButtons',
displayName: 'Alignment',
validation: {
schema: { type: 'string' },
defaultValue: 'left',
},
},
}, },
exposedVariables: {}, exposedVariables: {},
actions: [ actions: [

9
frontend/src/AppBuilder/WidgetManager/widgets/pagination.js
View file

@ -50,6 +50,14 @@ export const paginationConfig = {
defaultValue: false, defaultValue: false,
}, },
}, },
alignment: {
type: 'alignButtons',
displayName: 'Alignment',
validation: {
schema: { type: 'string' },
defaultValue: 'left',
},
},
}, },
exposedVariables: { exposedVariables: {
totalPages: null, totalPages: null,
@ -73,6 +81,7 @@ export const paginationConfig = {
styles: { styles: {
visibility: { value: '{{true}}' }, visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' }, disabledState: { value: '{{false}}' },
alignment: { value: 'left' },
}, },
}, },
}; };

9
frontend/src/AppBuilder/WidgetManager/widgets/svgImage.js
View file

@ -32,6 +32,14 @@ export const svgImageConfig = {
defaultValue: true, defaultValue: true,
}, },
}, },
alignment: {
type: 'alignButtons',
displayName: 'Alignment',
validation: {
schema: { type: 'string' },
defaultValue: 'left',
},
},
}, },
exposedVariables: { exposedVariables: {
value: {}, value: {},
@ -50,6 +58,7 @@ export const svgImageConfig = {
events: [], events: [],
styles: { styles: {
visibility: { value: '{{true}}' }, visibility: { value: '{{true}}' },
alignment: { value: 'left' },
}, },
}, },
}; };

9
frontend/src/AppBuilder/WidgetManager/widgets/tags.js
View file

@ -38,6 +38,14 @@ export const tagsConfig = {
defaultValue: true, defaultValue: true,
}, },
}, },
alignment: {
type: 'alignButtons',
displayName: 'Alignment',
validation: {
schema: { type: 'string' },
defaultValue: 'left',
},
},
}, },
exposedVariables: {}, exposedVariables: {},
definition: { definition: {
@ -54,6 +62,7 @@ export const tagsConfig = {
events: [], events: [],
styles: { styles: {
visibility: { value: '{{true}}' }, visibility: { value: '{{true}}' },
alignment: { value: 'left' },
}, },
}, },
}; };

74
frontend/src/Editor/Components/ButtonGroup.jsx
View file

@ -25,6 +25,7 @@ export const ButtonGroup = function Button({
selectedBackgroundColor, selectedBackgroundColor,
selectedTextColor, selectedTextColor,
boxShadow, boxShadow,
alignment,
} = styles; } = styles;
const computedStyles = { const computedStyles = {
@ -115,38 +116,53 @@ export const ButtonGroup = function Button({
fireEvent('onClick'); 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 ( return (
<div className="widget-buttongroup" style={{ height }} data-cy={dataCy}> <div className="widget-buttongroup" style={{ height, alignItems: mapAlignment(alignment) }} data-cy={dataCy}>
{label && (
<p
style={{ display: computedStyles.display }}
className={`widget-buttongroup-label ${darkMode && 'text-light'}`}
>
{label}
</p>
)}
<div> <div>
{data?.map((item, index) => ( {label && (
<button <p
style={{ style={{ display: computedStyles.display }}
...computedStyles, className={`widget-buttongroup-label ${darkMode && 'text-light'}`}
backgroundColor: defaultActive?.includes(values[index]) ? selectedBackgroundColor : backgroundColor,
color: defaultActive?.includes(values[index]) ? selectedTextColor : textColor,
transition: 'all .1s ease',
boxShadow,
...(disabledState && disabledStyles),
}}
key={index}
disabled={disabledState}
className={'group-button overflow-hidden'}
onClick={(event) => {
event.stopPropagation();
buttonClick(index);
}}
> >
{item} {label}
</button> </p>
))} )}
<div>
{data?.map((item, index) => (
<button
style={{
...computedStyles,
backgroundColor: defaultActive?.includes(values[index]) ? selectedBackgroundColor : backgroundColor,
color: defaultActive?.includes(values[index]) ? selectedTextColor : textColor,
transition: 'all .1s ease',
boxShadow,
...(disabledState && disabledStyles),
}}
key={index}
disabled={disabledState}
className={'group-button overflow-hidden'}
onClick={(event) => {
event.stopPropagation();
buttonClick(index);
}}
>
{item}
</button>
))}
</div>
</div> </div>
</div> </div>
); );

14
frontend/src/Editor/Components/Image/Image.jsx
View file

@ -23,8 +23,17 @@ export const Image = function Image({
}) { }) {
const { imageFormat, source, jsSchema, alternativeText, zoomButtons, rotateButton, loadingState, disabledState } = const { imageFormat, source, jsSchema, alternativeText, zoomButtons, rotateButton, loadingState, disabledState } =
properties; properties;
const { imageFit, imageShape, backgroundColor, padding, customPadding, boxShadow, borderRadius, borderColor } = const {
styles; imageFit,
imageShape,
backgroundColor,
padding,
customPadding,
boxShadow,
borderRadius,
borderColor,
alignment,
} = styles;
const isInitialRender = useRef(true); const isInitialRender = useRef(true);
@ -168,6 +177,7 @@ export const Image = function Image({
border: '1px solid', border: '1px solid',
borderRadius: imageShape === 'circle' ? '50%' : `${borderRadius}px`, borderRadius: imageShape === 'circle' ? '50%' : `${borderRadius}px`,
borderColor: borderColor ? borderColor : 'transparent', borderColor: borderColor ? borderColor : 'transparent',
objectPosition: alignment,
}} }}
height={height} height={height}
onClick={() => fireEvent('onClick')} onClick={() => fireEvent('onClick')}

9
frontend/src/Editor/Components/Pagination.jsx
View file

@ -12,7 +12,7 @@ export const Pagination = ({
width, width,
}) => { }) => {
const isInitialRender = useRef(true); const isInitialRender = useRef(true);
const { visibility, disabledState, boxShadow } = styles; const { visibility, disabledState, boxShadow, alignment } = styles;
const [currentPage, setCurrentPage] = useState(() => properties?.defaultPageIndex ?? 1); const [currentPage, setCurrentPage] = useState(() => properties?.defaultPageIndex ?? 1);
const pageChanged = (number) => { const pageChanged = (number) => {
@ -65,7 +65,12 @@ export const Pagination = ({
}; };
return ( return (
<div data-disabled={disabledState} className="d-flex align-items-center" data-cy={dataCy} style={{ boxShadow }}> <div
data-disabled={disabledState}
className="d-flex align-items-center"
data-cy={dataCy}
style={{ boxShadow, justifyContent: alignment }}
>
<ul className="pagination m-0" style={computedStyles}> <ul className="pagination m-0" style={computedStyles}>
<Pagination.Operator <Pagination.Operator
operator="<<" operator="<<"

7
frontend/src/Editor/Components/SvgImage.jsx
View file

@ -2,11 +2,14 @@ import React from 'react';
import DOMPurify from 'dompurify'; import DOMPurify from 'dompurify';
export const SvgImage = function Timeline({ properties, styles, height, dataCy }) { export const SvgImage = function Timeline({ properties, styles, height, dataCy }) {
const { visibility, boxShadow } = styles; const { visibility, boxShadow, alignment } = styles;
const { data } = properties; const { data } = properties;
return ( return (
<div style={{ display: visibility ? '' : 'none', overflow: 'hidden', height: height, boxShadow }} data-cy={dataCy}> <div style={{ display: visibility ? '' : 'none', overflow: 'hidden', height: height, boxShadow }} data-cy={dataCy}>
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(data) }}></div> <div
style={{ display: 'flex', justifyContent: alignment }}
dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(data) }}
></div>
</div> </div>
); );
}; };

5
frontend/src/Editor/Components/Tags.jsx
View file

@ -2,14 +2,15 @@ import React from 'react';
export const Tags = function Tags({ width, height, properties, styles, dataCy }) { export const Tags = function Tags({ width, height, properties, styles, dataCy }) {
const { data } = properties; const { data } = properties;
const { visibility, boxShadow } = styles; const { visibility, boxShadow, alignment } = styles;
const computedStyles = { const computedStyles = {
width, width,
height, height,
display: visibility ? '' : 'none', display: visibility ? 'flex' : 'none',
overflowY: 'auto', overflowY: 'auto',
boxShadow, boxShadow,
justifyContent: alignment,
}; };
function renderTag(item, index) { function renderTag(item, index) {

10
frontend/src/Editor/WidgetManager/configs/image.js
View file

@ -143,6 +143,15 @@ export const imageConfig = {
}, },
accordian: 'Image', accordian: 'Image',
}, },
alignment: {
type: 'alignButtons',
displayName: 'Alignment',
validation: {
schema: { type: 'string' },
defaultValue: 'center',
},
accordian: 'Image',
},
backgroundColor: { backgroundColor: {
type: 'color', type: 'color',
displayName: 'Background', displayName: 'Background',
@ -255,6 +264,7 @@ export const imageConfig = {
boxShadow: { value: '0px 0px 0px 0px #00000090' }, boxShadow: { value: '0px 0px 0px 0px #00000090' },
padding: { value: 'default' }, padding: { value: 'default' },
customPadding: { value: '{{0}}' }, customPadding: { value: '{{0}}' },
alignment: { value: 'center' },
}, },
}, },
}; };

9
server/src/modules/apps/services/widget-config/buttonGroup.js
View file

@ -123,6 +123,14 @@ export const buttonGroupConfig = {
defaultValue: '#007bff', defaultValue: '#007bff',
}, },
}, },
alignment: {
type: 'alignButtons',
displayName: 'Alignment',
validation: {
schema: { type: 'string' },
defaultValue: 'left',
},
},
}, },
exposedVariables: { exposedVariables: {
selected: [1], selected: [1],
@ -156,6 +164,7 @@ export const buttonGroupConfig = {
disabledState: { value: '{{false}}' }, disabledState: { value: '{{false}}' },
selectedTextColor: { value: '#FFFFFF' }, selectedTextColor: { value: '#FFFFFF' },
selectedBackgroundColor: { value: '#4368E3' }, selectedBackgroundColor: { value: '#4368E3' },
alignment: { value: 'left' },
}, },
}, },
}; };

13
server/src/modules/apps/services/widget-config/image.js
View file

@ -143,6 +143,15 @@ export const imageConfig = {
}, },
accordian: 'Image', accordian: 'Image',
}, },
alignment: {
type: 'alignButtons',
displayName: 'Alignment',
validation: {
schema: { type: 'string' },
defaultValue: 'center',
},
accordian: 'Image',
},
backgroundColor: { backgroundColor: {
type: 'color', type: 'color',
displayName: 'Background', displayName: 'Background',
@ -179,11 +188,11 @@ export const imageConfig = {
padding: { padding: {
type: 'switch', type: 'switch',
displayName: 'Padding', displayName: 'Padding',
validation: { schema: { type: 'string' }, defaultValue: 'default' },
options: [ options: [
{ displayName: 'Default', value: 'default' }, { displayName: 'Default', value: 'default' },
{ displayName: 'Custom', value: 'custom' }, { displayName: 'Custom', value: 'custom' },
], ],
validation: { schema: { type: 'string' }, defaultValue: 'default' },
accordian: 'Container', accordian: 'Container',
isFxNotRequired: true, isFxNotRequired: true,
}, },
@ -244,7 +253,6 @@ export const imageConfig = {
loadingState: { value: '{{false}}' }, loadingState: { value: '{{false}}' },
disabledState: { value: '{{false}}' }, disabledState: { value: '{{false}}' },
visibility: { value: '{{true}}' }, visibility: { value: '{{true}}' },
visible: { value: '{{true}}' },
}, },
events: [], events: [],
styles: { styles: {
@ -256,6 +264,7 @@ export const imageConfig = {
boxShadow: { value: '0px 0px 0px 0px #00000090' }, boxShadow: { value: '0px 0px 0px 0px #00000090' },
padding: { value: 'default' }, padding: { value: 'default' },
customPadding: { value: '{{0}}' }, customPadding: { value: '{{0}}' },
alignment: { value: 'center' },
}, },
}, },
}; };

8
server/src/modules/apps/services/widget-config/link.js
View file

@ -159,6 +159,14 @@ export const linkConfig = {
], ],
accordian: 'container', accordian: 'container',
}, },
alignment: {
type: 'alignButtons',
displayName: 'Alignment',
validation: {
schema: { type: 'string' },
defaultValue: 'left',
},
},
}, },
exposedVariables: {}, exposedVariables: {},
actions: [ actions: [

9
server/src/modules/apps/services/widget-config/pagination.js
View file

@ -50,6 +50,14 @@ export const paginationConfig = {
defaultValue: false, defaultValue: false,
}, },
}, },
alignment: {
type: 'alignButtons',
displayName: 'Alignment',
validation: {
schema: { type: 'string' },
defaultValue: 'left',
},
},
}, },
exposedVariables: { exposedVariables: {
totalPages: null, totalPages: null,
@ -73,6 +81,7 @@ export const paginationConfig = {
styles: { styles: {
visibility: { value: '{{true}}' }, visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' }, disabledState: { value: '{{false}}' },
alignment: { value: 'left' },
}, },
}, },
}; };

9
server/src/modules/apps/services/widget-config/svgImage.js
View file

@ -32,6 +32,14 @@ export const svgImageConfig = {
defaultValue: true, defaultValue: true,
}, },
}, },
alignment: {
type: 'alignButtons',
displayName: 'Alignment',
validation: {
schema: { type: 'string' },
defaultValue: 'left',
},
},
}, },
exposedVariables: { exposedVariables: {
value: {}, value: {},
@ -50,6 +58,7 @@ export const svgImageConfig = {
events: [], events: [],
styles: { styles: {
visibility: { value: '{{true}}' }, visibility: { value: '{{true}}' },
alignment: { value: 'left' },
}, },
}, },
}; };

9
server/src/modules/apps/services/widget-config/tags.js
View file

@ -38,6 +38,14 @@ export const tagsConfig = {
defaultValue: true, defaultValue: true,
}, },
}, },
alignment: {
type: 'alignButtons',
displayName: 'Alignment',
validation: {
schema: { type: 'string' },
defaultValue: 'left',
},
},
}, },
exposedVariables: {}, exposedVariables: {},
definition: { definition: {
@ -54,6 +62,7 @@ export const tagsConfig = {
events: [], events: [],
styles: { styles: {
visibility: { value: '{{true}}' }, visibility: { value: '{{true}}' },
alignment: { value: 'left' },
}, },
}, },
}; };