LT-275: Making the measure flow respect the window bounds and fixing scrolling when selecting by common section

2016-08-12 08:02:58 -03:00 · 2016-08-12 08:02:58 -03:00 · 3827fb0e7b
commit 3827fb0e7b
parent 033eca0dbd
10 changed files with 116 additions and 31 deletions
--- a/LesionTracker/client/head.html
+++ b/LesionTracker/client/head.html
@ -12,6 +12,9 @@
    <meta name="HandheldFriendly" content="True">
    <meta name="apple-mobile-web-app-capable" content="yes">

+    <!-- Make SVG work on IE -->
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Sanchez:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
 </head>
--- a/Packages/design/styles/components/selectTree.styl
+++ b/Packages/design/styles/components/selectTree.styl
@ -13,8 +13,8 @@ $gray6 = #303030
  .tree-content
    background-color: white
    position: relative
+    transition(transform 0.3s ease\, background-color 0.3s ease\, border-color 0.3s ease\, border-radius 0.3s ease)

-    &
    .tree-search
    a.tree-back
    .tree-breadcrumb span
@ -146,6 +146,7 @@ $gray6 = #303030

      &.active
        box-shadow: 0 0 0 200px white, inset 0 0 0 200px white
+        position: fixed
        transition(box-shadow 0.3s ease)
        z-index: 0

@ -192,7 +193,6 @@ $gray6 = #303030
  &>.tree-content
    transform(scale(0))
    transform-origin(100% 50%)
-    transition(all 0.3s ease)

  .select-tree-common
    overflow: hidden
--- a/Packages/lesiontracker/client/components/measureFlow/measureFlow.html
+++ b/Packages/lesiontracker/client/components/measureFlow/measureFlow.html
@ -1,12 +1,5 @@
 <template name="measureFlow">
-    <div class="measure-flow">
-        <button>Add label</button>
-        {{>selectTree
-            key='label'
-            items=instance.items
-            label='Assign label'
-            searchPlaceholder='Search labels'
-            storageKey='measureLabelCommon'
-        }}
+    <div class="measure-flow {{instance.state.get}}" style="position:fixed; top:200px; left:400px">
+        <button class="btn-add">Add label</button>
    </div>
 </template>
