Merge pull request #365 from browngraphicslab/grid_view_secondary

Grid view secondary

1 files changed, 79 insertions, 24 deletions

diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss
index 03bd9a01a..f85cbfee2 100644
--- a/src/client/views/collections/CollectionViewChromes.scss
+++ b/src/client/views/collections/CollectionViewChromes.scss
@@ -3,7 +3,7 @@
 
 .collectionViewChrome-cont {
     position: absolute;
-    width:100%;
+    width: 100%;
     opacity: 0.9;
     z-index: 9001;
     transition: top .5s;
@@ -13,7 +13,7 @@
     .collectionViewChrome {
         display: flex;
         padding-bottom: 1px;
-        height:32px;
+        height: 32px;
         border-bottom: .5px solid rgb(180, 180, 180);
         overflow: hidden;
 
@@ -35,7 +35,7 @@
                 outline-color: black;
             }
 
-            .collectionViewBaseChrome-button{
+            .collectionViewBaseChrome-button {
                 font-size: 75%;
                 text-transform: uppercase;
                 letter-spacing: 2px;
@@ -46,6 +46,7 @@
                 padding: 12px 10px 11px 10px;
                 margin-left: 10px;
             }
+
             .collectionViewBaseChrome-cmdPicker {
                 margin-left: 3px;
                 margin-right: 0px;
@@ -54,15 +55,17 @@
                 border: none;
                 color: grey;
             }
+
             .commandEntry-outerDiv {
                 pointer-events: all;
                 background-color: gray;
                 display: flex;
                 flex-direction: row;
-                height:30px;
+                height: 30px;
+
                 .commandEntry-drop {
-                    color:white;
-                    width:25px;
+                    color: white;
+                    width: 25px;
                     margin-top: auto;
                     margin-bottom: auto;
                 }
@@ -76,15 +79,17 @@
                 pointer-events: all;
                 // margin-top: 10px;
             }
+
             .collectionViewBaseChrome-template,
             .collectionViewBaseChrome-viewModes {
                 display: grid;
                 background: rgb(238, 238, 238);
-                color:grey;
-                margin-top:auto;
-                margin-bottom:auto;
+                color: grey;
+                margin-top: auto;
+                margin-bottom: auto;
                 margin-left: 5px;
             }
+
             .collectionViewBaseChrome-viewModes {
                 margin-left: 25px;
             }
@@ -92,7 +97,7 @@
             .collectionViewBaseChrome-viewSpecs {
                 margin-left: 5px;
                 display: grid;
-                
+
                 .collectionViewBaseChrome-filterIcon {
                     position: relative;
                     display: flex;
@@ -163,13 +168,53 @@
             }
         }
 
-
         .collectionStackingViewChrome-cont,
         .collectionTreeViewChrome-cont {
             display: flex;
             justify-content: space-between;
         }
 
+        .collectionGridViewChrome-cont {
+            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;
+                display: flex;
+                flex-direction: row;
+                margin-right: 5px;
+
+                .grid-icon {
+                    margin-right: 5px;
+                    align-self: center;
+                }
+
+                .flexLabel {
+                    margin-bottom: 0;
+                }
+            }
+
+            .collectionGridViewChrome-entryBox {
+                width: 50%;
+            }
+        }
+
+
         .collectionStackingViewChrome-sort,
         .collectionTreeViewChrome-sort {
             display: flex;
@@ -199,13 +244,13 @@
             .collectionTreeViewChrome-pivotField-label {
                 vertical-align: center;
                 padding-left: 10px;
-                margin:auto;
+                margin: auto;
             }
 
             .collectionStackingViewChrome-pivotField,
             .collectionTreeViewChrome-pivotField {
                 color: white;
-                width:100%;
+                width: 100%;
                 min-width: 100px;
                 display: flex;
                 align-items: center;
@@ -215,7 +260,7 @@
                 input,
                 .editableView-container-editing-oneLine,
                 .editableView-container-editing {
-                    margin:auto;
+                    margin: auto;
                     border: 0px;
                     color: grey;
                     text-align: center;
@@ -236,6 +281,7 @@
         .collectionTreeViewChrome-pivotField:hover {
             cursor: text;
         }
+
     }
 }
 
@@ -244,7 +290,10 @@
     display: flex;
     position: relative;
     align-items: center;
-    .fwdKeyframe, .numKeyframe, .backKeyframe {
+
+    .fwdKeyframe,
+    .numKeyframe,
+    .backKeyframe {
         cursor: pointer;
         position: absolute;
         width: 20;
@@ -253,26 +302,31 @@
         background: gray;
         display: flex;
         align-items: center;
-        color:white;
+        color: white;
     }
+
     .backKeyframe {
-        left:0;
+        left: 0;
+
         svg {
-            display:block;
-            margin:auto;
+            display: block;
+            margin: auto;
         }
     }
+
     .numKeyframe {
-        left:20;
+        left: 20;
         display: flex;
         flex-direction: column;
         padding: 5px;
     }
+
     .fwdKeyframe {
-        left:40;
+        left: 40;
+
         svg {
-            display:block;
-            margin:auto;
+            display: block;
+            margin: auto;
         }
     }
 }
@@ -334,8 +388,9 @@
     flex-direction: column;
     height: 40px;
 }
+
 .commandEntry-inputArea {
-    display:flex;
+    display: flex;
     flex-direction: row;
     width: 150px;
     margin: auto auto auto auto;