From 623064ea81a094eec50f6833f99077251821deb1 Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Thu, 23 Jun 2016 16:15:41 -0300
Subject: [PATCH] LT-249: Creating active state for measurement rows

---
 Packages/design/styles/variables.styl         |  2 +-
 .../flexboxLayout/flexboxLayout.styl          | 20 +++++++++++----
 .../lesionTableRow/lesionTableRow.styl        | 25 ++++++++++++++++---
 .../lesionTableView/lesionTableView.styl      |  2 ++
 4 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/Packages/design/styles/variables.styl b/Packages/design/styles/variables.styl
index a26e3bced..233b03587 100644
--- a/Packages/design/styles/variables.styl
+++ b/Packages/design/styles/variables.styl
@@ -39,4 +39,4 @@ $transitionDuration = 0.3s
 $transitionEffect = ease
 $sidebarTransition = all $transitionDuration $transitionEffect
 $studiesSidebarMenuWidth = 307px
-$lesionsSidebarMenuWidth = 317px
+$lesionsSidebarMenuWidth = 323px
diff --git a/Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.styl b/Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.styl
index 2718f8b6b..541bdee21 100644
--- a/Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.styl
+++ b/Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.styl
@@ -33,7 +33,7 @@
     -o-transition: $sidebarTransition
     -moz-transition: $sidebarTransition
     transition: $sidebarTransition
-    transform: translate3d(0,0,0);
+    transform: translate3d(0, 0, 0)
 
     &.sidebar-left-open.sidebar-right-open
       width: 'calc(100% - %s)' % ($studiesSidebarMenuWidth + $lesionsSidebarMenuWidth)
@@ -45,14 +45,24 @@
       width: 'calc(100% - %s)' % $studiesSidebarMenuWidth
 
     &.sidebar-left-open
-      transform: translate3d($studiesSidebarMenuWidth,0,0);
+      transform: translate3d($studiesSidebarMenuWidth, 0, 0)
 
   .sidebar-right
-    width: $lesionsSidebarMenuWidth
-    order: 3
     flex: 0
+    order: 3
+    padding-left: 6px
     right: - $lesionsSidebarMenuWidth
-    border-left: $uiBorderThickness $uiBorderColor solid
+    width: $lesionsSidebarMenuWidth
+
+    &:before
+      background-color: $uiBorderColor
+      content: ''
+      display: block
+      height: 100%
+      left: 5px
+      position: absolute
+      top: 0
+      width: $uiBorderThickness
 
     &.sidebar-open
       right: 0
diff --git a/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl b/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl
index 6dd506dfa..03b422cf3 100644
--- a/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl
+++ b/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl
@@ -6,6 +6,28 @@
   margin-top: 2px
   width: 100%
 
+  &.active
+    margin-left: -6px
+    padding-left: 6px
+    // required transformation to make inner fixed elements relative to this one
+    transform(scale(1))
+
+    &:before
+      background-color: $activeColor
+      border-top-left-radius: 7px
+      border-bottom-left-radius: 7px
+      content: ''
+      display: block
+      height: 100%
+      left: 0
+      pointer-events: none
+      position: fixed
+      top: 0
+      width: 5px
+
+    .lesionRowSidebar
+      color: $activeColor
+
   .lesionRowSidebar
     background: $uiGrayDark
     color: $textSecondaryColor
@@ -19,9 +41,6 @@
       padding-top: 10px
       text-align: center
 
-    &.active
-      border-left: 4px $activeColor solid
-
   .lesionDetails
     flex: 1
     padding: 5px 2px 0 14px
diff --git a/Packages/lesiontracker/client/components/lesionTableView/lesionTableView.styl b/Packages/lesiontracker/client/components/lesionTableView/lesionTableView.styl
index bd69eacae..894b3000a 100644
--- a/Packages/lesiontracker/client/components/lesionTableView/lesionTableView.styl
+++ b/Packages/lesiontracker/client/components/lesionTableView/lesionTableView.styl
@@ -3,8 +3,10 @@
   height: 100%
   overflow-x: hidden
   overflow-y: auto
+  margin-left: -6px
   margin-right: -16px
   padding-bottom: 100px
+  padding-left: 6px
 
   -webkit-overflow-scrolling: touch