Improving new study browser and moving studies services to ohif:studies

Packages/ohif-core/client/components/index.js

@@ -3,3 +3,4 @@ import './bootstrap';
 import './playground/playground.html';
 import './playground/playground.styl';
 import './playground/playground.js';
+import './scrollArea';

Packages/ohif-core/client/components/scrollArea/index.js

@@ -0,0 +1,2 @@
+import './scrollArea.html';
+import './scrollArea.js';

Packages/ohif-core/client/components/scrollArea/scrollArea.html

@@ -0,0 +1,7 @@
+<template name="scrollArea">
+    <div class="scroll-area {{this.class}}">
+        <div class="scrollable {{#if instance.config.scrollX}}scroll-x{{/if}} {{#if instance.config.scrollY}}scroll-y{{/if}}">
+            {{>Template.contentBlock}}
+        </div>
+    </div>
+</template>

Packages/ohif-core/client/components/scrollArea/scrollArea.js

@@ -0,0 +1,29 @@
+import { Template } from 'meteor/templating';
+import { _ } from 'meteor/underscore';
+
+Template.scrollArea.onCreated(() => {
+    const instance = Template.instance();
+    const { data } = instance;
+    const defaultConfig = {
+        hideScrollbar: true,
+        scrollY: true,
+        scrollX: false
+    };
+
+    instance.config = _.defaults(data || {}, defaultConfig);
+});
+
+Template.scrollArea.onRendered(() => {
+    const instance = Template.instance();
+    const { config } = instance;
+    if (config.hideScrollbar) {
+        const $scrollable = instance.$('.scrollable').first();
+        const scrollable = $scrollable[0];
+        const x = config.scrollX ? 1 : 0;
+        const y = config.scrollY ? 1 : 0;
+        $scrollable.css({
+            right: 0 - (scrollable.offsetWidth - scrollable.clientWidth) * y,
+            bottom: 0 - (scrollable.offsetHeight - scrollable.clientHeight) * x
+        });
+    }
+});

Packages/ohif-core/client/ui/dimensional/dimensional.js

@@ -30,16 +30,19 @@ $.fn.tempShow = function(callback) {
 $.fn.adjustMax = function(dimension) {
     const $element = $(this);
     $element.tempShow(() => {
-        // Add a class to remove the max restriction
-        const maxClass = `no-max-${dimension}`;
-        $element.addClass(maxClass);
+        const maxProperty = `max-${dimension}`;
+
+        // Remove the current max restriction
+        $element.each((i, e) => e.style.setProperty(maxProperty, 'none', 'important'));
 
         // Get the dimension function to obtain the outer dimension
         const dimensionFn = 'outer' + dimension.charAt(0).toUpperCase() + dimension.slice(1);
         const value = $element[dimensionFn]();
 
-        // Remove the max restriction class and set the new max
-        const maxProperty = `max-${dimension}`;
-        $element.removeClass(maxClass).css(maxProperty, value);
+        // Remove the property (needed for IE)
+        $element.each((i, e) => e.style.removeProperty(maxProperty));
+
+        // Set the new max restriction
+        $element.css(maxProperty, value);
     });
 };

Packages/ohif-core/client/ui/dimensional/dimensional.styl

@@ -1,8 +1,2 @@
 body *.visible
     display: block !important
-
-body *.no-max-height:not(.bypassNot)
-    max-height: none !important
-
-body *.no-max-width:not(.bypassNot)
-    max-width: none !important