Lesion Tracker Redesign so far

2016-07-22 11:00:16 +02:00
1 parent b247e89d8b
commit a9a4f3f82b
@@ -0,0 +1,77 @@
+<template name="additionalMeasurements">
+    <div id="additionalMeasurements">
+        <div class="scrollArea">
+            <div class="section">
+                <div class="header">
+                    Additional Findings: Baseline
+                </div>
+                <div>
+                    {{ >radioOptionGroup measurableDiseaseButtonData}}
+                </div>
+            </div>
+
+            <div class="section">
+                <div class="header">
+                    Supplementary Measurements
+                </div>
+                <div class="entrySection">
+                    <label>Number of bone lesions</label>
+                    <div>
+                        <select>
+                            <option>0</option>
+                            <option>1-2</option>
+                            <option selected>2-4</option>
+                            <option>>5</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="entrySection">
+                    <label>Regions of metastatic disease</label>
+                    <select id="regionsOfMetastaticDisease">
+                        <option>None</option>
+                        <option>Lymph node</option>
+                    </select>
+                </div>
+                {{ >radioOptionGroup metastaticDiseaseButtonData}}
+            </div>
+            <div class="section">
+                <div class="header">
+                    Image Quality
+                </div>
+                {{ >radioOptionGroup imageQualityButtonData}}
+                {{ >radioOptionGroup anatomicalCoverageButtonData}}
+                {{ >radioOptionGroup presenceOfContrastButtonData}}
+            </div>
+            <div class="section">
+                <div class="header">
+                    Additional Screen Captures
+                </div>
+                <div class="entrySection buttonSection">
+                    <div class="svgContainer">
+                        <svg>
+                            <use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-create-screen-capture"></use>
+                        </svg>
+                    </div>
+                    <div class="buttonLabel noselect">
+                        Add new screen capture
+                    </div>
+                </div>
+            </div>
+            <div class="section">
+                <div class="header">
+                    Comments
+                </div>
+                <div class="entrySection buttonSection">
+                    <div class="svgContainer">
+                        <svg>
+                            <use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-create-comment"></use>
+                        </svg>
+                    </div>
+                    <div class="buttonLabel noselect">
+                        Add a comment
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
@@ -0,0 +1,87 @@
+var yesNoOptions = [{
+    key: 'yes',
+    text: 'Yes'
+}, {
+    key: 'no',
+    text: 'No'
+}];
+
+Template.additionalMeasurements.onCreated(function additionalMeasurementsOnCreated() {
+    const instance = this;
+
+    instance.measurableDisease = new ReactiveVar();
+    instance.numberOfBoneLesions = new ReactiveVar();
+    instance.regionsOfMetastaticDisease = new ReactiveVar();
+    instance.tracerRelatedToMetastaticDisease = new ReactiveVar();
+    instance.acceptableImageQuality = new ReactiveVar();
+    instance.adequateAnatomicalCoverage = new ReactiveVar();
+    instance.presenceOfContrast = new ReactiveVar();
+    instance.phaseOfContrast = new ReactiveVar();
+
+    instance.measurableDisease.set('absent');
+    instance.tracerRelatedToMetastaticDisease.set('no');
+    instance.acceptableImageQuality.set('yes');
+    instance.adequateAnatomicalCoverage.set('yes');
+    instance.presenceOfContrast.set('yes');
+});
+
+Template.additionalMeasurements.onRendered(function additionalMeasurementsOnRendered() {
+    const instance = this;
+
+    instance.$("#regionsOfMetastaticDisease").select2({
+        multiple: true
+    });
+});
+
+Template.additionalMeasurements.helpers({
+    measurableDiseaseButtonData() {
+        const instance = Template.instance();
+        return {
+            text: 'Measurable disease',
+            value: instance.measurableDisease,
+            options: [{
+                key: 'present',
+                text: 'Present'
+            }, {
+                key: 'absent',
+                text: 'Absent'
+            }]
+        };
+    },
+
+    metastaticDiseaseButtonData() {
+        const instance = Template.instance();
+        return {
+            text: 'Tracer related to metastatic disease',
+            value: instance.tracerRelatedToMetastaticDisease,
+            options: yesNoOptions
+        };
+    },
+
+    imageQualityButtonData() {
+        const instance = Template.instance();
+        return {
+            text: 'Acceptable image quality',
+            value: instance.acceptableImageQuality,
+            options: yesNoOptions
+        };
+    },
+
+    anatomicalCoverageButtonData() {
+        const instance = Template.instance();
+        return {
+            text: 'Adequate anatomical coverage',
+            value: instance.adequateAnatomicalCoverage,
+            options: yesNoOptions
+        };
+    },
+
+    presenceOfContrastButtonData() {
+        const instance = Template.instance();
+        return {
+            text: 'Presence of contrast',
+            value: instance.presenceOfContrast,
+            options: yesNoOptions
+        };
+    }
+});
@@ -0,0 +1,74 @@
+@import "{design}/app"
+
+#additionalMeasurements
+  width: 100%
+  height: 100%
+  background-color: #000000
+
+  .scrollArea
+    height: 100%
+    overflow-x: hidden
+    overflow-y: auto
+    margin-right: -16px
+    padding-bottom: 100px
+    padding-right: 16px
+
+    -webkit-overflow-scrolling: touch
+
+    &::-webkit-scrollbar
+      display: none
+
+    .header
+      height: 33px
+      line-height: 33px
+      font-weight: 400
+      font-size: 14px
+      padding: 0 10px
+      color: $textPrimaryColor
+      background-color: $darkUiColor
+
+    .entrySection
+      #regionsOfMetastaticDisease
+        width: 285px
+        height: 30px
+        border-radius: 2px
+        background-color: #b6b6b6
+        color: #3e3e3e
+        font-size: 14px
+
+    .buttonSection
+      cursor: pointer
+      height: 100px
+      color: $defaultColor
+
+      &:hover
+        color: $hoverColor
+
+        .svgContainer
+          svg
+            fill: $hoverColor
+
+      &:active
+        color: $activeColor
+
+        .svgContainer
+          svg
+            fill: $activeColor
+
+      div
+        float: left
+        display: inline-block
+        height: 80px
+
+      .buttonLabel
+        line-height: 80px
+        padding: 0 30px
+
+      .svgContainer
+        padding: 15px 5px
+        width: 40px
+
+        svg
+          width: 40px
+          height: 40px
+          fill: $textPrimaryColor
@@ -0,0 +1,16 @@
+<template name="radioOptionGroup">
+    <div class="{{class}} entrySection viewerRadioOptionGroup">
+        <h5>{{text}}</h5>
+        <div>
+            {{#each item in this.options}}
+                <label>
+                    <input type="radio"
+                           name="{{item.key}}"
+                           data-key="{{item.key}}"
+                        {{inlineIf value.get item.key 'selected'}}/>
+                    {{item.text}}
+                </label>
+            {{/each}}
+        </div>
+    </div>
+</template>
@@ -0,0 +1,15 @@
+Template.radioOptionGroup.onRendered(() => {
+    const instance = Template.instance();
+    const value = instance.data.value;
+    if (!value.get()) {
+        value.set(instance.data.options[0].key);
+    }
+});
+
+Template.radioOptionGroup.events({
+    'click [data-key]'(event, instance) {
+        const $element = $(event.currentTarget);
+        const key = $element.attr('data-key');
+        instance.data.value.set(key);
+    }
+});
@@ -0,0 +1,20 @@
+@import "{design}/app"
+
+.entrySection
+  padding: 10px
+  color: $textPrimaryColor
+
+  &:not(:last-child)
+    border-bottom: $uiBorderThickness solid $uiBorderColorDark
+
+  h5
+    font-weight: 300
+
+  label
+    font-size: 14px
+    font-weight: 100
+    display: inline-block
+    padding: 5px
+
+    input
+      margin: 5px