[pgAdmin4][Patch]: RM #1978 - Add an option to allow user to disable alertifyjs and acitree animations

[Khushboo Vashi]

Hi,

Please find the attached patch to fix RM #1978: Add an option to allow user
to disable alertifyjs and acitree animations.

Thanks,
Khushboo

diff --git a/web/config.py b/web/config.py
index 3d8f6f7..a91b2e2 100644
--- a/web/config.py
+++ b/web/config.py
@@ -364,6 +364,12 @@ COOKIE_DEFAULT_DOMAIN = None
 SESSION_COOKIE_DOMAIN = None
 
 ##########################################################################
+# Allow user to disable alertify and acitree animation
+##########################################################################
+SHOW_ALERTIFY_ANIMATION = True
+SHOW_ACITREE_ANIMATION = True
+
+##########################################################################
 # Local config settings
 ##########################################################################
 
diff --git a/web/pgadmin/browser/static/js/browser.js b/web/pgadmin/browser/static/js/browser.js
index 46b6033..31e6db9 100644
--- a/web/pgadmin/browser/static/js/browser.js
+++ b/web/pgadmin/browser/static/js/browser.js
@@ -73,14 +73,16 @@ define('pgadmin.browser', [
         },
         loaderDelay: 100,
         show: {
-          duration: 75,
+          duration: window.SHOW_ACITREE_ANIMATION ? 75 : 0,
         },
         hide: {
-          duration: 75,
+          duration: window.SHOW_ACITREE_ANIMATION ? 75 : 0,
         },
         view: {
-          duration: 75,
+          duration: window.SHOW_ACITREE_ANIMATION ? 75 : 0,
         },
+        animateRoot: window.SHOW_ACITREE_ANIMATION ? true : false,
+        unanimated: window.SHOW_ACITREE_ANIMATION ? false : true,
       });
 
       b.tree = $('#tree').aciTree('api');
diff --git a/web/pgadmin/static/css/alertify.noanimation.css b/web/pgadmin/static/css/alertify.noanimation.css
new file mode 100644
index 0000000..cc68747
--- /dev/null
+++ b/web/pgadmin/static/css/alertify.noanimation.css
@@ -0,0 +1,41 @@
+.alertify .ajs-dimmer,
+.alertify .ajs-modal,
+.alertify-notifier,
+.alertify-notifier .ajs-message.ajs-visible,
+.alertify-notifier .ajs-message,
+.alertify-notifier.ajs-center .ajs-message.ajs-visible,
+.alertify-notifier.ajs-center .ajs-message
+{
+  -moz-transition: none;
+  -webkit-transition: none;
+  -o-transition: none;
+  transition: none;
+  -webkit-transform: none;
+  transform: none;
+}
+
+.alertify.ajs-zoom.ajs-in:not(.ajs-hidden) .ajs-dialog {
+  -webkit-animation-name: ajs-zoomeIn;
+  animation-name: ajs-zoomeIn;
+}
+.alertify.ajs-zoom.ajs-out.ajs-hidden .ajs-dialog {
+  -webkit-animation-name: ajs-zoomOut;
+  animation-name: ajs-zoomOut;
+}
+
+@-webkit-keyframes ajs-zoomeIn {
+  -webkit-transform: none;
+  transform: none;
+}
+@keyframes ajs-zoomeIn {
+  -webkit-transform: none;
+  transform: none;
+}
+@-webkit-keyframes ajs-zoomOut {
+  -webkit-transform: none;
+  transform: none;
+}
+@keyframes ajs-zoomeOut {
+  -webkit-transform: none;
+  transform: none;
+}
diff --git a/web/pgadmin/templates/base.html b/web/pgadmin/templates/base.html
index c7a6174..e07536e 100755
--- a/web/pgadmin/templates/base.html
+++ b/web/pgadmin/templates/base.html
@@ -23,6 +23,12 @@
     <link type="text/css" rel="stylesheet" href="{{ url_for('browser.browser_css')}}"/>
     <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='js/generated/style.css')}}"/>
     <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='js/generated/pgadmin.css')}}"/>
+    <script>
+    var SHOW_ACITREE_ANIMATION = ('{{ config.SHOW_ACITREE_ANIMATION }}' === 'True') ? true : false;
+    </script>
+    {% if not config.SHOW_ALERTIFY_ANIMATION %}
+    <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/alertify.noanimation.css')}}"/>
+    {% endif%}
 
      <!--View specified stylesheets-->
     {% block css_link %}{% endblock %}