Updating design of OHIF Viewer using (OHIF-49)
This commit is contained in:
Erik Ziegler committed
1 parent
f53ee8e030
commit
a6c45ddd27
59 files changed
+776
-565
No files matched your search
@@ -1,16 +1,18 @@
|
||||
@import "{design}/app.styl"
|
||||
|
||||
#imageViewerViewports
|
||||
height: 100%
|
||||
width: 100%
|
||||
|
||||
.viewportContainer
|
||||
float: left
|
||||
border: 2px solid #777
|
||||
border: $viewportBorderThickness solid $viewportBorderColor
|
||||
|
||||
&.active, &:hover.active
|
||||
border: 2px solid #9A6617
|
||||
border: $viewportBorderThickness solid $viewportBorderColorActive
|
||||
|
||||
&:hover
|
||||
border: 2px solid white
|
||||
border: $viewportBorderThickness solid $viewportBorderColorHover
|
||||
|
||||
.removable
|
||||
width: 100%
|
||||
|
||||
+10
-17
@@ -1,10 +1,12 @@
|
||||
@import "{design}/app.styl"
|
||||
|
||||
.imageViewerViewport
|
||||
width: 100%
|
||||
height: 100%
|
||||
background-color: black
|
||||
|
||||
// Prevent the blue outline in Chrome when a viewport is selected
|
||||
outline: 0 !important;
|
||||
outline: 0 !important
|
||||
|
||||
// Prevents the entire page from getting larger
|
||||
// when the magnify tool is near the sides/corners of the page
|
||||
@@ -13,7 +15,7 @@
|
||||
.viewportInstructions
|
||||
display: none
|
||||
font-size: 13px
|
||||
color: #e4ad00
|
||||
color: $textSecondaryColor
|
||||
line-height: 18px
|
||||
pointer-events: none // Necessary for drag/drop through to cornerstone element below
|
||||
text-align: center
|
||||
@@ -27,18 +29,9 @@
|
||||
|
||||
/* These are some good CSS settings for a circular magnifying glass
|
||||
Try removing the border-radius to make a square magnifying glass */
|
||||
.magnifyTool{
|
||||
border: 4px white solid;
|
||||
box-shadow: 2px 2px 10px #1e1e1e;
|
||||
border-radius: 50%;
|
||||
display: none;
|
||||
cursor: none;
|
||||
}
|
||||
/* prevents selection when left click dragging */
|
||||
.disable-selection {
|
||||
-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;
|
||||
}
|
||||
/* prevents cursor from changing to the i bar on the overlays*/
|
||||
.noIbar {
|
||||
cursor:default;
|
||||
}
|
||||
.magnifyTool
|
||||
border: 4px white solid
|
||||
box-shadow: 2px 2px 10px #1e1e1e
|
||||
border-radius: 50%
|
||||
display: none
|
||||
cursor: none
|
||||
@@ -1,18 +1,22 @@
|
||||
@import "{design}/app.styl"
|
||||
|
||||
.layoutChooser
|
||||
width: 92px
|
||||
height: 92px
|
||||
min-width: 92px // to override bootstrap's dropdown-menu class
|
||||
min-height: 92px
|
||||
background-color: $primaryBackgroundColor
|
||||
border: 2px solid $uiBorderColorDark
|
||||
|
||||
table
|
||||
margin: 0 auto
|
||||
|
||||
td
|
||||
cursor: pointer
|
||||
border: 2px solid black
|
||||
border: 2px solid $uiBorderColorDark
|
||||
width: 20px
|
||||
height: 20px
|
||||
transition: background-color 0.1s ease
|
||||
transition(background-color 0.1s ease)
|
||||
|
||||
&:hover, &.hover // Add the hover class here to be triggered by mouseenter/mouseleave
|
||||
background-color: gray
|
||||
background-color: $activeColor
|
||||
@@ -1,6 +1,8 @@
|
||||
@import "{design}/app.styl"
|
||||
|
||||
.imageViewerLoadingIndicator
|
||||
display: none
|
||||
color: #ffa500
|
||||
color: $textPrimaryColor
|
||||
|
||||
.faded
|
||||
opacity: 0.5
|
||||
@@ -11,7 +13,7 @@
|
||||
|
||||
p, h4
|
||||
text-align: center
|
||||
color: #ffa500
|
||||
color: $textColorActive
|
||||
padding: 4px 0px
|
||||
|
||||
p
|
||||
|
||||
@@ -1,14 +1,24 @@
|
||||
<template name="playClipButton">
|
||||
<button id="playClip" type="button" class="imageViewerCommand btn btn-sm btn-default"
|
||||
data-container="body" data-toggle="tooltip" data-placement="bottom" title="Play/Stop Clip">
|
||||
<button id="playClip"
|
||||
type="button"
|
||||
class="imageViewerCommand btn btn-sm {{ #if isPlaying }}active{{/if}}"
|
||||
data-container="body"
|
||||
data-toggle="tooltip"
|
||||
data-placement="bottom"
|
||||
title="Play/Stop Clip">
|
||||
{{ #if isPlaying }}
|
||||
<span class="fa fa-stop"></span>
|
||||
{{ else }}
|
||||
<span class="fa fa-play"></span>
|
||||
{{ /if }}
|
||||
</button>
|
||||
<button id="toggleCineDialog" type="button" class="imageViewerCommand btn btn-sm btn-default"
|
||||
data-container="body" data-toggle="tooltip" data-placement="bottom" title="Toggle CINE Dialog">
|
||||
<button id="toggleCineDialog"
|
||||
type="button"
|
||||
class="imageViewerCommand btn btn-sm"
|
||||
data-container="body"
|
||||
data-toggle="tooltip"
|
||||
data-placement="bottom"
|
||||
title="Toggle CINE Dialog">
|
||||
<span class="fa fa-youtube-play"></span>
|
||||
</button>
|
||||
</template>
|
||||
+7
-1
@@ -1,5 +1,11 @@
|
||||
<template name="simpleToolbarButton">
|
||||
<button id="{{id}}" type="button" class="{{classes}} btn btn-sm btn-default" data-container="body" data-toggle="tooltip" data-placement="bottom" title="{{title}}">
|
||||
<button id="{{id}}"
|
||||
type="button"
|
||||
class="{{classes}} btn btn-sm {{activeClass}}"
|
||||
data-container="body"
|
||||
data-toggle="tooltip"
|
||||
data-placement="bottom"
|
||||
title="{{title}}">
|
||||
<span class="{{iconClasses}}"></span>
|
||||
</button>
|
||||
</template>
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
Template.simpleToolbarButton.helpers({
|
||||
activeClass() {
|
||||
const instance = Template.instance();
|
||||
|
||||
// Check if the current tool is the active one
|
||||
if (instance.data.id === Session.get('ToolManagerActiveTool')) {
|
||||
// Return the active class
|
||||
return 'active';
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
});
|
||||
@@ -1,31 +1,37 @@
|
||||
<template name="toolbar">
|
||||
<div id='toolbar'>
|
||||
<div class="btn-group">
|
||||
{{ #each button }}
|
||||
{{ >simpleToolbarButton}}
|
||||
{{ /each }}
|
||||
|
||||
{{ #if includePlayClipButton }}
|
||||
{{ >playClipButton }}
|
||||
{{ /if }}
|
||||
|
||||
{{ #if includeLayoutButton }}
|
||||
<div class="btn-group">
|
||||
{{ #each button }}
|
||||
{{ >simpleToolbarButton}}
|
||||
{{ /each }}
|
||||
|
||||
{{ #if includePlayClipButton }}
|
||||
{{ >playClipButton }}
|
||||
{{ /if }}
|
||||
|
||||
{{ #if includeLayoutButton }}
|
||||
<div class="btn-group">
|
||||
<button id="layout" type="button" class="btn btn-sm btn-default dropdown-toggle" data-container="body" data-toggle="dropdown" aria-expanded="false" data-placement="right" title="Layout" rel="tooltip">
|
||||
<span class="fa fa-th-large"></span>
|
||||
</button>
|
||||
{{ >layoutChooser }}
|
||||
</div>
|
||||
{{ /if }}
|
||||
|
||||
{{ #if includeHangingProtocolButtons }}
|
||||
{{ >hangingProtocolButtons }}
|
||||
{{ >matchedProtocols }}
|
||||
{{ /if }}
|
||||
|
||||
{{ #each btnGroup }}
|
||||
{{ >toolbarGroupButton}}
|
||||
{{ /each }}
|
||||
<button id="layout"
|
||||
type="button"
|
||||
class="btn btn-sm dropdown-toggle"
|
||||
data-container="body"
|
||||
data-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
data-placement="right"
|
||||
title="Layout"
|
||||
rel="tooltip">
|
||||
<span class="fa fa-th-large"></span>
|
||||
</button>
|
||||
{{ >layoutChooser }}
|
||||
</div>
|
||||
{{ /if }}
|
||||
|
||||
{{ #if includeHangingProtocolButtons }}
|
||||
{{ >hangingProtocolButtons }}
|
||||
{{ >matchedProtocols }}
|
||||
{{ /if }}
|
||||
|
||||
{{ #each btnGroup }}
|
||||
{{ >toolbarGroupButton}}
|
||||
{{ /each }}
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,16 +1,21 @@
|
||||
#toolbar
|
||||
background-color: black
|
||||
text-align: center
|
||||
@import "{design}/app.styl"
|
||||
|
||||
.btn-group
|
||||
background-color: $primaryBackgroundColor
|
||||
display: inline-block
|
||||
|
||||
.btn-group
|
||||
display: inline-block
|
||||
button
|
||||
text-align: center
|
||||
color: $defaultColor
|
||||
background-color: $primaryBackgroundColor
|
||||
border-color: $uiBorderColor
|
||||
transition(all 0.1s ease)
|
||||
|
||||
button
|
||||
text-align: center
|
||||
color: #ffffff
|
||||
background-color: #424242
|
||||
border-color: #424242
|
||||
outline: none
|
||||
|
||||
&.active, &:active
|
||||
background-color: #3B678E
|
||||
// Prevent the blue outline in Chrome when a viewport is selected
|
||||
outline: 0 !important
|
||||
|
||||
&:hover
|
||||
color: $hoverColor
|
||||
|
||||
&.active, &:active
|
||||
color: $activeColor
|
||||
-12
@@ -1,12 +0,0 @@
|
||||
<template name="toolbarGroupButton">
|
||||
<div id="toolbarGroupButton" class="btn-group">
|
||||
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="{{id}}" title="{{title}}">
|
||||
<i class="{{groupIcon}}"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
{{#each tools}}
|
||||
<div><a class="dropdown-item" href="#">{{> simpleToolbarButton}}</a></div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Whitespace-only changes.
-14
@@ -1,14 +0,0 @@
|
||||
#toolbarGroupButton
|
||||
button
|
||||
&.active, &:active
|
||||
background-color: #3B678E
|
||||
|
||||
.dropdown-menu
|
||||
background-color: black
|
||||
border: solid 1px #333
|
||||
padding: 5px
|
||||
margin-top: 0
|
||||
|
||||
div
|
||||
padding: 5px
|
||||
float: left
|
||||
@@ -0,0 +1,6 @@
|
||||
<template name="viewerMain">
|
||||
<div class="viewerMain">
|
||||
<div id='layoutManagerTarget'>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,10 @@
|
||||
Template.viewerMain.onRendered(function() {
|
||||
var instance = this;
|
||||
var studies = instance.data.studies;
|
||||
|
||||
var parentElement = instance.$("#layoutManagerTarget").get(0);
|
||||
window.layoutManager = new LayoutManager(parentElement, studies);
|
||||
|
||||
ProtocolEngine = new HP.ProtocolEngine(window.layoutManager, studies);
|
||||
HP.setEngine(ProtocolEngine);
|
||||
});
|
||||
@@ -0,0 +1,17 @@
|
||||
@import "{design}/app"
|
||||
|
||||
.viewerMain
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
#layoutManagerTarget
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
transition(all 0.3s ease)
|
||||
|
||||
#imageViewerViewports
|
||||
.viewportContainer:not(:last-child)
|
||||
.removable
|
||||
.imageViewerViewport
|
||||
border-right: $uiBorderThickness solid #436270
|
||||
@@ -1,31 +1,107 @@
|
||||
@import "{design}/app"
|
||||
|
||||
$viewportTagPadding = 20px
|
||||
$imageSliderBorderRadius = 57px
|
||||
$imageSliderColor = $boxBackgroundColorDark
|
||||
$imageSliderTrackColor = rgba(0,0,0,0)
|
||||
$imageSliderBorder = none
|
||||
|
||||
// Note that these are backwards due to the magic needed to make a cross-browser vertical slider
|
||||
$imageSliderWidth = 12px
|
||||
$imageSliderHeight = 39px
|
||||
$imageSliderCursor = grab
|
||||
|
||||
.imageViewerViewportOverlay
|
||||
font-size: 18px
|
||||
color: #979797
|
||||
line-height: 1.4
|
||||
display: none // Shown when an image is loaded
|
||||
color: $textSecondaryColor
|
||||
|
||||
.dicomTag
|
||||
pointer-events: none // Necessary for drag/drop through to cornerstone element below
|
||||
position: absolute
|
||||
font-weight: 200
|
||||
|
||||
.topleft
|
||||
top: 3px
|
||||
left: 3px
|
||||
|
||||
top: $viewportTagPadding
|
||||
left: $viewportTagPadding
|
||||
|
||||
.topright
|
||||
top: 3px
|
||||
right: 3px
|
||||
text-align: right
|
||||
|
||||
.bottomleft
|
||||
bottom: 3px
|
||||
left: 3px
|
||||
|
||||
.bottomright
|
||||
bottom: 3px
|
||||
right: 3px
|
||||
top: $viewportTagPadding
|
||||
right: $viewportTagPadding
|
||||
text-align: right
|
||||
|
||||
.bottomleft
|
||||
bottom: $viewportTagPadding
|
||||
left: $viewportTagPadding
|
||||
|
||||
.bottomright
|
||||
bottom: $viewportTagPadding
|
||||
right: $viewportTagPadding
|
||||
text-align: right
|
||||
|
||||
.priorIndicator
|
||||
font-weight: bold
|
||||
color: yellow
|
||||
color: yellow
|
||||
|
||||
.imageControls
|
||||
#scrollbar
|
||||
#imageSlider
|
||||
-webkit-appearance: none
|
||||
background-color: $imageSliderTrackColor
|
||||
|
||||
// --- Style the range track --- //
|
||||
&::-webkit-slider-runnable-track
|
||||
height: 5px
|
||||
border: none
|
||||
cursor: pointer
|
||||
background-color: $imageSliderTrackColor
|
||||
z-index: 6
|
||||
|
||||
&::-moz-range-track
|
||||
height: 2px
|
||||
border: none
|
||||
cursor: pointer
|
||||
background-color: $imageSliderTrackColor
|
||||
z-index: 6
|
||||
|
||||
&::-ms-track
|
||||
width: 100%
|
||||
height: 2px
|
||||
border: none
|
||||
cursor: pointer
|
||||
animate: 0.2s
|
||||
background: transparent
|
||||
border-width: 15px 0
|
||||
color: $imageSliderTrackColor
|
||||
|
||||
// Hide any fill IE tries to add
|
||||
&::-ms-fill-lower
|
||||
background: $imageSliderTrackColor
|
||||
|
||||
&::-ms-fill-upper
|
||||
background: $imageSliderTrackColor
|
||||
|
||||
// --- Style the range thumb --- //
|
||||
&::-webkit-slider-thumb
|
||||
-webkit-appearance: none !important
|
||||
background-color: $imageSliderColor
|
||||
border-radius: $imageSliderBorderRadius
|
||||
border: $imageSliderBorder
|
||||
height: $imageSliderWidth
|
||||
width: $imageSliderHeight
|
||||
cursor: $imageSliderCursor
|
||||
margin-top: -7px
|
||||
|
||||
&::-moz-range-thumb
|
||||
background-color: $imageSliderColor
|
||||
border-radius: $imageSliderBorderRadius
|
||||
border: $imageSliderBorder
|
||||
height: $imageSliderWidth
|
||||
width: $imageSliderHeight
|
||||
cursor: $imageSliderCursor
|
||||
z-index: 7
|
||||
|
||||
&::-ms-thumb
|
||||
background-color: $imageSliderColor
|
||||
border-radius: $imageSliderBorderRadius
|
||||
border: $imageSliderBorder
|
||||
height: $imageSliderWidth
|
||||
width: $imageSliderHeight
|
||||
cursor: $imageSliderCursor
|
||||
Reference in new issue
Block a user