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

Background & text colors for table action buttons

Browse source
This commit is contained in:
navaneeth 2021-04-20 11:16:31 +05:30
parent ff9c292830
commit 7534284d17
2 changed files with 13 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/Editor/Components/Table.jsx
View file

@ -55,6 +55,7 @@ export function Table({ id, width, height, component, onComponentClick, currentS
return actions.value.map((action) =>
<button
className="btn btn-sm m-1 btn-light"
style={{background: action.backgroundColor, color: action.textColor}}
onClick={(e) => { e.stopPropagation(); onEvent('onTableActionButtonClicked', { component, data: cell.row.original, action }); }}
>
{action.buttonText}

13
frontend/src/Editor/Inspector/Components/Table.jsx
View file

@ -9,6 +9,7 @@ import arrayMove from "array-move";
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Popover from 'react-bootstrap/Popover';
import { EventSelector } from '../EventSelector';
import { Color } from '../Elements/Color';
class Table extends React.Component {
constructor(props) {
@ -69,7 +70,7 @@ class Table extends React.Component {
<Popover id="popover-basic">
<Popover.Title as="h3">Column Settings</Popover.Title>
<Popover.Content>
<div className="field mb-2">
<div className="field mb-2">
<label class="form-label">name</label>
<input
type="text"
@ -108,6 +109,16 @@ class Table extends React.Component {
value={action.buttonText}
/>
</div>
<Color
param={{name: 'backgroundColor'}}
definition={{ value: action.backgroundColor }}
onChange={(name, value, color) => this.onActionButtonPropertyChanged(index, 'backgroundColor', color)}
/>
<Color
param={{name: 'textColor'}}
definition={{ value: action.textColor }}
onChange={(name, value, color) => this.onActionButtonPropertyChanged(index, 'textColor', color)}
/>
<EventSelector
param={ { name: 'onClick' } }
definition={action.onClick}