TrizTech/ohif-viewer
15
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update to tabs. Styling needs work

Browse Source
This commit is contained in:
Erik Ziegler 2015-10-20 15:45:27 +02:00
parent 7217b7c67d
commit f7e6bee94f
29 changed files with 257 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
LesionTracker/.meteor/packages
View File

@ -33,3 +33,4 @@ promise
stylus stylus
fortawesome:fontawesome fortawesome:fontawesome
random random
reactive-var

15
LesionTracker/client/compatibility/tabHelper.js
View File

@ -1,15 +0,0 @@
//Holds functions to help managing tabs
//Returns activeTabId
function activeTabId() {
var activeTab = Session.get("activeTabId");
return activeTab;
}
//Returns activeTabContentId
function activeTabContentId () {
var activeTabId = activeTabId();
var splitTabId = activeTabId.split("tab");
var contentId = "content"+splitTabId[1];
return contentId;
}

23
LesionTracker/client/components/layout/layout.html Normal file
View File

@ -0,0 +1,23 @@
<template name="layoutLesionTracker">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Lesion Tracker</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="www.tumormetrics.org">About</a>
</li>
</ul>
</div>
</div>
</nav>
{{> yield}}
</template>

14
LesionTracker/client/components/layout/layout.styl Normal file
View File

@ -0,0 +1,14 @@
.navbar
margin-bottom: 0
border-radius: 0
color: #888888
background-color: #060606
border: none
.navbar-form
margin: 0
padding: 15px 3px
@media (min-width: 768px)
.navbar
border-radius: 0px

7
LesionTracker/client/components/viewer.css
View File

@ -1,12 +1,7 @@
.viewer { .viewer {
width: 100%; width: 100%;
height: calc(100% - 54px); height: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: black; background-color: black;
}
.navbar {
margin-bottom: 0;
border-radius: 0;
} }

9
LesionTracker/client/components/viewer.html
View File

@ -1,10 +1,7 @@
<template name="viewer"> <template name="viewer">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no">
</head>
<div id="viewer" class="viewer"> <div id="viewer" class="viewer">
{{ >hidingPanel }} {{ >hidingPanel studies=studies activeViewport=activeViewport}}
{{ >viewerMain }} {{ >viewerMain studies=studies activeViewport=activeViewport viewportRows=viewportRows viewportColumns=viewportColumns}}
{{ >lesionMeasurementContainer }} {{ >lesionMeasurementContainer studies=studies activeViewport=activeViewport}}
</div> </div>
</template> </template>

23
LesionTracker/client/components/viewer.js
View File

@ -58,9 +58,11 @@ function resizeViewports() {
}, 1); }, 1);
} }
Session.setDefault('ActiveViewport', 0); Template.viewer.onCreated(function() {
Session.setDefault('viewportRows', 1); this.data.activeViewport = new ReactiveVar(0);
Session.setDefault('viewportColumns', 2); this.data.viewportRows = new ReactiveVar(1);
this.data.viewportColumns = new ReactiveVar(2);
});
// Avoid doing DOM manipulation during the resize handler // Avoid doing DOM manipulation during the resize handler
// because it is fired very often. // because it is fired very often.
@ -71,19 +73,4 @@ $(window).on('resize', function() {
resizeTimer = setTimeout(function() { resizeTimer = setTimeout(function() {
resizeViewports(); resizeViewports();
}, 100); }, 100);
});
Template.viewer.onRendered(function() {
var imageViewer = $("#viewer");
if (imageViewer) {
$('.navbar-default').css({
'background-color': '#000000',
'border-color': '#101010'
});
document.body.style.overflow = "hidden";
document.body.style.height = '100%';
document.body.style.width = '100%';
document.body.style.minWidth = 0;
document.body.style.position = 'fixed'; // Prevent overscroll on mobile devices
}
}); });

6
LesionTracker/client/components/viewerMain/viewerMain.html
View File

