-
- {{>selectTree
- key='label'
- items=instance.items
- label='Assign label'
- searchPlaceholder='Search labels'
- storageKey='measureLabelCommon'
- }}
+
+
diff --git a/Packages/lesiontracker/client/components/measureFlow/measureFlow.js b/Packages/lesiontracker/client/components/measureFlow/measureFlow.js
index 137d1b9c8..e1ece2874 100644
--- 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);
+ }
}
});
diff --git a/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl b/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl
index 62bffeb0f..2fa62256e 100644
--- 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
diff --git a/Packages/ohif-core/client/components/bootstrap/input/selectTree.js b/Packages/ohif-core/client/components/bootstrap/input/selectTree.js
index e2bf54120..489ac247d 100644
--- 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;
diff --git a/Packages/ohif-core/client/components/index.js b/Packages/ohif-core/client/components/index.js
index 842a72a5b..afdd8b252 100644
--- 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';
diff --git a/Packages/ohif-core/client/components/playground/playground.html b/Packages/ohif-core/client/components/playground/playground.html
index c4e6b07e6..07b5941a6 100644
--- a/Packages/ohif-core/client/components/playground/playground.html
+++ b/Packages/ohif-core/client/components/playground/playground.html
@@ -1,14 +1,16 @@
-