change position of cell background color option in column properties (#4891)

* fixed #4838

* Removed extra input field
This commit is contained in:
ishaanparlikar 2022-12-19 15:39:57 +05:30 committed by GitHub
parent 742d2b9887
commit 55c783064e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -256,6 +256,7 @@ class TableComponent extends React.Component {
}}
/>
</div>
{(column.columnType === 'string' || column.columnType === undefined || column.columnType === 'default') && (
<div>
@ -277,6 +278,23 @@ class TableComponent extends React.Component {
}}
/>
</div>
<div className="field mb-2">
<label className="form-label">{this.props.t('widget.Table.cellBgColor', 'Cell Background Color')}</label>
<CodeHinter
currentState={this.props.currentState}
initialValue={column.cellBackgroundColor ?? 'inherit'}
theme={this.props.darkMode ? 'monokai' : 'default'}
mode="javascript"
lineNumbers={false}
placeholder={''}
onChange={(value) => this.onColumnItemChange(index, 'cellBackgroundColor', value)}
componentName={this.getPopoverFieldSource(column.columnType, 'cellBackgroundColor')}
popOverCallback={(showing) => {
this.setColumnPopoverRootCloseBlocker('cellBackgroundColor', showing);
}}
/>
</div>
{column.isEditable && (
<div>
<div data-cy={`header-validation`} className="hr-text">
@ -490,23 +508,6 @@ class TableComponent extends React.Component {
</>
)}
<div data-cy={`input-and-label-cell-bg-color`} className="field mb-2">
<label className="form-label">{this.props.t('widget.Table.cellBgColor', 'Cell Background Color')}</label>
<CodeHinter
currentState={this.props.currentState}
initialValue={column.cellBackgroundColor ?? 'inherit'}
theme={this.props.darkMode ? 'monokai' : 'default'}
mode="javascript"
lineNumbers={false}
placeholder={''}
onChange={(value) => this.onColumnItemChange(index, 'cellBackgroundColor', value)}
componentName={this.getPopoverFieldSource(column.columnType, 'cellBackgroundColor')}
popOverCallback={(showing) => {
this.setColumnPopoverRootCloseBlocker('cellBackgroundColor', showing);
}}
/>
</div>
{column.columnType === 'datepicker' && (
<div>
<label data-cy={`label-date-display-format`} className="form-label">