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

Styling updates for Study List

Browse Source
This commit is contained in:
Erik Ziegler 2016-06-08 14:22:22 +02:00
parent d014c72aa4
commit 7c92b9a7dd
11 changed files with 211 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
Packages/lesiontracker/client/components/lesionTracker/lesionTracker.html
View File

@ -1,16 +1,16 @@
<template name="lesionTracker">
<div class="topBar">
<div class="topBar {{#if onStudyList}}studyList{{/if}}">
<a class="brandSection pull-left" href="http://ohif.org">
<img class="logoImage" src="/images/logo.png">
<div class="logoText">
Open Health Imaging Foundation
</div>
</a>
{{ #unless onStudyList}}
<div class="studyListLinkSection pull-left">
<a id="loadStudyList">Study List</a>
{{ #if studyListToggleText }}
<div class="studyListLinkSection pull-left js-toggle-studyList">
{{studyListToggleText}}
</div>
{{ /unless }}
{{ /if }}
<div class="userAccountSection pull-right">
{{>userAccountMenu}}
</div>
@ -32,5 +32,4 @@
{{ >lastLoginModal }}
{{ >studyContextMenu }}
{{ >progressDialog}}
{{ >lesionTableHUD }}
</template>

40
Packages/lesiontracker/client/components/lesionTracker/lesionTracker.js
View File

@ -36,23 +36,16 @@ Template.lesionTracker.onRendered(function() {
});
Template.lesionTracker.events({
'click #tablist a[data-toggle="tab"]': function(e) {
// If this tab is already active, do nothing
var tabButton = $(e.currentTarget);
var tabTitle = tabButton.parents('.tabTitle');
if (tabTitle.hasClass('active')) {
return;
'click .js-toggle-studyList': function() {
var contentId = Session.get('activeContentId');
var worklistContentId = 'worklistTab';
var viewerContentId = 'viewerTab';
if (contentId !== worklistContentId) {
switchToTab(worklistContentId);
} else {
switchToTab(viewerContentId);
}
// Otherwise, switch to the tab
var contentId = tabButton.data('target').replace('#', '');
switchToTab(contentId);
},
'click #loadStudyList': function() {
// TODO: Make some set of 'closing study' callbacks
$('#lesionTableHUD').display('none');
switchToTab('worklistTab');
}
});
@ -62,6 +55,21 @@ Template.lesionTracker.helpers({
showWorklistMenu: function() {
return Template.instance().showWorklistMenu.get();
},
studyListToggleText: function() {
var contentId = Session.get('activeContentId');
if (!contentId) {
return;
}
var worklistContentId = 'worklistTab';
var viewerContentId = 'viewerTab';
if (contentId === worklistContentId) {
return 'Back to viewer';
} else if (contentId === viewerContentId) {
return 'Study list';
}
},
onStudyList: function() {
return (Session.get('activeContentId') === 'worklistTab');
}

35
Packages/lesiontracker/client/components/lesionTracker/lesionTracker.styl
View File

@ -4,6 +4,7 @@
height: $topBarHeight
color: $textPrimaryColor
background-color: $primaryBackgroundColor
transition(all 0.5s ease)
.brandSection
height: 100%
@ -11,6 +12,7 @@
img.logoImage
height: 100%
max-height: 50px
margin: 0 5px
.logoText
@ -20,18 +22,41 @@
color: $textPrimaryColor
.studyListLinkSection
color: $textSecondaryColor
border-left: $uiBorderThickness solid $uiBorderColor;
padding: 5px
font-weight: 400
font-size: 13px
line-height: 30px
padding: 0 10px
margin: 0 10px
cursor: pointer
a
text-decoration: none
cursor: pointer
line-height: 100%
&:hover
color: $hoverColor
&:active
color: $activeColor
.userAccountSection
margin: 0 10px
&.studyList
background-color: rgba(21, 25, 30, 0.7)
height: 160px
.brandSection
margin-top: 50px
margin-left: 50px
.logoText
font-size: 30px
.studyListLinkSection
position: absolute
border: none
top: 5px
left: 5px
#worklistTabs
height: "calc(100% - %s)" % $topBarHeight

11
Packages/lesiontracker/client/components/viewer/viewer.html
View File

@ -1,16 +1,17 @@
<template name="viewer">
{{#if Template.subscriptionsReady}}
<div id="viewer">
{{>confirmDeleteDialog}}
{{>lesionLocationDialog}}
{{>nonTargetLesionDialog}}
{{>nonTargetResponseDialog}}
{{ >confirmDeleteDialog }}
{{ >lesionLocationDialog }}
{{ >nonTargetLesionDialog }}
{{ >nonTargetResponseDialog }}
{{ >lesionTableHUD }}
<!-- >conformanceCheckFeedback -->
{{ >toolbarSection }}
{{ >flexboxLayout }}
</div>
{{else}}
{{>loadingText}}
{{ >loadingText }}
{{/if}}
</template>

1
Packages/worklist/client/components/worklist.styl
View File

@ -20,7 +20,6 @@ body
background-color: black
margin: 0 auto
color: white
padding: 20px 30px
#tabs
width: 100%

77
Packages/worklist/client/components/worklistResult/worklistResult.html
View File

@ -1,85 +1,96 @@
<template name="worklistResult">
<div class="studyListToolbar">
<div class="header">
Study list
</div>
<div class="studyCount pull-right">
85
</div>
<div class="pull-right">
{{>worklistToolbar}}
</div>
</div>
<div id="studyListContainer">
{{>worklistToolbar}}
<table id="tblStudyList" class="worklistResult table noselect">
<thead>
<tr>
<th>
<input type="text"
class="form-control worklist-search"
id="patientName"
placeholder="Search Patient Name">
<div id="_patientName" class="sortingCell">
<span>Patient Name</span>
<i class="{{sortingColumnsIcons.patientName}}">&nbsp;</i>
</div>
<input type="text"
class="form-control worklist-search"
id="patientName"
placeholder="Patient Name">
</th>
<th>
<div id="_patientId" class="sortingCell">
<span>MRN</span>
<i class="{{sortingColumnsIcons.patientId}}">&nbsp;</i>
</div>
<input type="text"
class="form-control worklist-search"
id="patientId"
placeholder="Search Patient ID">
<div id="_patientId" class="sortingCell">
<span>Patient ID</span>
<i class="{{sortingColumnsIcons.patientId}}">&nbsp;</i>
</div>
placeholder="MRN">
</th>
{{#unless isTouchDevice}}
<th>
<input type="text"
class="form-control worklist-search"
id="accessionNumber"
placeholder="Search Accession #">
<div id="_accessionNumber" class="sortingCell">
<span>Accession #</span>
<i class="{{sortingColumnsIcons.accessionNumber}}">&nbsp;</i>
</div>
<input type="text"
class="form-control worklist-search"
id="accessionNumber"
placeholder="Accession #">
</th>
{{/unless}}
<th>
<input type="text"
class="form-control worklist-search"
name="daterange"
id="studyDate"
placeholder="Search Study Date">
<div id="_studyDate" class="sortingCell">
<span>Study Date</span>
<i class="{{sortingColumnsIcons.studyDate}}">&nbsp;</i>
</div>
<input type="text"
class="form-control worklist-search"
name="daterange"
id="studyDate"
placeholder="Study Date">
</th>
{{#unless isTouchDevice}}
<th>
<input type="text"
class="form-control worklist-search"
id="modality"
placeholder="Search Modality">
<div id="_modalities" class="sortingCell">
<span>Modality</span>
<i class="{{sortingColumnsIcons.modalities}}">&nbsp;</i>
</div>
<input type="text"
class="form-control worklist-search"
id="modality"
placeholder="Modality">
</th>
{{/unless}}
<th>
<input type="text"
class="form-control worklist-search"
id="studyDescription"
placeholder="Search Study Description">
<div id="_studyDescription" class="sortingCell">
<span>Study Description</span>
<i class="{{sortingColumnsIcons.studyDescription}}">&nbsp;</i>
</div>
<input type="text"
class="form-control worklist-search"
id="studyDescription"
placeholder="Study Description">
</th>
{{#unless isTouchDevice}}
<th>
<div id="_numberOfStudyRelatedInstances" class="sortingCell">
<span># Images</span>
<i class="{{sortingColumnsIcons.numberOfStudyRelatedInstances}}">&nbsp;</i>
</div>
</th>
<th>
<div id="_numberOfStudyRelatedInstances" class="sortingCell">
<span># Images</span>
<i class="{{sortingColumnsIcons.numberOfStudyRelatedInstances}}">&nbsp;</i>
</div>
<input type="text" class="form-control worklist-search invisible"/>
</th>
{{/unless}}
</tr>
</thead>

106
Packages/worklist/client/components/worklistResult/worklistResult.styl
View File

@ -1,20 +1,49 @@
#studyListContainer
position: relative
table#tblStudyList
color: #888888
border-collapse: collapse
border-color: gray
@import "{design}/app"
$hoverColor = #2c363f
$textPrimaryColor = white
$textSecondaryColor = #91b9cd
$inputBackgroundColor = #2c363f
$inputPlaceholderColor = lightgray
$studyListToolbarHeight = 75px
.studyListToolbar
height: $studyListToolbarHeight
background: #151a1f
border-bottom: 2px solid black
padding: 0 30px
div
display: inline-block
.header
font-size: 22px
font-weight: 200
color: $textSecondaryColor
padding: 0 10px
line-height: $studyListToolbarHeight
.worklistToolbar
height: $studyListToolbarHeight
line-height: $studyListToolbarHeight
.studyCount
font-size: 40px
font-weight: 100
color: #6fbde2
padding: 0 10px
line-height: $studyListToolbarHeight
#studyListContainer
table#tblStudyList
thead
background-color: black
background-color: #151a1f
white-space: nowrap
border-bottom: solid 1px #6fbde2;
tr
th:first-child
div.sortingCell
border-right: 0.5px dashed #555555
border-left: none
th
padding: 0
@ -24,11 +53,10 @@
width: 100%
min-width: 95px
margin: 0 auto
color: white
padding: 10px
font-weight: 500
color: $textPrimaryColor
font-weight: 400
padding: 20px
background: #171717
border-left: 0.5px dashed #555555
span
font-size: 15px
@ -43,38 +71,38 @@
input.worklist-search
height: 34px
margin: 0 5px 20px 5px
padding: 20px
cursor: pointer
padding: 10px
border: none
background-color: #707070
color: #434343
background-color: $inputBackgroundColor
color: $inputPlaceholderColor
font-size: 10pt
font-weight: normal
width: calc(100% - 10px)
border-radius: 4px
box-sizing: border-box
-webkit-transition: all 0.15s ease-in-out;
-moz-transition: all 0.15s ease-in-out;
-o-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
transition(all 0.15s ease)
&.invisible
visibility: hidden
&:active, &:hover
color: black
background-color: #d3d3d9
background-color: $inputBackgroundColor
&::-webkit-input-placeholder /* WebKit, Blink, Edge */
color: #434343
color: $inputPlaceholderColor
&:-moz-placeholder /* Mozilla Firefox 4 to 18 */
color: #434343
color: $inputPlaceholderColor
opacity: 1
&::-moz-placeholder /* Mozilla Firefox 19+ */
color: #434343
color: $inputPlaceholderColor
opacity: 1
&:-ms-input-placeholder /* Internet Explorer 10-11 */
color: #434343
color: $inputPlaceholderColor
::-webkit-datetime-edit-year-field:not([aria-valuenow]),
::-webkit-datetime-edit-month-field:not([aria-valuenow]),
@ -87,21 +115,23 @@
padding: 5px
background-color: black
&:nth-child(even)
background-color: #151a1f
td
color: #ffffff
border-top: 0.5px dashed #555555
color: $textPrimaryColor
font-weight: 200
border-top: 1px solid #436270
white-space: nowrap
-webkit-transition: all 0.1s ease
transition: all 0.1s ease
transition(all 0.1s ease)
&:hover, &:active, &.active
background-color: #009BD2
background-color: $hoverColor
color: white
td
// This selector is necessary to override bootstrap's 'table' class
border-top: 0.5px dashed #dddddd
border-bottom: 0.5px dashed #dddddd
color: white
background-color: #009BD2
border-top: 1px solid #436270
border-bottom: 1px solid #436270
background-color: $hoverColor

16
Packages/worklist/client/components/worklistToolbar/worklistToolbar.html
View File

@ -1,12 +1,12 @@
<template name="worklistToolbar">
<div id='worklistToolbar'>
<div class="btn-group">
{{#if importSupported }}
<span class="btn btn-default btn-file">
<i class="fa fa-upload"></i>
<input id="btnImport" title="Import Study" type="file" webkitdirectory directory multiple>
</span>
{{/if }}
<div class='worklistToolbar'>
{{#if importSupported }}
<div class="addNewStudy btn-file">
<label for="btnImport">
<i class="fa fa-plus"></i> Add new study
</label>
<input id="btnImport" class="inputfile" type="file" webkitdirectory directory multiple>
</div>
{{/if }}
</div>
</template>

11
Packages/worklist/client/components/worklistToolbar/worklistToolbar.js
View File

@ -11,7 +11,7 @@ Template.worklistToolbar.events({
'click #btnImport': function(e) {
// Reset file input
var fileInput = e.currentTarget;
$(fileInput).val("");
$(fileInput).val('');
}
});
@ -21,17 +21,14 @@ Template.worklistToolbar.helpers({
var studyListFunctionsEnabled = Meteor.settings && Meteor.settings.public && Meteor.settings.public.ui &&
Meteor.settings.public.ui.studyListFunctionsEnabled || false;
if (importSupported && studyListFunctionsEnabled) {
return true;
}
return false;
return (importSupported && studyListFunctionsEnabled);
}
});
Meteor.call("importSupported", function(err, result) {
Meteor.call('importSupported', function(err, result) {
if (!err && result) {
Session.set('importSupported', true);
} else {
Session.set('importSupported', false);
}
});
});

45
Packages/worklist/client/components/worklistToolbar/worklistToolbar.styl
View File

@ -1,27 +1,24 @@
#worklistToolbar
background-color: black
position: absolute
top: 0
right: 0
@import "{design}/app"
.btn-file
position: relative
overflow: hidden
width: 30px
height: 30px
padding: 5px
line-height: 20px
.worklistToolbar
.addNewStudy
margin: 0 10px
input[type=file]
position: absolute
top: 0
right: 0
min-width: 100%
min-height: 100%
font-size: 100 px
text-align: right
label
color: $textSecondaryColor
font-weight: 300
cursor: pointer
&:hover
color: $hoverColor
&:active
color: $activeColor
.inputfile
width: 0.1px;
height: 0.1px
opacity: 0
outline: none
background: white
cursor: inherit
display: block
overflow: hidden
position: absolute
z-index: -1

1
Packages/worklist/package.js
View File

@ -16,6 +16,7 @@ Package.onUse(function (api) {
api.use('silentcicero:jszip');
// Our custom packages
api.use('design');
api.use('dicomweb');
api.use('dimseservice');
api.use('orthanc-remote');