Improvements on Case Progress

Packages/ohif-core/client/components/bootstrap/dialog/unsavedChangesDialog.html

@@ -11,12 +11,12 @@
                 <div class="modal-footer">
 
                     {{#let label='Stay'}}
-                    <button class="btn btn-default" aria-label="{{label}}" data-choice="abort-action" data-dismiss="modal">
+                    <button class="btn btn-secondary" aria-label="{{label}}" data-choice="abort-action" data-dismiss="modal">
                         {{label}}
                     </button>
                     {{/let}}
 
-                    {{#let label='Leave without saving...'}}
+                    {{#let label='Don\'t Save'}}
                     <button class="btn btn-danger" aria-label="{{label}}" data-choice="abandon-changes" data-dismiss="modal">
                         {{label}}
                     </button>

Packages/ohif-measurements/client/components/caseProgress/caseProgress.styl

@@ -18,18 +18,3 @@
       margin: 0
       font-size: 15px
       font-weight: bold
-
-    button.btn
-      theme('background-color', '$activeColor')
-      theme('border', '1px solid $uiBorderColorActive')
-      color: #000
-      cursor: pointer
-      font-size: 15px
-      font-weight: bold
-      height: 37px
-      margin-top: 6px
-      text-align: center
-
-      &.disabled
-        opacity: 0.5
-        cursor: not-allowed

Packages/ohif-measurements/client/components/caseProgress/radialProgressBar/radialProgressBar.html

@@ -1,27 +1,27 @@
 <template name="radialProgressBar">
     <div class="radialProgress">
         <svg id="svg"
-             width="40"
+             width="26"
-             height="40"
+             height="26"
-             viewPort="0 0 40 40"
+             viewPort="0 0 26 26"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg">
 
             <!-- stroke-dasharray is 2 * PI * radius !-->
-            <circle r="18"
+            <circle r="11"
-                    cx="20"
+                    cx="13"
-                    cy="20"
+                    cy="13"
                     fill="transparent"
-                    stroke-dasharray="113.097335529232557"
+                    stroke-dasharray="69.11503837897544"
                     stroke-dashoffset="0">
             </circle>
             {{#unless isLocked}}
                 <circle id="bar"
-                        r="18"
+                        r="11"
-                        cx="20"
+                        cx="13"
-                        cy="20"
+                        cy="13"
                         fill="transparent"
-                        stroke-dasharray="113.097335529232557"
+                        stroke-dasharray="69.11503837897544"
                         style="stroke-dashoffset: {{progressRadius}}px;">
                 </circle>
             {{/unless}}

Packages/ohif-measurements/client/components/caseProgress/radialProgressBar/radialProgressBar.js

@@ -8,7 +8,7 @@ Template.radialProgressBar.helpers({
 
     progressRadius() {
         const instance = Template.instance();
-        const radius = 18 * 2 * Math.PI;
+        const radius = 11 * 2 * Math.PI;
         const percentLeft = (100 - instance.data.progressPercent) / 100;
         return percentLeft * radius;
     }

Packages/ohif-measurements/client/components/caseProgress/radialProgressBar/radialProgressBar.styl

@@ -1,13 +1,14 @@
 @require '{ohif:design}/app'
 
-$circleSize = 40px
+$circleSize = 26px
 
 .radialProgress
-  position: relative
-  height: $circleSize
-  width: $circleSize
-  vendorize(box-shadow, 0 0 1em black)
   border-radius: 100%
+  height: $circleSize
+  margin-top: 8px
+  position: relative
+  vendorize(box-shadow, 0 0 1em black)
+  width: $circleSize
 
   #svg circle
     stroke-dashoffset: 0
@@ -16,15 +17,15 @@ $circleSize = 40px
     vendorize(transition, stroke-dashoffset 1s linear)
 
   #svg #bar
-    theme('stroke', '$activeColor')
+    theme('stroke', '$textSecondaryColor')
     vendorize(transform, rotate(270deg))
     vendorize(transform-origin, center center)
 
   .progressArea
-    theme('color', '$activeColor')
+    theme('color', '$textSecondaryColor')
     display: table
     font-weight: 700
-    font-size: 17px
+    font-size: 12px
     height: $circleSize
     line-height: $circleSize
     left: 50%
@@ -38,16 +39,16 @@ $circleSize = 40px
       line-height: 0
 
       &, & svg
-        height: 21px
+        height: 12px
-        width: 16px
+        width: 10px
 
     &.complete
       line-height: 0
 
       &, & svg
-        height: 27px
+        height: 16px
-        width: 27px
+        width: 16px
 
     svg
-      theme('fill', '$activeColor')
+      theme('fill', '$textSecondaryColor')
-      theme('stroke', '$activeColor')
+      theme('stroke', '$textSecondaryColor')

Packages/ohif-measurements/client/components/longitudinal/longitudinalViewportOverlay/longitudinalViewportOverlay.html

@@ -5,19 +5,19 @@
                 <div>{{formatPN patientName}}</div>
                 <div>{{patientId}}</div>
                 <div class='timepointName'>{{timepointName}}</div>
-            </div>
-            <div class="topright dicomTag">
-                <div>{{studyDescription}}</div>
-                <div>{{formatDA studyDate}} {{formatTM studyTime}}</div>
                 <div class="icons-section">
-                    {{>imageViewportIcons this}}
                     {{#if linked}}
                         <svg>
                             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href={{absoluteUrl "packages/ohif_viewerbase/assets/icons.svg#icon-viewport-link"}}></use>
                         </svg>
                     {{/if}}
+                    {{>imageViewportIcons this}}
                 </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 class="compressionIndicator">{{compression}}</div>