diff options
Diffstat (limited to 'src')
3 files changed, 65 insertions, 15 deletions
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 4f644717b..83164a82a 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -27,6 +27,10 @@ .schema-column-header { font-weight: bold; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; } } @@ -37,19 +41,6 @@ display: flex; flex-direction: row; justify-content: center; - - .row-button { - width: 25px; - height: 25px; - border-radius: 100%; - background-color: $dark-gray; - color: white; - margin: 3px; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - } } .row-cells { @@ -58,5 +49,28 @@ justify-content: flex-end; } } + + .schema-header-menu { + display: flex; + flex-direction: row; + } + + .row-button, + .schema-header-button { + width: 20px; + height: 20px; + border-radius: 100%; + background-color: $dark-gray; + color: white; + margin: 3px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + + svg { + width: 12px; + } + } } } diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index bcfa695f0..4d96d5f7e 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -55,8 +55,8 @@ export class CollectionSchemaView extends CollectionSubView() { ); } - @action @undoBatch + @action changeColumnKey = (index: number, newKey: string) => { let currKeys = this.columnKeys; currKeys[index] = newKey; @@ -64,6 +64,22 @@ export class CollectionSchemaView extends CollectionSubView() { return true; }; + @undoBatch + @action + addColumn = (index: number) => { + let currKeys = this.columnKeys; + currKeys.splice(index, 0, 'title'); + this.layoutDoc.columnKeys = new List<string>(currKeys); + }; + + @undoBatch + @action + removeColumn = (index: number) => { + let currKeys = this.columnKeys; + currKeys.splice(index, 1); + this.layoutDoc.columnKeys = new List<string>(currKeys); + }; + @action selectRow = (e: React.PointerEvent, doc: Doc, index: number) => { const ctrl = e.ctrlKey || e.metaKey; @@ -239,7 +255,7 @@ export class CollectionSchemaView extends CollectionSubView() { <div className="schema-table"> <div className="schema-header-row"> {this.columnKeys.map((key, index) => ( - <SchemaColumnHeader columnIndex={index} columnKeys={this.columnKeys} columnWidths={this.columnWidths} changeColumnKey={this.changeColumnKey} /> + <SchemaColumnHeader columnIndex={index} columnKeys={this.columnKeys} columnWidths={this.columnWidths} changeColumnKey={this.changeColumnKey} addColumn={this.addColumn} removeColumn={this.removeColumn} /> ))} </div> <div className="schema-table-content"> diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index b9dbf4f57..f93a3d13d 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -3,12 +3,15 @@ import { computed } from 'mobx'; import { observer } from 'mobx-react'; import { EditableView } from '../../EditableView'; import './CollectionSchemaView.scss'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; export interface SchemaColumnHeaderProps { columnKeys: string[]; columnWidths: number[]; columnIndex: number; changeColumnKey: (index: number, newKey: string) => boolean; + addColumn: (index: number) => void; + removeColumn: (index: number) => void; } @observer @@ -21,6 +24,23 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps> return ( <div className="schema-column-header" style={{ width: this.props.columnWidths[this.props.columnIndex] }}> <EditableView SetValue={(newKey: string) => this.props.changeColumnKey(this.props.columnIndex, newKey)} GetValue={() => this.fieldKey} contents={this.fieldKey} /> + + <div className="schema-header-menu"> + <div + className="schema-header-button" + onPointerDown={e => { + this.props.addColumn(this.props.columnIndex + 1); + }}> + <FontAwesomeIcon icon="plus" /> + </div> + <div + className="schema-header-button" + onPointerDown={e => { + this.props.removeColumn(this.props.columnIndex); + }}> + <FontAwesomeIcon icon="trash" /> + </div> + </div> </div> ); } |