From f8ac9bb2e6a28c0623a4aa5289c24de8394d9fae Mon Sep 17 00:00:00 2001
From: Ed Sanders <esanders@wikimedia.org>
Date: Mon, 10 Apr 2017 13:59:19 +0100
Subject: [PATCH] Cleanup postEdit and match styles to mw.notification

* Remove HTML template
* Add mw-notification class and dependency
* Fix variable scoping issues so firing two notifications
  doesn't cause one to become stuck

Bug: T58313
Change-Id: I9a702d23a8a9b5cc098cbb413213d73813bec097
---
 resources/Resources.php                       |  8 ++-
 .../mediawiki.action.view.postEdit.js         | 53 ++++++++++---------
 ...ss => mediawiki.action.view.postEdit.less} | 41 +++++++-------
 .../mediawiki.action/templates/postEdit.html  |  6 ---
 4 files changed, 50 insertions(+), 58 deletions(-)
 rename resources/src/mediawiki.action/{mediawiki.action.view.postEdit.css => mediawiki.action.view.postEdit.less} (60%)
 delete mode 100644 resources/src/mediawiki.action/templates/postEdit.html

diff --git a/resources/Resources.php b/resources/Resources.php
index 6fc6a288a4..d0a34470d6 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1491,14 +1491,12 @@ return [
 		'targets' => [ 'desktop', 'mobile' ]
 	],
 	'mediawiki.action.view.postEdit' => [
-		'templates' => [
-			'postEdit.html' => 'resources/src/mediawiki.action/templates/postEdit.html',
-		],
 		'scripts' => 'resources/src/mediawiki.action/mediawiki.action.view.postEdit.js',
-		'styles' => 'resources/src/mediawiki.action/mediawiki.action.view.postEdit.css',
+		'styles' => 'resources/src/mediawiki.action/mediawiki.action.view.postEdit.less',
 		'dependencies' => [
 			'mediawiki.cookie',
-			'mediawiki.jqueryMsg'
+			'mediawiki.jqueryMsg',
+			'mediawiki.notification'
 		],
 		'messages' => [
 			'postedit-confirmation-created',
diff --git a/resources/src/mediawiki.action/mediawiki.action.view.postEdit.js b/resources/src/mediawiki.action/mediawiki.action.view.postEdit.js
index 5dfdede408..87572ecf8b 100644
--- a/resources/src/mediawiki.action/mediawiki.action.view.postEdit.js
+++ b/resources/src/mediawiki.action/mediawiki.action.view.postEdit.js
@@ -22,43 +22,48 @@
 	 * @member mw.hook
 	 */
 
-	var config = mw.config.get( [ 'wgAction', 'wgCurRevisionId' ] ),
+	var cookieVal,
+		config = mw.config.get( [ 'wgAction', 'wgCurRevisionId' ] ),
 		// This should match EditPage::POST_EDIT_COOKIE_KEY_PREFIX:
-		cookieKey = 'PostEditRevision' + config.wgCurRevisionId,
-		cookieVal, $div, id;
-
-	function removeConfirmation() {
-		$div.remove();
-		mw.hook( 'postEdit.afterRemoval' ).fire();
-	}
-
-	function fadeOutConfirmation() {
-		clearTimeout( id );
-		$div.find( '.postedit' ).addClass( 'postedit postedit-faded' );
-		setTimeout( removeConfirmation, 500 );
-
-		return false;
-	}
+		cookieKey = 'PostEditRevision' + config.wgCurRevisionId;
 
 	function showConfirmation( data ) {
+		var $container, $popup, $content, timeoutId;
+
+		function fadeOutConfirmation() {
+			$popup.addClass( 'postedit-faded' );
+			setTimeout( function () {
+				$container.remove();
+				mw.hook( 'postEdit.afterRemoval' ).fire();
+			}, 250 );
+		}
+
 		data = data || {};
+
 		if ( data.message === undefined ) {
 			data.message = $.parseHTML( mw.message( 'postedit-confirmation-saved', data.user || mw.user ).escaped() );
 		}
 
-		$div = mw.template.get( 'mediawiki.action.view.postEdit', 'postEdit.html' ).render();
-
+		$content = $( '<div>' ).addClass( 'postedit-icon postedit-icon-checkmark postedit-content' );
 		if ( typeof data.message === 'string' ) {
-			$div.find( '.postedit-content' ).text( data.message );
+			$content.text( data.message );
 		} else if ( typeof data.message === 'object' ) {
-			$div.find( '.postedit-content' ).append( data.message );
+			$content.append( data.message );
 		}
 
-		$div
-			.click( fadeOutConfirmation )
-			.prependTo( 'body' );
+		$popup = $( '<div>' ).addClass( 'postedit mw-notification' ).append(
+			$content,
+			$( '<a>' ).addClass( 'postedit-close' ).attr( 'href', '#' ).text( '×' )
+		).on( 'click', function ( e ) {
+			e.preventDefault();
+			clearTimeout( timeoutId );
+			fadeOutConfirmation();
+		} );
+
+		$container = $( '<div>' ).addClass( 'postedit-container' ).append( $popup );
+		timeoutId = setTimeout( fadeOutConfirmation, 3000 );
 
-		id = setTimeout( fadeOutConfirmation, 3000 );
+		$( 'body' ).prepend( $container );
 	}
 
 	mw.hook( 'postEdit' ).add( showConfirmation );
diff --git a/resources/src/mediawiki.action/mediawiki.action.view.postEdit.css b/resources/src/mediawiki.action/mediawiki.action.view.postEdit.less
similarity index 60%
rename from resources/src/mediawiki.action/mediawiki.action.view.postEdit.css
rename to resources/src/mediawiki.action/mediawiki.action.view.postEdit.less
index a5ca65eebe..8094559084 100644
--- a/resources/src/mediawiki.action/mediawiki.action.view.postEdit.css
+++ b/resources/src/mediawiki.action/mediawiki.action.view.postEdit.less
@@ -1,3 +1,5 @@
+@import 'mediawiki.mixins';
+
 .postedit-container {
 	margin: 0 auto;
 	position: fixed;
@@ -6,31 +8,26 @@
 	left: 50%;
 	z-index: 1000;
 	font-size: 13px;
-}
 
-.postedit-container:hover {
-	cursor: pointer;
+	&:hover {
+		cursor: pointer;
+	}
 }
 
 .postedit {
 	position: relative;
 	top: 0.6em;
 	left: -50%;
-	padding: 0.6em 3.6em 0.6em 1.1em;
-	line-height: 1.5625em;
-	color: #626465;
-	background-color: #f4f4f4;
-	border: 1px solid #dcd9d9;
-	text-shadow: 0 0.0625em 0 rgba( 255, 255, 255, 0.5 );
-	border-radius: 5px;
-	box-shadow: 0 2px 5px 0 #ccc;
-	-webkit-transition: all 0.25s ease-in-out;
-	-moz-transition: all 0.25s ease-in-out;
-	-ms-transition: all 0.25s ease-in-out;
-	-o-transition: all 0.25s ease-in-out;
-	transition: all 0.25s ease-in-out;
+	line-height: 1.35;
+	opacity: 1;
+	.transition( opacity 250ms );
+
+	&.mw-notification {
+		padding-right: 3em;
+	}
 }
 
+// TODO: Move to monobook skin
 .skin-monobook .postedit {
 	top: 6em !important; /* stylelint-disable-line declaration-no-important */
 }
@@ -65,12 +62,10 @@
 	text-shadow: 0 0.0625em 0 #fff;
 	text-decoration: none;
 	opacity: 0.2;
-	filter: alpha( opacity=20 );
-}
 
-.postedit-close:hover {
-	color: #000;
-	text-decoration: none;
-	opacity: 0.4;
-	filter: alpha( opacity=40 );
+	.postedit:hover & {
+		color: #000;
+		text-decoration: none;
+		opacity: 0.4;
+	}
 }
diff --git a/resources/src/mediawiki.action/templates/postEdit.html b/resources/src/mediawiki.action/templates/postEdit.html
deleted file mode 100644
index dbb482a667..0000000000
--- a/resources/src/mediawiki.action/templates/postEdit.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<div class="postedit-container">
-	<div class="postedit">
-		<div class="postedit-icon postedit-icon-checkmark postedit-content"></div>
-		<a href="#" class="postedit-close">&times;</a>
-	</div>
-</div>
-- 
2.20.1