Fixed OHIF Viewer layout / CINE / Hanging Protocol buttons (OHIF-49)

Packages/viewerbase/client/components/viewer/layoutChooser/layoutChooser.html

@@ -1,5 +1,5 @@
 <template name="layoutChooser">
-    <div class="layoutChooser pull-left dropdown-menu" role="menu">
+    <div id="layoutChooser" class="layoutChooser pull-left dropdown-menu" role="menu">
         <table>
             <tr>
                 <td></td>

Packages/viewerbase/client/components/viewer/layoutChooser/layoutChooser.js

@@ -6,39 +6,41 @@
  * @param currentCell
  */
 function highlightCells(currentCell) {
-    var cells = $('.layoutChooser table td');
+    const cells = $('.layoutChooser table td');
     cells.removeClass('hover');
 
     currentCell = $(currentCell);
-    var table = currentCell.parents('.layoutChooser table').get(0);
-    var rowIndex = currentCell.closest('tr').index();
-    var columnIndex = currentCell.index();
+    const table = currentCell.parents('.layoutChooser table').get(0);
+    const rowIndex = currentCell.closest('tr').index();
+    const columnIndex = currentCell.index();
 
     // Loop through the table row by row
     // and cell by cell to apply the highlighting
     for (var i = 0; i < table.rows.length; i++) {
-        row = table.rows[i];
+        const row = table.rows[i];
         if (i <= rowIndex) {
-           for (var j = 0; j < row.cells.length; j++) {
+            for (var j = 0; j < row.cells.length; j++) {
                 if (j <= columnIndex) {
-                    cell = row.cells[j];
+                    const cell = row.cells[j];
                     cell.classList.add('hover');
                 }
-           }
+            }
         }
     }
 }
+
 Template.layoutChooser.events({
-    'touchstart .layoutChooser table td, mouseenter .layoutChooser table td': function(evt) {
+    'touchstart .layoutChooser table td, mouseenter .layoutChooser table td'(evt) {
         highlightCells(evt.currentTarget);
     },
-    'click .layoutChooser table td': function(evt) {
-        var currentCell = $(evt.currentTarget);
-        var rowIndex = currentCell.closest('tr').index();
-        var columnIndex = currentCell.index();
+
+    'click .layoutChooser table td'(evt) {
+        const currentCell = $(evt.currentTarget);
+        const rowIndex = currentCell.closest('tr').index();
+        const columnIndex = currentCell.index();
 
         // Add 1 because the indices start from zero
-        var layoutProps = {
+        const layoutProps = {
             rows: rowIndex + 1,
             columns: columnIndex + 1
         };
@@ -46,5 +48,8 @@ Template.layoutChooser.events({
         layoutManager.layoutTemplateName = 'gridLayout';
         layoutManager.layoutProps = layoutProps;
         layoutManager.updateViewports();
+
+        const $dropdown = $('.layoutChooser');
+        toggleDialog($dropdown);
     }
-});
+});

Packages/viewerbase/client/components/viewer/layoutChooser/layoutChooser.styl

@@ -1,19 +1,28 @@
 @import "{design}/app.styl"
 
+$borderColor = rgba(77, 99, 110, 0.81)
+
 .layoutChooser
   width: 92px
   height: 92px
   min-width: 92px // to override bootstrap's dropdown-menu class
   min-height: 92px
-  background-color: $primaryBackgroundColor
-  border: 2px solid $uiBorderColorDark
-  
+
+  //background-color: $primaryBackgroundColor
+  opacity: 0.95
+  border-radius: 8px
+  border: 1px solid $borderColor;
+  background: $uiGrayDarkest
+
+  &.open
+    display: block
+
   table
     margin: 0 auto
     
     td
       cursor: pointer
-      border: 2px solid $uiBorderColorDark
+      border: 1px solid $uiBorderColorDark
       width: 20px
       height: 20px
       transition(background-color 0.1s ease)