LT-249: Creating selected row options for measurements panel

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

Packages/lesiontracker/client/components/lesionTable/lesionTable.styl

@@ -2,7 +2,7 @@
 
 #lesionTableContainer
   background-color: $primaryBackgroundColor
-  height: calc(100% - 105px)
+  height: 100%
   width: 100%
 
 .lesionTableTimepointHeaderRow

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>

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');
 

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
+      opacity: 1
-      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
 
+    .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
+    padding: 5px 2px 0 0
-    display: flex
+
-    flex-direction: column
+    &>*
-    align-items: stretch
+      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