Merge branch 'masonry_stacking_interactions'

1 files changed, 62 insertions, 9 deletions

diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index 74da4ef85..7bf8348ff 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -1,12 +1,15 @@
 @import "../globalCssVariables";
 
 .collectionMasonryView {
-    display:inline;
+    display: inline;
 }
-.collectionStackingView{
+
+.collectionStackingView {
     display: flex;
 }
-.collectionStackingView, .collectionMasonryView{
+
+.collectionStackingView,
+.collectionMasonryView {
     height: 100%;
     width: 100%;
     position: relative;
@@ -14,6 +17,7 @@
     overflow-y: auto;
     flex-wrap: wrap;
     transition: top .5s;
+
     .collectionSchemaView-previewDoc {
         height: 100%;
         position: absolute;
@@ -40,10 +44,12 @@
         top: 0;
         left: 0;
     }
+
     .collectionStackingView-masonrySingle {
         height: 100%;
         position: absolute;
     }
+
     .collectionStackingView-masonryGrid {
         margin: auto;
         height: max-content;
@@ -91,17 +97,31 @@
         height: 100%;
         margin: auto;
     }
-    
+
     .collectionStackingView-masonrySection {
         margin: auto;
     }
 
+    .collectionStackingView-collapseBar {
+        margin-left: 2px;
+        margin-right: 2px;
+        margin-top: 2px;
+        background: $main-accent;
+        height: 5px;
+
+        &.active {
+            margin-left: 0;
+            margin-right: 0;
+            background: red;
+        }
+    }
+
     .collectionStackingView-sectionHeader {
         text-align: center;
         margin-left: 2px;
         margin-right: 2px;
         margin-top: 10px;
-        background: gray;
+        background: $main-accent;
         // overflow: hidden; overflow is visible so the color menu isn't hidden -ftong
 
         .editableView-input {
@@ -132,7 +152,7 @@
             .editableView-input:hover,
             .editableView-container-editing:hover,
             .editableView-container-editing-oneLine:hover {
-                cursor: text
+                cursor: text;
             }
 
             .editableView-input {
@@ -182,11 +202,46 @@
             }
         }
 
-        .collectionStackingView-sectionDelete {
+        .collectionStackingView-sectionOptions {
             position: absolute;
             right: 0;
             top: 0;
             height: 100%;
+
+            [class*="css"] {
+                max-width: 102px;
+            }
+
+            .collectionStackingView-sectionOptionButton {
+                height: 35px;
+            }
+
+            .collectionStackingView-optionPicker {
+                width: 78px;
+
+                .optionOptions {
+                    display: inline;
+                }
+
+                .optionPicker {
+                    cursor: pointer;
+                    width: 20px;
+                    height: 20px;
+                    border-radius: 10px;
+                    margin: 3px;
+
+                    &.active {
+                        color: red;
+                    }
+                }
+            }
+        }
+
+        .collectionStackingView-sectionDelete {
+            position: absolute;
+            right: 25px;
+            top: 0;
+            height: 100%;
         }
     }
 
@@ -288,6 +343,4 @@
     .rc-switch-checked .rc-switch-inner {
         left: 8px;
     }
-
-
 }
\ No newline at end of file