Work on refactoring measurements out of Lesion Tracker package
- Removed AssociatedStudies Collection - Measurement API is generated from configuration files - Data exchange methods are defined in configuration
This commit is contained in:
Erik Ziegler committed
1 parent
c511edd419
commit
ab4d4c9008
537 files changed
+5122
-3545
No files matched your search
@@ -0,0 +1,42 @@
|
||||
<template name="app">
|
||||
<div class="topBar noselect {{#if onStudyList}}studyList{{/if}}">
|
||||
<div class="clearfix p-x-1 p-t-1">
|
||||
<a target='_blank'
|
||||
class="brandSection pull-left"
|
||||
href="http://ohif.org">
|
||||
<svg class="logoImage">
|
||||
<use xlink:href="/packages/ohif_viewerbase/assets/icons.svg#icon-ohif-logo"></use>
|
||||
</svg>
|
||||
<div class="logoText">
|
||||
Open Health Imaging Foundation
|
||||
</div>
|
||||
</a>
|
||||
{{ #if studyListToggleText }}
|
||||
<a class="btn studyListLinkSection pull-left m-x-1 p-x-2 p-y-0 js-toggle-studyList">
|
||||
{{studyListToggleText}}
|
||||
</a>
|
||||
{{ /if }}
|
||||
<div class="userAccountSection pull-right">
|
||||
{{>userAccountMenu}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ >timeoutCountdownDialog }}
|
||||
<div id="studylistTabs" class="tab-content">
|
||||
<div class="tab-pane active" id="studylistTab">
|
||||
<div class="studylistContainer">
|
||||
{{> studylistResult }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane" id="viewerTab">
|
||||
</div>
|
||||
</div>
|
||||
{{ >associationModal }}
|
||||
{{ >optionsModal }}
|
||||
{{ >serverInformationModal }}
|
||||
{{ >confirmRemoveTimepointAssociation }}
|
||||
{{ >lastLoginModal }}
|
||||
{{ >studyContextMenu }}
|
||||
{{ >progressDialog }}
|
||||
{{ >viewSeriesDetailsModal }}
|
||||
</template>
|
||||
@@ -0,0 +1,46 @@
|
||||
const studylistContentId = 'studylistTab';
|
||||
const viewerContentId = 'viewerTab';
|
||||
|
||||
// Define the ViewerData global object
|
||||
// If there is currently any Session data for this object,
|
||||
// use this to repopulate the variable
|
||||
Template.app.onCreated(() => {
|
||||
ViewerData = Session.get('ViewerData') || {};
|
||||
});
|
||||
|
||||
Template.app.events({
|
||||
'click .js-toggle-studyList'() {
|
||||
const contentId = Session.get('activeContentId');
|
||||
|
||||
if (contentId !== studylistContentId) {
|
||||
switchToTab(studylistContentId);
|
||||
} else {
|
||||
switchToTab(viewerContentId);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Template.app.helpers({
|
||||
studyListToggleText() {
|
||||
const contentId = Session.get('activeContentId');
|
||||
|
||||
// If the Viewer has not been opened yet, 'Back to viewer' should
|
||||
// not be displayed
|
||||
const viewerContentExists = !!Object.keys(ViewerData).length;
|
||||
if (!viewerContentExists) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (contentId === studylistContentId) {
|
||||
return 'Back to viewer';
|
||||
} else if (contentId === viewerContentId) {
|
||||
return 'Study list';
|
||||
}
|
||||
},
|
||||
|
||||
onStudyList() {
|
||||
return (Session.get('activeContentId') === 'studylistTab');
|
||||
}
|
||||
});
|
||||
|
||||
Session.set('defaultSignInMessage', 'Tumor tracking in your browser.');
|
||||
@@ -0,0 +1,79 @@
|
||||
@import "{design}/app"
|
||||
|
||||
$expandedHeight = 160px
|
||||
|
||||
.logoImage
|
||||
display: inline-block
|
||||
height: 100%
|
||||
float: left
|
||||
|
||||
.topBar
|
||||
height: $topBarHeight
|
||||
theme('color', '$textPrimaryColor')
|
||||
theme('background-color', '$primaryBackgroundColor')
|
||||
transition(all 0.5s ease)
|
||||
|
||||
.brandSection
|
||||
height: 30px
|
||||
display: inline-block
|
||||
text-decoration: none
|
||||
|
||||
.logoImage
|
||||
margin: 0 8px
|
||||
width: 30px
|
||||
|
||||
.logoText
|
||||
display: inline-block
|
||||
font-family: $logoFontFamily
|
||||
font-weight: $logoFontWeight
|
||||
theme('color', '$textPrimaryColor')
|
||||
line-height: 30px
|
||||
|
||||
.studyListLinkSection
|
||||
theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
|
||||
|
||||
.btn
|
||||
theme('color', '$textSecondaryColor')
|
||||
cursor: pointer
|
||||
font-size: 13px
|
||||
font-weight: 500
|
||||
line-height: 26px
|
||||
margin-top: 3px
|
||||
|
||||
&:hover
|
||||
theme('color', '$hoverColor')
|
||||
|
||||
&:active
|
||||
theme('color', '$activeColor')
|
||||
|
||||
&.studyList
|
||||
background-color: rgba(21, 25, 30, 0.7)
|
||||
height: $expandedHeight
|
||||
|
||||
.brandSection
|
||||
height: 100%
|
||||
width: 80%
|
||||
padding-left: 50px
|
||||
line-height: $expandedHeight
|
||||
|
||||
.logoImage
|
||||
width: 50px
|
||||
margin: 0 20px
|
||||
|
||||
.logoText
|
||||
font-size: 30px
|
||||
|
||||
.studyListLinkSection
|
||||
position: absolute
|
||||
border: none
|
||||
top: 5px
|
||||
left: 5px
|
||||
|
||||
#studylistTabs
|
||||
height: "calc(100% - %s)" % $topBarHeight
|
||||
|
||||
.tab-pane
|
||||
.viewerContainer
|
||||
.loadingTextDiv
|
||||
theme('color', '$textSecondaryColor')
|
||||
font-size: 30px
|
||||
@@ -0,0 +1,41 @@
|
||||
<template name="toolbarSection">
|
||||
<div class="toolbarSection noselect p-x-2">
|
||||
<div class="clearfix">
|
||||
<div class="pull-left m-t-1">
|
||||
{{>roundedButtonGroup leftSidebarToggleButtonData}}
|
||||
</div>
|
||||
|
||||
{{>toolbarSectionTools toolbarButtons=toolbarButtons extraToolbarButtons=extraToolbarButtons}}
|
||||
|
||||
{{#if splitView}}
|
||||
{{>studySeriesQuickSwitch (clone this side="right" viewportIndex=1)}}
|
||||
{{>studySeriesQuickSwitch (clone this side="left" viewportIndex=0)}}
|
||||
{{else}}
|
||||
{{>studySeriesQuickSwitch (clone this side="middle" viewportIndex=0)}}
|
||||
{{/if}}
|
||||
|
||||
<div class="toolbarSectionEntry pull-right rm-l-1 p-x-1">
|
||||
{{>caseProgress}}
|
||||
</div>
|
||||
<div class="pull-right m-t-1 rm-x-1">
|
||||
{{>roundedButtonGroup rightSidebarToggleButtonData}}
|
||||
</div>
|
||||
<div id="toggleHUD" class="toolbarSectionButton pull-right rp-x-1 m-t-1 rm-r-3 {{#if session 'measurementTableHudOpen'}}active{{/if}}">
|
||||
<div class="svgContainer">
|
||||
<svg>
|
||||
<use xlink:href="/packages/ohif_viewerbase/assets/icons.svg#icon-hud"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="buttonLabel">HUD</div>
|
||||
</div>
|
||||
<div class="toolbarSectionButton pull-right rp-x-1 m-t-1 rm-r-1" data-toggle="modal" data-target="#optionsModal">
|
||||
<div class="svgContainer">
|
||||
<svg>
|
||||
<use xlink:href="/packages/ohif_viewerbase/assets/icons.svg#icon-trial-info"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="buttonLabel">Trial</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,169 @@
|
||||
import { OHIF } from 'meteor/ohif:core';
|
||||
|
||||
Template.toolbarSection.helpers({
|
||||
// Returns true if the view shall be split in two viewports
|
||||
splitView() {
|
||||
// Run this computation every time the viewports are updated
|
||||
Session.get('LayoutManagerUpdated');
|
||||
|
||||
// Stops here if layout manager is not defined yet
|
||||
if (!window.layoutManager) {
|
||||
return;
|
||||
}
|
||||
|
||||
return window.layoutManager.viewportData.length > 1;
|
||||
},
|
||||
|
||||
leftSidebarToggleButtonData() {
|
||||
const instance = Template.instance();
|
||||
return {
|
||||
toggleable: true,
|
||||
key: 'leftSidebar',
|
||||
value: instance.data.state,
|
||||
options: [{
|
||||
value: 'studies',
|
||||
svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-studies',
|
||||
svgWidth: 15,
|
||||
svgHeight: 13,
|
||||
bottomLabel: 'Studies'
|
||||
}]
|
||||
};
|
||||
},
|
||||
|
||||
rightSidebarToggleButtonData() {
|
||||
const instance = Template.instance();
|
||||
return {
|
||||
toggleable: true,
|
||||
key: 'rightSidebar',
|
||||
value: instance.data.state,
|
||||
options: [{
|
||||
value: 'measurements',
|
||||
svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-measurements-lesions',
|
||||
svgWidth: 18,
|
||||
svgHeight: 10,
|
||||
bottomLabel: 'Measurements'
|
||||
}]
|
||||
};
|
||||
},
|
||||
|
||||
toolbarButtons() {
|
||||
// Check if the measure tools shall be disabled
|
||||
const isToolDisabled = false; //!Template.instance().data.timepointApi;
|
||||
|
||||
const buttonData = [];
|
||||
|
||||
buttonData.push({
|
||||
id: 'zoom',
|
||||
title: 'Zoom',
|
||||
classes: 'imageViewerTool',
|
||||
svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-zoom'
|
||||
});
|
||||
|
||||
buttonData.push({
|
||||
id: 'wwwc',
|
||||
title: 'Levels',
|
||||
classes: 'imageViewerTool',
|
||||
svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-levels'
|
||||
});
|
||||
|
||||
buttonData.push({
|
||||
id: 'pan',
|
||||
title: 'Pan',
|
||||
classes: 'imageViewerTool',
|
||||
svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-pan'
|
||||
});
|
||||
|
||||
/*
|
||||
TODO: design the link functionality
|
||||
Commenting this out until we build this tool
|
||||
buttonData.push({
|
||||
id: 'link',
|
||||
title: 'Link',
|
||||
classes: 'imageViewerCommand toolbarSectionButton',
|
||||
svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-link'
|
||||
});*/
|
||||
|
||||
buttonData.push({
|
||||
id: 'bidirectional',
|
||||
title: 'Target',
|
||||
classes: 'imageViewerTool rm-l-3',
|
||||
svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-target',
|
||||
disabled: isToolDisabled
|
||||
});
|
||||
|
||||
buttonData.push({
|
||||
id: 'nonTarget',
|
||||
title: 'Non-Target',
|
||||
classes: 'imageViewerTool toolbarSectionButton',
|
||||
svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-non-target',
|
||||
disabled: isToolDisabled
|
||||
});
|
||||
|
||||
buttonData.push({
|
||||
id: 'length',
|
||||
title: 'Temp',
|
||||
classes: 'imageViewerTool toolbarSectionButton',
|
||||
svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-temp'
|
||||
});
|
||||
|
||||
return buttonData;
|
||||
},
|
||||
|
||||
extraToolbarButtons() {
|
||||
// Check if the measure tools shall be disabled
|
||||
const isToolDisabled = false; //!Template.instance().data.timepointApi.currentTimepointId;
|
||||
const buttonData = [];
|
||||
|
||||
// TODO: Get real icons for CR / UN / EX
|
||||
buttonData.push({
|
||||
id: 'crTool',
|
||||
title: 'CR Tool',
|
||||
classes: 'imageViewerTool toolbarSectionButton',
|
||||
svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-temp',
|
||||
disabled: isToolDisabled
|
||||
});
|
||||
|
||||
buttonData.push({
|
||||
id: 'unTool',
|
||||
title: 'UN Tool',
|
||||
classes: 'imageViewerTool toolbarSectionButton',
|
||||
svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-temp',
|
||||
disabled: isToolDisabled
|
||||
});
|
||||
|
||||
buttonData.push({
|
||||
id: 'exTool',
|
||||
title: 'EX Tool',
|
||||
classes: 'imageViewerTool toolbarSectionButton',
|
||||
svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-temp',
|
||||
disabled: isToolDisabled
|
||||
});
|
||||
|
||||
return buttonData;
|
||||
}
|
||||
});
|
||||
|
||||
Template.toolbarSection.events({
|
||||
'click #toggleHUD'() {
|
||||
const state = Session.get('measurementTableHudOpen');
|
||||
Session.set('measurementTableHudOpen', !state);
|
||||
}
|
||||
});
|
||||
|
||||
Template.toolbarSection.onRendered(function() {
|
||||
// Set disabled/enabled tool buttons that are set in toolManager
|
||||
const states = toolManager.getToolDefaultStates();
|
||||
const disabledToolButtons = states.disabledToolButtons;
|
||||
const allToolbarButtons = $('#toolbar').find('button');
|
||||
if (disabledToolButtons && disabledToolButtons.length > 0) {
|
||||
for (var i = 0; i < allToolbarButtons.length; i++) {
|
||||
const toolbarButton = allToolbarButtons[i];
|
||||
$(toolbarButton).prop('disabled', false);
|
||||
|
||||
const index = disabledToolButtons.indexOf($(toolbarButton).attr('id'));
|
||||
if (index !== -1) {
|
||||
$(toolbarButton).prop('disabled', true);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,24 @@
|
||||
@import "{design}/app"
|
||||
|
||||
.toolbarSection
|
||||
theme('border-bottom', '%s solid $uiBorderColor' % $uiBorderThickness)
|
||||
flex: 0 0 auto
|
||||
height: $toolbarHeight
|
||||
overflow: hidden
|
||||
padding-top: 6px
|
||||
position: relative
|
||||
transition(height 300ms ease)
|
||||
width: 100%
|
||||
|
||||
&.expanded
|
||||
height: $toolbarHeight + $toolbarDrawerHeight
|
||||
|
||||
.toolbarSectionEntry
|
||||
theme('color', '$defaultColor')
|
||||
cursor: pointer
|
||||
display: inline-block
|
||||
theme('fill', '$defaultColor')
|
||||
margin-top: 3px
|
||||
min-width: 30px
|
||||
theme('stroke', '$defaultColor')
|
||||
text-align: center
|
||||
@@ -0,0 +1,17 @@
|
||||
<template name="viewer">
|
||||
{{#if and Template.subscriptionsReady dataSourcesReady}}
|
||||
<div class="viewerDialogs">
|
||||
{{>confirmDeleteDialog}}
|
||||
{{>measurementLocationDialog (clone this)}}
|
||||
{{>nonTargetLesionDialog (clone this)}}
|
||||
{{>nonTargetResponseDialog (clone this)}}
|
||||
{{>measurementTableHUD (clone this)}}
|
||||
</div>
|
||||
<div id="viewer">
|
||||
{{>toolbarSection (clone this)}}
|
||||
{{>viewerSection (clone this)}}
|
||||
</div>
|
||||
{{else}}
|
||||
{{>loadingText}}
|
||||
{{/if}}
|
||||
</template>
|
||||
@@ -0,0 +1,113 @@
|
||||
import { OHIF } from 'meteor/ohif:core';
|
||||
import { TimepointsConfiguration } from 'meteor/ohif:measurements/both/configuration/timepoints';
|
||||
import { MeasurementsConfiguration } from 'meteor/ohif:measurements/both/configuration/measurements';
|
||||
import { MeasurementHandlers } from 'meteor/ohif:measurements/client/lib/MeasurementHandlers';
|
||||
|
||||
Session.set('TimepointsReady', false);
|
||||
Session.set('MeasurementsReady', false);
|
||||
|
||||
Template.viewer.onCreated(() => {
|
||||
const TimepointApi = TimepointsConfiguration.getTimepointsApi();
|
||||
const MeasurementApi = MeasurementsConfiguration.getMeasurementsApi();
|
||||
|
||||
OHIF.viewer = OHIF.viewer || {};
|
||||
ViewerData = window.ViewerData || ViewerData;
|
||||
|
||||
const instance = Template.instance();
|
||||
|
||||
ValidationErrors.remove({});
|
||||
|
||||
instance.data.state = new ReactiveDict();
|
||||
instance.data.state.set('leftSidebar', Session.get('leftSidebar'));
|
||||
instance.data.state.set('rightSidebar', Session.get('rightSidebar'));
|
||||
|
||||
const contentId = instance.data.contentId;
|
||||
|
||||
OHIF.viewer.functionList = $.extend(OHIF.viewer.functionList, {
|
||||
toggleLesionTrackerTools: toggleLesionTrackerTools,
|
||||
clearTools: clearTools,
|
||||
bidirectional: () => {
|
||||
// Used for hotkeys
|
||||
toolManager.setActiveTool('bidirectional');
|
||||
},
|
||||
nonTarget: () => {
|
||||
// Used for hotkeys
|
||||
toolManager.setActiveTool('nonTarget');
|
||||
}
|
||||
});
|
||||
|
||||
// The hotkey can also be an array (e.g. ["NUMPAD0", "0"])
|
||||
OHIF.viewer.defaultHotkeys = OHIF.viewer.defaultHotkeys || {};
|
||||
OHIF.viewer.defaultHotkeys.toggleLesionTrackerTools = 'O';
|
||||
OHIF.viewer.defaultHotkeys.bidirectional = 'T'; // Target
|
||||
OHIF.viewer.defaultHotkeys.nonTarget = 'N'; // Non-target
|
||||
|
||||
if (ViewerData[contentId].loadedSeriesData) {
|
||||
log.info('Reloading previous loadedSeriesData');
|
||||
OHIF.viewer.loadedSeriesData = ViewerData[contentId].loadedSeriesData;
|
||||
|
||||
} else {
|
||||
log.info('Setting default ViewerData');
|
||||
OHIF.viewer.loadedSeriesData = {};
|
||||
ViewerData[contentId].loadedSeriesData = {};
|
||||
Session.set('ViewerData', ViewerData);
|
||||
}
|
||||
|
||||
Session.set('activeViewport', ViewerData[contentId].activeViewport || false);
|
||||
|
||||
// Set lesion tool buttons as disabled if pixel spacing is not available for active element
|
||||
instance.autorun(pixelSpacingAutorunCheck);
|
||||
|
||||
// Update the ViewerStudies collection with the loaded studies
|
||||
ViewerStudies.remove({});
|
||||
|
||||
instance.data.studies.forEach(study => {
|
||||
study.selected = true;
|
||||
study.displaySets = createStacks(study);
|
||||
ViewerStudies.insert(study);
|
||||
});
|
||||
|
||||
if (instance.data.currentTimepointId) {
|
||||
instance.data.timepointApi = new TimepointApi(instance.data.currentTimepointId);
|
||||
const timepointsPromise = instance.data.timepointApi.retrieveTimepoints();
|
||||
timepointsPromise.then(() => {
|
||||
Session.set('TimepointsReady', true);
|
||||
})
|
||||
|
||||
instance.data.measurementApi = new MeasurementApi(instance.data.currentTimepointId);
|
||||
const measurementsPromise = instance.data.measurementApi.retrieveMeasurements();
|
||||
measurementsPromise.then(() => {
|
||||
Session.set('MeasurementsReady', true);
|
||||
|
||||
instance.data.measurementApi.syncMeasurementsAndToolData();
|
||||
})
|
||||
|
||||
// Provide the necessary data to the Measurement API and Timepoint API
|
||||
const prior = instance.data.timepointApi.prior();
|
||||
if (prior) {
|
||||
instance.data.measurementApi.priorTimepointId = prior.timepointId;
|
||||
}
|
||||
} else {
|
||||
console.warn('No current timepoint specified');
|
||||
instance.data.measurementApi = new MeasurementApi();
|
||||
}
|
||||
});
|
||||
|
||||
Template.viewer.helpers({
|
||||
dataSourcesReady() {
|
||||
// TODO: Find a better way to do this
|
||||
return Session.get('TimepointsReady') && Session.get('MeasurementsReady');
|
||||
}
|
||||
})
|
||||
|
||||
Template.viewer.events({
|
||||
'CornerstoneToolsMeasurementAdded .imageViewerViewport'(event, instance, eventData) {
|
||||
MeasurementHandlers.onAdded(event, instance, eventData);
|
||||
},
|
||||
'CornerstoneToolsMeasurementModified .imageViewerViewport'(event, instance, eventData) {
|
||||
MeasurementHandlers.onModified(event, instance, eventData);
|
||||
},
|
||||
'CornerstoneToolsMeasurementRemoved .imageViewerViewport'(event, instance, eventData) {
|
||||
MeasurementHandlers.onRemoved(event, instance, eventData);
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,22 @@
|
||||
@import "{design}/app"
|
||||
|
||||
#viewer
|
||||
background-color: black
|
||||
height: 100%
|
||||
width: 100%
|
||||
|
||||
#imageViewerViewports
|
||||
.viewportContainer
|
||||
border: none !important
|
||||
outline: 0 !important // Prevent blue outline in Chrome
|
||||
|
||||
&:hover
|
||||
&.active
|
||||
&:hover.active
|
||||
border: none !important
|
||||
outline: 0 !important // Prevent blue outline in Chrome
|
||||
|
||||
&:not(:last-child)
|
||||
.removable
|
||||
.imageViewerViewport
|
||||
theme('border-right', '%s solid $uiBorderColor' % $uiBorderThickness)
|
||||
@@ -0,0 +1,13 @@
|
||||
<template name="viewerSection">
|
||||
<div class="viewerSection">
|
||||
<div class="sidebarMenu sidebar-left {{#if leftSidebarOpen}}sidebar-open{{/if}}">
|
||||
{{>studyTimepointBrowser (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}}">
|
||||
{{>measurementTable (clone this)}}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,19 @@
|
||||
Template.viewerSection.events({
|
||||
'transitionend .sidebarMenu'(event) {
|
||||
if (!event.target.classList.contains('sidebarMenu')) {
|
||||
return;
|
||||
}
|
||||
|
||||
handleResize();
|
||||
}
|
||||
});
|
||||
|
||||
Template.viewerSection.helpers({
|
||||
leftSidebarOpen() {
|
||||
return Template.instance().data.state.get('leftSidebar');
|
||||
},
|
||||
|
||||
rightSidebarOpen() {
|
||||
return Template.instance().data.state.get('rightSidebar');
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,78 @@
|
||||
@import "{design}/app"
|
||||
|
||||
.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
|
||||
theme('border-right', '%s solid $uiBorderColor' % $uiBorderThickness)
|
||||
flex: 1
|
||||
margin-left: - $studiesSidebarMenuWidth
|
||||
max-width: $studiesSidebarMenuWidth
|
||||
order: 1
|
||||
|
||||
&.sidebar-open
|
||||
margin-left: 0
|
||||
|
||||
.mainContent
|
||||
flex: 1
|
||||
order: 2
|
||||
width: 100%
|
||||
height: 100%
|
||||
overflow: hidden
|
||||
transition($sidebarTransition)
|
||||
|
||||
.sidebar-right
|
||||
flex: 1
|
||||
margin-left: -12px
|
||||
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
|
||||
theme('background-color', '$uiBorderColor')
|
||||
content: ''
|
||||
display: block
|
||||
height: 100%
|
||||
left: 5px
|
||||
position: absolute
|
||||
top: 0
|
||||
width: $uiBorderThickness
|
||||
|
||||
&.sidebar-open
|
||||
margin-right: 0
|
||||
|
||||
.studiesListedChanger
|
||||
theme('border-bottom', '%s solid $uiBorderColor' % $uiBorderThickness)
|
||||
padding: 20px 10px
|
||||
text-align: center
|
||||
Reference in new issue
Block a user