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

LT-251: Making quick switch work according to series; Making quick switch responsive

Browse Source
This commit is contained in:
Bruno Alves de Faria 2016-06-16 08:57:04 -03:00 committed by Erik Ziegler
parent e3fc56c0f4
commit d8181a1a5e
6 changed files with 105 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -7,6 +7,7 @@ $uiBorderColorDark = #3C5D80
$darkUiColor = #16202B $darkUiColor = #16202B
$primaryBackgroundColor = #000000 $primaryBackgroundColor = #000000
$boxBackgroundColor = #3E5975 $boxBackgroundColor = #3E5975
$boxBackgroundColorDark = #22374D
// Text Colors // Text Colors
$textPrimaryColor = #ffffff $textPrimaryColor = #ffffff

2
Packages/lesiontracker/client/components/lesionTrackerViewportOverlay/lesionTrackerViewportOverlay.styl
View File

@ -2,7 +2,7 @@
$viewportTagPadding = 20px $viewportTagPadding = 20px
$imageSliderBorderRadius = 57px $imageSliderBorderRadius = 57px
$imageSliderColor = #22374d $imageSliderColor = $boxBackgroundColorDark
$imageSliderTrackColor = rgba(0,0,0,0) $imageSliderTrackColor = rgba(0,0,0,0)
$imageSliderBorder = none $imageSliderBorder = none

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

