LT-361: Add borders to viewport and active viewport

LesionTracker/client/components/viewer/viewer.styl

@@ -18,6 +18,8 @@
 
     .removable
       .imageViewerViewport
+        theme('border-bottom', '%s solid $uiBorderColor' % $uiBorderThickness)
+        
         canvas
           border-color: transparent
           border-style: solid
@@ -27,9 +29,26 @@
     .removable
       .imageViewerViewport
         theme('border-right', '%s solid $uiBorderColor' % $uiBorderThickness)
-
+    
+    &:first-child
+      .removable
+        .imageViewerViewport
+          theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
+        
     &.active
       .removable
         .imageViewerViewport
+          border-right: none !important
+          
           canvas
             theme('border-color', '$uiBorderColorActive')
+
+
+.sidebar-left-open
+  #layoutManagerTarget
+    #imageViewerViewports
+      .viewportContainer
+        &:first-child
+          .removable
+            .imageViewerViewport
+              border-left: none

LesionTracker/client/components/viewerSection/viewerSection.js

@@ -1,19 +1,14 @@
-Template.viewerSection.events({
-    'transitionend .sidebarMenu'(event) {
-        if (!event.target.classList.contains('sidebarMenu')) {
-            return;
-        }
-
-        handleResize();
-    }
-});
+const isSidebarOpen = sidebarName => {
+    handleResize();
+    return Template.instance().data.state.get(sidebarName);
+};
 
 Template.viewerSection.helpers({
     leftSidebarOpen() {
-        return Template.instance().data.state.get('leftSidebar');
+        return isSidebarOpen('leftSidebar');
     },
 
     rightSidebarOpen() {
-        return Template.instance().data.state.get('rightSidebar');
+        return isSidebarOpen('rightSidebar');
     }
 });

LesionTracker/client/components/viewerSection/viewerSection.styl

@@ -30,9 +30,11 @@
     margin-left: - $studiesSidebarMenuWidth
     max-width: $studiesSidebarMenuWidth
     order: 1
+    display: none
 
     &.sidebar-open
       margin-left: 0
+      display: block
 
   .mainContent
     flex: 1
@@ -50,6 +52,7 @@
     order: 3
     padding-left: 6px
     position: relative
+    display: none
 
     &[data-timepoints="3"]
       margin-right: - ($lesionsSidebarMenuWidth + 135.5px)
@@ -59,18 +62,9 @@
       margin-right: - ($lesionsSidebarMenuWidth + 270px)
       max-width: $lesionsSidebarMenuWidth + 270px
 
-    &:before
-      theme('background-color', '$uiBorderColor')
-      content: ''
-      display: block
-      height: 100%
-      left: 5px
-      position: absolute
-      top: 0
-      width: $uiBorderThickness
-
     &.sidebar-open
       margin-right: 0
+      display: block
 
   .studiesListedChanger
     theme('border-bottom', '%s solid $uiBorderColor' % $uiBorderThickness)

Packages/ohif-viewerbase/client/components/viewer/gridLayout/gridLayout.styl

@@ -3,5 +3,18 @@
 #imageViewerViewports
   height: 100%
   padding-bottom: 1px
-  padding-right: 6px
   width: 100%
+  padding-right: 0
+
+.mainContent
+  &.sidebar-right-open
+    #imageViewerViewports
+      padding-right: 7px
+    
+  &.sidebar-left-open:not(.sidebar-right-open)
+    #imageViewerViewports
+      padding-right: 1px
+  
+  &.sidebar-left-open.sidebar-right-open
+    #imageViewerViewports
+      padding-right: 8px