fix(UI): Do not display volume rendering widgets when in plane modes

Kitware · Feb 4, 2018 · 0089462 · 0089462
1 parent ca6d885
commit 0089462
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/src/userInterface/ItkVtkImageViewer.mcss b/src/userInterface/ItkVtkImageViewer.mcss
@@ -206,7 +206,7 @@
 .toggleButton {
   cursor: pointer;
   border-radius: 0.2em;
-  opacity: 0.5;
+  opacity: 0.35;
 }
 
 input:checked.toggleInput + label {

diff --git a/src/userInterface/createImageUI.js b/src/userInterface/createImageUI.js
@@ -223,7 +223,7 @@ function createImageUI(
 
   const volumeRenderingRow = document.createElement('div');
   volumeRenderingRow.setAttribute('class', style.uiRow);
-  volumeRenderingRow.className += ' js-toggle';
+  volumeRenderingRow.className += ' js-volumeRendering js-toggle';
   createUseShadowToggle(
     volumeRenderingRow,
     volumeRepresentation,

diff --git a/src/userInterface/createMainUI.js b/src/userInterface/createMainUI.js
@@ -94,27 +94,35 @@ function createMainUI(
     document.getElementById('yPlaneButton').checked = false;
     document.getElementById('zPlaneButton').checked = false;
     document.getElementById('volumeRenderingButton').checked = false;
+    const volumeRenderingRow = uiContainer.querySelector('.js-volumeRendering');
+    volumeRenderingRow.style.display = 'none';
   }
   function setViewModeYPlane() {
     view.setViewMode('YPlane');
     document.getElementById('xPlaneButton').checked = false;
     document.getElementById('yPlaneButton').checked = true;
     document.getElementById('zPlaneButton').checked = false;
     document.getElementById('volumeRenderingButton').checked = false;
+    const volumeRenderingRow = uiContainer.querySelector('.js-volumeRendering');
+    volumeRenderingRow.style.display = 'none';
   }
   function setViewModeZPlane() {
     view.setViewMode('ZPlane');
     document.getElementById('xPlaneButton').checked = false;
     document.getElementById('yPlaneButton').checked = false;
     document.getElementById('zPlaneButton').checked = true;
     document.getElementById('volumeRenderingButton').checked = false;
+    const volumeRenderingRow = uiContainer.querySelector('.js-volumeRendering');
+    volumeRenderingRow.style.display = 'none';
   }
   function setViewModeVolumeRendering() {
     view.setViewMode('VolumeRendering');
     document.getElementById('xPlaneButton').checked = false;
     document.getElementById('yPlaneButton').checked = false;
     document.getElementById('zPlaneButton').checked = false;
     document.getElementById('volumeRenderingButton').checked = true;
+    const volumeRenderingRow = uiContainer.querySelector('.js-volumeRendering');
+    volumeRenderingRow.style.display = 'flex';
   }
   let viewPlanes = false;
   function setViewPlanes() {