Updating design of OHIF Viewer using (OHIF-49)

2016-07-22 14:26:29 +02:00
1 parent f53ee8e030
commit a6c45ddd27
@@ -0,0 +1,13 @@
+<template name="flexboxLayout">
+    <div class="viewerSection">
+        <div class="sidebarMenu sidebar-left {{#if leftSidebarOpen}}sidebar-open{{/if}}">
+            {{> studyBrowser (clone this)}}
+        </div>
+        <div class="mainContent {{#if leftSidebarOpen}}sidebar-left-open{{/if}} {{#if rightSidebarOpen}}sidebar-right-open{{/if}}">
+            {{> viewerMain (clone this)}}
+        </div>
+        <div class="sidebarMenu sidebar-right {{#if rightSidebarOpen}}sidebar-open{{/if}}">
+            {{> protocolEditor (clone this)}}
+        </div>
+    </div>
+</template>
@@ -0,0 +1,19 @@
+Template.flexboxLayout.events({
+    'transitionend .sidebarMenu'(event, instance) {
+        handleResize();
+    },
+    'transitionend .sidebar-option'(event, instance) {
+        // Prevent this event from bubbling
+        event.stopPropagation();
+    }
+});
+
+Template.flexboxLayout.helpers({
+    leftSidebarOpen() {
+        return Template.instance().data.state.get('leftSidebar');
+    },
+
+    rightSidebarOpen() {
+        return Template.instance().data.state.get('rightSidebar');
+    }
+});
@@ -0,0 +1,80 @@
+@import "{design}/app"
+
+$lesionsSidebarMenuWidth = 450px
+
+.viewerSection
+  display: flex
+  flex: 1
+  flex-flow: row nowrap
+  align-items: stretch
+  height: calc(100% - 78px);
+  width: 100%
+
+  .sidebarMenu
+    height: 100%
+    // required transformation to make inner fixed elements relative to this one
+    transform(scale(1))
+    transition($sidebarTransition)
+
+    .sidebar-option
+      height: 100%
+      position: fixed
+      transform(translateX(100%))
+      transition($sidebarTransition)
+      width: 100%
+
+      &.active
+        transform(translateX(0%))
+
+  .sidebar-left
+    max-width: $studiesSidebarMenuWidth
+    order: 1
+    flex: 1
+    margin-left: - $studiesSidebarMenuWidth
+    border-right: $uiBorderThickness $uiBorderColor solid
+
+    &.sidebar-open
+      margin-left: 0
+
+  .mainContent
+    flex: 1
+    order: 2
+    width: 100%
+    height: 100%
+    overflow: hidden
+    transition($sidebarTransition)
+
+  .sidebar-right
+    flex: 1
+    margin-left: -6px
+    margin-right: - $lesionsSidebarMenuWidth
+    max-width: $lesionsSidebarMenuWidth
+    order: 3
+    padding-left: 6px
+    position: relative
+
+    &[data-timepoints="3"]
+      margin-right: - ($lesionsSidebarMenuWidth + 135.5px)
+      max-width: $lesionsSidebarMenuWidth + 135.5px
+
+    &[data-timepoints="4"]
+      margin-right: - ($lesionsSidebarMenuWidth + 270px)
+      max-width: $lesionsSidebarMenuWidth + 270px
+
+    &:before
+      background-color: $uiBorderColor
+      content: ''
+      display: block
+      height: 100%
+      left: 5px
+      position: absolute
+      top: 0
+      width: $uiBorderThickness
+
+    &.sidebar-open
+      margin-right: 0
+
+  .studiesListedChanger
+    padding: 20px 10px
+    text-align: center
+    border-bottom: $uiBorderThickness $uiBorderColor solid