AWV-3: Adding CSS3 animations to the CINE dialog

Packages/design/package.js

@@ -35,6 +35,7 @@ Package.onUse(function(api) {
 
     // Component styles
     api.addFiles([
+        'styles/components/dialog.styl',
         'styles/components/radio.styl',
         'styles/components/select2.styl',
         'styles/components/selectTree.styl',

Packages/design/styles/common/keyframes.styl

@@ -1,11 +1,33 @@
 @import "{design}/app.styl"
 
 @keyframes zoomIn
-  from
+    0%
         transform(scale(0))
-  to
+    100%
         transform(scale(1))
 
+@keyframes zoomOut
+    0%
+        transform(scale(1))
+    100%
+        transform(scale(0))
+
+@keyframes slideInDown
+    0%
+        opacity: 0
+        transform(translateY(-100%) scale(0))
+    100%
+        opacity: 1
+        transform(translateY(0) scale(1))
+
+@keyframes slideOutUp
+    0%
+        opacity: 1
+        transform(translateY(0) scale(1))
+    100%
+        opacity: 0
+        transform(translateY(-100%) scale(0))
+
 @keyframes fadeIn
     from
         opacity: 0

Packages/design/styles/components/dialog.styl

@@ -0,0 +1,12 @@
+@import "{design}/app"
+
+.viewerDialogs>*
+
+    &:not(.dialog-closed):not(.dialog-open)
+        display: none
+
+    &.dialog-closed
+        animateSlideOutUp()
+
+    &.dialog-open
+        animateSlideInDown()

Packages/design/styles/imports/animations.styl

@@ -8,6 +8,18 @@ animateZoomIn()
     animationDefaults()
     animation-name: zoomIn
 
+animateZoomOut()
+    animationDefaults()
+    animation-name: zoomOut
+
+animateSlideInDown()
+    animationDefaults()
+    animation-name: slideInDown
+
+animateSlideOutUp()
+    animationDefaults()
+    animation-name: slideOutUp
+
 animateFadeIn()
     animationDefaults()
     animation-name: fadeIn

Packages/design/styles/imports/theming.styl

@@ -1,32 +1,69 @@
 $themes = {}
 $defaultTheme = 'tide'
 
+// Import the theme variables
 @import "./theme-tide.styl"
 @import "./theme-tigerlilly.styl"
 
-parseSpaceVars($theme, $value)
+/*
+ * Process each theme variable in the given value, splitting it by space
+ */
+parseSpaceVars($theme, $value, $alpha)
+    // Split values by space
     $valueSplit = split(' ', $value)
+
+    // Create an empty list
     $list = ''
     pop($list)
+
+    // Iterate over split values
     for $property in $valueSplit
-    if ($theme[$property])
+        // Try to get the theme with current property key
-      push($list, $theme[$property])
+        $val = $theme[$property]
+        if ($val)
+            if($val is a 'color')
+                // Apply given alpha if it's a color
+                $val = alpha($val, $alpha)
+            // Push the processed theme variable to the list
+            push($list, $val)
         else
+            // Push the property itself if not found in theme variables
             push($list, $property)
+
+    // Merge the resulting processed list by joining values back with space
     join(' ', $list)
 
-parseCommaVars($theme, $value)
+/*
+ * Process each theme variable in the given value, splitting it by comma
+ */
+parseCommaVars($theme, $value, $alpha)
+    // Split values by comma
     $valueSplit = split(',', $value)
+
+    // Create an empty list
     $list = ''
     pop($list)
+
+    // Iterate over split values
     for $sentence in $valueSplit
-    push($list, parseSpaceVars($theme, $sentence))
+        // Procces the values splitting by space
+        push($list, parseSpaceVars($theme, $sentence, $alpha))
+
+    // Merge the resulting processed list by joining values back with comma
     unquote(join(',', $list))
 
-theme($property, $value)
+/*
+ * Return a processed theme variable or color with alpha
+ */
+theme($property, $value, $alpha=1)
+
+    // Crete the selector for default theme
     / {selector()}
-    {$property}: parseCommaVars($themes[$defaultTheme], $value)
+        {$property}: parseCommaVars($themes[$defaultTheme], $value, $alpha)
+
+    // Create the selector for each registered theme
     for $themeName, $theme in $themes
         for $selectorPiece in split(',', selector())
+            // prefix the selector with the body.theme-{themeName} selector
             / body.theme-{$themeName} {$selectorPiece}
-        {$property}: parseCommaVars($theme, $value)
+                {$property}: parseCommaVars($theme, $value, $alpha)

Packages/hangingprotocols/client/components/ruleEntryDialog/ruleEntryDialog.styl

@@ -1,10 +1,9 @@
 @import "{design}/app.styl"
 
 .ruleEntryDialog
-  theme('background', '$uiGrayDarkest')
+  theme('background', '$uiGrayDarkest', 0.95)
-  theme('border', '1px solid $uiBorderColor')
+  theme('border', '1px solid $uiBorderColor', 0.95)
   theme('color', '$textSecondaryColor')
-  display: none
   position: absolute
   top: 0
   bottom: 0
@@ -17,7 +16,6 @@
   padding: 10px
   background-color: rgba(255,255,255,1)
   outline: none
-  opacity: 0.95
   border-radius: 8px
 
   .dialogContent

Packages/hangingprotocols/client/components/settingEntryDialog/settingEntryDialog.styl

@@ -1,10 +1,9 @@
 @import "{design}/app.styl"
 
 .settingEntryDialog
-  theme('border', '1px solid $uiBorderColor')
+  theme('border', '1px solid $uiBorderColor', 0.95)
-  theme('background', '$uiGrayDarkest')
+  theme('background', '$uiGrayDarkest', 0.95)
   theme('color', '$textSecondaryColor')
-  display: none
   position: absolute
   top: 0
   bottom: 0
@@ -16,7 +15,6 @@
   margin: auto
   padding: 10px
   outline: none
-  opacity: 0.95
   border-radius: 8px
 
   .dialogContent

Packages/hangingprotocols/client/components/textEntryDialog/textEntryDialog.styl

@@ -1,10 +1,9 @@
 @import "{design}/app.styl"
 
 .textEntryDialog
-  theme('border', '1px solid $uiBorderColor')
+  theme('border', '1px solid $uiBorderColor', 0.95)
-  theme('background', '$uiGrayDarkest')
+  theme('background', '$uiGrayDarkest', 0.95)
   theme('color', '$textSecondaryColor')
-  display: none
   position: absolute
   top: 0
   bottom: 0
@@ -16,7 +15,6 @@
   margin: auto
   padding: 10px
   outline: none
-  opacity: 0.95
   border-radius: 8px
 
   .dialogContent

Packages/lesiontracker/client/components/confirmDeleteDialog/confirmDeleteDialog.styl

@@ -1,5 +1,4 @@
 #confirmDeleteDialog
-  display: none
   position: absolute
   top: 0
   bottom: 0

Packages/lesiontracker/client/components/lesionLocationDialog/lesionLocationDialog.styl

@@ -1,5 +1,4 @@
 #lesionLocationDialog, #lesionLocationRelabelDialog
-  display: none
   position: absolute
   top: 0
   bottom: 0

Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.styl

@@ -3,13 +3,12 @@
 $borderColor = rgba(77, 99, 110, 0.81)
 
 #lesionTableHUD
-  background: black
+  background: rgba(0, 0, 0, 0.95)
   border-radius: 8px
   border: solid 1px $borderColor;
   bottom: 3px
   height: 326px
   left: auto
-  opacity: 0.95
   overflow: hidden
   position: absolute
   right: 3px

Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.styl

@@ -1,5 +1,4 @@
 #nonTargetLesionLocationDialog, #nonTargetLesionRelabelDialog
-  display: none
   position: absolute
   top: 0
   bottom: 0
@@ -10,7 +9,7 @@
   height: 230px
   border-radius: 5px
   padding: 10px 20px 10px 20px
-  background-color: rgba(255,255,255,1)
+  background-color: white
   outline: none
 
   #selectNonTargetLesionLocation, #selectNonTargetLesionLocationResponse

Packages/lesiontracker/client/components/nonTargetResponseDialog/nonTargetResponseDialog.styl

@@ -1,5 +1,4 @@
 #nonTargetResponseDialog
-  display: none
   position: absolute
   top: 0
   bottom: 0
@@ -21,4 +20,3 @@
 
   .locationOK
     text-align: center
-    

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

@@ -1,10 +1,9 @@
 @import "{design}/app.styl"
 
 .annotationDialog
-  theme('border', '1px solid $uiBorderColor')
+  theme('border', '1px solid $uiBorderColor', 0.95)
-  theme('background', '$uiGrayDarkest')
+  theme('background', '$uiGrayDarkest', 0.95)
   theme('color', '$textSecondaryColor')
-  display: none
   z-index: 1000
   position: absolute
   top: 0
@@ -16,7 +15,6 @@
   padding: 10px
   width: 300px
   height: 140px
-  opacity: 0.95
   border-radius: 8px
 
   h5, label

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

@@ -1,23 +1,22 @@
 @import "{design}/app.styl"
 
 #cineDialog
-  theme('border', '1px solid $uiBorderColor')
+  theme('border', '1px solid $uiBorderColor', 0.95)
-  theme('background', '$uiGrayDarkest')
+  theme('background', '$uiGrayDarkest', 0.95)
   theme('color', '$textSecondaryColor')
   border-radius: 8px
   bottom: 3px
   box-sizing: border-box
-  display: none
   height: 150px
-  left: auto
+  left: 50%
-  opacity: 0.95
   overflow: hidden
   padding: 10px
   position: absolute
   right: 3px
-  top: auto
+  top: 50%
   width: 300px
   z-index: 1000
+  transform(translateX(-50%) translateY(-50%))
 
   h5
     font-size: 20px
@@ -28,8 +27,8 @@
     font-weight: 400
 
   .btn
-    theme('background', '$uiGrayDarkest')
     theme('color', '$textSecondaryColor')
+    background-color: transparent
 
     &:hover
       theme('color', '$hoverColor')

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

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

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

@@ -3,18 +3,16 @@
 $borderColor = rgba(77, 99, 110, 0.81)
 
 .layoutChooser
-  theme('background', '$uiGrayDarkest')
+  theme('background', '$uiGrayDarkest', 0.95)
-  width: 92px
-  height: 92px
-  min-width: 92px // to override bootstrap's dropdown-menu class
-  min-height: 92px
-  // theme('background-color', '$primaryBackgroundColor')
-  opacity: 0.95
-  border-radius: 8px
   border: 1px solid $borderColor;
-
+  border-radius: 8px
-  &.open
+  height: 92px
-    display: block
+  min-height: 92px
+  min-width: 92px // to override bootstrap's dropdown-menu class
+  padding: 5px 0;
+  position: absolute;
+  width: 92px
+  z-index: 5000
 
   table
     margin: 0 auto

Packages/viewerbase/lib/enableHotkeys.js

@@ -145,10 +145,10 @@ Meteor.startup(function() {
             }
         },
         previousDisplaySet() {
-            OHIF.viewer.moveDisplaySet(false);
+            OHIF.viewer.moveDisplaySets(false);
         },
         nextDisplaySet() {
-            OHIF.viewer.moveDisplaySet(true);
+            OHIF.viewer.moveDisplaySets(true);
         },
         nextPanel: function() {
             nextActivePanel();

Packages/viewerbase/lib/toggleDialog.js

@@ -1,8 +1,6 @@
-toggleDialog = function(element) {
+toggleDialog = element => {
-    var elem = $(element);
+    const $element = $(element);
-    if (elem.css('display') === 'none') {
+    const isClosed = $element.hasClass('dialog-open');
-        elem.css('display', 'block');
+    $element.toggleClass('dialog-closed', isClosed);
-    } else {
+    $element.toggleClass('dialog-open', !isClosed);
-        elem.css('display', 'none');
-    }
 };