LT-242: Creating UI resizable, improving heads up display layout and fixing tool selection behavior

2016-07-22 11:12:04 +02:00
1 parent 40062e2e9d
commit 9beee70081
@@ -29,7 +29,7 @@
      font-size: 14px
      padding: 0 10px
      color: $textPrimaryColor
-      background-color: $uiGrayDarker
+      background-color: $uiGrayDark

    .form-group
      padding: 10px
@@ -1,13 +1,16 @@
 <template name="lesionTableHUD">
-    <div id="lesionTableHUD">
+    <div id="lesionTableHUD" class="{{hudHidden}}">
        <div class="header">
-            Measurements
+            <span>Measurements</span>
+            <svg class="buttonClose">
+                <use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-ui-close"></use>
+            </svg>
        </div>
-        {{ >lesionTableView }}
+        {{>lesionTableView}}
        <div class="footer">
-            {{ #each toolbarButtons }}
-                {{ >toolbarSectionButton }}
-            {{ /each }}
+            {{#each toolbarButton in toolbarButtons}}
+                {{>toolbarSectionButton toolbarButton}}
+            {{/each}}
        </div>
    </div>
-</template>
+</template>
@@ -1,4 +1,18 @@
+Template.lesionTableHUD.onRendered(() => {
+    const instance = Template.instance();
+    instance.$('#lesionTableHUD').resizable().draggable();
+});
+
+Template.lesionTableHUD.events({
+    'click .buttonClose'(event, instance) {
+        Session.set('lesionTableHudOpen', false);
+    }
+});
+
 Template.lesionTableHUD.helpers({
+    hudHidden() {
+        return Session.get('lesionTableHudOpen') ? '' : 'hidden';
+    },
    toolbarButtons() {
        var buttonData = [];

@@ -26,8 +40,3 @@ Template.lesionTableHUD.helpers({
        return buttonData;
    }
 });
-
-Template.lesionTableHUD.onRendered(function() {
-    var dialog = $('#lesionTableHUD');
-    dialog.draggable();
-});
@@ -1,34 +1,47 @@
@import "{design}/app"

 $borderColor = rgba(77, 99, 110, 0.81)
-$backgroundColor = #14191e

 #lesionTableHUD
-  display: none
-  position: absolute
-  top: auto
-  left: auto
-  bottom: 3px
-  right: 3px
-
-  z-index: 10000
-  width: 318px
-  height: 326px
-  opacity: 0.95
  background: black
  border-radius: 8px
  border: solid 1px $borderColor;
+  bottom: 3px
+  height: 326px
+  left: auto
+  opacity: 0.95
+  overflow: hidden
+  position: absolute
+  right: 3px
+  top: auto
+  width: 318px
+  z-index: 10000
+
+  .lesionTableView.scrollArea
+    margin-left: 0
+    padding-left: 0

  .header
-    width: 100%
+    background: $uiGrayDarkest
+    border-bottom: $uiBorderThickness solid $borderColor
+    color: $textSecondaryColor
+    font-weight: 300
+    font-size: 20px
    height: 55px
    line-height: 55px
-    background: $backgroundColor
-    border-bottom: $uiBorderThickness solid $borderColor
+    position: relative
    text-align: center
-    font-weight: 200
-    font-size: 20px
-    color: $textSecondaryColor
+    width: 100%
+
+    svg.buttonClose
+      color: $defaultColor
+      cursor: pointer
+      height: 14px
+      position: absolute
+      right: 14px
+      stroke: $defaultColor
+      top: 20px
+      width: 14px

  .lesionTableView.scrollArea
    height: calc(100% - 55px - 70px)
@@ -39,7 +52,7 @@ $backgroundColor = #14191e
    height: 70px
    position: absolute
    bottom: 0
-    background: $backgroundColor
+    background: $uiGrayDarkest
    border-top: $uiBorderThickness solid $borderColor
    padding: 10px

@@ -3,7 +3,7 @@
 $headerRowHeight = 63px

 .lesionTableHeaderRow
-  background-color: $uiGrayDarkest
+  background-color: $uiGrayDarker
  color: $textSecondaryColor
  display: flex
  fill: $textSecondaryColor
@@ -31,7 +31,7 @@
  &.response-status .lesionRowSidebar .response-status-icon
    background-color: $defaultColor
    border-radius: 11px
-    color: $uiGrayDark
+    color: $uiGray
    font-size: 12px
    font-weight: 700
    height: 21px
@@ -55,7 +55,7 @@
      fill: $textPrimaryColor

  .lesionRowSidebar
-    background: $uiGrayDark
+    background: $uiGray
    color: $textSecondaryColor
    flex: 1
    max-width: 30px
@@ -10,9 +10,11 @@
            {{>lesionTableRow (extend this rowItem=nonTarget)}}
        {{/each}}

-        {{>lesionTableHeaderRow id="newLesion" measurements=newLesions currentTimepointId=currentTimepointId}}
-        {{#each newLesion in newLesions}}
-            {{>lesionTableRow (extend this rowItem=newLesion)}}
-        {{/each}}
+        {{#if gt this.timepoints.get.length 1}}
+            {{>lesionTableHeaderRow id="newLesion" measurements=newLesions currentTimepointId=currentTimepointId}}
+            {{#each newLesion in newLesions}}
+                {{>lesionTableRow (extend this rowItem=newLesion)}}
+            {{/each}}
+        {{/if}}
    </div>
 </template>
@@ -1,3 +1,5 @@
+@import "{design}/app"
+
 .lesionTableView.scrollArea
  width: 100%
  height: 100%
@@ -100,7 +100,7 @@ $seriesSpacing = 2px
      .studyTimepointStudy.active .studyModality
        box-shadow: inset 0 0 0 3px $activeColor
      .studyBox
-        background-color: $uiGrayDarker
+        background-color: $uiGrayDark
        border: solid 1px $activeColor
        border-radius: 11px
        display: block
@@ -39,7 +39,7 @@
            <div class="pull-right m-t-1 rm-x-1">
                {{>roundedButtonGroup rightSidebarToggleButtonData}}
            </div>
-            <div id="toggleHUD" class="toolbarSectionButton pull-right rp-x-1 m-t-1 rm-r-3">
+            <div id="toggleHUD" class="toolbarSectionButton pull-right rp-x-1 m-t-1 rm-r-3 {{#if session 'lesionTableHudOpen'}}active{{/if}}">
                <div class="svgContainer">
                    <svg>
                        <use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-hud"></use>
@@ -106,39 +106,9 @@ Template.toolbarSection.helpers({
 });

 Template.toolbarSection.events({
-    // TODO: Inherit these from toolbar template somehow
-    'click .imageViewerTool': function(e) {
-        $(e.currentTarget).tooltip('hide');
-
-        var tool = e.currentTarget.id;
-
-        var elements = $('.imageViewerViewport');
-
-        var activeTool = toolManager.getActiveTool();
-        if (tool === activeTool) {
-            var defaultTool = toolManager.getDefaultTool();
-            console.log('Setting active tool to: ' + defaultTool);
-            toolManager.setActiveTool(defaultTool, elements);
-        } else {
-            console.log('Setting active tool to: ' + tool);
-            toolManager.setActiveTool(tool, elements);
-        }
-    },
-    'click .imageViewerCommand': function(e) {
-        $(e.currentTarget).tooltip('hide');
-
-        var command = e.currentTarget.id;
-        if (!OHIF.viewer.functionList.hasOwnProperty(command)) {
-            return;
-        }
-
-        var activeViewport = Session.get('activeViewport');
-        var element = $('.imageViewerViewport').get(activeViewport);
-        OHIF.viewer.functionList[command](element);
-    },
-    'click #toggleHUD': function(e) {
-        var lesionTableHUD = document.getElementById('lesionTableHUD');
-        toggleDialog(lesionTableHUD);
+    'click #toggleHUD'(event, instance) {
+        const state = Session.get('lesionTableHudOpen');
+        Session.set('lesionTableHudOpen', !state);
    },
    'click #moreTools'(event, instance) {
        const $target = $(event.currentTarget);
@@ -23,7 +23,7 @@
      width: 100%

      .toolbarSectionDrawer
-        background-color: $uiGrayDarkest
+        background-color: $uiGrayDarker
        border-radius: 7px
        color: $textPrimaryColor
        content: ''
@@ -11,3 +11,35 @@ Template.toolbarSectionButton.helpers({
        return;
    }
 });
+
+Template.toolbarSectionButton.events({
+    'click .imageViewerTool'(event, instance) {
+        $(event.currentTarget).tooltip('hide');
+
+        var tool = event.currentTarget.id;
+
+        var elements = $('.imageViewerViewport');
+
+        var activeTool = toolManager.getActiveTool();
+        if (tool === activeTool) {
+            var defaultTool = toolManager.getDefaultTool();
+            console.log('Setting active tool to: ' + defaultTool);
+            toolManager.setActiveTool(defaultTool, elements);
+        } else {
+            console.log('Setting active tool to: ' + tool);
+            toolManager.setActiveTool(tool, elements);
+        }
+    },
+    'click .imageViewerCommand'(event, instance) {
+        $(event.currentTarget).tooltip('hide');
+
+        var command = event.currentTarget.id;
+        if (!OHIF.viewer.functionList.hasOwnProperty(command)) {
+            return;
+        }
+
+        var activeViewport = Session.get('activeViewport');
+        var element = $('.imageViewerViewport').get(activeViewport);
+        OHIF.viewer.functionList[command](element);
+    }
+});