Finishing timepoint browser behavior

Packages/ohif-lesiontracker/client/components/timepointBrowser/item.html

@@ -1,16 +1,16 @@
 <template name="timepointBrowserItem">
     <div class="timepoint-browser-item">
-        <div class="timepointEntry p-y-2">
-            <div class="timepointDetails clearfix">
-                <div class="timepointFollowupTitle pull-left">
+        <div class="timepoint-item p-y-2">
+            <div class="timepoint-details clearfix">
+                <div class="timepoint-title pull-left">
                     {{this.timepointApi.title timepoint}}
                 </div>
-                <div class="expandIcon pull-right">
+                <div class="timepoint-expand-icon pull-right">
                     <i class="fa fa-chevron-down"></i>
                 </div>
-                <div class="timepointDate pull-right m-r-1">{{formatDA this.timepoint.earliestDate 'D-MMM-YYYY'}}</div>
+                <div class="timepoint-date pull-right m-r-1">{{formatDA this.timepoint.earliestDate 'D-MMM-YYYY'}}</div>
             </div>
-            <div class="timepointModalities">{{choose instance.summary.get 'Click to load'}}</div>
+            <div class="timepoint-summary">{{choose instance.summary.get 'Click to load'}}</div>
         </div>
         {{#if this.timepointChildTemplate}}
             {{#if and (not instance.loading.get) instance.loaded}}

Packages/ohif-lesiontracker/client/components/timepointBrowser/item.js

@@ -1,6 +1,7 @@
 import { Meteor } from 'meteor/meteor';
 import { Template } from 'meteor/templating';
 import { ReactiveVar } from 'meteor/reactive-var';
+import { Tracker } from 'meteor/tracker';
 import { $ } from 'meteor/jquery';
 import { _ } from 'meteor/underscore';
 import { OHIF } from 'meteor/ohif:core';
@@ -52,16 +53,21 @@ Template.timepointBrowserItem.onCreated(() => {
 });
 
 Template.timepointBrowserItem.events({
-    'click .timepointEntry'(event, instance) {
+    'click .timepoint-item'(event, instance) {
         const element = event.currentTarget.parentElement;
         const $element = $(element);
+
+        const triggerClick = () => {
+            $element.trigger('ohif.lesiontracker.timepoint.click', instance.data.timepoint);
+        };
+
         if (!instance.loaded) {
             instance.loadStudies().then(() => {
-                $element.addClass('active');
+                Tracker.afterFlush(triggerClick);
                 instance.setModalitiesSummary();
             });
         } else {
-            $element.toggleClass('active');
+            triggerClick();
         }
     }
 });

Packages/ohif-lesiontracker/client/components/timepointBrowser/item.styl

@@ -2,70 +2,75 @@
 
 .timepoint-browser-item
 
-  .timepointEntry
+  .timepoint-item
     cursor: pointer
     font-size: 13px
 
-  .timepoint-browser-studies
-    opacity: 1
-    overflow: hidden
-    transform(translateY(0))
-    transform-origin(50% 0%)
-    transition(max-height 0.3s ease\, opacity 0.3s ease\, transform 0.3s ease)
-
   &:not(.active) .timepoint-browser-studies
     max-height: 0 !important
-    opacity: 0
-    transform(translateY(-100%))
 
-  .timepointDate
+    .timepoint-studies-container
+      opacity: 0
+      transform(translateY(-100%))
+
+  .timepoint-browser-studies
+    overflow: hidden
+    transition(max-height 0.3s ease)
+
+    .timepoint-studies-container
+      opacity: 1
+      transition(opacity 0.3s ease\, transform 0.3s ease)
+      transform(translateY(0))
+      transform-origin(50% 0%)
+
+  .timepoint-date
     opacity: 1
 
   &.active
-    .timepointModalities
+    .timepoint-summary
       max-height: 0
       opacity: 0
 
-    .timepointDate
+    .timepoint-date
       opacity: 0
 
-    .expandIcon i
+    .timepoint-expand-icon i
       transform: rotateX(180deg)
 
-    .timepointFollowupTitle
+    .timepoint-title
       font-size: 14px
       theme('color', '$textSecondaryColor')
       text-transform: uppercase
 
   &
-  .expandIcon i,
-  .timepointFollowupTitle,
-  .timepointDate,
-  .timepointModalities
+  .timepoint-expand-icon i,
+  .timepoint-title,
+  .timepoint-date,
+  .timepoint-summary
     theme('color', '$textSecondaryColor')
     transition($sidebarTransition)
 
   &:hover
     &,
-    .timepointFollowupTitle,
-    .expandIcon i,
-    .timepointDate,
-    .timepointModalities
+    .timepoint-title,
+    .timepoint-expand-icon i,
+    .timepoint-date,
+    .timepoint-summary
       theme('color', '$textPrimaryColor') !important
 
-  .timepointDetails
-  .timepointModalities
+  .timepoint-details
+  .timepoint-summary
     line-height: 25px
 
-  .timepointModalities
+  .timepoint-summary
     height: 25px
     max-height: 25px
     opacity: 1
     overflow: hidden
 
-  .expandIcon i
+  .timepoint-expand-icon i
     theme('color', '$defaultColor')
 
-  .timepointFollowupTitle
+  .timepoint-title
     theme('color', '$textPrimaryColor')
     padding-top: 2px

Packages/ohif-lesiontracker/client/components/timepointBrowser/list.html

@@ -2,6 +2,7 @@
     <div class="timepoint-browser-list {{this.class}}">
         {{#each timepoint in this.timepoints}}
             {{>timepointBrowserItem (clone this timepoint=timepoint)}}
+            <hr>
         {{/each}}
     </div>
 </template>

Packages/ohif-lesiontracker/client/components/timepointBrowser/studies.html

@@ -1,5 +1,7 @@
 <template name="timepointBrowserStudies">
     <div class="timepoint-browser-studies">
-        {{>studyBrowserList this}}
+        <div class="timepoint-studies-container">
+            {{>studyBrowserList this}}
+        </div>
     </div>
 </template>

Packages/ohif-lesiontracker/client/components/timepointBrowser/studies.js

@@ -1,16 +1,5 @@
-import { Meteor } from 'meteor/meteor';
 import { Template } from 'meteor/templating';
 
 Template.timepointBrowserStudies.onRendered(() => {
-    const instance = Template.instance();
-    const $container = instance.$('.timepoint-browser-studies');
-    instance.adjustMaxHeight = () => $container.adjustMax('height');
-    instance.adjustMaxHeight();
-});
-
-Template.timepointBrowserStudies.events({
-    'ohif.studies.study.click'(event, instance) {
-        // FIXME disable all transitions during $.tempShow
-        Meteor.setTimeout(instance.adjustMaxHeight, 300);
-    }
+    Template.instance().$('.timepoint-browser-studies').adjustMax('height');
 });