--- a/Packages/lesiontracker/client/components/measureFlow/measureFlow.js
+++ b/Packages/lesiontracker/client/components/measureFlow/measureFlow.js
@ -1,6 +1,15 @@
+import { OHIF } from 'meteor/ohif:core';
+import { Template } from 'meteor/templating';
+import { Blaze } from 'meteor/blaze';
+import { ReactiveVar } from 'meteor/reactive-var';
+import { _ } from 'meteor/underscore';
+import { $ } from 'meteor/jquery';
+
 Template.measureFlow.onCreated(() => {
    const instance = Template.instance();

+    instance.state = new ReactiveVar('closed');
+
    const items = [
        'Adrenal',
        'Bladder',
@ -40,11 +49,46 @@ Template.measureFlow.onCreated(() => {
 });

 Template.measureFlow.events({
+    'click .measure-flow .btn-add'(event, instance) {
+        // Set the open state for the component
+        instance.state.set('open');
+
+        // Wait template rerender before rendering the selectTree
+        Tracker.afterFlush(() => {
+            // Get the click position
+            const position = {
+                left: event.clientX,
+                top: event.clientY,
+            };
+
+            // Define the data for selectTreeComponent
+            const data = {
+                key: 'label',
+                items: instance.items,
+                label: 'Assign label',
+                searchPlaceholder: 'Search labels',
+                storageKey: 'measureLabelCommon',
+                position
+            };
+
+            // Define in which element the selectTree will be rendered in
+            const parentElement = instance.$('.measure-flow')[0];
+
+            // Render the selectTree element
+            Blaze.renderWithData(Template.selectTree, data, parentElement);
+        });
+    },
+    'click .select-tree-common label'(event, instance) {
+        instance.commonClicked = true;
+    },
    'click .tree-leaf input'(event, instance) {
-        console.warn('>>>>event', event);
        const $label = $(event.currentTarget).closest('label');
        const $container = $label.closest('.select-tree-root').find('.tree-options:first');
-        const top = $label.position().top;
-        $container.scrollTop(top);
+        if (instance.commonClicked) {
+            const labelTop = $label.position().top;
+            const containerCenter = Math.round($container.height() / 2);
+            const labelCenter = Math.round($label.height() / 2);
+            $container.scrollTop(labelTop - containerCenter + labelCenter);
+        }
    }
 });
--- a/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl
+++ b/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl
@ -1,5 +1,23 @@
+@import "{design}/app"
+
 .measure-flow

+  &.open
+
+    .btn-add
+      display: none
+
+  .btn-add
+    background-color: $activeColor
+    border: 2px solid $uiBorderColor
+    border-radius: 14px
+    color: $textColorActive
+    cursor: pointer
+    font-weight: bold
+    height: 24px
+    line-height: 24px
+    padding: 0 14px
+
  .select-tree-root>.tree-content>.tree-options
    margin-right: -20px
    max-height: 250px
--- a/Packages/ohif-core/client/components/bootstrap/input/selectTree.js
+++ b/Packages/ohif-core/client/components/bootstrap/input/selectTree.js
@ -27,8 +27,26 @@ Template.selectTree.onRendered(() => {
    // Set the margin to display the common section
    $treeRoot.children('.tree-content').css('margin-right', $treeRoot.width());

+    // Make the component respect the window boundaries
+    $treeRoot.bounded();
+
+    // Check if the component will be rendered on a specific position
+    const position = instance.data.position;
+    if (position) {
+        // Get the dimensions and move it with the given position as its center
+        const width = $treeRoot.outerWidth();
+        const height = $treeRoot.outerHeight();
+        position.left -= Math.round(width / 2);
+        position.top -= Math.round(height / 2);
+
+        // Change the component's position and trigger the bounded event
+        $treeRoot.css(_.extend({}, position, {
+            position: 'fixed'
+        })).trigger('spatialChanged');
+    }
+
    // Start the component transitions
-    $treeRoot.addClass('started');
+    Meteor.defer(() => $treeRoot.addClass('started'));

    // Update the component's viewport height
    instance.updateHeight = searchTerm => {
@ -126,7 +144,7 @@ Template.selectTree.events({
        component.value(eventComponent.value());

        // Unset the active leaf
-        rootInstance.$('label').removeClass('active');
+        rootInstance.$('label').removeClass('active').css('width', '');

        // Unset the selected state
        instance.setSelected(false);
@ -135,7 +153,7 @@ Template.selectTree.events({
        const isLeaf = $label.hasClass('tree-leaf');
        if (isLeaf) {
            // Change the active item
-            $label.addClass('active');
+            $label.css('width', $label.outerWidth()).addClass('active');

            // Ckeck if there's a storageKey defined
            const storageKey = instance.data.storageKey;
--- a/Packages/ohif-core/client/components/index.js
+++ b/Packages/ohif-core/client/components/index.js
@ -1,4 +1,5 @@
 import './base';
 import './bootstrap';
 import './playground/playground.html';
+import './playground/playground.styl';
 import './playground/playground.js';
--- a/Packages/ohif-core/client/components/playground/playground.html
+++ b/Packages/ohif-core/client/components/playground/playground.html
@ -1,14 +1,16 @@
 <template name="componentPlayground">
-<!--
-    <div class="p-a-3">
-        {{>selectTree
-            key='label'
-            items=instance.items
-            label='Assign label'
-            searchPlaceholder='Search labels'
-            storageKey='measureLabelCommon'
-        }}
+    <div class="component-playground">
+        {{>measureFlow}}
+        <!--
+            <div class="p-a-3">
+                {{>selectTree
+                    key='label'
+                    items=instance.items
+                    label='Assign label'
+                    searchPlaceholder='Search labels'
+                    storageKey='measureLabelCommon'
+                }}
+            </div>
+        -->
    </div>
-->
-{{>measureFlow}}
 </template>
--- a/Packages/ohif-core/client/components/playground/playground.styl
+++ b/Packages/ohif-core/client/components/playground/playground.styl
@ -0,0 +1,2 @@
+.component-playground
+  height: 100vh
--- a/Packages/ohif-core/client/ui/bounded/bounded.js
+++ b/Packages/ohif-core/client/ui/bounded/bounded.js
@ -1,3 +1,5 @@
+import { OHIF } from 'meteor/ohif:core';
+
 // Allow attaching to jQuery selectors
 $.fn.bounded = function(options) {
    _.each(this, element => {
@ -63,7 +65,7 @@ class Bounded {
        this.$element.removeClass('bounded');
    }

-    spatialInfo(element) {
+    static spatialInfo(element) {
        // Create the result object
        const result = {};

@ -105,8 +107,8 @@ class Bounded {
    defineEventHandlers() {
        this.spatialChangedHandler = event => {
            // Get the spatial information for element and its bounding element
-            const elementInfo = this.spatialInfo(this.element);
-            const boundingInfo = this.spatialInfo(this.boundingElement);
+            const elementInfo = Bounded.spatialInfo(this.element);
+            const boundingInfo = Bounded.spatialInfo(this.boundingElement);

            // Fix element's x positioning and width
            if (this.allowResizing && elementInfo.width > boundingInfo.width) {
@ -143,3 +145,5 @@ class Bounded {
    }

 }
+
+OHIF.Bounded = Bounded;