LT-275: Moving the selectTree component to measurements package
This commit is contained in:
Bruno Alves de Faria authored and Erik Ziegler committed
1 parent
dd9fa2b789
commit
b1eb68521a
16 files changed
+14
-66
No files matched your search
@@ -16,7 +16,3 @@ import './nonTargetLesionDialog/nonTargetLesionDialog.js';
|
||||
import './nonTargetResponseDialog/nonTargetResponseDialog.html';
|
||||
import './nonTargetResponseDialog/nonTargetResponseDialog.styl';
|
||||
import './nonTargetResponseDialog/nonTargetResponseDialog.js';
|
||||
|
||||
import './measureFlow/measureFlow.html';
|
||||
import './measureFlow/measureFlow.styl';
|
||||
import './measureFlow/measureFlow.js';
|
||||
@@ -1,28 +0,0 @@
|
||||
<template name="measureFlow">
|
||||
<div class="measure-flow {{#if this.treeColumns}}tree-columns{{/if}} {{instance.state.get}}" style="position:fixed; top:200px; left:400px">
|
||||
<button class="btn-add">Add label</button>
|
||||
{{#if eq instance.state.get 'selected'}}
|
||||
<div class="tree-leaf">
|
||||
<i class="icon-check"></i>
|
||||
<span>{{instance.value.label}}</span>
|
||||
{{#if instance.descriptionEdit.get}}
|
||||
<div class="description clearfix">
|
||||
<textarea
|
||||
class="pull-left"
|
||||
rows="1"
|
||||
style="{{#unless instance.description.get}}height:0{{/unless}}"
|
||||
>{{instance.description.get}}</textarea>
|
||||
</div>
|
||||
{{else}}
|
||||
{{#if instance.description.get}}
|
||||
<div class="descriptionText">{{instance.description.get}}</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
<div class="actions clearfix">
|
||||
<button class="pull-left btn-rename">Rename</button>
|
||||
<button class="pull-right btn-description">{{valueIf instance.description.get 'Edit' 'Add'}} description</button>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,218 +0,0 @@
|
||||
import { Template } from 'meteor/templating';
|
||||
import { Blaze } from 'meteor/blaze';
|
||||
import { ReactiveVar } from 'meteor/reactive-var';
|
||||
import { Tracker } from 'meteor/tracker';
|
||||
import { _ } from 'meteor/underscore';
|
||||
import { $ } from 'meteor/jquery';
|
||||
|
||||
Template.measureFlow.onCreated(() => {
|
||||
const instance = Template.instance();
|
||||
|
||||
instance.state = new ReactiveVar('closed');
|
||||
instance.description = new ReactiveVar('');
|
||||
instance.descriptionEdit = new ReactiveVar(false);
|
||||
|
||||
const items = [
|
||||
'Abdomen/Chest Wall',
|
||||
'Adrenal',
|
||||
'Bladder',
|
||||
'Bone',
|
||||
'Brain',
|
||||
'Breast',
|
||||
'Colon',
|
||||
'Esophagus',
|
||||
'Extremities',
|
||||
'Gallbladder',
|
||||
'Kidney',
|
||||
'Liver',
|
||||
'Lung',
|
||||
'Lymph Node',
|
||||
'Mediastinum/Hilum',
|
||||
'Muscle',
|
||||
'Neck',
|
||||
'Other Soft Tissue',
|
||||
'Ovary',
|
||||
'Pancreas',
|
||||
'Pelvis',
|
||||
'Peritoneum/Omentum',
|
||||
'Prostate',
|
||||
'Retroperitoneum',
|
||||
'Small Bowel',
|
||||
'Spleen',
|
||||
'Stomach',
|
||||
'Subcutaneous'
|
||||
];
|
||||
|
||||
instance.items = [];
|
||||
_.each(items, item => {
|
||||
instance.items.push({
|
||||
label: item,
|
||||
value: item
|
||||
});
|
||||
});
|
||||
|
||||
const commonItems = [
|
||||
'Abdomen/Chest Wall',
|
||||
'Lung',
|
||||
'Lymph Node',
|
||||
'Liver',
|
||||
'Mediastinum/Hilum',
|
||||
'Pelvis',
|
||||
'Peritoneum/Omentum',
|
||||
'Retroperitoneum'
|
||||
];
|
||||
|
||||
instance.commonItems = [];
|
||||
_.each(commonItems, item => {
|
||||
instance.commonItems.push({
|
||||
label: item,
|
||||
value: item
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Template.measureFlow.onRendered(() => {
|
||||
const instance = Template.instance();
|
||||
|
||||
// Make the measure flow bounded by the window borders
|
||||
instance.$('.measure-flow').bounded();
|
||||
});
|
||||
|
||||
Template.measureFlow.events({
|
||||
'click .measure-flow .btn-add, click .measure-flow .btn-rename'(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,
|
||||
commonItems: instance.commonItems,
|
||||
hideCommon: instance.data.hideCommon,
|
||||
label: 'Assign label',
|
||||
searchPlaceholder: 'Search labels',
|
||||
storageKey: 'measureLabelCommon',
|
||||
treeColumns: instance.data.treeColumns,
|
||||
position
|
||||
};
|
||||
|
||||
// Define in which element the selectTree will be rendered in
|
||||
const parentElement = instance.$('.measure-flow')[0];
|
||||
|
||||
// Render the selectTree element
|
||||
instance.selectTreeView = Blaze.renderWithData(Template.selectTree, data, parentElement);
|
||||
});
|
||||
},
|
||||
|
||||
'click .measure-flow .btn-description'(event, instance) {
|
||||
// Fade out the action buttons
|
||||
instance.$('.measure-flow .actions').addClass('fadeOut');
|
||||
|
||||
// Set the description edit mode
|
||||
instance.descriptionEdit.set(true);
|
||||
|
||||
// Wait for DOM re-rendering, resize and focus the description textarea
|
||||
Tracker.afterFlush(() => {
|
||||
const $textarea = instance.$('textarea');
|
||||
$textarea.trigger('input').focus();
|
||||
});
|
||||
},
|
||||
|
||||
'input textarea, change textarea'(event, instance) {
|
||||
const element = event.currentTarget;
|
||||
const $element = $(element);
|
||||
|
||||
// Resize the textarea based on its content length
|
||||
$element.css('max-height', 0);
|
||||
$element.height(element.scrollHeight);
|
||||
$element.css('max-height', '');
|
||||
|
||||
// Reposition the measure flow if needed
|
||||
const $measureFlow = instance.$('.measure-flow');
|
||||
$element.one('transitionend', () => $measureFlow.trigger('spatialChanged'));
|
||||
},
|
||||
|
||||
'keydown textarea'(event, instance) {
|
||||
// Unset the description edit mode if ENTER or ESC was pressed
|
||||
if (event.which === 13 || event.which === 27) {
|
||||
instance.$('.measure-flow .actions').removeClass('fadeOut');
|
||||
instance.descriptionEdit.set(false);
|
||||
}
|
||||
|
||||
// Keep the current description if ENTER was pressed
|
||||
if (event.which === 13) {
|
||||
instance.description.set($(event.currentTarget).val());
|
||||
}
|
||||
},
|
||||
|
||||
'blur textarea'(event, instance) {
|
||||
instance.$('.measure-flow .actions').removeClass('fadeOut');
|
||||
instance.descriptionEdit.set(false);
|
||||
instance.description.set($(event.currentTarget).val());
|
||||
},
|
||||
|
||||
'click .select-tree-common label'(event, instance) {
|
||||
// Set the common section clicked flag
|
||||
instance.commonClicked = true;
|
||||
},
|
||||
|
||||
'change .select-tree-root'(event, instance) {
|
||||
// Stop here if it's an inner input event
|
||||
if (event.target !== event.currentTarget) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Store the selectTree component value before it's removed from DOM
|
||||
const $treeRoot = $(event.currentTarget);
|
||||
instance.value = $treeRoot.data('component').value();
|
||||
},
|
||||
|
||||
'click .tree-leaf input'(event, instance) {
|
||||
const $target = $(event.currentTarget);
|
||||
const $label = $target.closest('label');
|
||||
const $treeRoot = $label.closest('.select-tree-root');
|
||||
const $container = $treeRoot.find('.tree-options:first');
|
||||
|
||||
// Check if the targe click was a label inside common section
|
||||
if (instance.commonClicked) {
|
||||
const labelTop = $label.position().top;
|
||||
const containerCenter = Math.round($container.height() / 2);
|
||||
const labelCenter = Math.round($label.height() / 2);
|
||||
|
||||
// Scroll the options container to make the target input visible
|
||||
$container.scrollTop(labelTop - containerCenter + labelCenter);
|
||||
}
|
||||
|
||||
// Change the measure flow state to selected
|
||||
instance.state.set('selected');
|
||||
|
||||
// Get the clicked label window offset
|
||||
const labelOffset = $label.offset();
|
||||
|
||||
// Wait for the DOM re-rendering
|
||||
Tracker.afterFlush(() => {
|
||||
// Get the measure flow div
|
||||
const $measureFlow = instance.$('.measure-flow');
|
||||
|
||||
// Subtract the label box shadow height from the label's position
|
||||
labelOffset.top -= 10;
|
||||
|
||||
// Reposition the measure flow based on the clicked label position
|
||||
$measureFlow.css(labelOffset);
|
||||
|
||||
// Resize the copied label with same width of the clicked one
|
||||
$measureFlow.children('.tree-leaf').width($label.outerWidth());
|
||||
});
|
||||
|
||||
// Wait the fade-out transition and remove the selectTree component
|
||||
$container.one('transitionend', event => Blaze.remove(instance.selectTreeView));
|
||||
}
|
||||
});
|
||||
@@ -1,188 +0,0 @@
|
||||
@import "{design}/app"
|
||||
|
||||
.measure-flow
|
||||
position: relative
|
||||
|
||||
&.open,
|
||||
&.selected
|
||||
|
||||
.btn-add
|
||||
opacity: 0
|
||||
|
||||
.btn-add
|
||||
theme('color', '$textColorActive')
|
||||
theme('background-color', '$activeColor')
|
||||
theme('border', '2px solid $uiBorderColor')
|
||||
border-radius: 14px
|
||||
cursor: pointer
|
||||
font-weight: bold
|
||||
height: 24px
|
||||
left: 0
|
||||
line-height: 24px
|
||||
opacity: 1
|
||||
position: absolute
|
||||
padding: 0 14px
|
||||
top: 0
|
||||
transition(opacity 0.3s ease)
|
||||
white-space: nowrap
|
||||
|
||||
// / {selector()}
|
||||
// color: $themes['tide']['uiYellow'] !important
|
||||
|
||||
.select-tree-root>.tree-content
|
||||
width: 213px
|
||||
|
||||
&>.tree-options
|
||||
position: relative
|
||||
z-index: 2
|
||||
|
||||
.tree-inputs
|
||||
position: relative
|
||||
|
||||
&>.tree-leaf
|
||||
position: relative
|
||||
|
||||
.icon-check
|
||||
theme('background-color', '$activeColor')
|
||||
animateZoomIn()
|
||||
left: -46px
|
||||
position: absolute
|
||||
top: 3px
|
||||
|
||||
span
|
||||
background: white
|
||||
font-weight: normal
|
||||
height: 46px
|
||||
line-height: 46px
|
||||
padding: 0 12px
|
||||
|
||||
input, span
|
||||
display: none
|
||||
|
||||
.actions
|
||||
margin-top: 16px
|
||||
opacity: 0
|
||||
|
||||
&:not(.fadeOut)
|
||||
animateFadeIn()
|
||||
animation-delay: 0.3s
|
||||
|
||||
&.fadeOut
|
||||
animateFadeOut()
|
||||
|
||||
button
|
||||
theme('border', '1px solid $uiBorderColor')
|
||||
theme('color', '$textPrimaryColor')
|
||||
background-color: transparent
|
||||
border-radius: 16px
|
||||
font-weight: normal
|
||||
height: 31px
|
||||
line-height: 31px
|
||||
padding: 0 12px
|
||||
text-align: center
|
||||
|
||||
.description
|
||||
margin-top: -10px
|
||||
margin-bottom: 26px
|
||||
|
||||
textarea
|
||||
background-color: white
|
||||
box-shadow: 0 10px white
|
||||
border: 0
|
||||
line-height: 20px
|
||||
outline: none
|
||||
overflow: hidden
|
||||
padding: 0 12px
|
||||
resize: none
|
||||
transition(height 0.3s ease)
|
||||
width: 100%
|
||||
|
||||
.descriptionText
|
||||
background-color: white
|
||||
box-shadow: 0 10px white
|
||||
line-height: 20px
|
||||
margin-bottom: 26px
|
||||
margin-top: -10px
|
||||
padding: 0 12px
|
||||
|
||||
&.selected>.tree-leaf
|
||||
|
||||
span
|
||||
display: block
|
||||
|
||||
&.tree-columns
|
||||
|
||||
.select-tree-root
|
||||
|
||||
&.interacted .select-tree-common .content
|
||||
animation-name: none
|
||||
|
||||
&.selected .select-tree-common .content
|
||||
animation-name: selectTreeCommonCloseLeft
|
||||
|
||||
.tree-search
|
||||
input, i
|
||||
display: none
|
||||
|
||||
.select-tree-common
|
||||
padding-left: 0
|
||||
padding-right: 6px
|
||||
right: auto
|
||||
left: 0
|
||||
width: 33.333333333333%
|
||||
|
||||
&>.tree-content
|
||||
transform-origin(0% 50%)
|
||||
width: 426px
|
||||
|
||||
.select-tree-common .content
|
||||
right: -100%
|
||||
|
||||
&.started .select-tree-common .content
|
||||
right: 6px
|
||||
|
||||
&.interacted .select-tree-common .content
|
||||
animation-name: selectTreeCommonCloseRight
|
||||
|
||||
.tree-inputs>label
|
||||
float: left
|
||||
width: 50%
|
||||
|
||||
@keyframes selectTreeCommonCloseRight {
|
||||
from {
|
||||
height: 37px
|
||||
display: table
|
||||
right: 6px
|
||||
opacity: 1
|
||||
visibility: visible
|
||||
}
|
||||
to {
|
||||
height: 100%
|
||||
right: -100%
|
||||
opacity: 0
|
||||
visibility: hidden
|
||||
width: calc(100% - 6px)
|
||||
}
|
||||
}
|
||||
|
||||
.icon-check
|
||||
background-color: white
|
||||
border-radius: 20px
|
||||
display: block
|
||||
height: 40px
|
||||
overflow: hidden
|
||||
position: relative
|
||||
width: 40px
|
||||
|
||||
&:before
|
||||
border: 2px solid black
|
||||
border-left-width: 0
|
||||
border-top-width: 0
|
||||
content: ''
|
||||
display: block
|
||||
height: 18px
|
||||
left: 15px
|
||||
position: absolute
|
||||
top: 9px
|
||||
transform(rotate(45deg))
|
||||
width: 9px
|
||||
Reference in new issue
Block a user