INT-312 UI Interaction with Data Viewer sidebar

scout-style/index.less

@@ -86,7 +86,7 @@ html, body{
     width: 100%;
     height: 100%;
     border-radius: 50%;
-    background-color: @green2;
+    background-color: @mc-blue0;
     opacity: 0.6;
     position: absolute;
     top: 0;

scout-ui/src/document-view/document-list-item.jade

@@ -1,2 +1,2 @@
-.list-group-item
+div
   div(data-hook='doc-subview')

scout-ui/src/document-view/document-list.jade

@@ -1 +1 @@
-.list-group(data-hook='documents-container')
+div(data-hook='documents-container')

scout-ui/src/home/collection.jade

@@ -8,10 +8,17 @@
       .col-md-6
         div(data-hook='stats-subview')
   div(data-hook='refine-bar')
-  .column-container
+  .column-container(data-hook='json-sidebar-toggle-class')
     .column.main
       div(data-hook='fields-subview')
+    .splitter
+      button.btn.btn-link.splitter-button.splitter-button-open
+        i.fa.fa-caret-left
+        | 
+        i.fa.fa-file-text-o
+      button.btn.btn-link.splitter-button.splitter-button-close
+        i.fa.fa-file-text-o
+        | 
+        i.fa.fa-caret-right
     .column.side
-      .splitter
-        i.fa.fa-lg.fa-rotate-90.fa-sort
       div(data-hook='documents-subview')

scout-ui/src/home/collection.js

@@ -20,26 +20,17 @@ module.exports = AmpersandView.extend({
       type: 'view'
     }
   },
-  derived: {
-    sidebarWidth: {
-      deps: ['open'],
-      fn: function() {
-        return this.open ? 400 : 0;
-      }
-    }
-  },
   events: {
     'click .splitter': 'onSplitterClick',
   },
   bindings: {
     'model._id': {
       hook: 'name'
     },
-    'sidebarWidth': {
-      type: function(el, value) {
-        $(el).width(value);
-      },
-      selector: '.side'
+    'open': {
+      type: 'booleanClass',
+      yes: 'sidebar-open',
+      hook: 'json-sidebar-toggle-class'
     }
   },
   children: {

scout-ui/src/home/index.less

@@ -86,7 +86,6 @@
     }
   }
   .column-container {
-    padding-right: 20px;
     display: flex;
     overflow: hidden;
     height: 100vh;
@@ -103,6 +102,7 @@
     -webkit-overflow-scrolling: touch;
     -ms-overflow-style: none;
     position: relative;
+    transition: width 250ms ease;
   }
 
   .main {
@@ -111,14 +111,50 @@
   }
 
   .side {
-    width: 350px;
+    width: 0;
     font-family: @font-family-monospace;
     font-size: 11px;
+    border-left: 2px solid @gray7;
+    right: -12px;
+    top: 30px;
   }
 
   .splitter {
     width: 20px;
     height: 20px;
+    position: relative;
+    right: 10px;
+    transition: right 250ms ease;
+  }
+  .splitter-button {
+    outline: none;
+    color: @gray1;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: none;
+    }
+    &:active {
+      outline: none;
+      color: @green2;
+    }
+  }
+  .splitter-button-close {
+    display: none;
+  }
+  .column-container.sidebar-open {
+    .side {
+      width: 33%;
+    }
+    .splitter {
+      right: -15px;
+    }
+    .splitter-button-open {
+      display: none;
+    }
+    .splitter-button-close {
+      display: inline-block;
+    }
   }
 }
 

scout-ui/src/object-tree/index.less

@@ -22,6 +22,9 @@
 
   font-family: @font-family-monospace;
   font-size: 11px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+  border-bottom: 1px solid @gray7;
 
   .jsobject {
     margin-left: 8px;
@@ -63,3 +66,12 @@ span.caret-placeholder {
     cursor: pointer;
   }
 }
+
+// .truncate-jsprimvalue {
+//   max-width: 75%;
+//   overflow-x: hidden;
+//   text-overflow: ellipsis;
+//   display: inline-block;
+//   white-space: nowrap;
+//   margin-bottom: -4px;
+// }

scout-ui/src/object-tree/jsobject-view.jade

@@ -1,2 +1,2 @@
-.jsobject
+.jsobject.clearfix
   div(data-hook='members-container')

scout-ui/src/object-tree/jsprimvalue-view.jade

@@ -1,5 +1,5 @@
 span.jsprimvalue
   if (typeof(model.value) === 'string')
-    | "#{model.value}"
+    | "#[span(class='truncate-jsprimvalue', title="#{model.value}") #{model.value}]"
   else
-    = model.value
+    | #[span(class='truncate-jsprimvalue', title="#{model.value}") #{model.value}]