diff options
| -rw-r--r-- | src/client/views/nodes/KeyValuePair.scss | 12 | ||||
| -rw-r--r-- | src/client/views/nodes/KeyValuePair.tsx | 14 |
2 files changed, 25 insertions, 1 deletions
diff --git a/src/client/views/nodes/KeyValuePair.scss b/src/client/views/nodes/KeyValuePair.scss new file mode 100644 index 000000000..64e871e1c --- /dev/null +++ b/src/client/views/nodes/KeyValuePair.scss @@ -0,0 +1,12 @@ +@import "../global_variables"; + +.container{ + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; +} + +.delete{ + color: red; +}
\ No newline at end of file diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx index 111f85a05..7ed5ee272 100644 --- a/src/client/views/nodes/KeyValuePair.tsx +++ b/src/client/views/nodes/KeyValuePair.tsx @@ -1,5 +1,6 @@ import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app import "./KeyValueBox.scss"; +import "./KeyValuePair.scss"; import React = require("react") import { FieldViewProps, FieldView } from './FieldView'; import { Opt, Field } from '../../../fields/Field'; @@ -55,7 +56,18 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> { ); return ( <tr className={this.props.rowStyle}> - <td>{this.key.Name}</td> + {/* <button>X</button> */} + <td> + <div className="container"> + <div>{this.key.Name}</div> + <button className="delete" onClick={() => { + let field = props.doc.Get(props.fieldKey); + if (field && field instanceof Field) { + props.doc.Set(props.fieldKey, undefined); + } + }}>X</button> + </div> + </td> <td><EditableView contents={contents} height={36} GetValue={() => { let field = props.doc.Get(props.fieldKey); if (field && field instanceof Field) { |