Lesion Tracker Redesign so far

2016-07-22 11:00:16 +02:00
1 parent b247e89d8b
commit a9a4f3f82b
@@ -0,0 +1,43 @@
+<template name="radialProgressBar">
+    <div class="radialProgress">
+        <svg id="svg"
+             width="46"
+             height="46"
+             viewPort="0 0 50 50"
+             version="1.1"
+             xmlns="http://www.w3.org/2000/svg">
+
+            <!-- stroke-dasharray is 2 * PI * radius !-->
+            <circle r="13"
+                    cx="23"
+                    cy="23"
+                    fill="transparent"
+                    stroke-dasharray="81.64"
+                    stroke-dashoffset="0">
+            </circle>
+            <circle id="bar"
+                    r="13"
+                    cx="23"
+                    cy="23"
+                    fill="transparent"
+                    stroke-dasharray="81.64"
+                    style="stroke-dashoffset: {{progressRadius}}px;">
+            </circle>
+        </svg>
+        <div class="progressText">
+            {{ #if isLocked }}
+                <svg>
+                    <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 }}
+        </div>
+    </div>
+</template>
@@ -0,0 +1,13 @@
+Template.radialProgressBar.helpers({
+    progressComplete() {
+        const instance = Template.instance();
+        return instance.data.progressPercent === 100;
+    },
+
+    progressRadius() {
+        var radius = 13 * 2 * Math.PI;
+        const instance = Template.instance();
+        var percentLeft = (100 - instance.data.progressPercent) / 100;
+        return percentLeft * radius;
+    }
+});
@@ -0,0 +1,41 @@
+@import "{design}/app"
+
+$circleSize = 46px
+$progressTextColor = #6fbde2
+
+.radialProgress
+  height: $circleSize
+  width: $circleSize
+  box-shadow: 0 0 1em black
+  border-radius: 100%
+  position: relative
+
+  #svg circle
+    stroke-dashoffset: 0
+    transition: stroke-dashoffset 1s linear
+    stroke: #203244
+    stroke-width: 3px
+
+  #svg #bar
+    stroke: $activeColor
+    -ms-transform: rotate(270deg); /* IE 9 */
+    -ms-transform-origin: center center; /* IE 9 */
+    -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
+    -webkit-transform-origin: center center; /* Chrome, Safari, Opera */
+    transform: rotate(270deg);
+    transform-origin: center center;
+
+  .progressText
+    position: absolute;
+    width: $circleSize;
+    height: $circleSize;
+    line-height: $circleSize;
+    font-family: Roboto-Bold;
+    font-size: 17px;
+    text-align: center;
+    color: $progressTextColor;
+    top: 0;
+
+    svg
+      width: 17px
+      height: 17px