Lesion Tracker Redesign so far

2016-07-22 11:00:16 +02:00
1 parent b247e89d8b
commit a9a4f3f82b
@@ -0,0 +1,29 @@
+<template name="studySeriesQuickSwitch">
+    <div class="quickSwitch {{side}}">
+        <div class="switchSection {{#if equals side "left"}}pull-right{{/if}} js-show-studies">
+            <div class="label">Study</div>
+            <div class="studySwitch">
+            </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>
+
+        <div class="studyHover js-hide-studies {{ #unless studiesOpen}}hidden{{/unless}}">
+        </div>
+        <div class="seriesHover js-hide-series {{ #unless seriesOpen }}tiny{{/unless}}">
+        </div>
+    </div>
+</template>
@@ -0,0 +1,34 @@
+Template.studySeriesQuickSwitch.onCreated(function studySeriesQuickSwitchOnCreated() {
+    const instance = this;
+
+    instance.seriesOpen = new ReactiveVar(false);
+    instance.studiesOpen = new ReactiveVar(false);
+});
+
+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();
+    }
+});
@@ -0,0 +1,68 @@
+@import "{design}/app"
+
+$switchSize = 50px
+
+.quickSwitch
+  position: absolute
+  width: 140px
+  height: 80px
+  top: 5px
+
+  div.switchSection
+    float: left
+    display: inline-block
+    margin: 0 5px
+
+    .label
+      display: block
+      text-transform: uppercase
+      text-align: center
+      font-size: 12px
+      font-weight: 100
+      color: $textSecondaryColor
+
+    .studySwitch
+      display: block
+      margin: 0 auto
+      width: $switchSize
+      height: $switchSize
+      border-radius: 11px
+      background-color: $darkUiColor
+      border: solid 1px $activeColor
+
+    .seriesSwitch
+      display: block
+      width: $switchSize
+      height: $switchSize
+
+      svg
+        width: $switchSize
+        height: $switchSize
+
+.mirror-x
+  transform(scaleX(-1));
+
+.studyHover
+  position: absolute
+  z-index: 10000
+  top: 70px
+  left: -350px
+  width: 400px
+  height: 500px
+  background: red
+  transition(all 0.3s ease)
+
+.seriesHover
+  position: absolute
+  z-index: 10000
+  top: 70px
+  left: 50px
+  width: 700px
+  height: 900px
+  background: blue
+  transition(all 0.3s ease)
+
+  &.tiny
+    width: 0
+    height: 0
+    opacity: 0