othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Bruno Alves de Faria 2016-07-20 09:39:40 -03:00 committed by Erik Ziegler
parent 25c94c4dc1
commit 738c118336
9 changed files with 81 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl
View File

@ -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

1
Packages/design/styles/imports/variables.styl
View File

@ -13,6 +13,7 @@ $hoverColor = #ffffff
$activeColor = #40D9B8
$uiBorderColor = #436270
$uiBorderColorDark = #3C5D80
$uiBorderColorActive = #3C8074
$primaryBackgroundColor = #000000
$boxBackgroundColor = #3E5975
$boxBackgroundColorDark = #22374D

4
Packages/lesiontracker/assets/icons.svg
View File

@ -36,7 +36,9 @@
<title>
Complete
</title>
<path d="M13.5 0C6.08 0 0 6.04 0 13.42 0 20.8 6.08 26.83 13.5 26.83 20.93 26.83 27 20.8 27 13.42 27 6.04 20.93 0 13.5 0L13.5 0ZM10.8 20.13L4.05 13.42 5.94 11.54 10.8 16.37 21.06 6.17 22.95 8.05 10.8 20.13 10.8 20.13Z" id="Shape"/>
<g id="icon-status-complete-group" stroke="none">
<path id="icon-status-complete-circle" d="M13.5,0 a13.5 13.5 0 0 1 0 27 a13.5 13.5 0 0 1 0 -27 M23,8 l-2,-2 -10,10, -5,-5 -2,2 7,7Z" />
</g>
</symbol>
<symbol id="icon-status-lock" viewBox="0 0 16 21">
<title>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.9 KiB

After

Width:  |  Height:  |  Size: 9.9 KiB

20
Packages/lesiontracker/client/components/caseProgress/caseProgress.html
View File

@ -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>

2
Packages/lesiontracker/client/components/caseProgress/caseProgress.js
View File

@ -1,4 +1,4 @@
Template.caseProgress.onCreated(function caseProgressOnCreated() {
Template.caseProgress.onCreated(() => {
const instance = Template.instance();
instance.progressPercent = new ReactiveVar();

30
Packages/lesiontracker/client/components/caseProgress/caseProgress.styl
View File

@ -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

40
Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.html
View File

@ -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>

18
Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.styl
View File

@ -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

13
Packages/lesiontracker/client/components/toolbarSection/toolbarSection.html
View File

@ -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>