diff options
| author | Tyler Schicke <tyler_schicke@brown.edu> | 2019-07-29 14:08:59 -0400 |
|---|---|---|
| committer | Tyler Schicke <tyler_schicke@brown.edu> | 2019-07-29 14:08:59 -0400 |
| commit | 5d68a57121ac35339d5e223f5dc40ebfd414fd0f (patch) | |
| tree | 599522f02fd8a1ee7ced3f12253c808b18469abe /src/client/views/collections/CollectionSchemaHeaders.tsx | |
| parent | bb607ecb02a7ecb8fe782d60e10ebf5bdedd790b (diff) | |
| parent | a09d610e2a5c09e473b15be23c32f0c3cc370a17 (diff) | |
Merge branch 'master' of github-tsch-brown:browngraphicslab/Dash-Web
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> |