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

2016-06-16 08:57:04 -03:00 · 2016-06-16 08:57:04 -03:00 · d8181a1a5e
commit d8181a1a5e
parent e3fc56c0f4
6 changed files with 105 additions and 56 deletions
--- a/Packages/design/styles/responsive.styl
+++ b/Packages/design/styles/responsive.styl
@ -1,23 +1,23 @@
@import "./spacings"


-// MIN WIDTH 1601
+// MIN WIDTH 1600
 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))

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

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

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

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

-@media screen and (max-width: 1024px)
+@media screen and (max-width: 1023px)
  generateSpacings('r', ($spacer-x * 0.4), ($spacer-y * 0.4))
--- a/Packages/design/styles/variables.styl
+++ b/Packages/design/styles/variables.styl
@ -7,6 +7,7 @@ $uiBorderColorDark = #3C5D80
 $darkUiColor = #16202B
 $primaryBackgroundColor = #000000
 $boxBackgroundColor = #3E5975
+$boxBackgroundColorDark = #22374D

 // Text Colors
 $textPrimaryColor = #ffffff
--- a/Packages/lesiontracker/client/components/lesionTrackerViewportOverlay/lesionTrackerViewportOverlay.styl
+++ b/Packages/lesiontracker/client/components/lesionTrackerViewportOverlay/lesionTrackerViewportOverlay.styl
@ -2,7 +2,7 @@

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

--- a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.html
+++ b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.html
@ -1,6 +1,6 @@
 <template name="studySeriesQuickSwitch">
-    <div class="quickSwitch {{side}}">
-        <div class="switchSection {{#if equals side "left"}}pull-right{{/if}} js-show-studies">
+    <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">
@ -9,27 +9,28 @@
                </div>
            </div>
        </div>
-        <div class="switchSection {{#if equals side "left"}}pull-right{{/if}}">
-            <div class="label">Series</div>
-            <div class="seriesSwitch {{#if equals side "left"}}mirror-x{{/if}} js-show-series">
-                <svg viewBox="0 0 53 53">
-                    <rect fill="#22364C" x="0" y="38" width="15" height="15" rx="3"></rect>
-                    <rect fill="#22364C" x="19" y="38" width="15" height="15" rx="3"></rect>
-                    <rect fill="#22364C" x="38" y="19" width="15" height="15" rx="3"></rect>
-                    <rect fill="#22364C" x="19" y="19" width="15" height="15" rx="3"></rect>
-                    <rect fill="#40D9B8" x="0" y="19" width="15" height="15" rx="3"></rect>
-                    <rect fill="#22364C" x="38" y="0" width="15" height="15" rx="3"></rect>
-                    <rect fill="#22364C" x="19" y="0" width="15" height="15" rx="3"></rect>
-                    <rect fill="#22364C" x="0" y="0" width="15" height="15" rx="3"></rect>
-                </svg>
-            </div>
-            <div class="switchHover seriesHover clearfix">
-                <div class="scrollArea">
-                    {{#each thumbnail in (thumbnails currentStudy)}}
-                        {{>thumbnailEntry thumbnail=thumbnail viewportIndex=viewportIndex}}
+        <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>
+                <div class="switchHover seriesHover clearfix">
+                    <div class="scrollArea">
+                        {{#each thumbnail in thumbnailsList}}
+                            {{>thumbnailEntry thumbnail=thumbnail viewportIndex=viewportIndex}}
+                        {{/each}}
+                    </div>
+                </div>
+            {{/let}}
        </div>
    </div>
 </template>
--- a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl
+++ b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl
@ -1,9 +1,10 @@
@import "{design}/app"

-$switchSize = 50px
+$switchSize = 55px
 $switchTop = 5px
 $switchHeight = 70px
 $switchWrapperWidth = 140px
+$seriesSpacing = 2px

 .quickSwitch
  height: $switchHeight
@ -38,11 +39,12 @@ $switchWrapperWidth = 140px
      display: block
      font-size: 12px
      font-weight: 300
+      padding: 0
      text-align: center
      text-transform: uppercase

    .studySwitch, .seriesSwitch
-      transition(all 0.3s ease)
+      transition(opacity 0.3s ease)

    .studySwitch
      background-color: $darkUiColor
@ -55,15 +57,26 @@ $switchWrapperWidth = 140px

    .seriesSwitch
      display: block
-      height: $switchSize
-      width: $switchSize
+      height: $switchSize + $seriesSpacing
+      width: $switchSize + $seriesSpacing

-      svg
-        height: $switchSize
-        width: $switchSize
+      .seriesItem
+        background-color: $boxBackgroundColorDark
+        border-radius: 3px
+        height: 15px
+        margin: $seriesSpacing
+        width: 15px

-.mirror-x
-  transform(scaleX(-1))
+        &.count
+          background-color: transparent
+          color: $textPrimaryColor
+          font-size: 12px
+          font-weight: 500
+          line-height: 17px
+          text-align: center
+
+        &.active
+          background-color: $activeColor

 .switchHover
  background: black
@ -113,28 +126,32 @@ $switchWrapperWidth = 140px
    transform-origin(0% 0%)

 // Responsive layout
-$switchSizeSmall = 35px
+$switchSmallSize = 35px
+$seriesSmallSpacing = 1px

-@media screen and (max-width: 1024px)
+@media screen and (max-width: 1023px)
  .switchSection:hover .seriesHover
    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
-    transform(scale(0.6))
-@media screen and (min-width: 1153px) and (max-width: 1280px)
+    transform(scale(0.63))
+@media screen and (min-width: 1152px) and (max-width: 1279px)
  .switchSection:hover .seriesHover
-    transform(scale(0.7))
-@media screen and (min-width: 1281px) and (max-width: 1440px)
+    transform(scale(0.72))
+@media screen and (min-width: 1280px) and (max-width: 1359px)
  .switchSection:hover .seriesHover
-    transform(scale(0.8))
-@media screen and (min-width: 1441px) and (max-width: 1600px)
+    transform(scale(0.81))
+@media screen and (min-width: 1360px) and (max-width: 1439px)
  .switchSection:hover .seriesHover
-    transform(scale(0.9))
-@media screen and (min-width: 1601px)
+    transform(scale(0.86))
+@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
    transform(scale(1))

-@media screen and (max-width: 1600px)
+@media screen and (max-width: 1599px)
  .quickSwitch
    height: 45px
    &.left
@ -150,7 +167,17 @@ $switchSizeSmall = 35px
        padding: 0
      .studySwitch
        border-radius: 7px
-      .studySwitch, .seriesSwitch
-        &, svg
-          height: $switchSizeSmall
-          width: $switchSizeSmall
+        height: $switchSmallSize
+        width: $switchSmallSize
+      .seriesSwitch
+        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;
--- a/Packages/viewerbase/lib/helpers/logical.js
+++ b/Packages/viewerbase/lib/helpers/logical.js
@ -10,10 +10,30 @@ Template.registerHelper('bool', function(value) {
    return !!value;
 });

-Template.registerHelper('equals', function(a, b) {
+Template.registerHelper('eq', function(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) {
    return !value;
 });
@ -32,4 +52,4 @@ Template.registerHelper('or', function() {
        return value && (result = true);
    });
    return result;
-});
+});