From 54481cf71661cb16740aba1f3e12f84016df6d25 Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Sat, 3 Sep 2016 11:38:26 -0300
Subject: [PATCH] AWV-1: Clearing empty viewports labels

---
 .../lesionTrackerViewportOverlay.html         |   6 +-
 .../loadingIndicator/loadingIndicator.styl    |  27 ++--
 .../viewportOverlay/viewportOverlay.html      | 135 +++++++++---------
 .../viewportOverlay/viewportOverlay.styl      |   9 +-
 4 files changed, 92 insertions(+), 85 deletions(-)

diff --git a/Packages/lesiontracker/client/components/lesionTrackerViewportOverlay/lesionTrackerViewportOverlay.html b/Packages/lesiontracker/client/components/lesionTrackerViewportOverlay/lesionTrackerViewportOverlay.html
index db731d76a..9aa55396a 100644
--- a/Packages/lesiontracker/client/components/lesionTrackerViewportOverlay/lesionTrackerViewportOverlay.html
+++ b/Packages/lesiontracker/client/components/lesionTrackerViewportOverlay/lesionTrackerViewportOverlay.html
@@ -22,7 +22,7 @@
             <div>{{seriesDescription}}</div>
         </div>
         {{#if gt numImages 1}}
-        {{> imageControls imageIndex=imageIndex numImages=numImages}}
-        {{ /if }}
+            {{>imageControls imageIndex=imageIndex numImages=numImages}}
+        {{/if}}
     </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/Packages/viewerbase/client/components/viewer/loadingIndicator/loadingIndicator.styl b/Packages/viewerbase/client/components/viewer/loadingIndicator/loadingIndicator.styl
index ebe12e251..1614312d4 100644
--- a/Packages/viewerbase/client/components/viewer/loadingIndicator/loadingIndicator.styl
+++ b/Packages/viewerbase/client/components/viewer/loadingIndicator/loadingIndicator.styl
@@ -8,29 +8,32 @@
 
 .imageViewerErrorLoadingIndicator
   color: $uiYellow
-  
+
   p, h4
-    text-align: center
     padding: 4px 0
-    
+    text-align: center
+    word-wrap: break-word
+
   p
     font-size: 11pt
-      
+
 .loadingIndicator
+  background-color: rgba(0,0,0,0.75)
   display: none
+  font-size: 18px
+  height: 100%
+  overflow: hidden
   pointer-events: none // Necessary for click-through to cornerstone element below
   position: absolute
   top: 0
   width: 100%
-  height: 100%
-  font-size: 18px
   z-index: 100
-  background-color: rgba(0,0,0,0.75)
-  
+
   .indicatorContents
-    position: absolute
-    top: 40%
-    width: 100%
     font-size: 30px
     font-weight: 300
-    text-align: center
\ No newline at end of file
+    position: absolute
+    text-align: center
+    top: 50%
+    transform(translateY(-50%))
+    width: 100%
diff --git a/Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.html b/Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.html
index ec37a7620..d27bc1fbb 100644
--- a/Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.html
+++ b/Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.html
@@ -1,75 +1,76 @@
 <template name="viewportOverlay">
     <div class="imageViewerViewportOverlay noselect {{#if gt numImages 1}}controlsVisible{{/if}}">
-        {{ #unless tagDisplaySpecified }}
-        <div class="topleft dicomTag">
-            <div>{{formatPN patientName}}</div>
-            <div>{{patientId}}</div>
-            <div class='priorIndicator'>{{prior}}</div>
-        </div>
-        <div class="topright dicomTag">
-            <div>{{studyDescription}}</div>
-            <div>{{formatDA studyDate}} {{formatTM studyTime}}</div>
-        </div>
-        <div class="bottomright dicomTag">
-            <div>{{#if zoom}}Zoom: {{formatNumberPrecision zoom 0}}%{{/if}}</div>
-            <div>{{compression}}</div>
-            <div>{{wwwc}}</div>
-        </div>
-        <div class="bottomleft dicomTag">
-            <div>{{#if seriesNumber}}Ser: {{seriesNumber}}{{/if}}</div>
-            <div>{{#if gt numImages 1}}Img: {{instanceNumber}} ({{imageIndex}}/{{numImages}}){{/if}}</div>
-            <div>{{#if frameRate}}{{frameRate}} FPS{{/if}}</div>
-            <div>{{imageDimensions}}</div>
-            <div>{{#if location}}Loc: {{location}} mm{{/if}}
-                 {{#if thickness}}Thick: {{thickness}} mm{{/if}}
-                 {{#if spacingBetweenSlices}}Spacing: {{spacingBetweenSlices}} mm{{/if}}
+        {{#unless tagDisplaySpecified}}
+            <div class="topleft dicomTag">
+                <div>{{formatPN patientName}}</div>
+                <div>{{patientId}}</div>
+                <div class='priorIndicator'>{{prior}}</div>
             </div>
-            <div>{{seriesDescription}}</div>
-        </div>
-        {{ /unless }}
+            <div class="topright dicomTag">
+                <div>{{studyDescription}}</div>
+                <div>{{formatDA studyDate}} {{formatTM studyTime}}</div>
+            </div>
+            <div class="bottomright dicomTag">
+                <div>{{#if zoom}}Zoom: {{formatNumberPrecision zoom 0}}%{{/if}}</div>
+                <div>{{compression}}</div>
+                <div>{{wwwc}}</div>
+            </div>
+            <div class="bottomleft dicomTag">
+                <div>{{#if seriesNumber}}Ser: {{seriesNumber}}{{/if}}</div>
+                <div>{{#if gt numImages 1}}Img: {{instanceNumber}} ({{imageIndex}}/{{numImages}}){{/if}}</div>
+                <div>{{#if frameRate}}{{frameRate}} FPS{{/if}}</div>
+                <div>{{imageDimensions}}</div>
+                <div>
+                    <span>{{#if location}}Loc: {{location}} mm{{/if}}</span>
+                    <span>{{#if thickness}}Thick: {{thickness}} mm{{/if}}</span>
+                    <span>{{#if spacingBetweenSlices}}Spacing: {{spacingBetweenSlices}} mm{{/if}}</span>
+                </div>
+                <div>{{seriesDescription}}</div>
+            </div>
+        {{/unless}}
 
-        {{ #if tagDisplayRightOnly }}
-        <div class="topright dicomTag">
-            <div>{{formatPN patientName}}</div>
-            <div>{{patientId}}</div>
-            <div class='priorIndicator'>{{prior}}</div>
-            <div>{{studyDescription}}</div>
-            <div>{{formatDA studyDate}} {{formatTM studyTime}}</div>
-        </div>
-        <div class="bottomright dicomTag">
-            <div>{{#if seriesNumber}}Ser: {{seriesNumber}}{{/if}}</div>
-            <div>{{#if gt numImages 1}}Img: {{instanceNumber}} ({{imageIndex}}/{{numImages}}){{/if}}</div>
-            <div>{{#if frameRate}}{{frameRate}} FPS{{/if}}</div>
-            <div>{{imageDimensions}}</div>
-            <div>{{seriesDescription}}</div>
-            <div>{{#if zoom}}Zoom: {{formatNumberPrecision zoom 0}}%{{/if}}</div>
-            <div>{{compression}}</div>
-            <div>{{wwwc}}</div>
-        </div>
-        {{ /if }}
+        {{#if tagDisplayRightOnly}}
+            <div class="topright dicomTag">
+                <div>{{formatPN patientName}}</div>
+                <div>{{patientId}}</div>
+                <div class='priorIndicator'>{{prior}}</div>
+                <div>{{studyDescription}}</div>
+                <div>{{formatDA studyDate}} {{formatTM studyTime}}</div>
+            </div>
+            <div class="bottomright dicomTag">
+                <div>{{#if seriesNumber}}Ser: {{seriesNumber}}{{/if}}</div>
+                <div>{{#if gt numImages 1}}Img: {{instanceNumber}} ({{imageIndex}}/{{numImages}}){{/if}}</div>
+                <div>{{#if frameRate}}{{frameRate}} FPS{{/if}}</div>
+                <div>{{imageDimensions}}</div>
+                <div>{{seriesDescription}}</div>
+                <div>{{#if zoom}}Zoom: {{formatNumberPrecision zoom 0}}%{{/if}}</div>
+                <div>{{compression}}</div>
+                <div>{{wwwc}}</div>
+            </div>
+        {{/if}}
 
-        {{ #if tagDisplayLeftOnly }}
-        <div class="topleft dicomTag">
-            <div>{{formatPN patientName}}</div>
-            <div>{{patientId}}</div>
-            <div class='priorIndicator'>{{prior}}</div>
-            <div>{{studyDescription}}</div>
-            <div>{{formatDA studyDate}} {{formatTM studyTime}}</div>
-        </div>
-        <div class="bottomleft dicomTag">
-            <div>{{#if seriesNumber}}Ser: {{seriesNumber}}{{/if}}</div>
-            <div>{{#if gt numImages 1}}Img: {{instanceNumber}} ({{imageIndex}}/{{numImages}}){{/if}}</div>
-            <div>{{#if frameRate}}{{frameRate}} FPS{{/if}}</div>
-            <div>{{imageDimensions}}</div>
-            <div>{{seriesDescription}}</div>
-            <div>{{#if zoom}}Zoom: {{formatNumberPrecision zoom 0}}%{{/if}}</div>
-            <div>{{compression}}</div>
-            <div>{{wwwc}}</div>
-        </div>
-        {{ /if }}
+        {{#if tagDisplayLeftOnly}}
+            <div class="topleft dicomTag">
+                <div>{{formatPN patientName}}</div>
+                <div>{{patientId}}</div>
+                <div class='priorIndicator'>{{prior}}</div>
+                <div>{{studyDescription}}</div>
+                <div>{{formatDA studyDate}} {{formatTM studyTime}}</div>
+            </div>
+            <div class="bottomleft dicomTag">
+                <div>{{#if seriesNumber}}Ser: {{seriesNumber}}{{/if}}</div>
+                <div>{{#if gt numImages 1}}Img: {{instanceNumber}} ({{imageIndex}}/{{numImages}}){{/if}}</div>
+                <div>{{#if frameRate}}{{frameRate}} FPS{{/if}}</div>
+                <div>{{imageDimensions}}</div>
+                <div>{{seriesDescription}}</div>
+                <div>{{#if zoom}}Zoom: {{formatNumberPrecision zoom 0}}%{{/if}}</div>
+                <div>{{compression}}</div>
+                <div>{{wwwc}}</div>
+            </div>
+        {{/if}}
 
         {{#if gt numImages 1}}
-        {{> imageControls imageIndex=imageIndex numImages=numImages}}
-        {{ /if }}
+            {{>imageControls imageIndex=imageIndex numImages=numImages}}
+        {{/if}}
     </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.styl b/Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.styl
index b89bd8a1d..25178b742 100644
--- a/Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.styl
+++ b/Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.styl
@@ -2,6 +2,9 @@
 
 $viewportTagPadding = 20px
 
+.imageViewerViewport.empty ~ .imageViewerViewportOverlay
+  display: none
+
 .imageViewerViewportOverlay
   color: $textSecondaryColor
 
@@ -27,11 +30,11 @@ $viewportTagPadding = 20px
     bottom: $viewportTagPadding
     right: $viewportTagPadding
     text-align: right
-    
+
   .priorIndicator
     font-weight: bold
     color: yellow
-    
+
   &.controlsVisible
     .topright, .bottomright
-      right: "calc(%s + 19px)" % $viewportTagPadding
\ No newline at end of file
+      right: "calc(%s + 19px)" % $viewportTagPadding