Remove tabbed layout in favour of current Lesion Tracker design (OHIF-49)

OHIFViewer/client/components/ohifViewer/ohifViewer.html

@@ -0,0 +1,18 @@
+<template name="ohifViewer">
+    <div class="topBar noselect {{#if onStudyList}}studyList{{/if}}">
+        <div class="clearfix p-x-1 p-t-1">
+            <a class="brandSection pull-left" href="http://ohif.org">
+                <img class="logoImage" src="/images/logo.png">
+                <div class="logoText">
+                    Open Health Imaging Foundation
+                </div>
+            </a>
+            {{ #if studyListToggleText }}
+            <div class="studyListLinkSection pull-left m-x-1 p-x-2 js-toggle-studyList">
+                {{studyListToggleText}}
+            </div>
+            {{ /if }}
+        </div>
+    </div>
+    {{> worklist }}
+</template>

OHIFViewer/client/components/ohifViewer/ohifViewer.js

@@ -0,0 +1,58 @@
+const worklistContentId = 'worklistTab';
+const viewerContentId = 'viewerTab';
+
+// Define the ViewerData global object
+// If there is currently any Session data for this object,
+// use this to repopulate the variable
+Template.ohifViewer.onCreated(() => {
+    ViewerData = Session.get('ViewerData') || {};
+});
+
+Template.ohifViewer.onRendered(() => {
+    const templateData = Template.currentData();
+    if (templateData && templateData.studyInstanceUid) {
+        const studyInstanceUid = templateData.studyInstanceUid;
+        openNewTab(studyInstanceUid, studyInstanceUid);
+    } else {
+        // If there is a tab set as active in the Session,
+        // switch to that now.
+        const contentId = Session.get('activeContentId');
+
+        // TODO: Fix this it seems to be forcing two switches
+        switchToTab(contentId);
+    }
+});
+
+Template.ohifViewer.events({
+    'click .js-toggle-studyList'() {
+        const contentId = Session.get('activeContentId');
+
+        if (contentId !== worklistContentId) {
+            switchToTab(worklistContentId);
+        } else {
+            switchToTab(viewerContentId);
+        }
+    }
+});
+
+Template.ohifViewer.helpers({
+    studyListToggleText() {
+        const contentId = Session.get('activeContentId');
+
+        // If the Viewer has not been opened yet, 'Back to viewer' should
+        // not be displayed
+        const viewerContentExists = !!Object.keys(ViewerData).length;
+        if (!viewerContentExists) {
+            return;
+        }
+
+        if (contentId === worklistContentId) {
+            return 'Back to viewer';
+        } else {
+            return 'Study list';
+        }
+    },
+    onStudyList() {
+        return (Session.get('activeContentId') === 'worklistTab');
+    }
+});

OHIFViewer/client/components/ohifViewer/ohifViewer.styl

@@ -0,0 +1,74 @@
+@import "{design}/app"
+
+$expandedHeight = 160px
+
+img.logoImage
+  display: inline-block
+  height: 100%
+
+.topBar
+  height: $topBarHeight
+  color: $textPrimaryColor
+  background-color: $primaryBackgroundColor
+  transition(all 0.5s ease)
+
+  .brandSection
+    height: 30px
+    display: inline-block
+    text-decoration: none
+
+    img.logoImage
+      margin: 0 5px
+
+    .logoText
+      display: inline-block
+      font-family: $logoFontFamily
+      font-weight: $logoFontWeight
+      color: $textPrimaryColor
+
+  .studyListLinkSection
+    border-left: $uiBorderThickness solid $uiBorderColor;
+    color: $textSecondaryColor
+    cursor: pointer
+    font-size: 13px
+    font-weight: 500
+    line-height: 26px
+    margin-top: 3px
+
+    &:hover
+      color: $hoverColor
+
+    &:active
+      color: $activeColor
+
+  &.studyList
+    background-color: rgba(21, 25, 30, 0.7)
+    height: $expandedHeight
+
+    .brandSection
+      height: 100%
+      width: 80%
+      padding-left: 50px
+      line-height: $expandedHeight
+
+      img.logoImage
+        margin: 5px 5px 15px 5px
+
+      .logoText
+        font-size: 30px
+
+    .studyListLinkSection
+      position: absolute
+      border: none
+      top: 5px
+      left: 5px
+
+#worklistTabs
+  height: "calc(100% - %s)" % $topBarHeight
+
+  .tab-pane
+    .viewerContainer
+      .loadingTextDiv
+        color: $textSecondaryColor
+        font-size: 30px
+        font-weight: 200