@ -1,7 +1,7 @@
<template name="viewerMain"> <template name="viewerMain">
<div class="viewerMain"> <div class="viewerMain">
{{ >toolbar toolbarOptions }} {{ >toolbar toolbarOptions activeViewport=activeViewport viewportRows=viewportRows viewportColumns=viewportColumns}}
{{ >imageViewerViewports}} {{ >imageViewerViewports studies=studies activeViewport=activeViewport viewportRows=viewportRows viewportColumns=viewportColumns}}
{{ >lesionTableContainer}} {{ >lesionTableContainer studies=studies activeViewport=activeViewport}}
</div> </div>
</template> </template>

3
LesionTracker/client/components/viewerMain/viewerMain.js
View File

@ -1,4 +1,7 @@
Template.viewerMain.helpers({ Template.viewerMain.helpers({
studies : function() {
return this.studies;
},
'toolbarOptions': function() { 'toolbarOptions': function() {
var toolbarOptions = {}; var toolbarOptions = {};

53
LesionTracker/client/route.js
View File

@ -1,33 +1,40 @@
Router.configure({ Router.configure({
layoutTemplate: 'lesionTrackerLayout', layoutTemplate: 'layoutLesionTracker',
//loadingTemplate: '', //loadingTemplate: '',
notFoundTemplate: 'notFound' notFoundTemplate: 'notFound'
}); });
Router.route('/', function () { Router.route('/', function () {
this.render('worklist', { this.render('worklist', {});
});
}); });
Router.route('/viewer/:_id', { tabs = new Meteor.Collection(null);
layoutTemplate: 'lesionTrackerLayout',
name: 'viewer',
onBeforeAction: function() {
var self = this;
//Session.set('openNewTabEvent', self);
Meteor.call('GetStudyMetadata', this.params._id, function(error, study) {
//console.log(study);
sortStudy(study);
var studies = [study]; Router.route('/viewer/:_id', {
Session.set('studies', studies); layoutTemplate: 'layoutLesionTracker',
//Session.set(activeTabId, studies); name: 'viewer',
//Session.set('showContentInTab', true); onBeforeAction: function() {
//self.render('viewer'); var self = this;
openNewTab(studies);
}); Meteor.call('GetStudyMetadata', this.params._id, function(error, study) {
} sortStudy(study);
var studies = [study];
var title = study.seriesList[0].instances[0].patientName;
var contentid = generateUUID();
var newTabObject = {
title: title,
contentid: contentid,
};
tabs.insert(newTabObject);
self.render('worklist');
console.log('Setting studesInTab');
Session.set('StudiesInTab#' + contentid, studies);
Session.set('OpenNewTabEvent', contentid);
});
}
}); });

3
OHIFViewer/client/components/viewer/viewer.html
View File

@ -1,7 +1,4 @@
<template name="viewer"> <template name="viewer">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no">
</head>
<div id="viewer"> <div id="viewer">
{{> studyBrowser studies=studies activeViewport=activeViewport}} {{> studyBrowser studies=studies activeViewport=activeViewport}}
{{> viewerMain studies=studies activeViewport=activeViewport viewportRows=viewportRows viewportColumns=viewportColumns}} {{> viewerMain studies=studies activeViewport=activeViewport viewportRows=viewportRows viewportColumns=viewportColumns}}

2
OHIFViewer/client/components/viewer/viewer.styl
View File

@ -1,6 +1,6 @@
#viewer #viewer
width: 100% width: 100%
height: calc(100% - 53px) height: 100%
border-top: 1px solid #525252 border-top: 1px solid #525252
.noselect .noselect

3
OHIFViewer/client/components/viewer/viewerMain/viewerMain.js
View File

@ -1,6 +1,5 @@
Template.viewerMain.helpers({ Template.viewerMain.helpers({
studies : function() { studies : function() {
var studies = this.studies; return this.studies;
return studies;
} }
}); });

11
OHIFViewer/client/head.html Normal file
View File

@ -0,0 +1,11 @@
<head>
<meta charset="utf-8">
<title>OHIF Viewer</title>
<meta name="description" content="Open Health Imaging Foundation DICOM Viewer">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no, minimal-ui">
<!--Best display for mobile devices-->
<meta http-equiv="cleartype" content="on">
<meta name="MobileOptimized" content="320">
<meta name="HandheldFriendly" content="True">
<meta name="apple-mobile-web-app-capable" content="yes">
</head>

10
OHIFViewer/client/routes.js
View File

@ -1,7 +1,7 @@
Router.configure({ Router.configure({
layoutTemplate: 'layout', layoutTemplate: 'layout',
//loadingTemplate: '', //loadingTemplate: '',
notFoundTemplate: 'notFound' notFoundTemplate: 'notFound'
}); });
@ -30,9 +30,11 @@ Router.route('/viewer/:_id', {
contentid: contentid, contentid: contentid,
}; };
tabs.insert(newTabObject); tabs.insert(newTabObject);
Session.set('StudiesInTab#' + contentid, studies);
self.render('worklist'); self.render('worklist');
console.log('Setting studesInTab');
Session.set('StudiesInTab#' + contentid, studies);
Session.set('OpenNewTabEvent', contentid);
}); });
} }
}); });

