OHIF-122: Remove hover state in disabled buttons and fix Next/Previous disabled state when layout viewport changes

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

@@ -21,6 +21,7 @@ Template.displaySetNavigation.events({
 
 Template.displaySetNavigation.helpers({
     disableButton(isNext) {
+        OHIF.uiSettings.displaySetNavigationMultipleViewports = false;
         Session.get('LayoutManagerUpdated');
         return !OHIF.viewer.canMoveDisplaySets(isNext);
     }

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

@@ -9,20 +9,20 @@ Template.layoutChooser.onRendered(() => {
      * @param currentCell
      */
     instance.highlightCells = currentCell => {
-        const cells = $('.layoutChooser table td');
+        const cells = this.$('.layoutChooser table td');
         cells.removeClass('hover');
 
-        currentCell = $(currentCell);
+        currentCell = this.$(currentCell);
         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++) {
+        for (let i = table.rows.length - 1; i >= 0; i--) {
             const row = table.rows[i];
             if (i <= rowIndex) {
-                for (var j = 0; j < row.cells.length; j++) {
+                for (let j = row.cells.length - 1; j >= 0; j--) {
                     if (j <= columnIndex) {
                         const cell = row.cells[j];
                         cell.classList.add('hover');
@@ -67,7 +67,7 @@ Template.layoutChooser.events({
     },
 
     'click .layoutChooser table td'(event, instance) {
-        const $currentCell = $(event.currentTarget);
+        const $currentCell = instance.$(event.currentTarget);
         const rowIndex = $currentCell.closest('tr').index();
         const columnIndex = $currentCell.index();
 
@@ -81,7 +81,7 @@ Template.layoutChooser.events({
         window.layoutManager.layoutProps = layoutProps;
         window.layoutManager.updateViewports();
 
-        const $dropdown = $('.layoutChooser');
+        const $dropdown = instance.$('.layoutChooser');
         toggleDialog($dropdown);
     }
 });

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

@@ -12,6 +12,11 @@
   &.disabled
     opacity: 0.5
     cursor: not-allowed
+    
+    &:hover 
+      i,
+      .buttonLabel
+        theme('color', '$textSecondaryColor')
 
   .buttonLabel
     theme('color', '$textSecondaryColor')
@@ -23,6 +28,7 @@
     text-align: center
     
     i
+      theme('color', '$textSecondaryColor')
       font-size: 18px
       line-height: 30px