Review changes

app/assets/javascripts/feature_highlight/feature_highlight.js

 import $ from 'jquery';
 import {
   getSelector,
-  togglePopover,
   inserted,
+} from './feature_highlight_helper';
+import {
+  togglePopover,
   mouseenter,
   debouncedMouseleave,
-} from './feature_highlight_helper';
+} from '../shared/popover';
 
 export function setupFeatureHighlightPopover(id, debounceTimeout = 300) {
   const $selector = $(getSelector(id));

app/assets/javascripts/feature_highlight/feature_highlight_helper.js

@@ -3,7 +3,7 @@ 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';
+import { togglePopover } from '../shared/popover';
 
 export const getSelector = highlightId => `.js-feature-highlight[data-highlight=${highlightId}]`;
 
@@ -31,5 +31,3 @@ 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 { mouseenter, debouncedMouseleave } from './shared/popover';
+import { mouseenter, debouncedMouseleave, togglePopover } from './shared/popover';
 
 export default class Milestone {
   constructor() {
@@ -52,15 +52,21 @@ export default class Milestone {
     if (!deprecationMesssageContainer) return;
 
     const deprecationMessage = deprecationMesssageContainer.querySelector('.milestone-deprecation-message-template').innerHTML;
-    const popoverLink = deprecationMesssageContainer.querySelector('.popover-link');
+    const $popover = $('.popover-link', deprecationMesssageContainer);
+    const hideOnScroll = togglePopover.bind($popover, false);
 
-    $(popoverLink).popover({
+    $popover.popover({
       content: deprecationMessage,
       html: true,
       placement: 'bottom',
-      trigger: 'manual',
     })
     .on('mouseenter', mouseenter)
-    .on('mouseleave', debouncedMouseleave());
+    .on('mouseleave', debouncedMouseleave())
+    .on('show.bs.popover', () => {
+      window.addEventListener('scroll', hideOnScroll);
+    })
+    .on('hide.bs.popover', () => {
+      window.removeEventListener('scroll', hideOnScroll);
+    });
   }
 }

app/assets/javascripts/shared/popover.js

@@ -24,8 +24,7 @@ export function mouseenter() {
 
   const showedPopover = togglePopover.call($popover, true);
   if (showedPopover) {
-    $('.popover')
-      .on('mouseleave', mouseleave.bind($popover));
+    $('.popover').on('mouseleave', mouseleave.bind($popover));
   }
 }
 

app/assets/stylesheets/framework/variables.scss

@@ -754,9 +754,9 @@ $image-comment-cursor-top-offset: 12;
 /*
 Popup
 */
-$popup-triangle-size: 8px;
+$popup-triangle-size: 15px;
 $popup-triangle-border-size: 1px;
-$popup-box-shadow-color: rgba(90, 90, 90, 0.3);
+$popup-box-shadow-color: rgba(90, 90, 90, 0.05);
 
 /*
 Multi file editor

app/assets/stylesheets/pages/milestone.scss

@@ -203,18 +203,21 @@
       padding: 0;
     }
 
-    .body {
-      padding: 8px 15px 8px 30px;
-      background-color: $gray-light;
+    .milestone-popover-body {
+      padding: $gl-padding-8;
     }
 
-    .footer {
+    .milestone-popover-footer {
       padding: $gl-padding-8 $gl-padding;
       border-top: 1px solid $white-dark;
     }
 
-    .instructions-list {
-      padding: 0;
+    .milestone-popover-instructions-list {
+      padding-left: 2em;
+
+      & > li {
+        padding-left: 1em;
+      }
     }
   }
 

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

@@ -9,8 +9,8 @@
     %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
+    .milestone-popover-body
+      %ol.milestone-popover-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 prepend-left-0', target: '_blank'
+    .milestone-popover-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'