[ranger] branch ranger-2.3 updated: RANGER-3662 : There should be pause button for error popup.

[ni3galave]

This is an automated email from the ASF dual-hosted git repository.

ni3galave pushed a commit to branch ranger-2.3
in repository https://gitbox.apache.org/repos/asf/ranger.git


The following commit(s) were added to refs/heads/ranger-2.3 by this push:
     new 48b8883  RANGER-3662 : There should be pause button for error popup.
48b8883 is described below

commit 48b8883f82d34cf952384a6e9df86c0cbb6873c8
Author: Dhaval.Rajpara <dhavalrajpara1...@gmail.com>
AuthorDate: Wed Mar 16 17:15:26 2022 +0530

    RANGER-3662 : There should be pause button for error popup.
    
    Signed-off-by: Nitin Galave <ni3gal...@apache.org>
---
 .../bower/bootstrap-notify/js/bootstrap-notify.js  | 22 +++++++++++++++++++---
 security-admin/src/main/webapp/styles/xa.css       | 10 ++++++++++
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git 
a/security-admin/src/main/webapp/libs/bower/bootstrap-notify/js/bootstrap-notify.js
 
b/security-admin/src/main/webapp/libs/bower/bootstrap-notify/js/bootstrap-notify.js
index e1910f9..0296a59 100644
--- 
a/security-admin/src/main/webapp/libs/bower/bootstrap-notify/js/bootstrap-notify.js
+++ 
b/security-admin/src/main/webapp/libs/bower/bootstrap-notify/js/bootstrap-notify.js
@@ -45,7 +45,7 @@
       onClose: null,
       onClosed: null,
       icon_type: 'class',
-      template: '<div data-notify="container" class="col-xs-11 col-sm-4 alert 
alert-{0}" role="alert"><button type="button" aria-hidden="true" class="close" 
data-notify="dismiss">&times;</button><span data-notify="icon"></span> <span 
data-notify="title">{1}</span> <span data-notify="message">{2}</span><div 
class="progress" data-notify="progressbar"><div class="progress-bar 
progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" 
aria-valuemax="100" style="width: 0%;"></di [...]
+      template: '<div data-notify="container" class="col-xs-11 col-sm-4 alert 
alert-{0}" role="alert"><button type="button" aria-hidden="true" class="close" 
data-notify="dismiss">&times;</button><button type="button" class="pause-play" 
aria-hidden="true" data-notify="pause-play"><i class="fa fa-pause 
fa-1"></i></button><span data-notify="icon"></span> <span 
data-notify="title">{1}</span> <span data-notify="message">{2}</span><div 
class="progress" data-notify="progressbar"><div class="pro [...]
     };
 
   String.format = function() {
@@ -157,7 +157,10 @@
     buildNotify: function () {
       var content = this.settings.content;
       this.$ele = $(String.format(this.settings.template, this.settings.type, 
content.title, content.message, content.url, content.target));
-      this.$ele.attr('data-notify-position', this.settings.placement.from + 
'-' + this.settings.placement.align);   
+      this.$ele.attr('data-notify-position', this.settings.placement.from + 
'-' + this.settings.placement.align);
+      this.settings.type == "danger" ? 
this.$ele.find('[data-notify="dismiss"]').css({"color":"#a94442"}) : 
this.$ele.find('[data-notify="dismiss"]').css({"color":"#3c763d"});
+      this.settings.type == "danger" ? 
this.$ele.find('[data-notify="pause-play"]').css({"color":"#a94442"}) : 
this.$ele.find('[data-notify="dismiss"]').css({"color":"#3c763d"});
+      this.$ele.find('[data-notify="dismiss"]').css({"color":"#a94442"})
       if (!this.settings.allow_dismiss) {
         this.$ele.find('[data-notify="dismiss"]').css('display', 'none');
       }
@@ -263,6 +266,10 @@
         self.close();
       })
 
+      this.$ele.find('[data-notify="pause-play"]').on('click', function() {
+        self.pause();
+      })
+
       this.$ele.mouseover(function(e) {
         $(this).data('data-hover', "true");
       }).mouseout(function(e) {
@@ -279,7 +286,7 @@
             self.$ele.data('notify-delay', delay);
             self.$ele.find('[data-notify="progressbar"] > 
div').attr('aria-valuenow', percent).css('width', percent + '%');
           }
-          if (delay <= -(self.settings.timer)) {
+          if (delay <= -(self.settings.timer) && 
!self.$ele.find('[data-notify="pause-play"] i').hasClass('fa-play')) {
             clearInterval(timer);
             self.close();
           }
@@ -317,6 +324,15 @@
         }
       }, 600);
     },
+    pause: function(e) {
+      if(this.$ele.find('[data-notify="pause-play"] i').hasClass('fa-pause')) {
+        this.$ele.find('[data-notify="pause-play"] i').removeClass('fa-pause');
+        this.$ele.find('[data-notify="pause-play"] i').addClass('fa-play');
+      } else {
+        this.$ele.find('[data-notify="pause-play"] i').addClass('fa-pause');
+        this.$ele.find('[data-notify="pause-play"] i').removeClass('fa-play');
+      }
+    },
     reposition: function(posX) {
       var self = this,
         notifies = '[data-notify-position="' + this.settings.placement.from + 
'-' + this.settings.placement.align + '"]:not([data-closing="true"])',
diff --git a/security-admin/src/main/webapp/styles/xa.css 
b/security-admin/src/main/webapp/styles/xa.css
index 96dacd6..ef3347b 100644
--- a/security-admin/src/main/webapp/styles/xa.css
+++ b/security-admin/src/main/webapp/styles/xa.css
@@ -1926,6 +1926,16 @@ input[type="radio"], input[type="checkbox"] {margin-top: 
0;}
     margin-top: -2px;
     font-size: 11px;
 }
+.pause-play {
+  background-color: transparent;
+  border: 0;
+  float: right;
+  font-weight: 700;
+  color: #000;
+  text-shadow: 0 1px 0 #fff;
+  opacity: 1.5;
+  padding-right: 10px;
+}
 .control-label-align {
        width: 80px !important;
 }