diff options
| author | Stanley Yip <33562077+yipstanley@users.noreply.github.com> | 2019-07-29 17:58:23 +0000 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2019-07-29 17:58:23 +0000 |
| commit | 52da1fd396880603209b56cd49a590255d8b0b1f (patch) | |
| tree | 6c8ea0463d13873598f1632a14871ae0c1da681f /src/client/views/collections/CollectionSchemaHeaders.tsx | |
| parent | 06daf2b00d8b906108905ca9bc5665b1b1b8007c (diff) | |
| parent | c361a566b2a3ce134bbb7e5906c23492c7012c7b (diff) | |
Merge pull request #224 from browngraphicslab/schema_view_improvements_2
schema view fixes
Diffstat (limited to 'src/client/views/collections/CollectionSchemaHeaders.tsx')
| -rw-r--r-- | src/client/views/collections/CollectionSchemaHeaders.tsx | 39 |
1 files changed, 39 insertions, 0 deletions
diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index 9fc28eafa..387107c55 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -129,6 +129,10 @@ export class CollectionSchemaColumnMenu extends React.Component<ColumnMenuProps> } } + changeColumnColor = (color: string): void => { + + } + renderTypes = () => { if (this.props.typeConst) return <></>; return ( @@ -168,6 +172,40 @@ export class CollectionSchemaColumnMenu extends React.Component<ColumnMenuProps> ); } + renderColors = () => { + return ( + <div className="collectionSchema-headerMenu-group"> + <label>Color:</label> + <div className="columnMenu-colors"> + <input type="radio" name="column-color" id="pink" value="#FFB4E8" onClick={() => this.changeColumnColor("#FFB4E8")} /> + <label htmlFor="pink"> + <div className="columnMenu-colorPicker" style={{ backgroundColor: "#FFB4E8" }}></div> + </label> + <input type="radio" name="column-color" id="purple" value="#b28dff" onClick={() => this.changeColumnColor("#b28dff")} /> + <label htmlFor="purple"> + <div className="columnMenu-colorPicker" style={{ backgroundColor: "#FFB4E8" }}></div> + </label> + <input type="radio" name="column-color" id="blue" value="#afcbff" onClick={() => this.changeColumnColor("#afcbff")} /> + <label htmlFor="blue"> + <div className="columnMenu-colorPicker" style={{ backgroundColor: "#FFB4E8" }}></div> + </label> + <input type="radio" name="column-color" id="yellow" value="#f3ffe3" onClick={() => this.changeColumnColor("#f3ffe3")} /> + <label htmlFor="yellow"> + <div className="columnMenu-colorPicker" style={{ backgroundColor: "#FFB4E8" }}></div> + </label> + <input type="radio" name="column-color" id="red" value="#ffc9de" onClick={() => this.changeColumnColor("#ffc9de")} /> + <label htmlFor="red"> + <div className="columnMenu-colorPicker" style={{ backgroundColor: "#FFB4E8" }}></div> + </label> + <input type="radio" name="column=color" id="none" value="#f1efeb" onClick={() => this.changeColumnColor("#f1efeb")} /> + <label htmlFor="none"> + <div className="columnMenu-colorPicker" style={{ backgroundColor: "#FFB4E8" }}></div> + </label> + </div> + </div> + ); + } + renderContent = () => { return ( <div className="collectionSchema-header-menuOptions"> @@ -187,6 +225,7 @@ export class CollectionSchemaColumnMenu extends React.Component<ColumnMenuProps> <> {this.renderTypes()} {this.renderSorting()} + {this.renderColors()} <div className="collectionSchema-headerMenu-group"> <button onClick={() => this.props.deleteColumn(this.props.keyValue)}>Delete Column</button> </div> |