Update to tabs. Styling needs work

Packages/worklist/components/tabContent/tabContent.html

@@ -1,4 +1,4 @@
 <template name="tabContent">
-    <div role="tabpanel" class="tab-pane" id="{{contentid}}">
+    <div role="tabpanel" class="tab-pane {{active}}" id="{{contentid}}">
     </div>
 </template>

Packages/worklist/components/tabTitle/tabTitle.html

@@ -2,7 +2,7 @@
     <li role="presentation" class="tabTitle">
         <a data-target="#{{contentid}}" role="tab" data-toggle="tab">
             {{title}}
-            <a class="close">x</a>
         </a>
+        <a class="close">x</a>
     </li>
 </template>

Packages/worklist/components/tabTitle/tabTitle.js

@@ -1,21 +1,21 @@
 Template.tabTitle.events({
     'click .close': function(e) {
-        var tab = $(e.currentTarget).parents('[data-toggle="tab"]').eq(0);
-        var contentId = tab.data("target").replace("#","");
+        var tab = $(e.currentTarget).siblings('a[data-toggle="tab"]').eq(0);
+        var contentId = tab.data("target").replace("#", "");
         var tabObjectId = tabs.find({contentid: contentId}).fetch()[0]._id;
         tabs.remove(tabObjectId);
 
-        var tabIndex = tab.index();
+        var tabIndex = tab.parent('li').index();
         var newActiveTabIndex = Math.max(tabIndex - 1, 0);
-        if (newActiveTabIndex === 0) {
-            $('a[data-target="#worklistTab"]').addClass('active').tab('show');
-            return;
-        }
-
         var newActiveTab = $(".tabTitle").eq(newActiveTabIndex);
-        var newContentId = newActiveTab.data("contentid");
+        var newActiveTabLink = newActiveTab.find("a[data-toggle=tab]");
+        var newContentId = newActiveTabLink.data("target");
+        switchToTab(newContentId);
+    }
+});
 
-        var tabObject = tabs.find({contentId: newContentId}).fetch()[0];
-        tabObject.active = true;
+Template.tabTitle.helpers({
+    'active': function() {
+        return this.active ? "active" : "";
     }
 });

Packages/worklist/components/tabTitle/tabTitle.styl

@@ -1,8 +1 @@
-.tabTitle
-  a
-    padding: 0 5px
-    
-    a.close
-      font-size: 16pt
-      padding: 0 5px
-      font-weight: normal
+ 

Packages/worklist/components/worklist.html

@@ -1,6 +1,6 @@
 <template name="worklist">
     <ul class="nav nav-tabs" role="tablist">
