Adding close button to CINE dialog

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%
 

Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.html

@@ -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="button-close-container">
-                <div class="btn-group">
+                <div class="button-close"><span aria-hidden="true">x</span></div>
-                    {{#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>
             <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>

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');
     }
 });
 

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.85)
-  theme('background', '$uiGrayDarkest', 0.95)
   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
+      right: 16px
-      top: 4px
+      top: 10px
 
       .btn
         padding: 0 4px
 
         i
-          font-size: 36px
+          font-size: 32px
-          line-height: 36px
+          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