LT-248: Making Current Case Measurement Status look like the specified in the design

2016-07-22 11:12:04 +02:00
1 parent 25c94c4dc1
commit 738c118336
@@ -1,11 +1,15 @@
 <template name="caseProgress">
    <div class="caseProgress">
-        {{ >radialProgressBar isLocked=isLocked progressPercent=progressPercent progressText=progressText}}
-        {{ #if isLocked }}
-       <h5>Locked</h5>
-        {{ /if }}
-        {{ #if progressComplete }}
-        <button class="btn js-finish-case">Enter response</button>
-        {{ /if }}
+        {{>radialProgressBar isLocked=isLocked progressPercent=progressPercent progressText=progressText}}
+        {{#if isLocked}}
+            <div class="caseProgressStatus">
+                <h5>Locked</h5>
+            </div>
+        {{/if}}
+        {{#if progressComplete}}
+            <div class="caseProgressStatus">
+                <button class="btn js-finish-case">Enter response</button>
+            </div>
+        {{/if}}
    </div>
-</template>
+</template>
@@ -1,4 +1,4 @@
-Template.caseProgress.onCreated(function caseProgressOnCreated() {
+Template.caseProgress.onCreated(() => {
    const instance = Template.instance();

    instance.progressPercent = new ReactiveVar();
@@ -4,15 +4,29 @@
  transition(all 0.3 ease)

  .radialProgress
-    float:left
    display: inline-block
-
-  h5
    float:left
-    display: inline-block

-  button.btn
+  .caseProgressStatus
+    display: inline-block
    float: left
-    display: inline-block
-    margin: 6px
-    cursor: pointer
+    margin-left: 22px
+
+    h5
+      color: $textPrimaryColor
+      line-height: 46px
+      margin: 0
+      font-size: 15px
+      font-weight: bold
+
+    button.btn
+      background-color: $activeColor
+      border: 1px solid $uiBorderColorActive
+      color: #000
+      cursor: pointer
+      font-size: 15px
+      font-weight: bold
+      height: 37px
+      margin-top: 6px
+      text-align: center
+      width: 126px
@@ -15,29 +15,31 @@
                    stroke-dasharray="131.9469"
                    stroke-dashoffset="0">
            </circle>
-            <circle id="bar"
-                    r="21"
-                    cx="23"
-                    cy="23"
-                    fill="transparent"
-                    stroke-dasharray="131.9469"
-                    style="stroke-dashoffset: {{progressRadius}}px;">
-            </circle>
+            {{#unless isLocked}}
+                <circle id="bar"
+                        r="21"
+                        cx="23"
+                        cy="23"
+                        fill="transparent"
+                        stroke-dasharray="131.9469"
+                        style="stroke-dashoffset: {{progressRadius}}px;">
+                </circle>
+            {{/unless}}
        </svg>
        <div class="progressText">
-            {{ #if isLocked }}
-                <svg>
+            {{#if isLocked}}
+                <svg class="locked">
                    <use xlink:href=/packages/lesiontracker/assets/icons.svg#icon-status-lock></use>
                </svg>
-            {{ else }}
-                {{ #if progressComplete }}
-                <svg>
-                    <use xlink:href=/packages/lesiontracker/assets/icons.svg#icon-status-complete></use>
-                </svg>
-                {{ else }}
-                {{progressText}}
-                {{ /if }}
-            {{ /if }}
+            {{else}}
+                {{#if progressComplete}}
+                    <svg class="complete">
+                        <use xlink:href=/packages/lesiontracker/assets/icons.svg#icon-status-complete></use>
+                    </svg>
+                {{else}}
+                    {{progressText}}
+                {{/if}}
+            {{/if}}
        </div>
    </div>
 </template>
@@ -22,7 +22,7 @@ $circleSize = 46px
    -webkit-transform: rotate(270deg) /* Chrome, Safari, Opera */
    -webkit-transform-origin: center center /* Chrome, Safari, Opera */
    transform: rotate(270deg)
-    transform-origin: center center
+    transform-origin(center center)

  .progressText
    position: absolute
@@ -36,5 +36,17 @@ $circleSize = 46px
    top: 0

    svg
-      width: 17px
-      height: 17px
+      fill: $uiSkyBlue
+      left: 50%
+      position: absolute
+      stroke: $uiSkyBlue
+      top: 50%
+      transform(translateX(-50%) translateY(-50%))
+
+      &.locked
+        width: 16px
+        height: 21px
+
+      &.complete
+        width: 27px
+        height: 27px
@@ -16,7 +16,8 @@
                        </svg>
                    </div>
                    <div class="buttonLabel">
-                        More <i class="fa fa-caret-down" aria-hidden="true"></i>
+                        <span>More</span>
+                        <i class="fa fa-caret-down" aria-hidden="true"></i>
                    </div>
                </div>

@@ -34,7 +35,7 @@
            {{/if}}

            <div class="toolbarSectionEntry pull-right rm-l-1 p-x-1">
-                {{> caseProgress }}
+                {{>caseProgress}}
            </div>
            <div class="pull-right m-t-1 rm-x-1">
                {{>roundedButtonGroup rightSidebarToggleButtonData}}
@@ -45,9 +46,7 @@
                        <use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-hud"></use>
                    </svg>
                </div>
-                <div class="buttonLabel">
-                    HUD
-                </div>
+                <div class="buttonLabel">HUD</div>
            </div>
            <div class="toolbarSectionButton pull-right rp-x-1 m-t-1 rm-r-1" data-toggle="modal" data-target="#optionsModal">
                <div class="svgContainer">
@@ -55,9 +54,7 @@
                        <use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-trial-info"></use>
                    </svg>
                </div>
-                <div class="buttonLabel">
-                    Trial
-                </div>
+                <div class="buttonLabel">Trial</div>
            </div>
        </div>
    </div>