From bca32d88e0eb4616890490c9d2702d3a1e533766 Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Wed, 22 Jun 2016 14:51:28 -0300
Subject: [PATCH] LT-247: Creating active state for studies in the left sidebar

---
 .../flexboxLayout/flexboxLayout.styl          | 14 ++-----
 .../studySeriesQuickSwitch.styl               |  1 +
 .../studyTimepointBrowser.html                | 15 +++----
 .../studyTimepointBrowser.styl                | 41 ++++++++++++++++++-
 .../studyTimepointStudy.html                  | 26 ++++++------
 .../studyTimepointStudy.styl                  |  5 ++-
 6 files changed, 68 insertions(+), 34 deletions(-)

diff --git a/Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.styl b/Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.styl
index cde86b357..2718f8b6b 100644
--- a/Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.styl
+++ b/Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.styl
@@ -8,17 +8,11 @@
   width: 100%
 
   .sidebarMenu
-    position: absolute
-    height: 100%
     background: $primaryBackgroundColor
-    -webkit-transition: $sidebarTransition
-    -ms-transition: $sidebarTransition
-    -o-transition: $sidebarTransition
-    -moz-transition: $sidebarTransition
-    transition: $sidebarTransition
-
-    .timepointButtonContainer
-      height: 55px
+    height: 100%
+    position: absolute
+    transition($sidebarTransition)
+    z-index: 1
 
   .sidebar-left
     width: $studiesSidebarMenuWidth
diff --git a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl
index c2572faba..fbf055d93 100644
--- a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl
+++ b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl
@@ -153,6 +153,7 @@ $seriesSpacing = 2px
     margin-right: -20px
     min-height: 200px
     max-height: 500px
+    overflow-x: hidden
     overflow-y: scroll
     width: calc(100% + 20px)
 
diff --git a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.html b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.html
index 68ed87df0..92638822e 100644
--- a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.html
+++ b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.html
@@ -1,14 +1,11 @@
 <template name="studyTimepointBrowser">
     {{#let timepointList=timepoints}}
-        <div class="studyTimepointBrowser noselect">
-            {{#if shallShowViewType timepointList}}
-                <div class="timepointButtonContainer p-t-2">
-                    {{>roundedButtonGroup viewTypeButtonGroupData}}
-                </div>
-                <hr class="m-y-0">
-            {{/if}}
+        <div class="studyTimepointBrowser noselect {{#if shallShowViewType timepointList}}viewTypeVisible{{/if}}">
+            <div class="timepointButtonContainer p-t-2">
+                {{>roundedButtonGroup viewTypeButtonGroupData}}
+            </div>
             <div class="studyTimepointScrollArea">
-                <div class="p-x-1">
+                <div class="p-l-1">
                     {{#if timepointList.length}}
                         {{#each timepoint in timepointList}}
                             {{#if shallShowTimepoint timepoint @index}}
@@ -27,7 +24,7 @@
                                     </div>
                                     {{>studyTimepoint studies=(studies timepoint) index=@index viewportIndex=this.viewportIndex currentStudy=this.currentStudy}}
                                 </div>
-                                <hr class="m-y-1">
+                                <hr>
                             {{/if}}
                         {{/each}}
                         {{#if and this.currentStudy (not showAdditionalTimepoints)}}
diff --git a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.styl b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.styl
index 479264f9b..2289cc2f0 100644
--- a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.styl
+++ b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.styl
@@ -1,12 +1,33 @@
 @import "{design}/app"
 
+$timepointButtonHeight = 55px
+
 .studyTimepointBrowser
   background-color: $primaryBackgroundColor
   float: left
   height: calc(100% - 55px - 50px - 30px)
-  overflow: hidden
+  position: relative
   width: 100%
 
+  .timepointButtonContainer
+    background-color: $primaryBackgroundColor
+    border-bottom: 1px solid $uiBorderColor
+    display: none
+    height: $timepointButtonHeight
+    left: 10px
+    position: absolute
+    right: 10px
+    top: 0
+    z-index: 1
+
+  &.viewTypeVisible
+
+    .timepointButtonContainer
+      display: block
+
+    .studyTimepointScrollArea
+      padding-top: $timepointButtonHeight
+
   .timepointEntry
     &.active
       .timepointModalities
@@ -60,9 +81,25 @@
     height: 100%
     overflow-x: hidden
     overflow-y: auto
-    margin-right: -16px
+    margin-right: -22px
     padding-bottom: 20px
     padding-right: 16px
 
     &::-webkit-scrollbar
       display: none
+
+    hr, .timepointHeader, .studyItem, .studyModality.additional
+      margin-right: 16px
+
+  .studySidebarTimepoint .thumbnailEntry.active:before
+    background-color: $activeColor
+    border-top-right-radius: 7px
+    border-bottom-right-radius: 7px
+    content: ''
+    display: block
+    height: 91px
+    pointer-events: none
+    position: fixed
+    right: 0
+    top: 0
+    width: 5px
diff --git a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.html b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.html
index 39d01798f..14394e01e 100644
--- a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.html
+++ b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.html
@@ -1,18 +1,20 @@
 <template name="studyTimepointStudy">
     {{#let isSidebar=(not (isDefined viewportIndex))}}
         <div class="studyTimepointStudy {{#if isSidebar}}studySidebarTimepoint{{else}}studyQuickSwitchTimepoint{{/if}} {{#if this.active}}active{{/if}}">
-            {{>loadingText}}
-            <div class="studyModality">
-                <div class="studyModalityBox">
-                    {{#if this.study.modalities}}
-                        {{this.study.modalities}}
-                    {{else}}
-                        UN
-                    {{/if}}
-                </div>
-                <div class="studyModalityText">
-                    <div class="studyModalityDate">{{formatDA this.study.studyDate 'D-MMM-YYYY'}}</div>
-                    <div class="studyModalityDescription">{{this.study.studyDescription}}</div>
+            <div class="studyItem">
+                {{>loadingText}}
+                <div class="studyModality">
+                    <div class="studyModalityBox">
+                        {{#if this.study.modalities}}
+                            {{this.study.modalities}}
+                        {{else}}
+                            UN
+                        {{/if}}
+                    </div>
+                    <div class="studyModalityText">
+                        <div class="studyModalityDate">{{formatDA this.study.studyDate 'D-MMM-YYYY'}}</div>
+                        <div class="studyModalityDescription">{{this.study.studyDescription}}</div>
+                    </div>
                 </div>
             </div>
             {{#if isSidebar}}
diff --git a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl
index f4070f542..8ad908ac4 100644
--- a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl
+++ b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl
@@ -15,6 +15,8 @@ $spacerY = 12px
 
 .studyTimepointStudy
   position: relative
+  // required transformation to make inner fixed elements relative to this one
+  transform(scale(1))
 
   .loadingTextDiv
     padding: 25px
@@ -28,9 +30,10 @@ $spacerY = 12px
 
   &.loading
     .loadingTextDiv
-      width: 100%
       height: 100%
+      left: 0
       opacity: 0.75
+      right: 16px
 
     .studyModality
       opacity: 0.2