changed compact type to dropdown menu

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} />