From 5272cc234a4243c047c26b1e10e1acaa2e7bd919 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elo=C3=ADzio=20Salgado?= <eloisalgado@gmail.com>
Date: Fri, 18 Nov 2016 12:12:07 -0200
Subject: [PATCH] LT-361: Add borders to viewport and active viewport

---
 .../client/components/viewer/viewer.styl      | 21 ++++++++++++++++++-
 .../components/viewerSection/viewerSection.js | 17 ++++++---------
 .../viewerSection/viewerSection.styl          | 14 ++++---------
 .../viewer/gridLayout/gridLayout.styl         | 15 ++++++++++++-
 4 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/LesionTracker/client/components/viewer/viewer.styl b/LesionTracker/client/components/viewer/viewer.styl
index 8914fdc15..4dbc39157 100644
--- a/LesionTracker/client/components/viewer/viewer.styl
+++ b/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
\ No newline at end of file
diff --git a/LesionTracker/client/components/viewerSection/viewerSection.js b/LesionTracker/client/components/viewerSection/viewerSection.js
index c04031890..0aabd12cc 100644
--- a/LesionTracker/client/components/viewerSection/viewerSection.js
+++ b/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');
     }
 });
diff --git a/LesionTracker/client/components/viewerSection/viewerSection.styl b/LesionTracker/client/components/viewerSection/viewerSection.styl
index 7b59a1805..100d08651 100644
--- a/LesionTracker/client/components/viewerSection/viewerSection.styl
+++ b/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)
diff --git a/Packages/ohif-viewerbase/client/components/viewer/gridLayout/gridLayout.styl b/Packages/ohif-viewerbase/client/components/viewer/gridLayout/gridLayout.styl
index a476e03de..e44474eaf 100644
--- a/Packages/ohif-viewerbase/client/components/viewer/gridLayout/gridLayout.styl
+++ b/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
\ No newline at end of file