diff options
| -rw-r--r-- | src/client/views/collections/CollectionViewChromes.scss | 15 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionViewChromes.tsx | 22 |
2 files changed, 31 insertions, 6 deletions
diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index 398b02d3f..bfa20f42a 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -178,6 +178,21 @@ display: flex; margin-left: 10; + .collectionGridViewChrome-viewPicker { + font-size: 75%; + //text-transform: uppercase; + //letter-spacing: 2px; + background: rgb(238, 238, 238); + color: grey; + outline-color: black; + border: none; + //padding: 12px 10px 11px 10px; + } + + .collectionGridViewChrome-viewPicker:active { + outline-color: black; + } + .grid-control { align-self: center; width: 30%; diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 95774adca..6fb517940 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -648,8 +648,8 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro this.props.CollectionView.props.Document.preventCollision = !this.props.CollectionView.props.Document.preventCollision; } - changeCompactType = () => { - this.props.CollectionView.props.Document.compactType = this.props.CollectionView.props.Document.compactType === "vertical" ? "horizontal" : this.props.CollectionView.props.Document.compactType === "horizontal" ? "null" : "vertical"; + changeCompactType = (e: React.ChangeEvent<HTMLSelectElement>) => { + this.props.CollectionView.props.Document.compactType = e.target.selectedOptions[0].value; } render() { @@ -671,12 +671,22 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro </span> */} <span className="grid-control" style={{ width: "20%" }}> <input style={{ marginRight: 5 }} type="checkbox" onClick={this.toggleCollisions} defaultChecked={!this.props.CollectionView.props.Document.preventCollision} /> - <label className="flexLabel">Collisions </label> + <label className="flexLabel">Collisions</label> </span> - <span className="grid-control"> - <input style={{ marginRight: 5 }} type="button" onClick={this.changeCompactType} value={`Compact: ${this.props.CollectionView.props.Document.compactType}`} /> - </span> + <select className="collectionGridViewChrome-viewPicker" + style={{ marginRight: 5 }} + onPointerDown={stopPropagation} + onChange={this.changeCompactType} + > + {["vertical", "horizontal", "null"].map(type => + <option className="collectionGridViewChrome-viewOption" + onPointerDown={stopPropagation} + value={type}> + {"Compact: " + type} + </option> + )} + </select> <span className="grid-control"> <input style={{ marginRight: 5 }} type="checkbox" onClick={this.toggleFlex} defaultChecked={this.props.CollectionView.props.Document.flexGrid as boolean} /> |