LT-247: Creating active state for studies in the left sidebar

Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.styl

@@ -8,17 +8,11 @@
   width: 100%
 
   .sidebarMenu
-    position: absolute
-    height: 100%
     background: $primaryBackgroundColor
-    -webkit-transition: $sidebarTransition
+    height: 100%
-    -ms-transition: $sidebarTransition
+    position: absolute
-    -o-transition: $sidebarTransition
+    transition($sidebarTransition)
-    -moz-transition: $sidebarTransition
+    z-index: 1
-    transition: $sidebarTransition
-
-    .timepointButtonContainer
-      height: 55px
 
   .sidebar-left
     width: $studiesSidebarMenuWidth

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)
 

Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.html

@@ -1,14 +1,11 @@
 <template name="studyTimepointBrowser">
     {{#let timepointList=timepoints}}
-        <div class="studyTimepointBrowser noselect">
+        <div class="studyTimepointBrowser noselect {{#if shallShowViewType timepointList}}viewTypeVisible{{/if}}">
-            {{#if shallShowViewType timepointList}}
             <div class="timepointButtonContainer p-t-2">
                 {{>roundedButtonGroup viewTypeButtonGroupData}}
             </div>
-                <hr class="m-y-0">
-            {{/if}}
             <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)}}

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

Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.html

@@ -1,6 +1,7 @@
 <template name="studyTimepointStudy">
     {{#let isSidebar=(not (isDefined viewportIndex))}}
         <div class="studyTimepointStudy {{#if isSidebar}}studySidebarTimepoint{{else}}studyQuickSwitchTimepoint{{/if}} {{#if this.active}}active{{/if}}">
+            <div class="studyItem">
                 {{>loadingText}}
                 <div class="studyModality">
                     <div class="studyModalityBox">
@@ -15,6 +16,7 @@
                         <div class="studyModalityDescription">{{this.study.studyDescription}}</div>
                     </div>
                 </div>
+            </div>
             {{#if isSidebar}}
                 <div class="studyTimepointThumbnails">
                     {{#each thumbnail in (studyThumbnails this.study)}}

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