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

Customisable font color for string cells (#671)

Browse source 
* Customisable font color for string cells

* Fallback colors
This commit is contained in:
Navaneeth Pk 2021-09-02 11:46:26 +05:30 committed by GitHub
parent 46cb7fd64a
commit d0555f67ad
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -276,10 +276,18 @@ export function Table({
const cellValue = rowChangeSet ? rowChangeSet[column.name] || cell.value : cell.value;
if (columnType === 'string' || columnType === undefined || columnType === 'default') {
const textColor = resolveReferences(column.textColor, currentState, { cellValue });
const cellStyles = {
color: textColor === undefined ? darkMode === true ? '#fff' : 'black' : textColor
}
if (column.isEditable) {
return (
<input
type="text"
style={cellStyles}
onKeyDown={(e) => {
if (e.key === 'Enter') {
if(e.target.defaultValue !== e.target.value) {
@ -297,7 +305,7 @@ export function Table({
/>
);
}
return <span>{cellValue}</span>;
return <span style={cellStyles}>{cellValue}</span>;
} if (columnType === 'text') {
return <textarea
rows="1"
@ -682,9 +690,9 @@ export function Table({
if (componentState.changeSet) {
if (componentState.changeSet[cell.row.index]) {
const accessor = columnData.find(column => column.id === cell.column.id)?.accessor;
const currentColumn = columnData.find(column => column.id === cell.column.id);
if (_.get(componentState.changeSet[cell.row.index], accessor, undefined) !== undefined) {
if (_.get(componentState.changeSet[cell.row.index], currentColumn?.accessor, undefined) !== undefined) {
console.log('componentState.changeSet', componentState.changeSet);
cellProps.style.backgroundColor = '#ffffde';
}

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

@ -152,6 +152,21 @@ class Table extends React.Component {
/>
</div>
{(column.columnType === 'string' || column.columnType === undefined || column.columnType === 'default') &&
<div className="field mb-2">
<label className="form-label">Text color</label>
<CodeHinter
currentState={this.props.currentState}
initialValue={column.textColor}
theme={this.props.darkMode ? 'monokai' : 'default'}
mode= "javascript"
lineNumbers={false}
placeholder={'Text color of the cell'}
onChange={(value) => this.onColumnItemChange(index, 'textColor', value)}
/>
</div>
}
{column.columnType === 'toggle' &&
<div>
<div className="field mb-2">
@ -228,7 +243,7 @@ class Table extends React.Component {
)}
<label className="form-check form-switch my-2">
<label className="form-check form-switch my-4">
<input
className="form-check-input"
type="checkbox"
@ -237,10 +252,6 @@ class Table extends React.Component {
/>
<span className="form-check-label">make editable</span>
</label>
<button className="btn btn-sm btn-outline-danger col" onClick={() => this.removeAction(index)}>
Remove
</button>
</Popover.Content>
</Popover>
);

6
frontend/src/_helpers/utils.js
View file

@ -34,15 +34,15 @@ export function resolveAll(data, state) {
}
export function resolveReferences(object, state) {
export function resolveReferences(object, state, customObjects) {
if (typeof object === 'string') {
if (object.startsWith('{{') && object.endsWith('}}')) {
const code = object.replace('{{', '').replace('}}', '');
let result = '';
try {
const evalFunction = Function(['components', 'queries', 'globals', 'moment', '_'], `return ${code}`);
result = evalFunction(state.components, state.queries, state.globals, moment, _);
const evalFunction = Function(['components', 'queries', 'globals', 'moment', '_', ...Object.keys(customObjects)], `return ${code}`);
result = evalFunction(state.components, state.queries, state.globals, moment, _, ...Object.values(customObjects));
} catch (err) {
console.log('eval_error', err);
}