From a7ca8257552dad71b20c8eefff5b8abecaa2924a Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Mon, 4 Jul 2016 15:17:27 -0300
Subject: [PATCH] LT-249: Creating selected row options for measurements panel

---
 .../flexboxLayout/flexboxLayout.styl          |  1 +
 .../components/lesionTable/lesionTable.styl   |  2 +-
 .../lesionTableRow/lesionTableRow.html        | 14 +++
 .../lesionTableRow/lesionTableRow.js          |  5 ++
 .../lesionTableRow/lesionTableRow.styl        | 87 ++++++++++++++-----
 5 files changed, 86 insertions(+), 23 deletions(-)

diff --git a/Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.styl b/Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.styl
index eef896210..69807f422 100644
--- a/Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.styl
+++ b/Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.styl
@@ -44,6 +44,7 @@
 
   .sidebar-right
     flex: 1
+    margin-left: -6px
     margin-right: - $lesionsSidebarMenuWidth
     max-width: $lesionsSidebarMenuWidth
     order: 3
diff --git a/Packages/lesiontracker/client/components/lesionTable/lesionTable.styl b/Packages/lesiontracker/client/components/lesionTable/lesionTable.styl
index 4695fb490..fc37495bc 100644
--- a/Packages/lesiontracker/client/components/lesionTable/lesionTable.styl
+++ b/Packages/lesiontracker/client/components/lesionTable/lesionTable.styl
@@ -2,7 +2,7 @@
 
 #lesionTableContainer
   background-color: $primaryBackgroundColor
-  height: calc(100% - 105px)
+  height: 100%
   width: 100%
 
 .lesionTableTimepointHeaderRow
diff --git a/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.html b/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.html
index be9a07088..2fb5fdcc0 100644
--- a/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.html
+++ b/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.html
@@ -31,6 +31,20 @@
                     {{>lesionTableTimepointCell}}
                 {{/each}}
             </div>
+            <div class="rowOptions">
+                <div class="rowAction js-rename pull-left m-r-2" tabindex="1">
+                    <svg class="edit-icon">
+                        <use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-measurements-additional"></use>
+                    </svg>
+                    Rename
+                </div>
+                <div class="rowAction js-delete pull-left" tabindex="1">
+                    <svg class="close-icon">
+                        <use xlink:href=/packages/lesiontracker/assets/icons.svg#icon-ui-close></use>
+                    </svg>
+                    Delete
+                </div>
+            </div>
         </div>
     </div>
 </template>
diff --git a/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.js b/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.js
index afa5eb748..5b3799e43 100644
--- a/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.js
+++ b/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.js
@@ -18,6 +18,11 @@ var keys = {
 };
 
 Template.lesionTableRow.events({
+    'click .lesionRowSidebar'(event, instance) {
+        const $row = instance.$('.lesionTableRow');
+        $row.closest('.lesionTableView').find('.lesionTableRow').not($row).removeClass('active');
+        $row.toggleClass('active');
+    },
     'dblclick .location': function() {
         log.info('Double clicked on Lesion Location cell');
 
diff --git a/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl b/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl
index 94bc962d8..aa9ca8ba9 100644
--- a/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl
+++ b/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl
@@ -2,32 +2,40 @@
 
 .lesionTableRow
   display: flex
-  height: 63px
+  margin-left: -6px
   margin-top: 2px
-  width: 100%
+  padding-left: 6px
+  // required transformation to make inner fixed elements relative to this one
+  transform(scale(1))
+  width: calc(100% + 6px)
+
+  &:before
+    background-color: $activeColor
+    border-top-left-radius: 7px
+    border-bottom-left-radius: 7px
+    content: ''
+    display: block
+    height: 100%
+    left: 0
+    opacity: 0
+    pointer-events: none
+    position: fixed
+    top: 0
+    transition(all 0.3s ease)
+    width: 5px
 
   &.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
+      opacity: 1
 
     .lesionRowSidebar
       color: $activeColor
 
+    .rowOptions
+      height: 35px
+      visibility: visible
+
   &.response-status .lesionRowSidebar .response-status-icon
     background-color: $defaultColor
     border-radius: 11px
@@ -54,11 +62,46 @@
     svg
       fill: $textPrimaryColor
 
+  .rowOptions
+    background-color: $uiGrayDarker
+    height: 0
+    overflow: hidden
+    transition(all 0.3s ease)
+    visibility: hidden
+
+    .rowAction
+      color: $defaultColor
+      cursor: pointer
+      line-height: 35px
+      transition(all 0.3s ease)
+
+      &:hover, &:active
+        color: $textPrimaryColor
+
+        svg
+          fill: $textPrimaryColor
+          stroke: $textPrimaryColor
+
+    svg
+      fill: $defaultColor
+      stroke: $defaultColor
+      transition(all 0.3s ease)
+
+      &.edit-icon
+        width: 14px
+        height: 13px
+
+      &.close-icon
+        width: 11px
+        height: 11px
+
   .lesionRowSidebar
     background: $uiGray
     color: $textSecondaryColor
+    cursor: pointer
     flex: 1
     max-width: 30px
+    transition(all 0.3s ease)
 
     .lesionNumber
       font-size: 14px
@@ -69,13 +112,12 @@
 
   .lesionDetails
     flex: 1
-    padding: 5px 2px 0 14px
-    display: flex
-    flex-direction: column
-    align-items: stretch
+    padding: 5px 2px 0 0
+
+    &>*
+      padding-left: 14px
 
     .location
-      flex: 1
       font-weight: 400
       font-size: 14px
       color: $textSecondaryColor
@@ -86,6 +128,7 @@
 
     .timepointData
       display: flex
+      height: 27px
       margin-top: 1px
 
       div