Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-23 08:58:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Add color to toggle switch (#875)

Browse source 
* Add color to toggle switch

* Remove uneccessary comment from code
This commit is contained in:
Viraj Bahulkar 2021-09-30 08:42:42 +05:30 committed by GitHub
parent 2db5ad52c8
commit 91761722f0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/Editor/Components/Toggle.jsx
View file

@ -3,10 +3,12 @@ import { resolveReferences, resolveWidgetFieldValue } from '@/_helpers/utils';
class Switch extends React.Component {
render() {
const { on, onClick, onChange, disabledState } = this.props;
const { on, onClick, onChange, disabledState, color } = this.props;
return (
<label className="form-check form-switch form-check-inline">
<input
style={{backgroundColor: on ? `${color}` : 'white'}}
disabled={disabledState}
className="form-check-input"
type="checkbox"
@ -32,6 +34,8 @@ export const ToggleSwitch = ({
const [on, setOn] = React.useState(false);
const label = component.definition.properties.label.value;
const textColorProperty = component.definition.styles.textColor;
const toggleSwitchColorProperty = component.definition.styles.toggleSwitchColor;
const toggleSwitchColor = toggleSwitchColorProperty ? toggleSwitchColorProperty.value : '#3c92dc';
const textColor = textColorProperty ? textColorProperty.value : '#000';
const widgetVisibility = component.definition.styles?.visibility?.value ?? true;
const disabledState = component.definition.styles?.disabledState?.value ?? false;
@ -68,7 +72,7 @@ export const ToggleSwitch = ({
{label}
</span>
<div className="col">
<Switch disabledState={parsedDisabledState} on={on} onClick={toggle} onChange={toggleValue} />
<Switch disabledState={parsedDisabledState} on={on} onClick={toggle} onChange={toggleValue} color={toggleSwitchColor} />
</div>
</div>
);

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

@ -503,6 +503,7 @@ export const componentTypes = [
},
styles: {
textColor: { type: 'color', displayName: 'Text Color' },
toggleSwitchColor: { type: 'color', displayName: 'Toggle Switch Color' },
visibility: { type: 'code', displayName: 'Visibility' },
disabledState: { type: 'code', displayName: 'Disable' },
},
@ -518,6 +519,7 @@ export const componentTypes = [
events: [],
styles: {
textColor: { value: '#000' },
toggleSwitchColor: { value: '#3c92dc' },
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },
},