TrizTech/ohif-viewer
17
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 committed 2016-07-22 11:00:16 +02:00
1 parent d014c72aa4
commit 7c92b9a7dd
11 files changed
+211 -143
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Packages/worklist/client/components/worklist.styl
-1
View File
@@ -20,7 +20,6 @@ body
background-color: black
margin: 0 auto
color: white
padding: 20px 30px
#tabs
width: 100%
Packages/worklist/client/components/worklistResult/worklistResult.html
+44 -33
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>
Packages/worklist/client/components/worklistResult/worklistResult.styl
+68 -38
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
Packages/worklist/client/components/worklistToolbar/worklistToolbar.html
+8 -8
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>
Packages/worklist/client/components/worklistToolbar/worklistToolbar.js
+4 -7
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);
}
});
});
Packages/worklist/client/components/worklistToolbar/worklistToolbar.styl
+21 -24
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