diff --git a/Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl b/Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl index c6d88f7c8..38205a741 100644 --- a/Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl +++ b/Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl @@ -1,7 +1,6 @@ @import "{design}/app" $height = 25px -$borderColorActive = #3C8074 $textColorActive = #2D2D2D .roundedButtonGroup @@ -59,7 +58,7 @@ $textColorActive = #2D2D2D &.active .roundedButton background-color: $activeColor - border-color: $borderColorActive + border-color: $uiBorderColorActive color: $textColorActive &:hover .roundedButton diff --git a/Packages/design/styles/imports/variables.styl b/Packages/design/styles/imports/variables.styl index 9f940b855..b69e39a61 100644 --- a/Packages/design/styles/imports/variables.styl +++ b/Packages/design/styles/imports/variables.styl @@ -13,6 +13,7 @@ $hoverColor = #ffffff $activeColor = #40D9B8 $uiBorderColor = #436270 $uiBorderColorDark = #3C5D80 +$uiBorderColorActive = #3C8074 $primaryBackgroundColor = #000000 $boxBackgroundColor = #3E5975 $boxBackgroundColorDark = #22374D diff --git a/Packages/lesiontracker/assets/icons.svg b/Packages/lesiontracker/assets/icons.svg index c6c3eff83..cd0aada75 100644 --- a/Packages/lesiontracker/assets/icons.svg +++ b/Packages/lesiontracker/assets/icons.svg @@ -36,7 +36,9 @@ Complete - + + + diff --git a/Packages/lesiontracker/client/components/caseProgress/caseProgress.html b/Packages/lesiontracker/client/components/caseProgress/caseProgress.html index 9bf1a8a7f..e9b740ed7 100644 --- a/Packages/lesiontracker/client/components/caseProgress/caseProgress.html +++ b/Packages/lesiontracker/client/components/caseProgress/caseProgress.html @@ -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> \ No newline at end of file +</template> diff --git a/Packages/lesiontracker/client/components/caseProgress/caseProgress.js b/Packages/lesiontracker/client/components/caseProgress/caseProgress.js index 86bffaa8f..c5a630ea9 100644 --- a/Packages/lesiontracker/client/components/caseProgress/caseProgress.js +++ b/Packages/lesiontracker/client/components/caseProgress/caseProgress.js @@ -1,4 +1,4 @@ -Template.caseProgress.onCreated(function caseProgressOnCreated() { +Template.caseProgress.onCreated(() => { const instance = Template.instance(); instance.progressPercent = new ReactiveVar(); diff --git a/Packages/lesiontracker/client/components/caseProgress/caseProgress.styl b/Packages/lesiontracker/client/components/caseProgress/caseProgress.styl index 20c1393c4..528e032df 100644 --- a/Packages/lesiontracker/client/components/caseProgress/caseProgress.styl +++ b/Packages/lesiontracker/client/components/caseProgress/caseProgress.styl @@ -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 diff --git a/Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.html b/Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.html index 2e73f0791..cc9d52782 100644 --- a/Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.html +++ b/Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.html @@ -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> diff --git a/Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.styl b/Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.styl index ddb9d8195..e9ca3cf85 100644 --- a/Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.styl +++ b/Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.styl @@ -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 diff --git a/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.html b/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.html index 1aa9e9c34..a4e3e35aa 100644 --- a/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.html +++ b/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.html @@ -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>