14
Packages/viewerbase/components/basic/layout/layout.styl
View File

@ -1,18 +1,14 @@
.navbar .navbar
margin-bottom: 0 margin-bottom: 0
border-radius: 0px border-radius: 0
color: #888888
background-color: #060606
border: none
.navbar-form .navbar-form
margin: 0 margin: 0
padding: 15px 3px padding: 15px 3px
.navbar-default
-webkit-transition: background-color 200ms linear
-moz-transition: background-color 200ms linear
-o-transition: background-color 200ms linear
-ms-transition: background-color 200ms linear
transition: background-color 200ms linear
@media (min-width: 768px) @media (min-width: 768px)
.navbar .navbar
border-radius: 0px border-radius: 0px

2
Packages/worklist/components/tabContent/tabContent.html
View File

@ -1,4 +1,4 @@
<template name="tabContent"> <template name="tabContent">
<div role="tabpanel" class="tab-pane" id="{{contentid}}"> <div role="tabpanel" class="tab-pane {{active}}" id="{{contentid}}">
</div> </div>
</template> </template>

2
Packages/worklist/components/tabTitle/tabTitle.html
View File

@ -2,7 +2,7 @@
<li role="presentation" class="tabTitle"> <li role="presentation" class="tabTitle">
<a data-target="#{{contentid}}" role="tab" data-toggle="tab"> <a data-target="#{{contentid}}" role="tab" data-toggle="tab">
{{title}} {{title}}
<a class="close">x</a>
</a> </a>
<a class="close">x</a>
</li> </li>
</template> </template>

22
Packages/worklist/components/tabTitle/tabTitle.js
View File

@ -1,21 +1,21 @@
Template.tabTitle.events({ Template.tabTitle.events({
'click .close': function(e) { 'click .close': function(e) {
var tab = $(e.currentTarget).parents('[data-toggle="tab"]').eq(0); var tab = $(e.currentTarget).siblings('a[data-toggle="tab"]').eq(0);
var contentId = tab.data("target").replace("#",""); var contentId = tab.data("target").replace("#", "");
var tabObjectId = tabs.find({contentid: contentId}).fetch()[0]._id; var tabObjectId = tabs.find({contentid: contentId}).fetch()[0]._id;
tabs.remove(tabObjectId); tabs.remove(tabObjectId);
var tabIndex = tab.index(); var tabIndex = tab.parent('li').index();
var newActiveTabIndex = Math.max(tabIndex - 1, 0); var newActiveTabIndex = Math.max(tabIndex - 1, 0);
if (newActiveTabIndex === 0) {
$('a[data-target="#worklistTab"]').addClass('active').tab('show');
return;
}
var newActiveTab = $(".tabTitle").eq(newActiveTabIndex); var newActiveTab = $(".tabTitle").eq(newActiveTabIndex);
var newContentId = newActiveTab.data("contentid"); var newActiveTabLink = newActiveTab.find("a[data-toggle=tab]");
var newContentId = newActiveTabLink.data("target");
switchToTab(newContentId);
}
});
var tabObject = tabs.find({contentId: newContentId}).fetch()[0]; Template.tabTitle.helpers({
tabObject.active = true; 'active': function() {
return this.active ? "active" : "";
} }
}); });

