Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-05 22:38:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Adds padding property for image widget (#2050)

Browse source
This commit is contained in:
Muhsin Shah C P 2022-01-31 21:46:51 +05:30 committed by GitHub
parent 2ff094d787
commit 0a253ef0c3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,7 +3,7 @@ import LazyLoad from 'react-lazyload';
export const Image = function Image({ height, properties, styles, fireEvent }) {
const { source } = properties;
const { visibility, disabledState, borderType, backgroundColor } = styles;
const { visibility, disabledState, borderType, backgroundColor, padding } = styles;
const widgetVisibility = visibility ?? true;
const imageRef = useRef(null);
const [imageOffset, setImageOffset] = useState(0);
@ -26,7 +26,14 @@ export const Image = function Image({ height, properties, styles, fireEvent }) {
}
return (
<div data-disabled={disabledState} style={{ display: widgetVisibility ? '' : 'none' }} ref={imageRef}>
<div
data-disabled={disabledState}
style={{
display: widgetVisibility ? 'flex' : 'none',
justifyContent: 'center',
}}
ref={imageRef}
>
{imageRef.current && (
<LazyLoad
offset={imageOffset > 0 ? imageOffset : 0}
@ -37,7 +44,7 @@ export const Image = function Image({ height, properties, styles, fireEvent }) {
<img
src={source}
className={`${borderType !== 'none' ? borderType : ''}`}
style={{ backgroundColor }}
style={{ backgroundColor, padding: Number.parseInt(padding) }}
height={height}
onClick={() => fireEvent('onClick')}
/>

2
frontend/src/Editor/Components/components.js
View file

@ -798,6 +798,7 @@ export const componentTypes = [
],
},
backgroundColor: { type: 'color', displayName: 'Background color' },
padding: { type: 'code', displayName: 'Padding' },
visibility: { type: 'code', displayName: 'Visibility' },
disabledState: { type: 'code', displayName: 'Disable' },
},
@ -814,6 +815,7 @@ export const componentTypes = [
events: [],
styles: {
borderType: { value: 'none' },
padding: { value: '0' },
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },
},