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,19 +1,41 @@
 @import "{design}/app.styl"
 
 @keyframes zoomIn
-  from
+    0%
-    transform(scale(0))
+        transform(scale(0))
-  to
+    100%
-    transform(scale(1))
+        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
+    from
-    opacity: 0
+        opacity: 0
-  to
+    to
-    opacity: 1
+        opacity: 1
 
 @keyframes fadeOut
-  from
+    from
-    opacity: 1
+        opacity: 1
-  to
+    to
-    opacity: 0
+        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

@@ -1,17 +1,29 @@
 animationDefaults()
-  animation-duration: 0.3s
+    animation-duration: 0.3s
-  animation-direction: alternate
+    animation-direction: alternate
-  animation-timing-function: ease-out
+    animation-timing-function: ease-out
-  animation-fill-mode: forwards
+    animation-fill-mode: forwards
 
 animateZoomIn()
-  animationDefaults()
+    animationDefaults()
-  animation-name: zoomIn
+    animation-name: zoomIn
+
+animateZoomOut()
+    animationDefaults()
+    animation-name: zoomOut
+
+animateSlideInDown()
+    animationDefaults()
+    animation-name: slideInDown
+
+animateSlideOutUp()
+    animationDefaults()
+    animation-name: slideOutUp
 
 animateFadeIn()
-  animationDefaults()
+    animationDefaults()
-  animation-name: fadeIn
+    animation-name: fadeIn
 
 animateFadeOut()
-  animationDefaults()
+    animationDefaults()
-  animation-name: fadeOut
+    animation-name: fadeOut

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)
+/*
-  $valueSplit = split(' ', $value)
+ * Process each theme variable in the given value, splitting it by space
-  $list = ''
+ */
-  pop($list)
+parseSpaceVars($theme, $value, $alpha)
-  for $property in $valueSplit
+    // Split values by space
-    if ($theme[$property])
+    $valueSplit = split(' ', $value)
-      push($list, $theme[$property])
-    else
-      push($list, $property)
-  join(' ', $list)
 
-parseCommaVars($theme, $value)
+    // Create an empty list
-  $valueSplit = split(',', $value)
+    $list = ''
-  $list = ''
+    pop($list)
-  pop($list)
-  for $sentence in $valueSplit
-    push($list, parseSpaceVars($theme, $sentence))
-  unquote(join(',', $list))
 
-theme($property, $value)
+    // Iterate over split values
-  / {selector()}
+    for $property in $valueSplit
-    {$property}: parseCommaVars($themes[$defaultTheme], $value)
+        // Try to get the theme with current property key
-  for $themeName, $theme in $themes
+        $val = $theme[$property]
-    for $selectorPiece in split(',', selector())
+        if ($val)
-      / body.theme-{$themeName} {$selectorPiece}
+            if($val is a 'color')
-        {$property}: parseCommaVars($theme, $value)
+                // 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)
+
+/*
+ * 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
+        // 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))
+
+/*
+ * 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, $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, $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.html

@@ -1,16 +1,16 @@
 <template name="confirmDeleteDialog">
     <div id="confirmDeleteDialog" tabindex="0">
-        {{ #if title }}
+        {{#if title}}
-        <h5>{{title}}</h5>
+            <h5>{{title}}</h5>
-        {{ else }}
+        {{else}}
-        <h5>Remove data from Timepoint?</h5>
+            <h5>Remove data from Timepoint?</h5>
         {{/if}}
-        {{ #if text }}
+        {{#if text}}
-        <p>{{text}}</p>
+            <p>{{text}}</p>
-        {{ else }}
+        {{else}}
-        <p>Are you sure you would like to remove the measurement data at this timepoint?</p>
+            <p>Are you sure you would like to remove the measurement data at this timepoint?</p>
         {{/if}}
         <button id="cancel" class="btn btn-link" tabindex="1">Cancel</button>
         <button id="confirm" class="btn btn-primary" tabindex="0">OK</button>
     </div>
-</template>
+</template>

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

@@ -1,5 +1,4 @@
 #confirmDeleteDialog
-  display: none
   position: absolute
   top: 0
   bottom: 0
@@ -23,4 +22,4 @@
     float: left
 
   #confirm
-    float: right
+    float: right

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

@@ -1,5 +1,4 @@
 #lesionLocationDialog, #lesionLocationRelabelDialog
-  display: none
   position: absolute
   top: 0
   bottom: 0
@@ -32,4 +31,4 @@
   height: 110px
 
 #lesionLocationRelabelDialog
-  height: 125px
+  height: 125px

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
@@ -24,4 +23,4 @@
 
 /* dialogMobile is added to #nonTargetLesionLocationDialog when touchDevices is detected */
 .dialogMobile
-  margin: auto
+  margin: auto

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/layoutButton/layoutButton.html

@@ -1,20 +1,20 @@
 <template name="layoutButton">
     <div id="{{this.id}}"
-         class="toolbarSectionButton rp-x-1 {{this.classes}} {{activeClass}} js-dropdown-toggle"
+        class="toolbarSectionButton rp-x-1 {{this.classes}} {{activeClass}} js-dropdown-toggle"
-         title="{{this.title}}"
+        title="{{this.title}}"
-         data-target="#layoutChooser"
+        data-target="#layoutChooser"
-         >
+    >
         <div class="svgContainer">
-            {{ #if this.svgLink }}
+            {{#if this.svgLink}}
-            <svg>
+                <svg>
-                <use xlink:href={{this.svgLink}}></use>
+                    <use xlink:href={{this.svgLink}}></use>
-            </svg>
+                </svg>
-            {{ else }}
+            {{else}}
-            <i class={{iconClasses}}></i>
+                <i class={{iconClasses}}></i>
-            {{ /if }}
+            {{/if}}
         </div>
         <div class="buttonLabel">
             {{this.title}}
         </div>
     </div>
-</template>
+</template>

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>
@@ -27,4 +27,4 @@
             </tr>
         </table>
     </div>
-</template>
+</template>

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');
+};
-    }
-};