Started replacing toolbar in OHIF Viewer with that of Lesion Tracker (OHIF-49)

Packages/viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.html

@@ -0,0 +1,16 @@
+<template name="toolbarSectionButton">
+    <div id="{{this.id}}" class="toolbarSectionButton rp-x-1 {{this.classes}} {{activeClass}}" title="{{this.title}}">
+        <div class="svgContainer">
+            {{ #if this.svgLink }} 
+            <svg>
+                <use xlink:href={{this.svgLink}}></use>
+            </svg>
+            {{ else }}
+            <i class={{iconClasses}}></i>
+            {{ /if }}
+        </div>
+        <div class="buttonLabel">
+            {{this.title}}
+        </div>
+    </div>
+</template>

Packages/viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.js

@@ -0,0 +1,41 @@
+import { OHIF } from 'meteor/ohif:core';
+
+Template.toolbarSectionButton.helpers({
+    activeClass() {
+        // TODO: Find a way to prevent the 'flash' after a click, but before this helper runs
+        const instance = Template.instance();
+
+        // Check if the current tool is the active one
+        if (instance.data.id === Session.get('ToolManagerActiveTool')) {
+            // Return the active class
+            return 'active';
+        }
+    }
+});
+
+Template.toolbarSectionButton.events({
+    'click .imageViewerTool'(event, instance) {
+        const tool = event.currentTarget.id;
+        const elements = instance.$('.imageViewerViewport');
+
+        const activeTool = toolManager.getActiveTool();
+        if (tool === activeTool) {
+            const defaultTool = toolManager.getDefaultTool();
+            log.info('Setting active tool to: ' + defaultTool);
+            toolManager.setActiveTool(defaultTool, elements);
+        } else {
+            log.info('Setting active tool to: ' + tool);
+            toolManager.setActiveTool(tool, elements);
+        }
+    },
+    'click .imageViewerCommand'(event, instance) {
+        const command = event.currentTarget.id;
+        if (!OHIF.viewer.functionList.hasOwnProperty(command)) {
+            return;
+        }
+
+        const activeViewport = Session.get('activeViewport');
+        const element = $('.imageViewerViewport').get(activeViewport);
+        OHIF.viewer.functionList[command](element);
+    }
+});

Packages/viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.styl

@@ -0,0 +1,54 @@
+@import "{design}/app"
+
+.toolbarSectionButton
+  display: inline-block
+  color: $defaultColor
+  fill: $defaultColor
+  stroke: $defaultColor
+  min-width: 30px
+  cursor: pointer
+  text-align: center
+
+  &.disabled
+    opacity: 0.5
+    cursor: not-allowed
+
+  .buttonLabel
+    color: $textSecondaryColor
+    font-size: 12px
+
+  .svgContainer
+    margin: 0 auto
+    text-align: center
+    
+    i
+      font-size: 18px
+      line-height: 30px
+
+  svg
+    background-color: transparent
+    margin: 2px
+    width: 21px
+    height: 21px
+
+  &:hover
+    .buttonLabel
+      color: $hoverColor
+
+    svg
+      fill: $hoverColor
+      stroke: $hoverColor
+      
+    i
+      color: $hoverColor
+
+  &:active, &.active
+    .buttonLabel
+      color: $activeColor
+
+    svg
+      fill: $activeColor
+      stroke: $activeColor
+      
+    i
+      color: $activeColor