Lesion Tracker Redesign so far

Packages/viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.html

@@ -1,6 +1,22 @@
 <template name="thumbnailEntry">
-    <div class="thumbnailEntry">
-        {{ >imageThumbnail }}
-        <div class='seriesDescription noselect'>{{seriesDescription}}</div>
+    <div class="thumbnailEntry m-t-1 m-b-2" data-uid="{{this.stack.seriesInstanceUid}}">
+        <div class="p-x-1">
+            {{>imageThumbnail}}
+        </div>
+        <div class="seriesDetails noselect m-a-1">
+            <div class="seriesDescription">
+                {{this.stack.seriesDescription}}
+            </div>
+            <div class="seriesInformation">
+                <div class="seriesInformationIcons">
+                    <strong>S:</strong>
+                    <div></div>
+                </div>
+                <div class="seriesInformationNumbers">
+                    <div>{{this.stack.seriesNumber}}</div>
+                    <div>{{this.stack.instances.length}}</div>
+                </div>
+            </div>
+        </div>
     </div>
-</template>
+</template>

Packages/viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.js

@@ -24,7 +24,7 @@ function thumbnailDragStartHandler(e, data) {
     // Identify the current study and series index from the thumbnail's DOM position
     var targetThumbnail = e.currentTarget;
     var imageThumbnail = $(targetThumbnail);
-    
+
     // Store this data for use during drag and drop
     OHIF.viewer.dragAndDropData = data;
 
@@ -32,7 +32,7 @@ function thumbnailDragStartHandler(e, data) {
     var targetId = targetThumbnail.id + 'DragClone';
     var clone = cloneElement(targetThumbnail, targetId);
     clone.classList.add('imageThumbnailClone');
-    
+
     // Set pointerEvents to pass through the clone DOM element
     // This is necessary in order to identify what is below it
     // when using document.elementFromPoint
@@ -40,7 +40,7 @@ function thumbnailDragStartHandler(e, data) {
 
     // Append the clone to the parent of the target
     targetThumbnail.parentNode.appendChild(clone);
-    
+
     // Set the cursor x and y positions from the current touch/mouse coordinates
     // Handle touchStart cases
     if (e.type === 'touchstart') {
@@ -61,7 +61,7 @@ function thumbnailDragStartHandler(e, data) {
 
     // This block gets the current position of the touch/mouse
     // relative to the thumbnail itself
-    // 
+    //
     // i.e. Where did the user grab it from?
     var position = imageThumbnail.position();
     var left = position.left;
@@ -70,7 +70,7 @@ function thumbnailDragStartHandler(e, data) {
     // This difference is saved for later so the element movement looks normal
     diffX = cursorX - left;
     diffY = cursorY - top;
-    
+
     // This sets the default style properties of the cloned element so it is
     // ready to be dragged around the page
     $(clone).css({
@@ -103,7 +103,7 @@ function thumbnailDragHandler(e, target) {
         'z-index': 100,
         visibility: 'visible'
     });
-    
+
     // Identify the element below the current cursor position
     var elemBelow = document.elementFromPoint(cursorX + diffX, cursorY + diffY);
 
@@ -156,7 +156,7 @@ function thumbnailDragEndHandler(e, target) {
 
     // Remove any current faded effects on viewports
     $('.imageViewerViewport canvas').removeClass('faded');
-    
+
     // If none exists, stop here
     if (!elemBelow) {
         return;
@@ -186,8 +186,19 @@ function thumbnailDragEndHandler(e, target) {
 
     var viewportIndex = $('.imageViewerViewport').index(element);
 
+    // Removes active class from previous selected series in viewport
+    const previousUid = layoutManager.viewportData[viewportIndex].seriesInstanceUid;
+    if (previousUid) {
+        $(`.thumbnailEntry[data-uid="${previousUid}"]`).removeClass('active');
+    }
+
     // Rerender the viewport using the drag and drop data
     layoutManager.rerenderViewportWithNewSeries(viewportIndex, OHIF.viewer.dragAndDropData);
+
+    // Set active state for dragged thumbnail entry
+    const newUid = OHIF.viewer.dragAndDropData.seriesInstanceUid
+    $(`.thumbnailEntry[data-uid="${newUid}"]`).addClass('active');
+
     return false;
 }
 
@@ -213,9 +224,3 @@ Template.thumbnailEntry.events({
         thumbnailDragEndHandler(e, e.currentTarget);
     }
 });
-
-Template.thumbnailEntry.helpers({
-    seriesDescription: function() {
-        return this.stack.seriesDescription || '';
-    }
-});

Packages/viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.styl

@@ -1,24 +1,66 @@
+@import "{design}/app"
+
+$seriesCountBackgroundColor = #678696
+
 .thumbnailEntry
-  width: 105px
-  padding: 5px
-  background-color: black
-  border: 1px solid #424242
-  margin: 0 auto
   cursor: copy
   cursor: -webkit-grab
   cursor: -moz-grab
-  
-  .seriesDescription
-    text-align: center
-    color: #555
+  display: table
+  margin: 0 auto
+  font-family: Roboto
+
+  .seriesDetails
+    color: $textPrimaryColor
+    font-size: 14px
+    line-height: 1.3em
+    min-height: 36px
+    position: relative
     word-wrap: break-word
-    
-  &:hover
-    background-color: white
-      
-  &.active
-    background-color: #424242
-    border-color: #4e4e4e
-    
-    .seriesDescription
-      color: white
+
+  .seriesDescription
+    margin-right: 54px
+
+  .seriesInformation
+    position: absolute
+    right: 0
+    top: 0
+
+    .seriesInformationNumbers
+    .seriesInformationIcons
+      margin-right: 4px
+
+    .seriesInformationNumbers
+      color: $textSecondaryColor
+      float: left
+      font-size: 12px
+
+    .seriesInformationIcons
+      float: left
+      text-align: right
+
+      strong
+        color: $activeColor
+        font-size: 10px
+        // TODO: [design] try to find out what is the font-weight for Roboto-Black
+        font-weight: 500
+
+      div
+        background-color: $seriesCountBackgroundColor
+        margin-top: 6px
+        position: relative
+
+        &:after
+          background-color: $activeColor
+          box-shadow: 1px 1px rgba(0, 0, 0, .115)
+          left: -5px
+          position: absolute
+          top: -5px
+
+        &
+        &:after
+          border: 1px solid $primaryBackgroundColor
+          content: ''
+          display: block
+          height: 11px
+          width: 11px