wikimedia/mediawiki-extensions-VisualEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor synced 2024-09-25 11:16:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Simplify pulsating dot to one DOM node using :before/:after

Browse source 
Change-Id: I81af08d58a33b6d3751bfc5012217b9bd98e69dc
This commit is contained in:
Ed Sanders 2019-06-27 15:35:50 +01:00
parent 72418fea56
commit 3f892fe368
2 changed files with 16 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
modules/ve-mw/ui/styles/tools/ve.ui.MWEducationPopupTool.css
View file

@ -9,21 +9,27 @@
cursor: pointer; cursor: pointer;
} }
.ve-ui-pulsatingDot, .ve-ui-pulsatingDot {
.ve-ui-stillDot {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 50%; left: 50%;
z-index: 1; z-index: 1;
}
.ve-ui-pulsatingDot:before,
.ve-ui-pulsatingDot:after {
content: '';
display: block;
position: absolute;
border-radius: 50%; border-radius: 50%;
background-color: #36c; background-color: #36c;
} }
.ve-ui-pulsatingDot { .ve-ui-pulsatingDot:before {
width: 36px; width: 36px;
height: 36px; height: 36px;
margin-bottom: -18px; top: -18px;
margin-left: -18px; left: -18px;
opacity: 0; opacity: 0;
-webkit-animation: pulse 3s ease-out; -webkit-animation: pulse 3s ease-out;
-moz-animation: pulse 3s ease-out; -moz-animation: pulse 3s ease-out;
@ -33,12 +39,12 @@
animation-iteration-count: infinite; animation-iteration-count: infinite;
} }
.ve-ui-stillDot { .ve-ui-pulsatingDot:after {
/* Use whole pixel values to improve rendering (T214203) */ /* Use whole pixel values to improve rendering (T214203) */
width: 12px; width: 12px;
height: 12px; height: 12px;
margin-bottom: -6px; top: -6px;
margin-left: -6px; left: -6px;
} }
.ve-ui-educationPopup-shield { .ve-ui-educationPopup-shield {
@ -49,8 +55,7 @@
left: 0; left: 0;
} }
.oo-ui-widget-disabled .ve-ui-pulsatingDot, .oo-ui-widget-disabled .ve-ui-pulsatingDot {
.oo-ui-widget-disabled .ve-ui-stillDot {
display: none; display: none;
} }

5
modules/ve-mw/ui/tools/ve.ui.MWEducationPopupTool.js
View file

@ -64,22 +64,19 @@ ve.ui.MWEducationPopupTool = function VeUiMwEducationPopupTool( config ) {
this.shownEducationPopup = false; this.shownEducationPopup = false;
this.$pulsatingDot = $( '<div>' ).addClass( 've-ui-pulsatingDot' ); this.$pulsatingDot = $( '<div>' ).addClass( 've-ui-pulsatingDot' );
this.$stillDot = $( '<div>' ).addClass( 've-ui-stillDot' );
$shield = $( '<div>' ).addClass( 've-ui-educationPopup-shield' ); $shield = $( '<div>' ).addClass( 've-ui-educationPopup-shield' );
this.$element this.$element
.addClass( 've-ui-educationPopup' ) .addClass( 've-ui-educationPopup' )
.append( $shield, this.popup.$element, this.$stillDot, this.$pulsatingDot ); .append( $shield, this.popup.$element, this.$pulsatingDot );
this.$element.children().not( this.popup.$element ).on( 'click', function () { this.$element.children().not( this.popup.$element ).on( 'click', function () {
if ( !tool.shownEducationPopup ) { if ( !tool.shownEducationPopup ) {
if ( ve.init.target.openEducationPopupTool ) { if ( ve.init.target.openEducationPopupTool ) {
ve.init.target.openEducationPopupTool.popup.toggle( false ); ve.init.target.openEducationPopupTool.popup.toggle( false );
ve.init.target.openEducationPopupTool.setActive( false ); ve.init.target.openEducationPopupTool.setActive( false );
ve.init.target.openEducationPopupTool.$pulsatingDot.removeClass( 'oo-ui-element-hidden' ); ve.init.target.openEducationPopupTool.$pulsatingDot.removeClass( 'oo-ui-element-hidden' );
ve.init.target.openEducationPopupTool.$stillDot.removeClass( 'oo-ui-element-hidden' );
} }
ve.init.target.openEducationPopupTool = tool; ve.init.target.openEducationPopupTool = tool;
tool.$pulsatingDot.addClass( 'oo-ui-element-hidden' ); tool.$pulsatingDot.addClass( 'oo-ui-element-hidden' );
tool.$stillDot.addClass( 'oo-ui-element-hidden' );
tool.popup.toggle( true ); tool.popup.toggle( true );
$shield.remove(); $shield.remove();