Lesion Tracker Redesign so far

2016-07-22 11:00:16 +02:00
1 parent b247e89d8b
commit a9a4f3f82b
@@ -0,0 +1,22 @@
+<template name="lesionTableHeaderRow">
+    <div class="lesionTableHeaderRow">
+        <div class="add">
+            <svg>
+                <use xlink:href=/packages/lesiontracker/assets/icons.svg#icon-ui-add></use>
+            </svg>
+        </div>
+        <div class="type">
+            {{type}}
+        </div>
+        <div class="max">
+        {{ #if maxNumLesions }}
+            <p class="maxNumLesions">
+                Max {{maxNumLesions}}
+            </p>
+        {{/if}}
+        </div>
+        <div class="numberOfLesions">
+            {{numberOfLesions}}
+        </div>
+    </div>
+</template>
@@ -0,0 +1,38 @@
+Template.lesionTableHeaderRow.helpers({
+    numberOfLesions: function() {
+        var instance = Template.instance();
+        return instance.data.measurements.count();
+    },
+    maxNumLesions: function() {
+        var instance = Template.instance();
+        var lesionType = instance.id;
+
+        // TODO: Check what we are annotating
+        var timepointType = 'baseline';
+
+        // Identify which Trial Conformance Criteria are currently being used
+        // Note that there may be more than one.
+        var criteriaTypes = TrialCriteriaTypes.find({
+            selected: true
+        }).map(function(criteria) {
+            return criteria.id;
+        });
+
+        var currentConstraints = getTrialCriteriaConstraints(criteriaTypes);
+        if (!currentConstraints) {
+            // For testing
+            return 10;
+        }
+
+        var criteria = currentConstraints[timepointType][lesionType];
+
+        return criteria.group.totalNumberOfLesions;
+    }
+});
+
+Template.lesionTableHeaderRow.events({
+    'click .add': function() {
+        console.log('Add was clicked');
+        // TODO: Set active tool to new type
+    }
+});
@@ -0,0 +1,58 @@
+@import "{design}/app"
+
+$headerRowHeight = 63px
+
+.lesionTableHeaderRow
+  background: $darkUiColor
+  color: $textSecondaryColor
+  fill: $textSecondaryColor
+  width: 100%
+  height: $headerRowHeight
+  display: flex
+  line-height: $headerRowHeight
+
+  div
+    flex: 1
+    justify-content: space-around
+    align-items: stretch
+    text-align: center
+
+  .add
+    padding: 0 10px
+    max-width: 20px
+    cursor: pointer
+
+    svg
+      height: $headerRowHeight
+      max-width: 11px
+
+  .type
+    cursor: pointer
+    font-weight: 200
+    height: $headerRowHeight
+    font-size: 13pt
+
+  .numberOfLesions
+    float: right
+    font-weight: 100
+    font-size: 40px
+    max-width: 30px
+    margin-right: 5px
+    height: $headerRowHeight
+    line-height: $headerRowHeight
+
+  .max
+    height: $headerRowHeight
+    background: $darkUiColor
+
+    .maxNumLesions
+      margin: 21px auto
+      height: 20px
+      line-height: 20px
+      width: 47px
+      font-size: 12px
+      text-transform: uppercase
+      font-weight: 500
+      border-radius: 3px
+      color: black
+      background-color: $textSecondaryColor;