@ -1,6 +1,6 @@
<template name="studySeriesQuickSwitch"> <template name="studySeriesQuickSwitch">
<div class="quickSwitch {{side}}"> <div class="quickSwitch {{side}} clearfix">
<div class="switchSection {{#if equals side "left"}}pull-right{{/if}} js-show-studies"> <div class="switchSection {{#if eq side 'left'}}pull-right{{else}}pull-left{{/if}}">
<div class="label">Study</div> <div class="label">Study</div>
<div class="studySwitch"></div> <div class="studySwitch"></div>
<div class="switchHover studyHover clearfix"> <div class="switchHover studyHover clearfix">
@ -9,27 +9,28 @@
</div> </div>
</div> </div>
</div> </div>
<div class="switchSection {{#if equals side "left"}}pull-right{{/if}}"> <div class="switchSection {{#if eq side 'left'}}pull-right{{else}}pull-left{{/if}}">
<div class="label">Series</div> {{#let thumbnailsList=(thumbnails currentStudy)}}
<div class="seriesSwitch {{#if equals side "left"}}mirror-x{{/if}} js-show-series"> <div class="label">Series</div>
<svg viewBox="0 0 53 53"> <div class="seriesSwitch clearfix">
<rect fill="#22364C" x="0" y="38" width="15" height="15" rx="3"></rect> {{#each thumbnail in thumbnailsList}}
<rect fill="#22364C" x="19" y="38" width="15" height="15" rx="3"></rect> {{#if lt @index 8}}
<rect fill="#22364C" x="38" y="19" width="15" height="15" rx="3"></rect> <div class="seriesItem {{#if eq side 'left'}}pull-right{{else}}pull-left{{/if}} {{#if isSeriesActive thumbnail.stack.seriesInstanceUid viewportIndex}}active{{/if}}"></div>
<rect fill="#22364C" x="19" y="19" width="15" height="15" rx="3"></rect> {{else}}
<rect fill="#40D9B8" x="0" y="19" width="15" height="15" rx="3"></rect> {{#if eq @index 8}}
<rect fill="#22364C" x="38" y="0" width="15" height="15" rx="3"></rect> <div class="seriesItem count {{#if eq side 'left'}}pull-right{{else}}pull-left{{/if}}">{{thumbnailsList.length}}</div>
<rect fill="#22364C" x="19" y="0" width="15" height="15" rx="3"></rect> {{/if}}
<rect fill="#22364C" x="0" y="0" width="15" height="15" rx="3"></rect> {{/if}}
</svg>
</div>
<div class="switchHover seriesHover clearfix">
<div class="scrollArea">
{{#each thumbnail in (thumbnails currentStudy)}}
{{>thumbnailEntry thumbnail=thumbnail viewportIndex=viewportIndex}}
{{/each}} {{/each}}
</div> </div>
</div> <div class="switchHover seriesHover clearfix">
<div class="scrollArea">
{{#each thumbnail in thumbnailsList}}
{{>thumbnailEntry thumbnail=thumbnail viewportIndex=viewportIndex}}
{{/each}}
</div>
</div>
{{/let}}
</div> </div>
</div> </div>
</template> </template>

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

@ -1,9 +1,10 @@
@import "{design}/app" @import "{design}/app"
$switchSize = 50px $switchSize = 55px
$switchTop = 5px $switchTop = 5px
$switchHeight = 70px $switchHeight = 70px
$switchWrapperWidth = 140px $switchWrapperWidth = 140px
$seriesSpacing = 2px
.quickSwitch .quickSwitch
height: $switchHeight height: $switchHeight
@ -38,11 +39,12 @@ $switchWrapperWidth = 140px
display: block display: block
font-size: 12px font-size: 12px
font-weight: 300 font-weight: 300
padding: 0
text-align: center text-align: center
text-transform: uppercase text-transform: uppercase
.studySwitch, .seriesSwitch .studySwitch, .seriesSwitch
transition(all 0.3s ease) transition(opacity 0.3s ease)
.studySwitch .studySwitch
background-color: $darkUiColor background-color: $darkUiColor
@ -55,15 +57,26 @@ $switchWrapperWidth = 140px
.seriesSwitch .seriesSwitch
display: block display: block
height: $switchSize height: $switchSize + $seriesSpacing
width: $switchSize width: $switchSize + $seriesSpacing
svg .seriesItem
height: $switchSize background-color: $boxBackgroundColorDark
width: $switchSize border-radius: 3px
height: 15px
margin: $seriesSpacing
width: 15px
.mirror-x &.count
transform(scaleX(-1)) background-color: transparent
color: $textPrimaryColor
font-size: 12px
font-weight: 500
line-height: 17px
text-align: center
&.active
background-color: $activeColor
.switchHover .switchHover
background: black background: black
@ -113,28 +126,32 @@ $switchWrapperWidth = 140px
transform-origin(0% 0%) transform-origin(0% 0%)
// Responsive layout // Responsive layout
$switchSizeSmall = 35px $switchSmallSize = 35px
$seriesSmallSpacing = 1px
@media screen and (max-width: 1024px) @media screen and (max-width: 1023px)
.switchSection:hover .seriesHover .switchSection:hover .seriesHover
transform(scale(0.5)) transform(scale(0.5))
@media screen and (min-width: 1025px) and (max-width: 1152px) @media screen and (min-width: 1024px) and (max-width: 1151px)
.switchSection:hover .seriesHover .switchSection:hover .seriesHover
transform(scale(0.6)) transform(scale(0.63))
@media screen and (min-width: 1153px) and (max-width: 1280px) @media screen and (min-width: 1152px) and (max-width: 1279px)
.switchSection:hover .seriesHover .switchSection:hover .seriesHover
transform(scale(0.7)) transform(scale(0.72))
@media screen and (min-width: 1281px) and (max-width: 1440px) @media screen and (min-width: 1280px) and (max-width: 1359px)
.switchSection:hover .seriesHover .switchSection:hover .seriesHover
transform(scale(0.8)) transform(scale(0.81))
@media screen and (min-width: 1441px) and (max-width: 1600px) @media screen and (min-width: 1360px) and (max-width: 1439px)
.switchSection:hover .seriesHover .switchSection:hover .seriesHover
transform(scale(0.9)) transform(scale(0.86))
@media screen and (min-width: 1601px) @media screen and (min-width: 1440px) and (max-width: 1599px)
.switchSection:hover .seriesHover
transform(scale(0.91))
@media screen and (min-width: 1600px)
.switchSection:hover .seriesHover .switchSection:hover .seriesHover
transform(scale(1)) transform(scale(1))
@media screen and (max-width: 1600px) @media screen and (max-width: 1599px)
.quickSwitch .quickSwitch
height: 45px height: 45px
&.left &.left
@ -150,7 +167,17 @@ $switchSizeSmall = 35px
padding: 0 padding: 0
.studySwitch .studySwitch
border-radius: 7px border-radius: 7px
.studySwitch, .seriesSwitch height: $switchSmallSize
&, svg width: $switchSmallSize
height: $switchSizeSmall .seriesSwitch
width: $switchSizeSmall height: $switchSmallSize + $seriesSmallSpacing
width: $switchSmallSize + $seriesSmallSpacing
.seriesItem
border-radius: 2px
height: 10px
margin: $seriesSmallSpacing
width: 10px
&.count
font-size: 10px;
font-weight: 300;
line-height: 10px;

24
Packages/viewerbase/lib/helpers/logical.js
View File

@ -10,10 +10,30 @@ Template.registerHelper('bool', function(value) {
return !!value; return !!value;
}); });
Template.registerHelper('equals', function(a, b) { Template.registerHelper('eq', function(a, b) {
return a === b; return a === b;
}); });
Template.registerHelper('ne', function(a, b) {
return a === b;
});
Template.registerHelper('gt', function(a, b) {
return a > b;
});
Template.registerHelper('lt', function(a, b) {
return a < b;
});
Template.registerHelper('gte', function(a, b) {
return a >= b;
});
Template.registerHelper('lte', function(a, b) {
return a <= b;
});
Template.registerHelper('not', function(value) { Template.registerHelper('not', function(value) {
return !value; return !value;
}); });
@ -32,4 +52,4 @@ Template.registerHelper('or', function() {
return value && (result = true); return value && (result = true);
}); });
return result; return result;
}); });