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

LT-251: Styling quick switch toolbar like the specifications in the design

Browse Source
This commit is contained in:
Bruno Alves de Faria 2016-06-16 12:08:02 -03:00 committed by Erik Ziegler
parent d8181a1a5e
commit 51cb360b68
3 changed files with 92 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
Packages/design/styles/responsive.styl
View File

@ -1,23 +1,26 @@
@import "./spacings"
// MIN WIDTH 1600
// MIN WIDTH 1920
generateSpacings('r', $spacer-x, $spacer-y)
@media screen and (min-width: 1440px) and (max-width: 1599px)
@media screen and (min-width: 1600px) and (max-width: 1919px)
generateSpacings('r', ($spacer-x * 0.9), ($spacer-y * 0.9))
@media screen and (min-width: 1360px) and (max-width: 1439px)
@media screen and (min-width: 1440px) and (max-width: 1599px)
generateSpacings('r', ($spacer-x * 0.8), ($spacer-y * 0.8))
@media screen and (min-width: 1280px) and (max-width: 1359px)
@media screen and (min-width: 1360px) and (max-width: 1439px)
generateSpacings('r', ($spacer-x * 0.7), ($spacer-y * 0.7))
@media screen and (min-width: 1152px) and (max-width: 1279px)
@media screen and (min-width: 1280px) and (max-width: 1359px)
generateSpacings('r', ($spacer-x * 0.6), ($spacer-y * 0.6))
@media screen and (min-width: 1024px) and (max-width: 1151px)
@media screen and (min-width: 1152px) and (max-width: 1279px)
generateSpacings('r', ($spacer-x * 0.5), ($spacer-y * 0.5))
@media screen and (max-width: 1023px)
@media screen and (min-width: 1024px) and (max-width: 1151px)
generateSpacings('r', ($spacer-x * 0.4), ($spacer-y * 0.4))
@media screen and (max-width: 1023px)
generateSpacings('r', ($spacer-x * 0.3), ($spacer-y * 0.3))

64
Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.html
View File

