From 2dc4cfdfe16ea34fbc96585225bb26fd4e031bc8 Mon Sep 17 00:00:00 2001
From: Sebastian Castro <sebastian.castro@protonmail.com>
Date: Mon, 6 Apr 2020 11:11:08 +0200
Subject: [PATCH] css: improve popup opening animation

---
 src/static/css/pad/gritter.css                |  9 +++--
 src/static/css/pad/popup.css                  | 37 +++++++++++++++----
 src/static/js/gritter.js                      | 14 ++++---
 src/static/js/pad_editbar.js                  | 10 ++---
 src/static/js/pad_userlist.js                 |  4 +-
 src/static/skins/colibris/pad.css             |  2 +-
 .../skins/colibris/src/components/gritter.css |  2 +
 .../skins/colibris/src/components/popup.css   |  6 +--
 src/templates/pad.html                        | 24 ++++++------
 src/templates/timeslider.html                 | 12 +++---
 10 files changed, 74 insertions(+), 46 deletions(-)

diff --git a/src/static/css/pad/gritter.css b/src/static/css/pad/gritter.css
index 921a28ca7..ae6427de4 100644
--- a/src/static/css/pad/gritter.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/static/css/pad/popup.css b/src/static/css/pad/popup.css
index 324dea91e..6e0c66c4c 100644
--- a/src/static/css/pad/popup.css
+++ b/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;
   }
diff --git a/src/static/js/gritter.js b/src/static/js/gritter.js
index bbaeb3d46..64295ade2 100644
--- a/src/static/js/gritter.js
+++ b/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 {
diff --git a/src/static/js/pad_editbar.js b/src/static/js/pad_editbar.js
index 5f469f2f0..8a1d84237 100644
--- a/src/static/js/pad_editbar.js
+++ b/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();
           }
         }
       }
diff --git a/src/static/js/pad_userlist.js b/src/static/js/pad_userlist.js
index abf1620cb..6383212cf 100644
--- a/src/static/js/pad_userlist.js
+++ b/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');
diff --git a/src/static/skins/colibris/pad.css b/src/static/skins/colibris/pad.css
index 4aa0ff62a..e0ddac3ea 100644
--- a/src/static/skins/colibris/pad.css
+++ b/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 {
diff --git a/src/static/skins/colibris/src/components/gritter.css b/src/static/skins/colibris/src/components/gritter.css
index bdc1e2a94..a564e6eaf 100644
--- a/src/static/skins/colibris/src/components/gritter.css
+++ b/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);
 }
diff --git a/src/static/skins/colibris/src/components/popup.css b/src/static/skins/colibris/src/components/popup.css
index 6bbcb66e4..6053b1237 100644
--- a/src/static/skins/colibris/src/components/popup.css
+++ b/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;
diff --git a/src/templates/pad.html b/src/templates/pad.html
index 7dc4f805c..b9702081b 100644
--- a/src/templates/pad.html
+++ b/src/templates/pad.html
@@ -117,7 +117,7 @@
       <!-- SETTINGS POPUP (change font, language, chat parameters) -->
       <!------------------------------------------------------------->
 
-      <div id="settings" class="popup">
+      <div id="settings" class="popup"><div class="popup-content">
           <h1 data-l10n-id="pad.settings.padSettings"></h1>
           <% e.begin_block("mySettings"); %>
           <h2 data-l10n-id="pad.settings.myView"></h2>
@@ -180,14 +180,14 @@
           <span data-l10n-id="pad.settings.poweredBy">Powered by</span>
           <a href="http://etherpad.org">Etherpad-lite</a>
           <% if (settings.exposeVersion) { %>(commit <%=settings.getGitCommit()%>)<% } %>
-      </div>
+      </div></div>
 
 
       <!------------------------->
       <!-- IMPORT EXPORT POPUP -->
       <!------------------------->
 
-      <div id="import_export" class="popup">
+      <div id="import_export" class="popup"><div class="popup-content">
           <h1 data-l10n-id="pad.importExport.import_export"></h1>
           <div class="acl-write">
               <% e.begin_block("importColumn"); %>
@@ -232,14 +232,14 @@
               </a>
               <% e.end_block(); %>
           </div>
-      </div>
+      </div></div>
 
 
       <!---------------------------------------------------->
       <!-- CONNECTIVITY POPUP (when you get disconnected) -->
       <!---------------------------------------------------->
 
-      <div id="connectivity" class="popup">
+      <div id="connectivity" class="popup"><div class="popup-content">
           <% e.begin_block("modals"); %>
           <div class="connected visible">
             <h2 data-l10n-id="pad.modals.connected"></h2>
