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

Creating a new quick switch template

Browse Source
This commit is contained in:
Bruno Alves de Faria 2017-10-17 17:30:05 -02:00
parent 3b629f9816
commit a583f5a124
12 changed files with 208 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
LesionTracker/client/components/viewer/viewer.styl
View File

@ -9,6 +9,7 @@
.viewportContainer
border: none !important
outline: 0 !important // Prevent blue outline in Chrome
position: relative
&:hover
&.active
@ -19,7 +20,7 @@
.removable
.imageViewerViewport
theme('border-bottom', '%s solid $uiBorderColor' % $uiBorderThickness)
canvas
border-color: transparent
border-style: solid
@ -29,17 +30,17 @@
.removable
.imageViewerViewport
theme('border-right', '%s solid $uiBorderColor' % $uiBorderThickness)
&:first-child
.removable
.imageViewerViewport
theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
&.active
.removable
.imageViewerViewport
border-right: none !important
canvas
theme('border-color', '$uiBorderColorActive')
@ -51,4 +52,4 @@
&:first-child
.removable
.imageViewerViewport
border-left: none
border-left: none

8
LesionTracker/client/components/viewerSection/viewerSection.styl
View File

@ -45,10 +45,16 @@
flex: 1
height: 100%
order: 2
overflow: hidden
overflow: visible
position: relative
transition($sidebarTransition)
width: 100%
.viewerMain
left: 0
position: absolute
top: 0
.sidebar-right
flex: 1
margin-right: - $lesionsSidebarMenuWidth

4
Packages/ohif-core/client/components/scrollArea/scrollArea.js
View File

@ -22,8 +22,8 @@ Template.scrollArea.onRendered(() => {
const x = config.scrollX ? 1 : 0;
const y = config.scrollY ? 1 : 0;
$scrollable.css({
right: 0 - (scrollable.offsetWidth - scrollable.clientWidth) * y,
bottom: 0 - (scrollable.offsetHeight - scrollable.clientHeight) * x
'margin-right': 0 - (scrollable.offsetWidth - scrollable.clientWidth) * y,
'margin-bottom': 0 - (scrollable.offsetHeight - scrollable.clientHeight) * x
});
}
});

7
Packages/ohif-design/styles/common/global.styl
View File

@ -143,15 +143,10 @@ body .select2-container--default .select2-results>.select2-results__options
.scroll-area
overflow: hidden
position: relative
.scrollable
bottom: 0
left: 0
max-height: inherit
overflow: hidden
position: absolute
right: 0
top: 0
&.scroll-x
overflow-x: scroll

3
Packages/ohif-design/styles/imports/spacings.styl
View File

@ -23,6 +23,9 @@ generateSpacings($prefix, $spacerX, $spacerY)
$axes = x left right 0,
y top bottom 1
.r-font
font-size: $spacerX
for $property in $properties
for $spacing in $spacings
.{$prefix}{$property[0]}-a-{$spacing[0]}

1
Packages/ohif-viewerbase/client/components/viewer/gridLayout/gridLayout.html
View File

@ -5,6 +5,7 @@
<div class="removable">
{{>imageViewerViewport (clone viewport)}}
</div>
{{>seriesQuickSwitch (clone this viewportIndex=@index)}}
</div>
{{/each}}
</div>

31
Packages/ohif-viewerbase/client/components/viewer/seriesQuickSwitch/seriesQuickSwitch.html Normal file
View File

