css: improve popup opening animation

src/static/css/pad/gritter.css

@@ -7,14 +7,17 @@
   z-index: 9999;
 }
 
-.gritter-item {
+.gritter-item.popup {
   position: relative;
   max-width: 400px;
   min-width: 0;
   margin: 0 auto;
+  visibility: visible;
+  top: auto;
+}
+.gritter-item .popup-content {
   display: flex;
 }
-
 .gritter-item .gritter-content {
   flex: 1 auto;
   text-align: center;
@@ -29,7 +32,7 @@
   display: block;
 }
 
-.gritter-item.error {
+.gritter-item.error .popup-content {
   color: #a84341;
   background-color: #eed3d4;
 }

src/static/css/pad/popup.css

@@ -1,15 +1,38 @@
+.popup.popup-show {
+  visibility: visible;
+}
+
+.popup > .popup-content {
+  transform: scale(0.7);
+  opacity: 0;
+  transition: all 0.3s cubic-bezier(0.74, -0.05, 0.27, 1.75)
+}
+
+.popup.popup-show > .popup-content {
+  transform: scale(1);
+  opacity: 1;
+}
+
 .popup {
   position: absolute;
-  top: 0;
-  right: 20px;
-  display: none;
+  top: 10px;
+  right: 30px;
+  visibility: hidden;
   z-index: 500;
   min-width: 300px;
   max-width: 600px;
+}
+#mycolorpicker {
+  top: 0;
+}
+.popup.toolbar-popup {
+  right: auto;
+  margin-left: -10px;
+}
+.popup-content {
   padding: 10px;
-  border-radius: 0 0 6px 6px;
+  border-radius: 6px;
   border: 1px solid #ccc;
-  border-top: none;
   box-shadow: 0 2px 4px #ddd;
   background: #f7f7f7;
 }
@@ -58,7 +81,7 @@
     max-width: none !important;
   }
   /* Move popup to the bottom, except popup linked to left toolbar, like hyperklink popup */
-  .popup:not(.hyperlink-dialog):not(.toolbar-popup) {
+  .popup:not(.toolbar-popup) {
     top: auto;
     bottom: 0;
     border-radius: 6px 6px 0 0;
@@ -67,7 +90,7 @@
     box-shadow: 0 -2px 4px #ddd;
   }
 
-  .toolbar-popup, .hyperlink-dialog {
+  .toolbar-popup {
     left: 0 !important; /* overide javascript positionning */
     right: 0 !important;
   }

src/static/js/gritter.js

@@ -81,11 +81,13 @@
 		_tpl_title: '<h3 class="gritter-title">[[title]]</h3>',
 		_tpl_item: [
 			'<div id="gritter-item-[[number]]" class="popup gritter-item [[item_class]]">',
-				'<div class="gritter-content">',
-					'[[title]]',
-					'<p>[[text]]</p>',
+				'<div class="popup-content">',
+					'<div class="gritter-content">',
+						'[[title]]',
+						'<p>[[text]]</p>',
+					'</div>',
+					'<div class="gritter-close"><i class="buttonicon buttonicon-cancel"></i></div>',
 				'</div>',
-				'<div class="gritter-close"><i class="buttonicon buttonicon-cancel"></i></div>',
 			'</div>'].join(''),
 
 
@@ -162,7 +164,7 @@
 
 			var item = $('#gritter-item-' + this._item_count);
 
-			item.fadeIn(this.fade_in_speed, function(){
+			item.addClass('popup-show').fadeIn(this.fade_in_speed, function(){
 				Gritter['_after_open_' + number]($(this));
 			});
 
@@ -244,7 +246,7 @@
 					e.animate({ height: 0 }, 300, function(){
 						Gritter._countRemoveWrapper(unique_id, e, manual_close);
 					})
-				})
+				}).removeClass('popup-show')
 
 			}
 			else {

src/static/js/pad_editbar.js

@@ -231,8 +231,7 @@ var padeditbar = (function()
           if(module.css('display') != "none")
           {
             $("li[data-key=" + thisModuleName + "] > a").removeClass("selected");
-            module.slideUp("fast", cb);
-            returned = true;
+            module.removeClass("popup-show");
           }
         }
         if(!returned && cb) return cb();
@@ -246,15 +245,16 @@ var padeditbar = (function()
           var thisModuleName = self.dropdowns[i];
           var module = $("#" + thisModuleName);
 
-          if(module.css('display') != "none")
+          if(module.hasClass('popup-show'))
           {
             $("li[data-key=" + thisModuleName + "] > a").removeClass("selected");
-            module.slideUp("fast");
+            module.removeClass("popup-show");
           }
           else if(thisModuleName==moduleName)
           {
             $("li[data-key=" + thisModuleName + "] > a").addClass("selected");
-            module.slideDown("fast", cb);
+            module.addClass("popup-show")
+            cb();
           }
         }
       }

src/static/js/pad_userlist.js

@@ -785,7 +785,7 @@ function closeColorPicker(accept)
   }
 
   colorPickerOpen = false;
-  $("#mycolorpicker").fadeOut("fast");
+  $("#mycolorpicker").removeClass('popup-show');
 }
 
 function showColorPicker()
@@ -823,7 +823,7 @@ function showColorPicker()
       colorPickerSetup = true;
     }
 
-    $("#mycolorpicker").fadeIn();
+    $("#mycolorpicker").addClass('popup-show')
     colorPickerOpen = true;
 
     $("#colorpickerswatches li").removeClass('picked');

src/static/skins/colibris/pad.css

@@ -72,7 +72,7 @@ p[data-l10n-id="ep_comments_page.comment"],
 #slider-btn-container .stepper, #importmessageabiword, #importmessageabiword > a,
 .toolbar .show-more-icon-btn
 { color: #64d29b; }
-#timeslider-slider #ui-slider-handle, #playpause_button_icon, .gritter-item:not(.error) {
+#timeslider-slider #ui-slider-handle, #playpause_button_icon, .gritter-item:not(.error) .popup-content{
   background-color: #64d29b;
 }
 #slider-btn-container button {

src/static/skins/colibris/src/components/gritter.css

@@ -1,5 +1,7 @@
 .gritter-item {
   margin-bottom: 10px;
+}
+.gritter-item .popup-content {
   color: white;
   box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
 }

src/static/skins/colibris/src/components/popup.css

@@ -1,8 +1,6 @@
-.popup {
-  top: -2px;
-  right: 30px;
+.popup-content {
   border-radius: 3px;
-  padding: 20px 20px;
+  padding: 25px;
   background: none;
   background-color: white;
   border: none;