jenkins-bot has submitted this change and it was merged. ( 
https://gerrit.wikimedia.org/r/346594 )

Change subject: RCFilters Guided tour: Append the dot to the popup
......................................................................


RCFilters Guided tour: Append the dot to the popup

The dot should be in a higher DOM level so it isn't being cut off
by the div it's in. Append the dot to the bottom of the popup and
then position it properly, to make sure that the animation and the
dot itself are on top of the popup header and aren't cut off.

Bug: T151006
Change-Id: I063c303442f948ddbc375bafbdeb6cf741a5ab5c
---
M modules/rcfilters-highlight-tour-hooks.js
M modules/rcfilters-highlight-tour.less
2 files changed, 29 insertions(+), 12 deletions(-)

Approvals:
  Sbisson: Looks good to me, approved
  jenkins-bot: Verified



diff --git a/modules/rcfilters-highlight-tour-hooks.js 
b/modules/rcfilters-highlight-tour-hooks.js
index 625a0b7..164b58d 100644
--- a/modules/rcfilters-highlight-tour-hooks.js
+++ b/modules/rcfilters-highlight-tour-hooks.js
@@ -9,20 +9,37 @@
                        mw.user.options.set( name, value );
                        new mw.Api().saveOption( name, value );
                },
-               highlightButtonSelector = 
'.mw-rcfilters-ui-filtersListWidget-hightlightButton a',
                showDot = function () {
-                       $( highlightButtonSelector )
-                               .addClass( 
'rcfilters-tour-highlight-dot-container' )
-                               .append(
-                                       $( '<div>' ).addClass( 
'rcfilters-tour-highlight-pulsatingDot' ),
-                                       $( '<div>' ).addClass( 
'rcfilters-tour-highlight-stillDot' )
-                               );
+                       var position,
+                               $highlightButton,
+                               $container = $( 
'.rcfilters-tour-highlight-dot-container' );
+
+                       if ( !$container.length ) {
+                               $container = $( '<div>' )
+                                       .addClass( 
'rcfilters-tour-highlight-dot-container' )
+                                       .append(
+                                               $( '<div>' ).addClass( 
'rcfilters-tour-highlight-pulsatingDot' ),
+                                               $( '<div>' ).addClass( 
'rcfilters-tour-highlight-stillDot' )
+                                       );
+
+                               $highlightButton = $( 
'.mw-rcfilters-ui-filtersListWidget-hightlightButton a' );
+                               position = $highlightButton.position();
+
+                               $( '.mw-rcfilters-ui-filterWrapperWidget-popup 
.oo-ui-popupWidget-body' )
+                                       .append( $container );
+
+                               // Position
+                               $container.css( {
+                                       left: position.left + ( 
$highlightButton.outerWidth() / 2 ),
+                                       top: position.top + 
$highlightButton.outerHeight()
+                               } );
+                       }
+
+                       $container.show();
                },
                hideDot = function () {
-                       var $button = $( highlightButtonSelector )
-                               .removeClass( 
'rcfilters-tour-highlight-dot-container' );
-                       $button.find( '.rcfilters-tour-highlight-pulsatingDot, 
.rcfilters-tour-highlight-stillDot' )
-                               .remove();
+                       $( '.rcfilters-tour-highlight-dot-container' )
+                               .hide();
                };
 
        mw.hook( 'RcFilters.popup.open' ).add( function ( selectedFilterName ) {
diff --git a/modules/rcfilters-highlight-tour.less 
b/modules/rcfilters-highlight-tour.less
index 0e72e1a..b4cd1c8 100644
--- a/modules/rcfilters-highlight-tour.less
+++ b/modules/rcfilters-highlight-tour.less
@@ -19,7 +19,7 @@
 }
 
 .rcfilters-tour-highlight-dot-container {
-       position: relative;
+       position: absolute;
 }
 
 .rcfilters-tour-highlight-pulsatingDot {

-- 
To view, visit https://gerrit.wikimedia.org/r/346594
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: merged
Gerrit-Change-Id: I063c303442f948ddbc375bafbdeb6cf741a5ab5c
Gerrit-PatchSet: 2
Gerrit-Project: mediawiki/extensions/WikimediaMessages
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <[email protected]>
Gerrit-Reviewer: Sbisson <[email protected]>
Gerrit-Reviewer: jenkins-bot <>

_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to