@ -0,0 +1,31 @@
<template name="seriesQuickSwitch">
{{#if shallDisplay}}
<div class="series-quick-switch {{side}} clearfix">
<div class="series-switch rp-t-1 rp-x-1">
<div class="title-label">Series</div>
<div class="series-box r-font">
<div class="series-item"></div>
<div class="series-item"></div>
<div class="series-item"></div>
<div class="series-item"></div>
<div class="series-item"></div>
<div class="series-item"></div>
<div class="series-item"></div>
<div class="series-item"></div>
<div class="series-item count">37</div>
{{#scrollArea class='series-browser'}}
<div>BBBBB</div>
{{/scrollArea}}
</div>
</div>
<div class="study-switch rp-t-1 rp-x-1">
<div class="title-label">Study</div>
<div class="study-box r-font">
{{#scrollArea class='study-browser'}}
<div>AAAAA</div>
{{/scrollArea}}
</div>
</div>
</div>
{{/if}}
</template>

29
Packages/ohif-viewerbase/client/components/viewer/seriesQuickSwitch/seriesQuickSwitch.js Normal file
View File

@ -0,0 +1,29 @@
import { Template } from 'meteor/templating';
import { $ } from 'meteor/jquery';
import { OHIF } from 'meteor/ohif:core';
// FIXME >>>> REMOVE
$(document.body).on('keydown', e => (e.keyCode === 69 && $('.quickSwitchWrapper').toggle()) || 1);
Template.seriesQuickSwitch.helpers({
shallDisplay() {
const instance = Template.instance();
const { rows, columns } = instance.data;
return OHIF.uiSettings.displaySeriesQuickSwitch && rows === 1 && columns <= 2;
},
side() {
const instance = Template.instance();
const { columns, viewportIndex } = instance.data;
if (columns === 1) return '';
return viewportIndex === 0 ? 'left' : 'right';
}
});
Template.seriesQuickSwitch.events({
'mouseenter .series-switch'(event, instance) {
const $switch = $(event.currentTarget);
const browserWidth = $switch.offset().left + $switch.outerWidth();
$switch.find('.series-browser').width(browserWidth);
}
});

115
Packages/ohif-viewerbase/client/components/viewer/seriesQuickSwitch/seriesQuickSwitch.styl Normal file
View File

@ -0,0 +1,115 @@
@require '{ohif:design}/app'
.series-quick-switch
position: absolute
top: calc(100% - 100vh)
&:before
box-shadow(0 0 0 5000px rgba(0, 0, 0, 0.8))
transition(opacity 0.3s ease)
opacity: 0
&:hover
z-index: 2
&:before
opacity: 1
&:not(.left):not(.right)
left: 50%
transform(translateX(-50%))
&.left
theme('border-right', '1px solid $uiBorderColor')
right: 0
&.right
left: 0
.series-switch
float: right
.study-switch
float: left
.study-browser
left: auto
right: 0
transform-origin(calc(100% - 1em) calc(1em + 17px))
.series-browser
left: 0
right: auto
transform-origin(1em calc(1em + 15px))
.series-box .series-item
float: left
.title-label
theme('color', '$textSecondaryColor')
font-size: 12px
font-weight: 500
line-height: 12px
padding-bottom: 3px
text-align: center
.series-switch,
.study-switch
float: left
position: relative
.study-browser
background: purple
left: 0
transform-origin(1em calc(1em + 17px))
width: 285px
.series-browser
background: blue
max-width: 711px
right: 0
transform-origin(calc(100% - 1em) calc(1em + 15px))
.series-browser,
.study-browser
max-height: 100vh
min-height: 120px
position: absolute
top: 0
transform(scale(0))
transition(transform 0.3s ease)
.series-box
height: 57px
width: 57px
.series-item
theme('background-color', '$boxBackgroundColor')
border-radius(3px)
float: right
height: 15px
margin: 2px
width: 15px
&.count
theme('color', '$textPrimaryColor')
background-color: transparent
font-size: 12px
font-weight: 500
line-height: 17px
text-align: center
&.active
theme('background-color', '$activeColor')
.study-box
theme('background-color', '$uiGrayDark')
theme('border', 'solid 2px $uiBorderColorDark')
border-radius: 11px
height: 57px
width: 57px
.series-switch:hover .series-browser,
.study-switch:hover .study-browser
transform(scale(1))

6
Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.html
View File

@ -1,7 +1,7 @@
<template name="studySeriesQuickSwitch">
<div class="quickSwitchWrapper {{side}}">
<div class="quickSwitch js-quick-switch clearfix rp-t-1 {{#if eq side 'right'}}rp-l-3{{/if}}{{#if eq side 'left'}}rp-r-3{{/if}}">
<div class="switchSection switchSectionStudy rp-x-1 {{#if eq side 'right'}}pull-left{{else}}pull-right{{/if}}">
<div class="quickSwitch js-quick-switch clearfix {{#if eq side 'right'}}rp-l-3{{/if}}{{#if eq side 'left'}}rp-r-3{{/if}}">
<div class="switchSection switchSectionStudy rp-t-1 rp-x-1 {{#if eq side 'right'}}pull-left{{else}}pull-right{{/if}}">
<div class="label">Study</div>
<div class="studySwitch">
<div class="studyBox"></div>
@ -12,7 +12,7 @@
</div>
</div>
</div>
<div class="switchSection switchSectionSeries rp-x-1 {{#if eq side 'right'}}pull-left{{else}}pull-right{{/if}}">
<div class="switchSection switchSectionSeries rp-t-1 rp-x-1 {{#if eq side 'right'}}pull-left{{else}}pull-right{{/if}}">
{{#let thumbnailsList=(studyThumbnails currentStudy)}}
<div class="label">Series</div>
<div class="seriesSwitch clearfix">

8
Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.styl
View File

@ -1,4 +1,4 @@
@import "{ohif:design}/app"
@require '{ohif:design}/app'
$switchSize = 55px
$seriesSpacing = 2px
@ -103,10 +103,14 @@ $seriesSpacing = 2px
position: relative
.studySwitch
padding: 2px 1px 0
.studyTimepointBrowser
background-color: transparent
.study-browser-item.active .study-item-box
theme('box-shadow', 'inset 0 0 0 3px $activeColor')
.studyBox
theme('background-color', '$uiGrayDark')
theme('border', 'solid 2px $uiBorderColorDark')
@ -121,7 +125,7 @@ $seriesSpacing = 2px
width: $switchSize + $seriesSpacing
.seriesItem
theme('background-color', '$boxBackgroundColor')Dark
theme('background-color', '$boxBackgroundColor')
border-radius: 3px
height: 15px
margin: $seriesSpacing

4
Packages/ohif-viewerbase/package.js
View File

@ -179,6 +179,10 @@ Package.onUse(function(api) {
api.addFiles('client/components/viewer/textMarkerDialogs/textMarkerDialogs.js', 'client');
api.addFiles('client/components/viewer/textMarkerDialogs/textMarkerDialogs.styl', 'client');
api.addFiles('client/components/viewer/seriesQuickSwitch/seriesQuickSwitch.html', 'client');
api.addFiles('client/components/viewer/seriesQuickSwitch/seriesQuickSwitch.styl', 'client');
api.addFiles('client/components/viewer/seriesQuickSwitch/seriesQuickSwitch.js', 'client');
api.addFiles('client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.html', 'client');
api.addFiles('client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.styl', 'client');
api.addFiles('client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.js', 'client');