Adding close button to CINE dialog

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="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>

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.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