Improvements on Case Progress

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"
-             height="40"
-             viewPort="0 0 40 40"
+             width="26"
+             height="26"
+             viewPort="0 0 26 26"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg">
 
             <!-- stroke-dasharray is 2 * PI * radius !-->
-            <circle r="18"
-                    cx="20"
-                    cy="20"
+            <circle r="11"
+                    cx="13"
+                    cy="13"
                     fill="transparent"
-                    stroke-dasharray="113.097335529232557"
+                    stroke-dasharray="69.11503837897544"
                     stroke-dashoffset="0">
             </circle>
             {{#unless isLocked}}
                 <circle id="bar"
-                        r="18"
-                        cx="20"
-                        cy="20"
+                        r="11"
+                        cx="13"
+                        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
-        width: 16px
+        height: 12px
+        width: 10px
 
     &.complete
       line-height: 0
 
       &, & svg
-        height: 27px
-        width: 27px
+        height: 16px
+        width: 16px
 
     svg
-      theme('fill', '$activeColor')
-      theme('stroke', '$activeColor')
+      theme('fill', '$textSecondaryColor')
+      theme('stroke', '$textSecondaryColor')