-        <li role="presentation" class="active">
+        <li role="presentation" class="tabTitle active">
             <a data-target="#worklistTab" role="tab" data-toggle="tab">Study List</a>
         </li>
         {{ #each tabs }}
@@ -9,7 +9,7 @@
     </ul>
     <div class="tab-content">
         <div role="tabpanel" class="tab-pane active" id="worklistTab">
-            <div class="container">
+            <div id="worklistContainer" class="container">
                 {{> worklistSearch }}
                 {{> worklistResult }}
             </div>

Packages/worklist/components/worklist.js

@@ -1,43 +1,61 @@
 Template.worklist.helpers({
     'tabs': function() {
-        var tabData = tabs.find().fetch();
-        return tabData;
-    },
+        console.log('Updating tabs');
+        return tabs.find();
+    }
 });
 
 Template.worklist.events({
     'click a[data-toggle="tab"]': function(e) {
-        console.log(e.currentTarget);
         var contentId = $(e.currentTarget).data('target');
-        $(e.currentTarget).tab('show');
+        switchToTab(contentId);
+    }
+});
 
-        var container = $('.tab-content').find(contentId).get(0);
-        var studies = Session.get('StudiesInTab' + contentId);
-        var data = {
-            studies: studies
-        };
+switchToTab = function(contentId) {
+    var studies = Session.get('StudiesInTab' + contentId);
+    var data = {
+        studies: studies
+    };
 
-        if (contentId === '#worklistTab') {
-            console.log('Switching to worklist');
-            $("#viewer").remove();
-            document.body.style.overflow = null;
-            document.body.style.height = null;
-            document.body.style.minWidth = null;
-            document.body.style.position = null;
-        } else {
-            UI.renderWithData(Template.viewer, data, container);
-            var imageViewer = $("#viewer");
-            if (imageViewer) {
-                $('.navbar-default').css({
-                    'background-color': '#000000',
-                    'border-color': '#101010'
-                });
-                document.body.style.overflow = "hidden";
-                document.body.style.height = '100%';
-                document.body.style.width = '100%';
-                document.body.style.minWidth = 0;
-                document.body.style.position = 'fixed'; // Prevent overscroll on mobile devices
-            }
+    var newContentId = contentId.replace("#", "");
+    //var tabObject = tabs.findOne({contentid: newContentId});
+    //tabObject.active = true;
+
+    console.log("Switching to tab: " + contentId);
+    $('.tabTitle a[data-target="' + contentId + '"]').tab('show');
+
+    $("#viewer").remove();
+
+    var container = $('.tab-content').find(contentId).get(0);
+    if (!container) {
+        return;
+    }
+
+    if (contentId === '#worklistTab') {
+        console.log('Switching to worklist');
+        document.body.style.overflow = null;
+        document.body.style.height = null;
+        document.body.style.minWidth = null;
+        document.body.style.position = null;
+    } else {
+        UI.renderWithData(Template.viewer, data, container);
+        var imageViewer = $("#viewer");
+        if (imageViewer) {
+            document.body.style.overflow = "hidden";
+            document.body.style.height = '100%';
+            document.body.style.width = '100%';
+            document.body.style.minWidth = 0;
+            document.body.style.position = 'fixed'; // Prevent overscroll on mobile devices
         }
     }
+};
+
+Template.worklist.onRendered(function() {
+    this.autorun(function() {
+        var contentId = Session.get('OpenNewTabEvent');
+        if (contentId) {
+            switchToTab("#" + contentId);
+        }
+    });
 });

Packages/worklist/components/worklist.styl

@@ -1,21 +1,48 @@
-/***********************************************/
-/* CSS3 Close button */
-/***********************************************/
-
-.btnClose 
-  top: 0
-  right: 0
-  bottom: 0
-  width: 20px
-  height: 20px
-  text-decoration: none
-  border: none
-  background-color: #fcfcfc
-  -moz-border-radius: 10px
-  -webkit-border-radius: 10px
-  border-radius: 10px
-  margin-left: 5px
-  font-weight: bold
+body
+  background-color: #202020
+  
+#worklistTab
+  background-color: #202020
 
+#worklistContainer
+  background-color: #202020
+  color: white  
+  
 #tabs
-  width: 100%
+  width: 100%
+  
+.nav-tabs
+  border-bottom: 1px solid #424242;
+  background-color: #202020
+  
+.tabTitle
+  background-color: #202020
+  border-color: #424242
+  padding: 3px 10px
+
+  &:hover
+    color: black
+    
+  &.active
+    background-color: #202020
+    color: white
+
+  a
+    color: #424242
+    padding: 0 5px
+    cursor: pointer
+    float: left
+
+    &.close
+      font-size: 16pt
+      padding: 0 5px
+      font-weight: normal
+      float: left
+
+.tab-content
+  width: 100%
+  height: calc(100% - 100px)
+  
+  .tab-pane
+    width: 100%
+    height: 100%

Packages/worklist/components/worklistResult/worklistResult.styl

@@ -1,6 +1,15 @@
 table#tblStudyList
-  color: black
-  
-  tbody tr:hover
-    background-color: #009BD2
-    color: white
+  color: #888888
+  border-collapse: collapse;
+  border-color: gray;
+      
+  tr
+    padding: 4px
+    border: 1px solid #282828 
+
+    &:nth-of-type(odd)
+      background-color: #202020
+      
+    &:hover
+      background-color: #009BD2
+      color: white

Packages/worklist/components/worklistSearch/worklistSearch.html

@@ -1,6 +1,6 @@
 <template name="worklistSearch">
     <!--Search Panel-->
-    <div class="panel panel-default">
+    <div id="worklistSearchPanel" class="panel panel-default">
         <div class="panel-heading" id="search-panel-head">Search</div>
         <div class="panel-body">
             <div style="padding: 10px;">

Packages/worklist/components/worklistSearch/worklistSearch.styl

@@ -1,35 +1,25 @@
 /***********************************************/
 /* Search Panel */
 /***********************************************/
-#search-panel-head{
-    background-color: #337ab7;
-    color: white;
-    font-weight: 500;
-    font-size: 20px;
-    line-height: 20px;
-    box-shadow: 2px 2px 2px #888888;
-}
+#worklistSearchPanel
+  margin: 20px 0
+  color: #888888
+  background-color: #202020
 
-#btnSearch, #btnToday, #btnClear, #btnLastSevenDays{
-    width: 100%;
-}
+#search-panel-head
+  background-color: #337ab7
+  color: white
+  font-weight: 500
+  font-size: 20px
+  line-height: 20px
+  box-shadow: 2px 2px 2px #888888
 
-#checkFrom, #checkTo{
-    width:20px;
-    height:20px;
-    position:absolute;
-    left:20px;
-    bottom: 22px;
-}
-/***********************************************/
-/* Tabs */
-/***********************************************/
-.tab-pane{
-    position:absolute;
-    width: 100%;
-    height:100%;
-}
+#btnSearch, #btnToday, #btnClear, #btnLastSevenDays
+  width: 100%
 
-.nav > li > a {
-    padding: 10px 5px;
-}
+#checkFrom, #checkTo
+  width: 20px
+  height: 20px
+  position: absolute
+  left: 20px
+  bottom: 22px

Packages/worklist/components/worklistStudy/worklistStudy.html

@@ -1,5 +1,5 @@
 <template name="worklistStudy">
-    <tr>
+    <tr class="worklistStudy">
         <td>
             {{patientName}}
         </td>

Packages/worklist/components/worklistStudy/worklistStudy.styl

@@ -1 +1,2 @@
- 
+.worklistStudy
+  cursor: pointer

Packages/worklist/package.js

@@ -36,5 +36,7 @@ Package.onUse(function (api) {
 
     api.addFiles('lib/generateUUID.js', 'client');
     api.export('generateUUID', 'client');
+
+    api.export('switchToTab', 'client');
 });