From cf67f980e2598c8b1cf2c0f1c18f90f1d7142b87 Mon Sep 17 00:00:00 2001 From: sadakchap Date: Fri, 14 Oct 2022 08:09:16 +0530 Subject: [PATCH 1/5] fix: remove tooltip for readonly cells --- .../BrowserCell/BrowserCell.react.js | 99 +++++++------------ 1 file changed, 35 insertions(+), 64 deletions(-) diff --git a/src/components/BrowserCell/BrowserCell.react.js b/src/components/BrowserCell/BrowserCell.react.js index faaa5011db..f8f901929f 100644 --- a/src/components/BrowserCell/BrowserCell.react.js +++ b/src/components/BrowserCell/BrowserCell.react.js @@ -14,7 +14,6 @@ import Pill from 'components/Pill/Pill.react'; import React, { Component } from 'react'; import styles from 'components/BrowserCell/BrowserCell.scss'; import baseStyles from 'stylesheets/base.scss'; -import Tooltip from '../Tooltip/PopperTooltip.react'; import * as ColumnPreferences from 'lib/ColumnPreferences'; export default class BrowserCell extends Component { @@ -389,7 +388,6 @@ export default class BrowserCell extends Component { render() { let { type, value, hidden, width, current, onSelect, onEditChange, setCopyableValue, onPointerCmdClick, row, col, field, onEditSelectedRow, readonly, isRequired, markRequiredFieldRow } = this.props; - let isNewRow = row < 0; let classes = [...this.state.classes]; @@ -400,68 +398,41 @@ export default class BrowserCell extends Component { classes.push(styles.required); } - return readonly ? ( - - { - if (e.metaKey === true && type === 'Pointer') { - onPointerCmdClick(value); - } else { - onSelect({ row, col }); - setCopyableValue(hidden ? undefined : this.copyableValue); - } - }} - onDoubleClick={() => { - if (field === 'objectId' && onEditSelectedRow) { - onEditSelectedRow(true, value); - } else { - this.setState({ showTooltip: true }); - setTimeout(() => { - this.setState({ showTooltip: false }); - }, 2000); - } - }} - onContextMenu={this.onContextMenu} - > - {row < 0 || isNewRow ? '(auto)' : this.state.content} - - - ) : ( - { - if (e.metaKey === true && type === 'Pointer') { - onPointerCmdClick(value); - } - else { - onSelect({ row, col }); - setCopyableValue(hidden ? undefined : this.copyableValue); - } - }} - onDoubleClick={() => { - // Since objectId can't be edited, double click event opens edit row dialog - if (field === 'objectId' && onEditSelectedRow) { - onEditSelectedRow(true, value); - } else if (type !== 'Relation') { - onEditChange(true) + if (readonly) { + classes.push(styles.readonly) + } + + return { + if (e.metaKey === true && type === 'Pointer') { + onPointerCmdClick(value); + } + else { + onSelect({ row, col }); + setCopyableValue(hidden ? undefined : this.copyableValue); + } + }} + onDoubleClick={() => { + // Since objectId can't be edited, double click event opens edit row dialog + if (field === 'objectId' && onEditSelectedRow) { + onEditSelectedRow(true, value); + } else if (type !== 'Relation' && !readonly) { + onEditChange(true) + } + }} + onTouchEnd={e => { + if (current && type !== 'Relation') { + // The touch event may trigger an unwanted change in the column value + if (['ACL', 'Boolean', 'File'].includes(type)) { + e.preventDefault(); } - }} - onTouchEnd={e => { - if (current && type !== 'Relation') { - // The touch event may trigger an unwanted change in the column value - if (['ACL', 'Boolean', 'File'].includes(type)) { - e.preventDefault(); - } - }}} - onContextMenu={this.onContextMenu.bind(this)} - > - {this.state.content} - - ); + }}} + onContextMenu={this.onContextMenu.bind(this)} + > + {this.state.content} + } } From 556fd34f6e9cc28caa21a21cc875b22f9968b595 Mon Sep 17 00:00:00 2001 From: sadakchap Date: Fri, 14 Oct 2022 08:09:57 +0530 Subject: [PATCH 2/5] fix: add different text for readonly cells --- src/components/BrowserCell/BrowserCell.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/BrowserCell/BrowserCell.scss b/src/components/BrowserCell/BrowserCell.scss index c435998ea5..8fc90b8eef 100644 --- a/src/components/BrowserCell/BrowserCell.scss +++ b/src/components/BrowserCell/BrowserCell.scss @@ -74,3 +74,7 @@ bottom: 0; } } + +.readonly { + color: #04263bd1; +} \ No newline at end of file From 832ad473e4201672893080b4ec4b99b61a550ca2 Mon Sep 17 00:00:00 2001 From: sadakchap Date: Sat, 15 Oct 2022 07:48:10 +0530 Subject: [PATCH 3/5] show editor for all fields --- src/components/BrowserCell/BrowserCell.react.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/BrowserCell/BrowserCell.react.js b/src/components/BrowserCell/BrowserCell.react.js index f8f901929f..42aefb5fc0 100644 --- a/src/components/BrowserCell/BrowserCell.react.js +++ b/src/components/BrowserCell/BrowserCell.react.js @@ -419,7 +419,7 @@ export default class BrowserCell extends Component { // Since objectId can't be edited, double click event opens edit row dialog if (field === 'objectId' && onEditSelectedRow) { onEditSelectedRow(true, value); - } else if (type !== 'Relation' && !readonly) { + } else if (type !== 'Relation') { onEditChange(true) } }} From 5f729743610b2c9cd60bb1978ca115eb6fe4c52d Mon Sep 17 00:00:00 2001 From: sadakchap Date: Sat, 15 Oct 2022 08:28:13 +0530 Subject: [PATCH 4/5] show default styles for readonly fields --- src/components/BrowserCell/BrowserCell.react.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/components/BrowserCell/BrowserCell.react.js b/src/components/BrowserCell/BrowserCell.react.js index 42aefb5fc0..96d40b8fcc 100644 --- a/src/components/BrowserCell/BrowserCell.react.js +++ b/src/components/BrowserCell/BrowserCell.react.js @@ -387,7 +387,7 @@ export default class BrowserCell extends Component { //#endregion render() { - let { type, value, hidden, width, current, onSelect, onEditChange, setCopyableValue, onPointerCmdClick, row, col, field, onEditSelectedRow, readonly, isRequired, markRequiredFieldRow } = this.props; + let { type, value, hidden, width, current, onSelect, onEditChange, setCopyableValue, onPointerCmdClick, row, col, field, onEditSelectedRow, isRequired, markRequiredFieldRow } = this.props; let classes = [...this.state.classes]; @@ -398,10 +398,6 @@ export default class BrowserCell extends Component { classes.push(styles.required); } - if (readonly) { - classes.push(styles.readonly) - } - return Date: Sat, 15 Oct 2022 08:28:46 +0530 Subject: [PATCH 5/5] fix: string editor styles to show readonly styles --- src/components/StringEditor/StringEditor.react.js | 10 ++++++++-- src/components/StringEditor/StringEditor.scss | 9 +++++++++ 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/components/StringEditor/StringEditor.react.js b/src/components/StringEditor/StringEditor.react.js index 58ccda18e2..6141d33b7c 100644 --- a/src/components/StringEditor/StringEditor.react.js +++ b/src/components/StringEditor/StringEditor.react.js @@ -49,7 +49,12 @@ export default class StringEditor extends React.Component { } render() { + let classes = [styles.editor]; let onChange = this.props.readonly ? () => {} : (e) => this.setState({ value: e.target.value }); + if (this.props.readonly) { + classes.push(styles.readonly) + } + if (this.props.multiline) { var style = { minWidth: this.props.minWidth }; if (this.props.resizable) { @@ -66,11 +71,12 @@ export default class StringEditor extends React.Component { ); } return ( -
+
+ onChange={onChange} + disabled={this.props.readonly} />
); } diff --git a/src/components/StringEditor/StringEditor.scss b/src/components/StringEditor/StringEditor.scss index 6d3f32d430..680f0ab6f8 100644 --- a/src/components/StringEditor/StringEditor.scss +++ b/src/components/StringEditor/StringEditor.scss @@ -23,6 +23,15 @@ font-size: 12px; } + &.readonly { + box-shadow: 0px 0px 2px 1px rgb(0 0 0 / 20%); + } + + input:disabled { + background-color: #f2f2f2; + color: #666; + } + textarea { @include MonospaceFont; width: 200px;