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

LT-251: Making series switch behave like demonstrated in the design video

Browse Source
This commit is contained in:
Bruno Alves de Faria 2016-06-20 09:51:27 -03:00 committed by Erik Ziegler
parent c623faea94
commit c8fdf0522e
4 changed files with 62 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
Packages/design/styles/mixins.styl
View File

@ -5,6 +5,13 @@ transition(t)
-o-transition: t
-moz-transition: t
transition-delay(d)
transition-delay: d
-webkit-transition-delay: d
-ms-transition-delay: d
-o-transition-delay: d
-moz-transition-delay: d
transform(t)
transform: t
-webkit-transform: t

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

@ -1,7 +1,7 @@
<template name="studySeriesQuickSwitch">
<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="quickSwitch js-quick-switch clearfix rp-t-1 {{#if eq side 'left'}}rp-r-3{{else}}rp-l-3{{/if}}">
<div class="switchSection switchSectionStudy 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>
@ -12,7 +12,7 @@
</div>
</div>
</div>
<div class="switchSection rm-x-1 {{#if eq side 'left'}}pull-right{{else}}pull-left{{/if}}">
<div class="switchSection switchSectionSeries rm-x-1 {{#if eq side 'left'}}pull-right{{else}}pull-left{{/if}}">
{{#let thumbnailsList=(studyThumbnails currentStudy)}}
<div class="label">Series</div>
<div class="seriesSwitch clearfix">
@ -27,9 +27,11 @@
{{/each}}
<div class="switchHover seriesHover clearfix">
<div class="scrollArea">
{{#each thumbnail in thumbnailsList}}
{{>thumbnailEntry thumbnail=thumbnail viewportIndex=viewportIndex}}
{{/each}}
<div class="thumbnailsWrapper">
{{#each thumbnail in thumbnailsList}}
{{>thumbnailEntry thumbnail=thumbnail viewportIndex=viewportIndex}}
{{/each}}
</div>
</div>
</div>
</div>

9
Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.js
View File

@ -33,6 +33,15 @@ Template.studySeriesQuickSwitch.onCreated(() => {
};
});
Template.studySeriesQuickSwitch.events({
'mouseenter .js-quick-switch, mouseenter .js-quick-switch .switchSectionSeries'(event, instance) {
$(event.currentTarget).addClass('hover');
},
'mouseleave .js-quick-switch'(event, instance) {
instance.$('.js-quick-switch, .switchSectionSeries').removeClass('hover');
}
});
Template.studySeriesQuickSwitch.helpers({
// Get the current study and change the reactive variable
currentStudy() {

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

@ -23,7 +23,7 @@ $seriesSpacing = 2px
height: 100%
position: relative
&:hover
&.switchSectionSeries.hover, &.switchSectionStudy:hover
.studySwitch .studyBox, .seriesSwitch .seriesItem
opacity: 0
.switchHover
@ -31,6 +31,29 @@ $seriesSpacing = 2px
.studyHover
transform(scale(1))
&.switchSectionSeries.hover
.seriesHover
.thumbnailsWrapper
transition(all 0.3s ease)
transform(scale(0.8) translateY($switchSize))
.thumbnailEntry .seriesDetails
opacity: 0
visibility: hidden
&:hover .seriesHover
.thumbnailsWrapper
transform(scale(1) translateY(0))
.thumbnailEntry .seriesDetails
opacity: 1
transform(translateY(0))
transition(all 0.3s ease)
transition-delay(0.3s)
visibility: visible
.seriesHover .thumbnailEntry .seriesDetails
opacity: 0
transform(translateY(-36px))
.studySwitch .studyBox, .seriesSwitch .seriesItem
transition(opacity 0.3s ease)
@ -83,7 +106,9 @@ $seriesSpacing = 2px
.switchHover
background: black
border: 10px solid transparent
border-radius: 5px
margin: -10px
opacity: 0
overflow: hidden
position: absolute
@ -100,10 +125,10 @@ $seriesSpacing = 2px
width: calc(100% + 20px)
.studyHover
width: 300px
width: 320px
.seriesHover
width: 711px
width: 731px
.thumbnailEntry
margin: 0
@ -114,7 +139,7 @@ $seriesSpacing = 2px
.studyHover
left: 0
transform-origin(0% 0%)
.seriesHover
.seriesHover, .thumbnailsWrapper
right: 0
transform-origin(100% 0%)
@ -124,7 +149,7 @@ $seriesSpacing = 2px
.studyHover
right: 0
transform-origin(100% 0%)
.seriesHover
.seriesHover, .thumbnailsWrapper
left: 0
transform-origin(0% 0%)
@ -133,28 +158,28 @@ $switchSmallSize = 35px
$seriesSmallSpacing = 1px
@media screen and (max-width: 1023px)
.switchSection:hover .seriesHover
.switchSectionSeries.hover .seriesHover
transform(scale(0.5))
@media screen and (min-width: 1024px) and (max-width: 1151px)
.switchSection:hover .seriesHover
.switchSectionSeries.hover .seriesHover
transform(scale(0.61))
@media screen and (min-width: 1152px) and (max-width: 1279px)
.switchSection:hover .seriesHover
.switchSectionSeries.hover .seriesHover
transform(scale(0.69))
@media screen and (min-width: 1280px) and (max-width: 1359px)
.switchSection:hover .seriesHover
.switchSectionSeries.hover .seriesHover
transform(scale(0.77))
@media screen and (min-width: 1360px) and (max-width: 1439px)
.switchSection:hover .seriesHover
.switchSectionSeries.hover .seriesHover
transform(scale(0.82))
@media screen and (min-width: 1440px) and (max-width: 1599px)
.switchSection:hover .seriesHover
.switchSectionSeries.hover .seriesHover
transform(scale(0.87))
@media screen and (min-width: 1600px) and (max-width: 1919px)
.switchSection:hover .seriesHover
.switchSectionSeries.hover .seriesHover
transform(scale(0.97))
@media screen and (min-width: 1920px)
.switchSection:hover .seriesHover
.switchSectionSeries.hover .seriesHover
transform(scale(1))
@media screen and (max-width: 1599px)