From 4138d7b7bc4761a4da06e3b98385fc4c9f667ddf Mon Sep 17 00:00:00 2001 From: Bruno Alves de Faria Date: Tue, 14 Jun 2016 10:36:54 -0300 Subject: [PATCH] LT-251: Improving toggle behavior for studies and series quick switch --- Packages/design/styles/mixins.styl | 7 ++ .../studySeriesQuickSwitch.html | 22 ++-- .../studySeriesQuickSwitch.js | 25 ---- .../studySeriesQuickSwitch.styl | 115 +++++++++++++----- 4 files changed, 102 insertions(+), 67 deletions(-) diff --git a/Packages/design/styles/mixins.styl b/Packages/design/styles/mixins.styl index 2ac665675..a8ea48078 100644 --- a/Packages/design/styles/mixins.styl +++ b/Packages/design/styles/mixins.styl @@ -11,3 +11,10 @@ transform(t) -ms-transform: t -o-transform: t -moz-transform: t + +transform-origin(o) + transform-origin: o + -webkit-transform-origin: o + -ms-transform-origin: o + -o-transform-origin: o + -moz-transform-origin: o diff --git a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.html b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.html index 13506ef9f..1409f8f51 100644 --- a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.html +++ b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.html @@ -2,7 +2,11 @@
Study
-
+
+
+
+ {{>studyTimepointBrowser timepointViewType=timepointViewType}} +
@@ -19,15 +23,13 @@
-
- -
- {{>studyTimepointBrowser timepointViewType=timepointViewType}} -
-
- {{#each thumbnail in (thumbnails currentStudy)}} - {{>thumbnailEntry thumbnail}} - {{/each}} +
+
+ {{#each thumbnail in (thumbnails currentStudy)}} + {{>thumbnailEntry thumbnail}} + {{/each}} +
+
diff --git a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.js b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.js index 4dfd5a486..c08167347 100644 --- a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.js +++ b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.js @@ -3,40 +3,15 @@ Template.studySeriesQuickSwitch.onCreated(function studySeriesQuickSwitchOnCreat var viewportIndex = instance.data.viewportIndex; - instance.seriesOpen = new ReactiveVar(false); - instance.studiesOpen = new ReactiveVar(false); - instance.data.timepointViewType = new ReactiveVar(); instance.data.timepointViewType.set('key'); }); -Template.studySeriesQuickSwitch.events({ - 'mouseenter .js-show-series'(event, instance) { - instance.seriesOpen.set(true); - }, - - 'mouseenter .js-show-studies'(event, instance) { - instance.studiesOpen.set(true); - }, - - 'mouseleave .js-hide-series'(event, instance) { - instance.seriesOpen.set(false); - }, - - 'mouseleave .js-hide-studies'(event, instance) { - instance.studiesOpen.set(false); - } -}); - Template.studySeriesQuickSwitch.helpers({ seriesOpen() { return Template.instance().seriesOpen.get(); }, - studiesOpen() { - return Template.instance().studiesOpen.get(); - }, - currentStudy() { console.log('currentStudy'); var viewportIndex = Template.instance().data.viewportIndex; diff --git a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl index 1cd839829..d6051b219 100644 --- a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl +++ b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl @@ -6,23 +6,30 @@ $switchHeight = 70px $switchWrapperWidth = 140px .quickSwitch - height: 80px + height: $switchHeight position: absolute top: $switchTop width: $switchWrapperWidth &.middle left: 'calc(50% - %s)' % ($switchWrapperWidth / 2) - &.left left: 'calc(50% - %s - 20px)' % $switchWrapperWidth &.right left: calc(50% + 20px) - div.switchSection + .switchSection display: inline-block float: left + height: 100% margin: 0 5px + position: relative + + &:hover + .studySwitch, .seriesSwitch + opacity: 0 + .switchHover + opacity: 0.8 .label color: $textSecondaryColor @@ -32,65 +39,109 @@ $switchWrapperWidth = 140px text-align: center text-transform: uppercase + .studySwitch, .seriesSwitch + transition(all 0.3s ease) + .studySwitch - display: block - margin: 0 auto - width: $switchSize - height: $switchSize - border-radius: 11px background-color: $darkUiColor border: solid 1px $activeColor + border-radius: 11px + display: block + height: $switchSize + margin: 0 auto + width: $switchSize .seriesSwitch display: block - width: $switchSize height: $switchSize + width: $switchSize svg - width: $switchSize height: $switchSize + width: $switchSize .mirror-x - transform(scaleX(-1)); + transform(scaleX(-1)) -.studyHover, .seriesHover - position: absolute - z-index: 10000 - top: $switchHeight - width: 400px - height: 500px +.switchHover background: black - opacity: 0.8 border-radius: 5px + opacity: 0 + overflow: hidden + position: absolute + top: 18px + transform(scale(0)) transition(all 0.3s ease) + z-index: 10000 + + .scrollArea + margin-right: -20px + min-height: 200px + max-height: 500px + overflow-y: scroll + width: calc(100% + 20px) .studyHover - left: -350px - width: 400px + width: 300px .seriesHover - left: 50px - width: 700px - - &.tiny - width: 0 - height: 0 - opacity: 0 + width: 711px .thumbnailEntry margin: 0 - width: 33% - display: inline-block +.quickSwitch.left, .quickSwitch.middle + .seriesHover .thumbnailEntry + float: right + .studyHover + left: 0 + transform-origin(0% 0%) + .seriesHover + right: 0 + transform-origin(100% 0%) + +.quickSwitch.right + .seriesHover .thumbnailEntry + float: left + .studyHover + right: 0 + transform-origin(100% 0%) + .seriesHover + left: 0 + transform-origin(0% 0%) + +// Responsive layout $switchSizeSmall = 35px + +@media screen and (max-width: 1024px) + .switchSection:hover .switchHover + transform(scale(0.5)) +@media screen and (min-width: 1025px) and (max-width: 1152px) + .switchSection:hover .switchHover + transform(scale(0.6)) +@media screen and (min-width: 1153px) and (max-width: 1280px) + .switchSection:hover .switchHover + transform(scale(0.7)) +@media screen and (min-width: 1281px) and (max-width: 1440px) + .switchSection:hover .switchHover + transform(scale(0.8)) +@media screen and (min-width: 1441px) and (max-width: 1600px) + .switchSection:hover .switchHover + transform(scale(0.9)) +@media screen and (min-width: 1601px) + .switchSection:hover .switchHover + transform(scale(1)) + @media screen and (max-width: 1600px) .quickSwitch + height: 45px &.left left: 'calc(50% - %s - 8px)' % $switchWrapperWidth &.right left: calc(50% + 8px) - height: 45px - div.switchSection + .switchSection + .switchHover + top: 8px .label font-size: 8px font-weight: 400 @@ -99,5 +150,5 @@ $switchSizeSmall = 35px border-radius: 7px .studySwitch, .seriesSwitch &, svg - width: $switchSizeSmall height: $switchSizeSmall + width: $switchSizeSmall