@ -1,36 +1,40 @@
<template name="studySeriesQuickSwitch">
<div class="quickSwitch {{side}} clearfix">
<div class="switchSection {{#if eq side 'left'}}pull-right{{else}}pull-left{{/if}}">
<div class="label">Study</div>
<div class="studySwitch"></div>
<div class="switchHover studyHover clearfix">
<div class="scrollArea">
{{>studyTimepointBrowser timepointViewType=timepointViewType viewportIndex=viewportIndex}}
</div>
</div>
</div>
<div class="switchSection {{#if eq side 'left'}}pull-right{{else}}pull-left{{/if}}">
{{#let thumbnailsList=(thumbnails currentStudy)}}
<div class="label">Series</div>
<div class="seriesSwitch clearfix">
{{#each thumbnail in thumbnailsList}}
{{#if lt @index 8}}
<div class="seriesItem {{#if eq side 'left'}}pull-right{{else}}pull-left{{/if}} {{#if isSeriesActive thumbnail.stack.seriesInstanceUid viewportIndex}}active{{/if}}"></div>
{{else}}
{{#if eq @index 8}}
<div class="seriesItem count {{#if eq side 'left'}}pull-right{{else}}pull-left{{/if}}">{{thumbnailsList.length}}</div>
{{/if}}
{{/if}}
{{/each}}
</div>
<div class="switchHover seriesHover clearfix">
<div class="scrollArea">
{{#each thumbnail in thumbnailsList}}
{{>thumbnailEntry thumbnail=thumbnail viewportIndex=viewportIndex}}
{{/each}}
<div class="quickSwitchWrapper {{side}}">
<div class="quickSwitch clearfix rp-t-1 {{#if eq side 'left'}}rp-r-3{{else}}rp-l-3{{/if}}">
<div class="switchSection rm-x-1 {{#if eq side 'left'}}pull-right{{else}}pull-left{{/if}}">
<div class="label">Study</div>
<div class="studySwitch">
<div class="studyBox"></div>
<div class="switchHover studyHover clearfix">
<div class="scrollArea">
{{>studyTimepointBrowser timepointViewType=timepointViewType viewportIndex=viewportIndex}}
</div>
</div>
</div>
{{/let}}
</div>
<div class="switchSection rm-x-1 {{#if eq side 'left'}}pull-right{{else}}pull-left{{/if}}">
{{#let thumbnailsList=(thumbnails currentStudy)}}
<div class="label">Series</div>
<div class="seriesSwitch clearfix">
{{#each thumbnail in thumbnailsList}}
{{#if lt @index 8}}
<div class="seriesItem {{#if eq side 'left'}}pull-right{{else}}pull-left{{/if}} {{#if isSeriesActive thumbnail.stack.seriesInstanceUid viewportIndex}}active{{/if}}"></div>
{{else}}
{{#if eq @index 8}}
<div class="seriesItem count {{#if eq side 'left'}}pull-right{{else}}pull-left{{/if}}">{{thumbnailsList.length}}</div>
{{/if}}
{{/if}}
{{/each}}
<div class="switchHover seriesHover clearfix">
<div class="scrollArea">
{{#each thumbnail in thumbnailsList}}
{{>thumbnailEntry thumbnail=thumbnail viewportIndex=viewportIndex}}
{{/each}}
</div>
</div>
</div>
{{/let}}
</div>
</div>
</div>
</template>

98
Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl
View File

@ -1,59 +1,50 @@
@import "{design}/app"
$switchSize = 55px
$switchTop = 5px
$switchHeight = 70px
$switchWrapperWidth = 140px
$seriesSpacing = 2px
.quickSwitch
height: $switchHeight
.quickSwitchWrapper
position: absolute
top: $switchTop
width: $switchWrapperWidth
top: 0
&.middle
left: 'calc(50% - %s)' % ($switchWrapperWidth / 2)
left: 50%
transform(translateX(-50%))
&.left
left: 'calc(50% - %s - 20px)' % $switchWrapperWidth
border-right: 1px solid $uiBorderColor
right: 50%
&.right
left: calc(50% + 20px)
left: 50%
.quickSwitch
.switchSection
display: inline-block
float: left
height: 100%
margin: 0 5px
position: relative
&:hover
.studySwitch, .seriesSwitch
.studySwitch .studyBox, .seriesSwitch .seriesItem
opacity: 0
.switchHover
opacity: 0.8
.studyHover
transform(scale(1))
.label
color: $textSecondaryColor
display: block
font-size: 12px
font-weight: 300
padding: 0
text-align: center
text-transform: uppercase
.studySwitch, .seriesSwitch
.studySwitch .studyBox, .seriesSwitch .seriesItem
transition(opacity 0.3s ease)
.studySwitch, .seriesSwitch
position: relative
.studySwitch
background-color: $darkUiColor
border: solid 1px $activeColor
border-radius: 11px
display: block
height: $switchSize
margin: 0 auto
width: $switchSize
.studyBox
background-color: $darkUiColor
border: solid 1px $activeColor
border-radius: 11px
display: block
height: $switchSize
width: $switchSize
.seriesSwitch
display: block
@ -78,13 +69,23 @@ $seriesSpacing = 2px
&.active
background-color: $activeColor
.label
color: $textSecondaryColor
display: block
font-size: 12px
font-weight: 300
line-height: 34px
padding: 0
text-align: center
text-transform: uppercase
.switchHover
background: black
border-radius: 5px
opacity: 0
overflow: hidden
position: absolute
top: 18px
top: 0
transform(scale(0))
transition(all 0.3s ease)
z-index: 10000
@ -105,7 +106,7 @@ $seriesSpacing = 2px
.thumbnailEntry
margin: 0
.quickSwitch.left, .quickSwitch.middle
.quickSwitchWrapper.left, .quickSwitchWrapper.middle
.seriesHover .thumbnailEntry
float: right
.studyHover
@ -115,7 +116,7 @@ $seriesSpacing = 2px
right: 0
transform-origin(100% 0%)
.quickSwitch.right
.quickSwitchWrapper.right
.seriesHover .thumbnailEntry
float: left
.studyHover
@ -134,38 +135,35 @@ $seriesSmallSpacing = 1px
transform(scale(0.5))
@media screen and (min-width: 1024px) and (max-width: 1151px)
.switchSection:hover .seriesHover
transform(scale(0.63))
transform(scale(0.61))
@media screen and (min-width: 1152px) and (max-width: 1279px)
.switchSection:hover .seriesHover
transform(scale(0.72))
transform(scale(0.69))
@media screen and (min-width: 1280px) and (max-width: 1359px)
.switchSection:hover .seriesHover
transform(scale(0.81))
transform(scale(0.77))
@media screen and (min-width: 1360px) and (max-width: 1439px)
.switchSection:hover .seriesHover
transform(scale(0.86))
transform(scale(0.82))
@media screen and (min-width: 1440px) and (max-width: 1599px)
.switchSection:hover .seriesHover
transform(scale(0.91))
@media screen and (min-width: 1600px)
transform(scale(0.87))
@media screen and (min-width: 1600px) and (max-width: 1919px)
.switchSection:hover .seriesHover
transform(scale(0.97))
@media screen and (min-width: 1920px)
.switchSection:hover .seriesHover
transform(scale(1))
@media screen and (max-width: 1599px)
.quickSwitch
height: 45px
&.left
left: 'calc(50% - %s - 8px)' % $switchWrapperWidth
&.right
left: calc(50% + 8px)
.switchSection
.switchHover
top: 8px
.label
font-size: 8px
font-weight: 400
line-height: 12px
padding: 0
.studySwitch
.studySwitch .studyBox
border-radius: 7px
height: $switchSmallSize
width: $switchSmallSize
@ -178,6 +176,6 @@ $seriesSmallSpacing = 1px
margin: $seriesSmallSpacing
width: 10px
&.count
font-size: 10px;
font-weight: 300;
line-height: 10px;
font-size: 10px
font-weight: 300
line-height: 10px