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

Added Border color style property to Container widgets (#4202)

Browse source 
* Update Container.jsx

* Update widgetConfig.js

* Update frontend/src/Editor/Components/Container.jsx

small edit

Co-authored-by: Arpit <arpitnath42@gmail.com>

* Update frontend/src/Editor/WidgetManager/widgetConfig.js

small edit

Co-authored-by: Arpit <arpitnath42@gmail.com>

* Update widgetConfig.js

shifted border color next to border sradius

* Update Container.jsx

small changes

* Update widgetConfig.js

Co-authored-by: Arpit <arpitnath42@gmail.com>
This commit is contained in:
prateek565 2022-10-11 13:47:15 +05:30 committed by GitHub
parent ca5fe39751
commit 70a90b2443
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -12,14 +12,15 @@ export const Container = function Container({
styles,
darkMode,
}) {
const { visibility, disabledState, borderRadius } = styles;
const { visibility, disabledState, borderRadius,borderColor } = styles;
const backgroundColor =
['#fff', '#ffffffff'].includes(styles.backgroundColor) && darkMode ? '#232E3C' : styles.backgroundColor;
const computedStyles = {
backgroundColor,
borderRadius: borderRadius ? parseFloat(borderRadius) : 0,
border: `1px solid ${borderColor}`,
height,
display: visibility ? 'flex' : 'none',
borderRadius: borderRadius ? parseFloat(borderRadius) : 0,
};
const parentRef = useRef(null);

8
frontend/src/Editor/WidgetManager/widgetConfig.js
View file

@ -2051,6 +2051,13 @@ export const widgets = [
},
},
},
borderColor: {
type: 'color',
displayName: 'Border color',
validation: {
schema: { type: 'string' },
},
},
visibility: {
type: 'toggle',
displayName: 'Visibility',
@ -2079,6 +2086,7 @@ export const widgets = [
styles: {
backgroundColor: { value: '' },
borderRadius: { value: '0' },
borderColor: { value: '#fff' },
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },
},