review

app/assets/javascripts/feature_highlight/feature_highlight.js

@@ -5,7 +5,7 @@ import {
   togglePopover,
   inserted,
   mouseenter,
-  mouseleave,
+  debouncedMouseleave,
 } from './feature_highlight_helper';
 
 export function setupFeatureHighlightPopover(id, debounceTimeout = 300) {
@@ -13,7 +13,6 @@ export function setupFeatureHighlightPopover(id, debounceTimeout = 300) {
   const $parent = $selector.parent();
   const $popoverContent = $parent.siblings('.feature-highlight-popover-content');
   const hideOnScroll = togglePopover.bind($selector, false);
-  const debouncedMouseleave = _.debounce(mouseleave, debounceTimeout);
 
   $selector
     // Setup popover
@@ -29,7 +28,7 @@ export function setupFeatureHighlightPopover(id, debounceTimeout = 300) {
       `,
     })
     .on('mouseenter', mouseenter)
-    .on('mouseleave', debouncedMouseleave)
+    .on('mouseleave', debouncedMouseleave(debounceTimeout))
     .on('inserted.bs.popover', inserted)
     .on('show.bs.popover', () => {
       window.addEventListener('scroll', hideOnScroll);

app/assets/javascripts/feature_highlight/feature_highlight_helper.js

@@ -3,20 +3,10 @@ import axios from '../lib/utils/axios_utils';
 import { __ } from '../locale';
 import Flash from '../flash';
 import LazyLoader from '../lazy_loader';
+import { togglePopover, mouseenter, debouncedMouseleave } from '../shared/popover';
 
 export const getSelector = highlightId => `.js-feature-highlight[data-highlight=${highlightId}]`;
 
-export function togglePopover(show) {
-  const isAlreadyShown = this.hasClass('js-popover-show');
-  if ((show && isAlreadyShown) || (!show && !isAlreadyShown)) {
-    return false;
-  }
-  this.popover(show ? 'show' : 'hide');
-  this.toggleClass('disable-animation js-popover-show', show);
-
-  return true;
-}
-
 export function dismiss(highlightId) {
   axios.post(this.attr('data-dismiss-endpoint'), {
     feature_name: highlightId,
@@ -27,23 +17,6 @@ export function dismiss(highlightId) {
   this.hide();
 }
 
-export function mouseleave() {
-  if (!$('.popover:hover').length > 0) {
-    const $featureHighlight = $(this);
-    togglePopover.call($featureHighlight, false);
-  }
-}
-
-export function mouseenter() {
-  const $featureHighlight = $(this);
-
-  const showedPopover = togglePopover.call($featureHighlight, true);
-  if (showedPopover) {
-    $('.popover')
-      .on('mouseleave', mouseleave.bind($featureHighlight));
-  }
-}
-
 export function inserted() {
   const popoverId = this.getAttribute('aria-describedby');
   const highlightId = this.dataset.highlight;
@@ -58,3 +31,5 @@ export function inserted() {
     LazyLoader.loadImage(lazyImg);
   }
 }
+
+export { togglePopover, mouseenter, debouncedMouseleave };

app/assets/javascripts/milestone.js

 import $ from 'jquery';
 import axios from './lib/utils/axios_utils';
 import flash from './flash';
-import Popover from './shared/popover';
+import { mouseenter, debouncedMouseleave } from './shared/popover';
 
 export default class Milestone {
   constructor() {
@@ -47,14 +47,20 @@ export default class Milestone {
   }
 
   static initDeprecationMessage() {
-    const deprecationMesssage = document.querySelector('.milestone-deprecation-message');
+    const deprecationMesssageContainer = document.querySelector('.milestone-deprecation-message');
 
-    if (!deprecationMesssage) return;
+    if (!deprecationMesssageContainer) return;
 
-    const deprecationMesssageTemplate = deprecationMesssage.querySelector('.milestone-deprecation-message-template').innerHTML;
-    const popoverLink = deprecationMesssage.querySelector('.popover-link');
+    const deprecationMessage = deprecationMesssageContainer.querySelector('.milestone-deprecation-message-template').innerHTML;
+    const popoverLink = deprecationMesssageContainer.querySelector('.popover-link');
 
-    const popover = new Popover(popoverLink, deprecationMesssageTemplate);
-    popover.init();
+    $(popoverLink).popover({
+      content: deprecationMessage,
+      html: true,
+      placement: 'bottom',
+      trigger: 'manual',
+    })
+    .on('mouseenter', mouseenter)
+    .on('mouseleave', debouncedMouseleave());
   }
 }

app/assets/javascripts/shared/popover.js

 import $ from 'jquery';
+import { debounce } from 'underscore';
 
-export default class Popover {
-  constructor(trigger, content) {
-    this.isOpen = false;
-
-    this.$popover = $(trigger).popover({
-      content,
-      html: true,
-      placement: 'bottom',
-      trigger: 'manual',
-    });
-  }
-
-  init() {
-    this.registerClickOpenListener();
-  }
-
-  openPopover() {
-    if (this.isOpen) return;
-
-    this.$popover.popover('show');
-    this.$popover.one('shown.bs.popover', this.enableClose.bind(this));
-    this.isOpen = true;
-  }
-
-  closePopover() {
-    if (!this.isOpen) return;
-
-    this.$popover.popover('hide');
-    this.disableClose();
-    this.isOpen = false;
-  }
-
-  closePopoverClick(event) {
-    const $target = $(event.target);
-
-    if ($target.is(this.$popover) ||
-      $target.is('.popover') ||
-      $target.parents('.popover').length > 0) return;
-
-    this.closePopover();
-  }
-
-  closePopoverMouseleave() {
-    if (this.$popover.is(':hover') ||
-      (this.$popover.siblings('.popover').length > 0 &&
-      this.$popover.siblings('.popover').is(':hover'))) return;
-
-    this.closePopover();
-  }
-
-  closePopoverMouseleaveDelayed() {
-    setTimeout(this.closePopoverMouseleave.bind(this), 1500);
-  }
-
-  registerClickOpenListener() {
-    this.$popover.on('click.glPopover.open', this.openPopover.bind(this));
-  }
-
-  registerClickCloseListener() {
-    $(document.body).on('click.glPopover.close', this.closePopoverClick.bind(this));
+export function togglePopover(show) {
+  const isAlreadyShown = this.hasClass('js-popover-show');
+  if ((show && isAlreadyShown) || (!show && !isAlreadyShown)) {
+    return false;
   }
+  this.popover(show ? 'show' : 'hide');
+  this.toggleClass('disable-animation js-popover-show', show);
 
-  registerMouseleaveCloseListener() {
-    this.$popover.on('mouseleave.glPopover.close', this.closePopoverMouseleaveDelayed.bind(this));
-    this.$popover.siblings('.popover').on('mouseleave.glPopover.close', this.closePopoverMouseleaveDelayed.bind(this));
-  }
+  return true;
+}
 
-  destroyMouseleaveCloseListener() {
-    this.$popover.off('mouseleave.glPopover.close');
-    this.$popover.siblings('.popover').on('mouseleave.glPopover.close');
+export function mouseleave() {
+  if (!$('.popover:hover').length > 0) {
+    const $popover = $(this);
+    togglePopover.call($popover, false);
   }
+}
 
-  enableClose() {
-    this.registerClickCloseListener();
-    this.registerMouseleaveCloseListener();
-  }
+export function mouseenter() {
+  const $popover = $(this);
 
-  disableClose() {
-    Popover.destroyClickCloseListener();
-    this.destroyMouseleaveCloseListener();
+  const showedPopover = togglePopover.call($popover, true);
+  if (showedPopover) {
+    $('.popover')
+      .on('mouseleave', mouseleave.bind($popover));
   }
+}
 
-  static destroyClickCloseListener() {
-    $(document.body).off('click.glPopover.close');
-  }
+export function debouncedMouseleave(debounceTimeout = 300) {
+  return debounce(mouseleave, debounceTimeout);
 }
\ No newline at end of file

app/assets/stylesheets/framework/popup.scss

@@ -6,22 +6,10 @@
     $popup-triangle-border-size
   );
 
+  padding: $gl-padding;
+  background-color: $gray-lighter;
   border: 1px solid $gray-darker;
-  box-shadow: 0 5px 10px $popup-box-shadow-color;
+  border-radius: $border-radius-default;
+  box-shadow: 0 5px 8px $popup-box-shadow-color;
   position: relative;
-
-  .body {
-    background-color: $gray-lighter;
-    padding: $gl-padding;
-    border-top-left-radius: $border-radius-default;
-    border-top-right-radius: $border-radius-default;
-  }
-
-  .footer {
-    background-color: $white-light;
-    padding: $gl-padding;
-    border-bottom-left-radius: $border-radius-default;
-    border-bottom-right-radius: $border-radius-default;
-    border-top: 1px solid $white-dark;
-  }
 }

app/assets/stylesheets/pages/milestone.scss

@@ -203,18 +203,18 @@
       padding: 0;
     }
 
+    .body {
+      padding: 8px 15px 8px 30px;
+      background-color: $gray-light;
+    }
+
     .footer {
-      background-color: $white-light;
       padding: $gl-padding-8 $gl-padding;
-      border-bottom-left-radius: $border-radius-default;
-      border-bottom-right-radius: $border-radius-default;
       border-top: 1px solid $white-dark;
     }
 
     .instructions-list {
-      list-style-position: inside;
-      padding: $gl-padding-8 20px;
-      background-color: $gray-light;
+      padding: 0;
     }
   }
 

app/views/shared/milestones/_deprecation_message.html.haml

@@ -5,11 +5,12 @@
     %p.append-bottom-default.prepend-top-5
       = _('Use group milestones to manage issues from multiple projects in the same milestone.')
       %br
-      = button_tag _('Promote these project milestones into a group milestone.'), class: 'btn-link popover-link'
+      = button_tag _('Promote these project milestones into a group milestone.'), class: 'btn-link popover-link prepend-left-0'
     %div= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default', target: '_blank'
 
   %template.milestone-deprecation-message-template
+    .body
       %ol.instructions-list.append-bottom-0
         %li= _('Click any <strong>project name</strong> in the project list below to navigate to the project milestone.').html_safe
         %li= _('Click the <strong>Promote</strong> button in the top right corner to promote it to a group milestone.').html_safe
-    .footer= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn-link', target: '_blank'
+    .footer= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn-link prepend-left-0', target: '_blank'