9
Packages/worklist/components/tabTitle/tabTitle.styl
View File

@ -1,8 +1 @@
.tabTitle
a
padding: 0 5px
a.close
font-size: 16pt
padding: 0 5px
font-weight: normal

4
Packages/worklist/components/worklist.html
View File

@ -1,6 +1,6 @@
<template name="worklist"> <template name="worklist">
<ul class="nav nav-tabs" role="tablist"> <ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"> <li role="presentation" class="tabTitle active">
<a data-target="#worklistTab" role="tab" data-toggle="tab">Study List</a> <a data-target="#worklistTab" role="tab" data-toggle="tab">Study List</a>
</li> </li>
{{ #each tabs }} {{ #each tabs }}
@ -9,7 +9,7 @@
</ul> </ul>
<div class="tab-content"> <div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="worklistTab"> <div role="tabpanel" class="tab-pane active" id="worklistTab">
<div class="container"> <div id="worklistContainer" class="container">
{{> worklistSearch }} {{> worklistSearch }}
{{> worklistResult }} {{> worklistResult }}
</div> </div>

80
Packages/worklist/components/worklist.js
View File

@ -1,43 +1,61 @@
Template.worklist.helpers({ Template.worklist.helpers({
'tabs': function() { 'tabs': function() {
var tabData = tabs.find().fetch(); console.log('Updating tabs');
return tabData; return tabs.find();
}, }
}); });
Template.worklist.events({ Template.worklist.events({
'click a[data-toggle="tab"]': function(e) { 'click a[data-toggle="tab"]': function(e) {
console.log(e.currentTarget);
var contentId = $(e.currentTarget).data('target'); var contentId = $(e.currentTarget).data('target');
$(e.currentTarget).tab('show'); switchToTab(contentId);
}
});
var container = $('.tab-content').find(contentId).get(0); switchToTab = function(contentId) {
var studies = Session.get('StudiesInTab' + contentId); var studies = Session.get('StudiesInTab' + contentId);
var data = { var data = {
studies: studies studies: studies
}; };
if (contentId === '#worklistTab') { var newContentId = contentId.replace("#", "");
console.log('Switching to worklist'); //var tabObject = tabs.findOne({contentid: newContentId});
$("#viewer").remove(); //tabObject.active = true;
document.body.style.overflow = null;
document.body.style.height = null; console.log("Switching to tab: " + contentId);
document.body.style.minWidth = null; $('.tabTitle a[data-target="' + contentId + '"]').tab('show');
document.body.style.position = null;
} else { $("#viewer").remove();
UI.renderWithData(Template.viewer, data, container);
var imageViewer = $("#viewer"); var container = $('.tab-content').find(contentId).get(0);
if (imageViewer) { if (!container) {
$('.navbar-default').css({ return;
'background-color': '#000000', }
'border-color': '#101010'
}); if (contentId === '#worklistTab') {
document.body.style.overflow = "hidden"; console.log('Switching to worklist');
document.body.style.height = '100%'; document.body.style.overflow = null;
document.body.style.width = '100%'; document.body.style.height = null;
document.body.style.minWidth = 0; document.body.style.minWidth = null;
document.body.style.position = 'fixed'; // Prevent overscroll on mobile devices document.body.style.position = null;
} } else {
UI.renderWithData(Template.viewer, data, container);
var imageViewer = $("#viewer");
if (imageViewer) {
document.body.style.overflow = "hidden";
document.body.style.height = '100%';
document.body.style.width = '100%';
document.body.style.minWidth = 0;
document.body.style.position = 'fixed'; // Prevent overscroll on mobile devices
} }
} }
};
Template.worklist.onRendered(function() {
this.autorun(function() {
var contentId = Session.get('OpenNewTabEvent');
if (contentId) {
switchToTab("#" + contentId);
}
});
}); });

65
Packages/worklist/components/worklist.styl
View File

@ -1,21 +1,48 @@
/***********************************************/ body
/* CSS3 Close button */ background-color: #202020
/***********************************************/
#worklistTab
.btnClose background-color: #202020
top: 0
right: 0
bottom: 0
width: 20px
height: 20px
text-decoration: none
border: none
background-color: #fcfcfc
-moz-border-radius: 10px
-webkit-border-radius: 10px
border-radius: 10px
margin-left: 5px
font-weight: bold
#worklistContainer
background-color: #202020
color: white
#tabs #tabs
width: 100% width: 100%
.nav-tabs
border-bottom: 1px solid #424242;
background-color: #202020
.tabTitle
background-color: #202020
border-color: #424242
padding: 3px 10px
&:hover
color: black
&.active
background-color: #202020
color: white
a
color: #424242
padding: 0 5px
cursor: pointer
float: left
&.close
font-size: 16pt
padding: 0 5px
font-weight: normal
float: left
.tab-content
width: 100%
height: calc(100% - 100px)
.tab-pane
width: 100%
height: 100%

19
Packages/worklist/components/worklistResult/worklistResult.styl
View File

@ -1,6 +1,15 @@
table#tblStudyList table#tblStudyList
color: black color: #888888
border-collapse: collapse;
tbody tr:hover border-color: gray;
background-color: #009BD2
color: white tr
padding: 4px
border: 1px solid #282828
&:nth-of-type(odd)
background-color: #202020
&:hover
background-color: #009BD2
color: white

2
Packages/worklist/components/worklistSearch/worklistSearch.html
View File

@ -1,6 +1,6 @@
<template name="worklistSearch"> <template name="worklistSearch">
<!--Search Panel--> <!--Search Panel-->
<div class="panel panel-default"> <div id="worklistSearchPanel" class="panel panel-default">
<div class="panel-heading" id="search-panel-head">Search</div> <div class="panel-heading" id="search-panel-head">Search</div>
<div class="panel-body"> <div class="panel-body">
<div style="padding: 10px;"> <div style="padding: 10px;">

48
Packages/worklist/components/worklistSearch/worklistSearch.styl
View File

@ -1,35 +1,25 @@
/***********************************************/ /***********************************************/
/* Search Panel */ /* Search Panel */
/***********************************************/ /***********************************************/
#search-panel-head{ #worklistSearchPanel
background-color: #337ab7; margin: 20px 0
color: white; color: #888888
font-weight: 500; background-color: #202020
font-size: 20px;
line-height: 20px;
box-shadow: 2px 2px 2px #888888;
}
#btnSearch, #btnToday, #btnClear, #btnLastSevenDays{ #search-panel-head
width: 100%; background-color: #337ab7
} color: white
font-weight: 500
font-size: 20px
line-height: 20px
box-shadow: 2px 2px 2px #888888
#checkFrom, #checkTo{ #btnSearch, #btnToday, #btnClear, #btnLastSevenDays
width:20px; width: 100%
height:20px;
position:absolute;
left:20px;
bottom: 22px;
}
/***********************************************/
/* Tabs */
/***********************************************/
.tab-pane{
position:absolute;
width: 100%;
height:100%;
}
.nav > li > a { #checkFrom, #checkTo
padding: 10px 5px; width: 20px
} height: 20px
position: absolute
left: 20px
bottom: 22px

2
Packages/worklist/components/worklistStudy/worklistStudy.html
View File

@ -1,5 +1,5 @@
<template name="worklistStudy"> <template name="worklistStudy">
<tr> <tr class="worklistStudy">
<td> <td>
{{patientName}} {{patientName}}
</td> </td>

3
Packages/worklist/components/worklistStudy/worklistStudy.styl
View File

@ -1 +1,2 @@
.worklistStudy
cursor: pointer

2
Packages/worklist/package.js
View File

@ -36,5 +36,7 @@ Package.onUse(function (api) {
api.addFiles('lib/generateUUID.js', 'client'); api.addFiles('lib/generateUUID.js', 'client');
api.export('generateUUID', 'client'); api.export('generateUUID', 'client');
api.export('switchToTab', 'client');
}); });