AWV-3: Adding CSS3 animations to the CINE dialog

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

@@ -1,10 +1,9 @@
 @import "{design}/app.styl"
 
 .annotationDialog
-  theme('border', '1px solid $uiBorderColor')
-  theme('background', '$uiGrayDarkest')
+  theme('border', '1px solid $uiBorderColor', 0.95)
+  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('background', '$uiGrayDarkest')
+  theme('border', '1px solid $uiBorderColor', 0.95)
+  theme('background', '$uiGrayDarkest', 0.95)
   theme('color', '$textSecondaryColor')
   border-radius: 8px
   bottom: 3px
   box-sizing: border-box
-  display: none
   height: 150px
-  left: auto
-  opacity: 0.95
+  left: 50%
   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"
-         title="{{this.title}}"
-         data-target="#layoutChooser"
-         >
+        class="toolbarSectionButton rp-x-1 {{this.classes}} {{activeClass}} js-dropdown-toggle"
+        title="{{this.title}}"
+        data-target="#layoutChooser"
+    >
         <div class="svgContainer">
-            {{ #if this.svgLink }}
-            <svg>
-                <use xlink:href={{this.svgLink}}></use>
-            </svg>
-            {{ else }}
-            <i class={{iconClasses}}></i>
-            {{ /if }}
+            {{#if this.svgLink}}
+                <svg>
+                    <use xlink:href={{this.svgLink}}></use>
+                </svg>
+            {{else}}
+                <i class={{iconClasses}}></i>
+            {{/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')
-  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
+  theme('background', '$uiGrayDarkest', 0.95)
   border: 1px solid $borderColor;
-
-  &.open
-    display: block
+  border-radius: 8px
+  height: 92px
+  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