LT-253: Making lesion table looks like the specified in design

LesionTracker/.meteor/dev_bundle

@@ -0,0 +1 @@
+C:\Users\bruno\AppData\Local\.meteor\packages\meteor-tool\1.3.4_4\mt-os.windows.x86_32\dev_bundle

Packages/design/package.js

@@ -31,7 +31,8 @@ Package.onUse(function(api) {
 
     // Component styles
     api.addFiles([
-        'styles/components/radio.styl'
+        'styles/components/radio.styl',
+        'styles/components/select2.styl'
     ], 'client');
 
     // Rounded Button Group

Packages/design/styles/components/select2.styl

@@ -0,0 +1,62 @@
+@import "{design}/app"
+
+// TODO: [design] can't we use colors that are already in common pallete?
+$gray1 = #C3C3C3
+$gray2 = #B6B6B6
+$gray3 = #676767
+$gray4 = #3E3E3E
+$borderRadius = 2px
+
+span.select2.select2-container
+  font-weight: normal
+
+  span.select2-selection
+    border: 0
+    border-radius: $borderRadius
+
+    &, span.select2-selection__rendered, span.select2-selection__arrow
+      height: 30px
+
+  span.select2-selection__rendered
+    line-height: 34px
+    padding-left: 11px
+
+  span.select2-selection__arrow
+    background-color: $gray1
+    border-left: 1px solid $primaryBackgroundColor
+    border-top-right-radius: $borderRadius
+    border-bottom-right-radius: $borderRadius
+    right: 0
+    top: 0
+    width: 20px
+
+    b
+      display: none
+
+  span.select2-selection--multiple
+    background-color: $gray2
+    min-height: 30px
+
+    input.select2-search__field
+      color: $gray4
+      placeholder-color($gray4)
+
+    li.select2-selection__choice
+      background-color: #FFF
+      border-color: $uiGray
+      border-radius: $borderRadius
+      color: $gray4
+      line-height: 22px
+      margin-top: 3px
+
+    span.select2-selection__choice__remove
+      color: $gray3
+      float: right
+      font-size: 20px
+      font-weight: 300
+      line-height: 20px
+      margin-left: 6px
+      margin-right: 0
+
+    span.select2-selection__clear
+      display: none

Packages/design/styles/imports/mixins.styl

@@ -25,3 +25,13 @@ transform-origin(o)
   -ms-transform-origin: o
   -o-transform-origin: o
   -moz-transform-origin: o
+
+placeholder-color(c)
+  &::-webkit-input-placeholder
+    color: c
+  &:-moz-placeholder
+    color: c
+  &::-moz-placeholder
+    color: c
+  &:-ms-input-placeholder
+    color: c

Packages/lesiontracker/both/schema/additionalFindings.js

@@ -11,42 +11,42 @@ export const schema = new SimpleSchema({
     // TODO: Add check so that the value cannot be None & something other region
     regionsOfMetastaticDisease: {
         type: [String],
-        label: 'Regions of Metastatic Disease',
+        label: 'Regions of metastatic disease',
         allowedValues: ['None', 'Lymph Node'],
         defaultValue: ['None'],
         optional: true
     },
     tracerRelatedToMetastaticDisease: {
         type: String,
-        label: 'Tracer Related to Metastatic Disease?',
+        label: 'Tracer related to metastatic disease?',
         allowedValues: ['Yes', 'No'],
         defaultValue: 'Yes',
         optional: true
     },
     numberOfBoneLesions: {
         type: String,
-        label: 'Number of Bone Lesions',
+        label: 'Number of bone lesions',
         allowedValues: ['0', '1-2', '2-4', '>5'],
         defaultValue: '0',
         optional: true
     },
     acceptableImageQuality: {
         type: String,
-        label: 'Acceptable Image Quality',
+        label: 'Acceptable image quality',
         allowedValues: ['Yes', 'No'],
         defaultValue: 'Yes',
         optional: true
     },
     adequateAnatomicalCoverage: {
         type: String,
-        label: 'Adequate Anatomical Coverage',
+        label: 'Adequate anatomical coverage',
         allowedValues: ['Yes', 'No'],
         defaultValue: 'Yes',
         optional: true
     },
     presenceOfContrast: {
         type: String,
-        label: 'Presence of Contrast',
+        label: 'Presence of contrast',
         allowedValues: ['Yes', 'No'],
         defaultValue: 'Yes',
         optional: true

Packages/lesiontracker/client/components/additionalFindings/additionalFindings.html

@@ -15,7 +15,7 @@
                         key='regionsOfMetastaticDisease'
                         multiple=true
                         options=(clone
-                            placeholder='Search Regions'
+                            placeholder='Choose a region...'
                             allowClear=true
                         )
                     }}

Packages/lesiontracker/client/components/additionalFindings/additionalFindings.styl

@@ -10,7 +10,6 @@
     overflow-x: hidden
     overflow-y: auto
     margin-right: -16px
-    padding-bottom: 100px
     padding-right: 16px
 
     -webkit-overflow-scrolling: touch
@@ -33,7 +32,8 @@
 
     .form-group
       color: $textPrimaryColor
-      padding: 7px 11px
+      margin-bottom: 0
+      padding: 7px 27px 7px 11px
       width: 100%
 
       &:not(:last-child)
@@ -43,7 +43,7 @@
         display: block
         font-weight: bold
         line-height: 15px
-        margin: 10px 0 8px
+        margin: 10px 2px 8px
 
       .control-label
         font-size: 14px
@@ -51,8 +51,17 @@
         display: inline-block
         padding: 5px
 
+      .select2
+        margin-bottom: 8px
+        margin-left: 3px
+        margin-top: 5px
+
+      .select2-selection--single
+        width: 91px
+
       .group-radio
         height: 30px
+        margin-bottom: 15px
 
         label
           display: inline-block
@@ -61,7 +70,7 @@
           font-weight: 100
           height: 30px
           line-height: 30px
-          width: 50%
+          width: 109px
 
       .disease-regions + .select2
         width: 100% !important
@@ -71,7 +80,7 @@
 
     .buttonSection
       cursor: pointer
-      height: 100px
+      height: 90px
       color: $defaultColor
 
       &:hover
@@ -91,17 +100,16 @@
       div
         float: left
         display: inline-block
-        height: 80px
+        height: 92px
 
       .buttonLabel
-        line-height: 80px
+        line-height: 92px
-        padding: 0 30px
+        padding: 0 12px
 
       .svgContainer
-        padding: 15px 5px
+        padding: 25px 14px
-        width: 40px
 
         svg
-          width: 40px
+          width: 36px
-          height: 40px
+          height: 36px
           fill: $textPrimaryColor