add gpg commit popover badges

3 files changed, 50 insertions, 0 deletions

diff --git a/app/assets/javascripts/commons/bootstrap.js b/app/assets/javascripts/commons/bootstrap.js
index 36bfe457be9..510bedbf641 100644
--- a/app/assets/javascripts/commons/bootstrap.js
+++ b/app/assets/javascripts/commons/bootstrap.js
@@ -8,6 +8,7 @@ import 'bootstrap-sass/assets/javascripts/bootstrap/modal';
 import 'bootstrap-sass/assets/javascripts/bootstrap/tab';
 import 'bootstrap-sass/assets/javascripts/bootstrap/transition';
 import 'bootstrap-sass/assets/javascripts/bootstrap/tooltip';
+import 'bootstrap-sass/assets/javascripts/bootstrap/popover';
 
 // custom jQuery functions
 $.fn.extend({
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index e96d51de838..ecf7a677c99 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -159,6 +159,8 @@ document.addEventListener('beforeunload', function () {
   $(document).off('scroll');
   // Close any open tooltips
   $('.has-tooltip, [data-toggle="tooltip"]').tooltip('destroy');
+  // Close any open popover
+  $('[data-toggle="popover"]').popover('destroy');
 });
 
 window.addEventListener('hashchange', gl.utils.handleLocationHash);
@@ -247,6 +249,10 @@ $(function () {
       return $(el).data('placement') || 'bottom';
     }
   });
+  // Initialize popovers
+  $body.popover({
+    selector: '[data-toggle="popover"]'
+  });
   $('.trigger-submit').on('change', function () {
     return $(this).parents('form').submit();
   // Form submitter
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index fd0871ec0b8..54f6156ad8f 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -283,3 +283,46 @@
     color: $gl-text-color;
   }
 }
+
+.gpg-badge {
+  &.valid {
+    color: $brand-success;
+  }
+
+  &.invalid {
+    color: $gray;
+  }
+}
+
+.gpg-badge-popover-title {
+  font-weight: normal;
+}
+
+.gpg-badge-popover-icon {
+  float: left;
+  font-size: 35px;
+  line-height: 35px;
+  width: 32px;
+  margin-right: $btn-side-margin;
+
+  &.valid {
+    color: $brand-success;
+  }
+
+  &.invalid {
+    color: $gray;
+  }
+}
+
+.gpg-badge-popover-avatar {
+  float: left;
+  margin-bottom: $gl-padding;
+
+  .avatar {
+    margin-left: 0;
+  }
+}
+
+.gpg-badge-popover-username {
+  font-weight: bold;
+}