From 6e3e44a1fe1a86d0ebb2bffc9f0981758866bd64 Mon Sep 17 00:00:00 2001 From: Bruno Alves de Faria Date: Tue, 27 Feb 2018 18:16:54 -0300 Subject: [PATCH] Adding close button to CINE dialog --- .../ohif-design/styles/common/global.styl | 73 +++++++++++++++---- .../viewer/cineDialog/cineDialog.html | 21 +++--- .../viewer/cineDialog/cineDialog.js | 8 +- .../viewer/cineDialog/cineDialog.styl | 42 +++++++---- 4 files changed, 108 insertions(+), 36 deletions(-) diff --git a/Packages/ohif-design/styles/common/global.styl b/Packages/ohif-design/styles/common/global.styl index 55cd0346c..2bc546d45 100644 --- a/Packages/ohif-design/styles/common/global.styl +++ b/Packages/ohif-design/styles/common/global.styl @@ -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% diff --git a/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.html b/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.html index b359df62d..d808fb045 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.html +++ b/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.html @@ -2,15 +2,8 @@ {{#form id='cineDialogForm' class=(getClassNames 'dialog-animated noselect') schema=instance.schema api=instance.api}} {{>inputHidden key='intervalId'}} -
-
- {{#button class='btn' disabled=(displaySetDisabled false) action='displaySetPrevious' title='Previous display set'}} - - {{/button}} - {{#button class='btn' disabled=(displaySetDisabled true) action='displaySetNext' title='Next display set'}} - - {{/button}} -
+
+
@@ -42,6 +35,16 @@
{{framerate}} fps
+
+
+ {{#button class='btn' disabled=(displaySetDisabled false) action='displaySetPrevious' title='Previous display set'}} + + {{/button}} + {{#button class='btn' disabled=(displaySetDisabled true) action='displaySetNext' title='Next display set'}} + + {{/button}} +
+
{{/form}}
diff --git a/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.js b/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.js index 5af829b0e..719da8371 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.js +++ b/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.js @@ -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'); } }); diff --git a/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.styl b/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.styl index 76b8497a4..b4294fd3e 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.styl +++ b/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.styl @@ -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