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
fortawesome:fontawesome
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 {
width: 100%;
height: calc(100% - 54px);
height: 100%;
margin: 0;
padding: 0;
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">
<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">
{{ >hidingPanel }}
{{ >viewerMain }}
{{ >lesionMeasurementContainer }}
{{ >hidingPanel studies=studies activeViewport=activeViewport}}
{{ >viewerMain studies=studies activeViewport=activeViewport viewportRows=viewportRows viewportColumns=viewportColumns}}
{{ >lesionMeasurementContainer studies=studies activeViewport=activeViewport}}
</div>
</template>

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

@ -58,9 +58,11 @@ function resizeViewports() {
}, 1);
}
Session.setDefault('ActiveViewport', 0);
Session.setDefault('viewportRows', 1);
Session.setDefault('viewportColumns', 2);
Template.viewer.onCreated(function() {
this.data.activeViewport = new ReactiveVar(0);
this.data.viewportRows = new ReactiveVar(1);
this.data.viewportColumns = new ReactiveVar(2);
});
// Avoid doing DOM manipulation during the resize handler
// because it is fired very often.
@ -71,19 +73,4 @@ $(window).on('resize', function() {
resizeTimer = setTimeout(function() {
resizeViewports();
}, 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">
<div class="viewerMain">
{{ >toolbar toolbarOptions }}
{{ >imageViewerViewports}}
{{ >lesionTableContainer}}
{{ >toolbar toolbarOptions activeViewport=activeViewport viewportRows=viewportRows viewportColumns=viewportColumns}}
{{ >imageViewerViewports studies=studies activeViewport=activeViewport viewportRows=viewportRows viewportColumns=viewportColumns}}
{{ >lesionTableContainer studies=studies activeViewport=activeViewport}}
</div>
</template>

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

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

53
LesionTracker/client/route.js
View File

@ -1,33 +1,40 @@
Router.configure({
layoutTemplate: 'lesionTrackerLayout',
//loadingTemplate: '',
notFoundTemplate: 'notFound'
layoutTemplate: 'layoutLesionTracker',
//loadingTemplate: '',
notFoundTemplate: 'notFound'
});
Router.route('/', function () {
this.render('worklist', {
});
this.render('worklist', {});
});
Router.route('/viewer/:_id', {
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);
tabs = new Meteor.Collection(null);
var studies = [study];
Session.set('studies', studies);
//Session.set(activeTabId, studies);
//Session.set('showContentInTab', true);
//self.render('viewer');
openNewTab(studies);
});
}
Router.route('/viewer/:_id', {
layoutTemplate: 'layoutLesionTracker',
name: 'viewer',
onBeforeAction: function() {
var self = this;
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">
<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">
{{> studyBrowser studies=studies activeViewport=activeViewport}}
{{> viewerMain studies=studies activeViewport=activeViewport viewportRows=viewportRows viewportColumns=viewportColumns}}

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

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

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

@ -1,6 +1,5 @@
Template.viewerMain.helpers({
studies : function() {
var studies = this.studies;
return studies;
return this.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({
layoutTemplate: 'layout',
//loadingTemplate: '',
notFoundTemplate: 'notFound'
layoutTemplate: 'layout',
//loadingTemplate: '',
notFoundTemplate: 'notFound'
});
@ -30,9 +30,11 @@ Router.route('/viewer/:_id', {
contentid: contentid,
};
tabs.insert(newTabObject);
Session.set('StudiesInTab#' + contentid, studies);
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
margin-bottom: 0
border-radius: 0px
border-radius: 0
color: #888888
background-color: #060606
border: none
.navbar-form
margin: 0
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)
.navbar
border-radius: 0px

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

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

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

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

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

@ -1,21 +1,21 @@
Template.tabTitle.events({
'click .close': function(e) {
var tab = $(e.currentTarget).parents('[data-toggle="tab"]').eq(0);
var contentId = tab.data("target").replace("#","");
var tab = $(e.currentTarget).siblings('a[data-toggle="tab"]').eq(0);
var contentId = tab.data("target").replace("#", "");
var tabObjectId = tabs.find({contentid: contentId}).fetch()[0]._id;
tabs.remove(tabObjectId);
var tabIndex = tab.index();
var tabIndex = tab.parent('li').index();
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 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];
tabObject.active = true;
Template.tabTitle.helpers({
'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">
<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>
</li>
{{ #each tabs }}
@ -9,7 +9,7 @@
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="worklistTab">
<div class="container">
<div id="worklistContainer" class="container">
{{> worklistSearch }}
{{> worklistResult }}
</div>

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

@ -1,43 +1,61 @@
Template.worklist.helpers({
'tabs': function() {
var tabData = tabs.find().fetch();
return tabData;
},
console.log('Updating tabs');
return tabs.find();
}
});
Template.worklist.events({
'click a[data-toggle="tab"]': function(e) {
console.log(e.currentTarget);
var contentId = $(e.currentTarget).data('target');
$(e.currentTarget).tab('show');
switchToTab(contentId);
}
});
var container = $('.tab-content').find(contentId).get(0);
var studies = Session.get('StudiesInTab' + contentId);
var data = {
studies: studies
};
switchToTab = function(contentId) {
var studies = Session.get('StudiesInTab' + contentId);
var data = {
studies: studies
};
if (contentId === '#worklistTab') {
console.log('Switching to worklist');
$("#viewer").remove();
document.body.style.overflow = null;
document.body.style.height = null;
document.body.style.minWidth = null;
document.body.style.position = null;
} else {
UI.renderWithData(Template.viewer, data, container);
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
}
var newContentId = contentId.replace("#", "");
//var tabObject = tabs.findOne({contentid: newContentId});
//tabObject.active = true;
console.log("Switching to tab: " + contentId);
$('.tabTitle a[data-target="' + contentId + '"]').tab('show');
$("#viewer").remove();
var container = $('.tab-content').find(contentId).get(0);
if (!container) {
return;
}
if (contentId === '#worklistTab') {
console.log('Switching to worklist');
document.body.style.overflow = null;
document.body.style.height = null;
document.body.style.minWidth = null;
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 @@
/***********************************************/
/* CSS3 Close button */
/***********************************************/
.btnClose
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
body
background-color: #202020
#worklistTab
background-color: #202020
#worklistContainer
background-color: #202020
color: white
#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
color: black
tbody tr:hover
background-color: #009BD2
color: white
color: #888888
border-collapse: collapse;
border-color: gray;
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">
<!--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-body">
<div style="padding: 10px;">

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

@ -1,35 +1,25 @@
/***********************************************/
/* Search Panel */
/***********************************************/
#search-panel-head{
background-color: #337ab7;
color: white;
font-weight: 500;
font-size: 20px;
line-height: 20px;
box-shadow: 2px 2px 2px #888888;
}
#worklistSearchPanel
margin: 20px 0
color: #888888
background-color: #202020
#btnSearch, #btnToday, #btnClear, #btnLastSevenDays{
width: 100%;
}
#search-panel-head
background-color: #337ab7
color: white
font-weight: 500
font-size: 20px
line-height: 20px
box-shadow: 2px 2px 2px #888888
#checkFrom, #checkTo{
width:20px;
height:20px;
position:absolute;
left:20px;
bottom: 22px;
}
/***********************************************/
/* Tabs */
/***********************************************/
.tab-pane{
position:absolute;
width: 100%;
height:100%;
}
#btnSearch, #btnToday, #btnClear, #btnLastSevenDays
width: 100%
.nav > li > a {
padding: 10px 5px;
}
#checkFrom, #checkTo
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">
<tr>
<tr class="worklistStudy">
<td>
{{patientName}}
</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.export('generateUUID', 'client');
api.export('switchToTab', 'client');
});