Lesion Tracker Redesign so far

Packages/lesiontracker/client/components/toolbarSection/toolbarSection.html

@@ -0,0 +1,79 @@
+<template name="toolbarSection">
+    <div class="toolbarSection">
+        <div id="studySidebarToggle" class="pull-left toolbarSectionButton">
+            <div class="capsule svgContainer">
+                <svg>
+                    <use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-studies"></use>
+                </svg>
+            </div>
+            <div class="buttonLabel">
+                Studies
+            </div>
+        </div>
+        <div class="pull-left">
+            {{ #each toolbarButtons }}
+                {{ >toolbarSectionButton }}
+            {{ /each }}
+
+            <div id="moreTools" class="toolbarSectionButton">
+                <div class="svgContainer">
+                    <svg>
+                        <use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-tools-more"></use>
+                    </svg>
+                </div>
+                <div class="buttonLabel">
+                    More <i class="fa fa-caret-down" aria-hidden="true"></i>
+                </div>
+            </div>
+        </div>
+
+        {{ >studySeriesQuickSwitch side="left"}}
+        {{ >studySeriesQuickSwitch side="right"}}
+
+        <div class="pull-right toolbarSectionEntry">
+            {{ >caseProgress }}
+        </div>
+        <div class="capsule-group pull-right">
+            <div id="lesionSidebarToggle" class="capsule-entry">
+                <div class="svgContainer capsule">
+                    <svg>
+                        <use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-measurements-lesions"></use>
+                    </svg>
+                </div>
+                <div class="buttonLabel">
+                    Lesions
+                </div>
+            </div>
+            <div id="additionalMeasurementsSidebarToggle" class="capsule-entry">
+                <div class="svgContainer capsule">
+                    <svg>
+                        <use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-measurements-additional"></use>
+                    </svg>
+                </div>
+                <div class="buttonLabel">
+                    Additional
+                </div>
+            </div>
+        </div>
+        <div class="pull-right toolbarSectionButton">
+            <div class="svgContainer">
+                <svg>
+                    <use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-hud"></use>
+                </svg>
+            </div>
+            <div class="buttonLabel">
+                HUD
+            </div>
+        </div>
+        <div class="pull-right toolbarSectionButton">
+            <div class="svgContainer">
+                <svg>
+                    <use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-trial-info"></use>
+                </svg>
+            </div>
+            <div class="buttonLabel">
+                Trial
+            </div>
+        </div>
+    </div>
+</template>

Packages/lesiontracker/client/components/toolbarSection/toolbarSection.js

@@ -0,0 +1,133 @@
+Template.toolbarSection.onRendered(function() {
+    var instance = this;
+
+    instance.state = instance.data.state;
+});
+
+Template.toolbarSection.helpers({
+    toolbarButtons: function() {
+        var buttonData = [];
+        buttonData.push({
+            id: 'zoom',
+            title: 'Zoom',
+            classes: 'imageViewerTool',
+            svgLink: '/packages/lesiontracker/assets/icons.svg#icon-tools-zoom'
+        });
+
+        buttonData.push({
+            id: 'wwwc',
+            title: 'Levels',
+            classes: 'imageViewerTool',
+            svgLink: '/packages/lesiontracker/assets/icons.svg#icon-tools-levels'
+        });
+
+        buttonData.push({
+            id: 'pan',
+            title: 'Pan',
+            classes: 'imageViewerTool',
+            svgLink: '/packages/lesiontracker/assets/icons.svg#icon-tools-pan'
+        });
+
+        buttonData.push({
+            id: 'link',
+            title: 'Link',
+            classes: 'imageViewerCommand toolbarSectionButton',
+            svgLink: '/packages/lesiontracker/assets/icons.svg#icon-tools-link'
+        });
+
+        buttonData.push({
+            id: 'bidirectional',
+            title: 'Target',
+            classes: 'imageViewerTool',
+            svgLink: '/packages/lesiontracker/assets/icons.svg#icon-tools-measure-target'
+        });
+
+        buttonData.push({
+            id: 'nonTarget',
+            title: 'Non-Target',
+            classes: 'imageViewerTool toolbarSectionButton',
+            svgLink: '/packages/lesiontracker/assets/icons.svg#icon-tools-measure-non-target'
+        });
+
+        buttonData.push({
+            id: 'length',
+            title: 'Temp',
+            classes: 'imageViewerTool toolbarSectionButton',
+            svgLink: '/packages/lesiontracker/assets/icons.svg#icon-tools-measure-temp'
+        });
+
+        return buttonData;
+    }
+});
+
+Template.toolbarSection.events({
+    'click #studySidebarToggle': function(event, instance) {
+        var isOpen = instance.data.state.get('studySidebarOpen');
+        instance.data.state.set('studySidebarOpen', !isOpen);
+    },
+    'click #lesionSidebarToggle': function(event, instance) {
+        var isOpen = instance.data.state.get('lesionSidebarOpen');
+        instance.data.state.set('lesionSidebarOpen', !isOpen);
+        instance.data.state.set('additionalMeasurementsSidebarOpen', false);
+    },
+    'click #additionalMeasurementsSidebarToggle': function(event, instance) {
+        var isOpen = instance.data.state.get('additionalMeasurementsSidebarOpen');
+        instance.data.state.set('additionalMeasurementsSidebarOpen', !isOpen);
+        instance.data.state.set('lesionSidebarOpen', false);
+    },
+    // 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();
+        $('.toolbarSectionButton').removeClass('active');
+        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);
+    }
+});
+
+Template.toolbarSection.onRendered(function() {
+    var tooltipButtons = $('[data-toggle="tooltip"]');
+    tooltipButtons.tooltip(OHIF.viewer.tooltipConfig);
+
+    // Enable tooltips for the layout button
+    var extraTooltipButtons = $('[rel="tooltip"]');
+    extraTooltipButtons.tooltip(OHIF.viewer.tooltipConfig);
+
+    // Set disabled/enabled tool buttons that are set in toolManager
+    var states = toolManager.getToolDefaultStates();
+    var disabledToolButtons = states.disabledToolButtons;
+    var allToolbarButtons = $('#toolbar').find('button');
+    if (disabledToolButtons && disabledToolButtons.length > 0) {
+        for (var i = 0; i < allToolbarButtons.length; i++) {
+            var toolbarButton = allToolbarButtons[i];
+            $(toolbarButton).prop('disabled', false);
+            var index = disabledToolButtons.indexOf($(toolbarButton).attr('id'));
+            if (index !== -1) {
+                $(toolbarButton).prop('disabled', true);
+            }
+        }
+    }
+});

