Adding close button to CINE dialog
This commit is contained in:
Bruno Alves de Faria
parent
68f7626515
commit
6e3e44a1fe
@ -112,19 +112,6 @@ body .select2-container--default .select2-results>.select2-results__options
|
||||
.modal-header, .modal-footer
|
||||
theme('border-color', '$uiBorderColor')
|
||||
|
||||
button.close
|
||||
theme('color', '$textSecondaryColor')
|
||||
opacity: 1
|
||||
overflow: hidden
|
||||
text-align: center
|
||||
text-shadow: none
|
||||
transition(color 0.3s ease)
|
||||
width: 20px
|
||||
|
||||
span
|
||||
display: block
|
||||
line-height: 20px
|
||||
|
||||
&:hover
|
||||
theme('color', '$textPrimaryColor')
|
||||
|
||||
@ -133,6 +120,66 @@ body .select2-container--default .select2-results>.select2-results__options
|
||||
border-radius(5px)
|
||||
padding: 10px
|
||||
|
||||
.modal-header
|
||||
position: relative
|
||||
|
||||
button.close
|
||||
position: absolute
|
||||
right: 21px
|
||||
top: 50%
|
||||
transform(translateY(-50%))
|
||||
transition(color 0.3s ease)
|
||||
|
||||
.button-close, .modal-dialog button.close
|
||||
theme('color', '$textSecondaryColor')
|
||||
height: 20px
|
||||
opacity: 1
|
||||
overflow: hidden
|
||||
padding: 2px
|
||||
text-align: center
|
||||
text-shadow: none
|
||||
width: 20px
|
||||
|
||||
&:hover span
|
||||
&:before, &:after
|
||||
theme('background-color', '$textPrimaryColor')
|
||||
|
||||
&:active span
|
||||
&:before, &:after
|
||||
theme('background-color', '$activeColor')
|
||||
|
||||
span
|
||||
color: transparent
|
||||
display: block
|
||||
font-size: 0
|
||||
height: 100%
|
||||
line-height: 0
|
||||
overflow: hidden
|
||||
position: relative
|
||||
width: 100%
|
||||
|
||||
&:before, &:after
|
||||
theme('background-color', '$textSecondaryColor')
|
||||
content: ' '
|
||||
display: block
|
||||
height: 2px
|
||||
transition(background-color 0.3s ease)
|
||||
width: 19px
|
||||
|
||||
&:before
|
||||
left: 1px
|
||||
position: absolute
|
||||
top: 1px
|
||||
transform(rotate(45deg))
|
||||
transform-origin(1px 50%)
|
||||
|
||||
&:after
|
||||
right: 1px
|
||||
position: absolute
|
||||
top: 1px
|
||||
transform(rotate(-45deg))
|
||||
transform-origin(calc(100% - 1px) 50%)
|
||||
|
||||
.full-width
|
||||
width: 100%
|
||||
|
||||
|
||||
@ -2,15 +2,8 @@
|
||||
<dialog id="cineDialog">
|
||||
{{#form id='cineDialogForm' class=(getClassNames 'dialog-animated noselect') schema=instance.schema api=instance.api}}
|
||||
{{>inputHidden key='intervalId'}}
|
||||
<div class="cine-navigation">
|
||||
<div class="btn-group">
|
||||
{{#button class='btn' disabled=(displaySetDisabled false) action='displaySetPrevious' title='Previous display set'}}
|
||||
<i class="fa fa-toggle-up"></i>
|
||||
{{/button}}
|
||||
{{#button class='btn' disabled=(displaySetDisabled true) action='displaySetNext' title='Next display set'}}
|
||||
<i class="fa fa-toggle-down"></i>
|
||||
{{/button}}
|
||||
</div>
|
||||
<div class="button-close-container">
|
||||
<div class="button-close"><span aria-hidden="true">x</span></div>
|
||||
</div>
|
||||
<div class="cine-controls">
|
||||
<div class="btn-group">
|
||||
@ -42,6 +35,16 @@
|
||||
</div>
|
||||
<span id="fps">{{framerate}} fps</span>
|
||||
</div>
|
||||
<div class="cine-navigation">
|
||||
<div class="btn-group">
|
||||
{{#button class='btn' disabled=(displaySetDisabled false) action='displaySetPrevious' title='Previous display set'}}
|
||||
<i class="fa fa-toggle-up"></i>
|
||||
{{/button}}
|
||||
{{#button class='btn' disabled=(displaySetDisabled true) action='displaySetNext' title='Next display set'}}
|
||||
<i class="fa fa-toggle-down"></i>
|
||||
{{/button}}
|
||||
</div>
|
||||
</div>
|
||||
{{/form}}
|
||||
</dialog>
|
||||
</template>
|
||||
|
||||
@ -5,6 +5,7 @@ import { Tracker } from 'meteor/tracker';
|
||||
import { _ } from 'meteor/underscore';
|
||||
import { $ } from 'meteor/jquery';
|
||||
import { OHIF } from 'meteor/ohif:core';
|
||||
import { cornerstoneTools } from 'meteor/ohif:cornerstone';
|
||||
import { viewportUtils } from '../../../lib/viewportUtils';
|
||||
import { switchToImageRelative } from '../../../lib/switchToImageRelative';
|
||||
import { switchToImageByIndex } from '../../../lib/switchToImageByIndex';
|
||||
@ -163,6 +164,7 @@ Template.cineDialog.onCreated(() => {
|
||||
const $viewer = $('#viewer');
|
||||
const $toolbarElement = $('.toolbarSection .toolbarSectionTools:first');
|
||||
const $cineDialog = $('#cineDialog');
|
||||
$cineDialog.width($('#cineDialogForm').outerWidth());
|
||||
|
||||
if ($toolbarElement.length < 1 || $cineDialog.length < 1) {
|
||||
return;
|
||||
@ -240,7 +242,7 @@ Template.cineDialog.onRendered(() => {
|
||||
$dialog.draggable({ defaultElementCursor: 'move' }).bounded();
|
||||
|
||||
// Polyfill for older browsers
|
||||
dialogPolyfill.registerDialog($dialog.get(0));
|
||||
window.dialogPolyfill.registerDialog($dialog.get(0));
|
||||
|
||||
// Prevent dialog from being dragged when user clicks any button
|
||||
const $controls = $dialog.find('.cine-navigation, .cine-controls, .cine-options');
|
||||
@ -268,6 +270,10 @@ Template.cineDialog.events({
|
||||
// Update the FPS text onscreen
|
||||
const rate = parseFloat($(event.currentTarget).val());
|
||||
instance.updateFramerate(rate);
|
||||
},
|
||||
|
||||
'click .button-close'(event, instance) {
|
||||
OHIF.commands.run('toggleCineDialog');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -1,17 +1,32 @@
|
||||
@import "{ohif:design}/app"
|
||||
@require '{ohif:design}/app'
|
||||
|
||||
#cineDialog
|
||||
theme('border', '2px solid $uiBorderColor', 0.95)
|
||||
theme('background', '$uiGrayDarkest', 0.95)
|
||||
theme('background', '$uiGrayDarkest', 0.85)
|
||||
theme('color', '$textSecondaryColor')
|
||||
filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.85))
|
||||
border: none
|
||||
border-radius: 8px
|
||||
cursor: move
|
||||
overflow: hidden
|
||||
padding: 0
|
||||
position: absolute
|
||||
width: 300px
|
||||
z-index: 1000
|
||||
|
||||
.button-close-container
|
||||
theme('background', '$uiGrayDarkest')
|
||||
border-radius(16px)
|
||||
cursor: pointer
|
||||
height: 32px
|
||||
position: absolute
|
||||
right: -8px
|
||||
top: -10px
|
||||
width: 32px
|
||||
|
||||
.button-close
|
||||
left: 50%
|
||||
position: absolute
|
||||
top: 50%
|
||||
transform(translateX(-50%) translateY(-50%))
|
||||
|
||||
h5
|
||||
font-size: 20px
|
||||
line-height: 35px
|
||||
@ -50,7 +65,7 @@
|
||||
|
||||
.double-row-style
|
||||
box-sizing: border-box
|
||||
width: 300px
|
||||
width: 290px
|
||||
height: 80px
|
||||
padding: 10px
|
||||
top: 2%
|
||||
@ -58,15 +73,15 @@
|
||||
|
||||
.cine-navigation
|
||||
position: absolute
|
||||
right: 4px
|
||||
top: 4px
|
||||
right: 16px
|
||||
top: 10px
|
||||
|
||||
.btn
|
||||
padding: 0 4px
|
||||
|
||||
i
|
||||
font-size: 36px
|
||||
line-height: 36px
|
||||
font-size: 32px
|
||||
line-height: 32px
|
||||
|
||||
.cine-controls
|
||||
left: 0px
|
||||
@ -80,7 +95,7 @@
|
||||
|
||||
#fps
|
||||
float: right
|
||||
padding: 5px 10px 0 0
|
||||
margin: 5px 20px 0 0
|
||||
|
||||
|
||||
.single-row-style
|
||||
@ -92,9 +107,10 @@
|
||||
left: 35%
|
||||
|
||||
.cine-navigation
|
||||
position: relative
|
||||
float: right
|
||||
overflow: hidden
|
||||
padding-right: 12px
|
||||
position: relative
|
||||
|
||||
.btn
|
||||
padding: 0 2px
|
||||
@ -104,7 +120,7 @@
|
||||
margin-left: 0
|
||||
|
||||
i
|
||||
font-size: 38px
|
||||
font-size: 32px
|
||||
line-height: 45px
|
||||
|
||||
.cine-controls
|
||||
|
||||
Loading…
Reference in New Issue
Block a user