@@ -304,14 +304,14 @@
               <input type="hidden" class="missedChanges" name="missedChanges">
           </form>
           <% e.end_block(); %>
-      </div>
+      </div></div>
 
 
       <!-------------------------------->
       <!-- EMBED POPUP (Share, embed) -->
       <!-------------------------------->
 
-      <div id="embed" class="popup">
+      <div id="embed" class="popup"><div class="popup-content">
           <% e.begin_block("embedPopup"); %>
           <h1 data-l10n-id="pad.share"></h1>
           <div id="embedreadonly" class="acl-write">
@@ -327,7 +327,7 @@
               <input id="embedinput" type="text" value="" onclick="this.select()">
           </div>
           <% e.end_block(); %>
-      </div>
+      </div></div>
 
       <div class="sticky-container">
 
@@ -335,18 +335,18 @@
         <!-- USERS POPUP (set username, color, see other users names & color) -->
         <!---------------------------------------------------------------------->
 
-        <div id="users" class="popup">
+        <div id="users" class="popup"><div class="popup-content">
             <% e.begin_block("userlist"); %>
             <div id="connectionstatus"></div>
             <div id="myuser">
-                <div id="mycolorpicker" class="popup">
+                <div id="mycolorpicker" class="popup"><div class="popup-content">
                     <div id="colorpicker"></div>
                     <div class="btn-container">
                       <button id="mycolorpickersave" data-l10n-id="pad.colorpicker.save" class="btn btn-primary"></button>
                       <button id="mycolorpickercancel" data-l10n-id="pad.colorpicker.cancel" class="btn btn-default"></button>
                       <span id="mycolorpickerpreview" class="myswatchboxhoverable"></span>
                     </div>
-                </div>
+                </div></div>
                 <div id="myswatchbox"><div id="myswatch"></div></div>
                 <div id="myusernameform">
                   <input type="text" id="myusernameedit" disabled="disabled" data-l10n-id="pad.userlist.entername">
@@ -360,7 +360,7 @@
             </div>
             <div id="userlistbuttonarea"></div>
             <% e.end_block(); %>
-        </div>
+        </div></div>
 
 
         <!----------------------------->
diff --git a/src/templates/timeslider.html b/src/templates/timeslider.html
index b53aeebde..b5dfca088 100644
--- a/src/templates/timeslider.html
+++ b/src/templates/timeslider.html
@@ -121,7 +121,7 @@
     <!-- IMPORT EXPORT POPUP -->
     <!------------------------->
 
-    <div id="import_export" class="popup" >
+    <div id="import_export" class="popup" ><div class="popup-content">
       <div id="export">
         <p data-l10n-id="timeslider.exportCurrent"></p>
         <a id="exportetherpada" target="_blank" class="exportlink"><div class="exporttype" id="exportetherpad" data-l10n-id="pad.importExport.exportetherpad"></div></a>
@@ -131,14 +131,14 @@
         <a id="exportpdfa" target="_blank" class="exportlink"><div class="exporttype" id="exportpdf" data-l10n-id="pad.importExport.exportpdf"></div></a>
         <a id="exportopena" target="_blank" class="exportlink"><div class="exporttype" id="exportopen" data-l10n-id="pad.importExport.exportopen"></div></a>
       </div>
-    </div>
+    </div></div>
 
 
     <!---------------------------------------------------->
     <!-- CONNECTIVITY POPUP (when you get disconnected) -->
     <!---------------------------------------------------->
 
-    <div id="connectivity" class="popup">
+    <div id="connectivity" class="popup"><div class="popup-content">
     <% e.begin_block("modals"); %>
       <div class="connected visible">
         <h2 data-l10n-id="pad.modals.connected"></h2>
@@ -203,14 +203,14 @@
           <input type="hidden" class="missedChanges" name="missedChanges">
       </form>
     <% e.end_block(); %>
-    </div>
+    </div></div>
 
 
     <!---------------------------------->
     <!-- SETTINGS POPUP (change font) -->
     <!---------------------------------->
 
-    <div id="settings" class="popup" >
+    <div id="settings" class="popup"><div class="popup-content">
       <label for="viewfontmenu" data-l10n-id="pad.settings.fontType">Font type:</label>
       <select id="viewfontmenu">
         <option value="normal" data-l10n-id="pad.settings.fontType.normal"></option>
@@ -234,7 +234,7 @@
         <option value="sansserif" data-l10n-id="pad.settings.fontType.sansserif"></option>
         <option value="serif" data-l10n-id="pad.settings.fontType.serif"></option>
       </select>
-    </div>
+    </div></div>
   </div>
 </body>