Packages/lesiontracker/client/components/toolbarSection/toolbarSection.styl

@@ -0,0 +1,151 @@
+@import "{design}/app"
+
+.toolbarSection
+  height: $toolbarHeight
+  width: 100%
+  border-bottom: $uiBorderColor $uiBorderThickness solid
+
+  .capsule-group
+    display: inline-block
+
+    div.capsule-entry
+      display: inline-block
+      color: $defaultColor
+      fill: $defaultColor
+      stroke: $defaultColor
+      height: $toolbarHeight
+      min-width: 30px
+      cursor: pointer
+      text-align: center
+      margin: 0
+
+      div.capsule
+        width: 66px
+        height: 26px
+
+      &:first-child
+        .capsule
+          border-radius: 57px
+          background-color: #16202b
+          border: solid 1px #3c5d80
+          border-right: none
+          border-top-right-radius: 0
+          border-bottom-right-radius: 0
+
+      &:last-child
+        .capsule
+          border-radius: 57px
+          background-color: #16202b
+          border: solid 1px #3c5d80
+          border-left: none
+          border-top-left-radius: 0
+          border-bottom-left-radius: 0
+
+      &.disabled
+       opacity: 0.5
+       cursor: not-allowed
+
+      .svgContainer
+       margin: 0 auto
+       text-align: center
+
+      .capsule
+       width: 62px
+       height: 26px
+       border-radius: 100px
+       background-color: #16202b
+       border: solid 1px #3c5d80
+
+      svg
+       background-color: transparent
+       margin: 5px
+       width: 17px
+       height: 17px
+
+      &:active, &.active
+       color: $activeColor
+
+       svg
+         fill: $activeColor
+         stroke: $activeColor
+
+      &:hover
+       color: $hoverColor
+
+       svg
+         fill: $hoverColor
+         stroke: $hoverColor
+
+
+  .toolbarSectionButton
+    display: inline-block
+    color: $defaultColor
+    fill: $defaultColor
+    stroke: $defaultColor
+    padding: 0 10px
+    height: $toolbarHeight
+    min-width: 30px
+    cursor: pointer
+    text-align: center
+
+    &.disabled
+      opacity: 0.5
+      cursor: not-allowed
+
+    .buttonLabel
+      font-size: 12px
+
+    .svgContainer
+      margin: 0 auto
+      text-align: center
+
+    .capsule
+      width: 62px
+      height: 26px
+      border-radius: 100px
+      background-color: #16202b
+      border: solid 1px #3c5d80
+
+    svg
+      background-color: transparent
+      margin: 2px
+      width: 21px
+      height: 21px
+
+    &:active, &.active
+      color: $activeColor
+
+      svg
+        fill: $activeColor
+        stroke: $activeColor
+
+    &:hover
+      color: $hoverColor
+
+      svg
+        fill: $hoverColor
+        stroke: $hoverColor
+
+  .toolbarSectionEntry
+    display: inline-block
+    color: $defaultColor
+    fill: $defaultColor
+    stroke: $defaultColor
+    padding: 0 10px
+    height: $toolbarHeight
+    min-width: 30px
+    cursor: pointer
+    text-align: center
+
+  .quickSwitch
+    position: absolute
+
+    &.middle
+      left: calc(50% - 60px)
+
+    &.left
+      left: calc(50% - 160px)
+
+    &.right
+      left: 50%
+      margin-left: 20px