From: Ed Sanders Date: Mon, 10 Apr 2017 12:59:19 +0000 (+0100) Subject: Cleanup postEdit and match styles to mw.notification X-Git-Tag: 1.31.0-rc.0~3405 X-Git-Url: http://git.cyclocoop.org/%7B%24admin_url%7Dmembres/cotisations/gestion/rappel_supprimer.php?a=commitdiff_plain;h=f8ac9bb2e6a28c0623a4aa5289c24de8394d9fae;p=lhc%2Fweb%2Fwiklou.git 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 --- 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.css b/resources/src/mediawiki.action/mediawiki.action.view.postEdit.css deleted file mode 100644 index a5ca65eebe..0000000000 --- a/resources/src/mediawiki.action/mediawiki.action.view.postEdit.css +++ /dev/null @@ -1,76 +0,0 @@ -.postedit-container { - margin: 0 auto; - position: fixed; - top: 0; - height: 0; - left: 50%; - z-index: 1000; - font-size: 13px; -} - -.postedit-container: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; -} - -.skin-monobook .postedit { - top: 6em !important; /* stylelint-disable-line declaration-no-important */ -} - -.postedit-faded { - opacity: 0; -} - -.postedit-icon { - padding-left: 41px; /* 25 + 8 + 8 */ - /* like min-height, but old IE compatible and keeps text vertically aligned, too */ - line-height: 25px; - background-repeat: no-repeat; - background-position: 8px 50%; -} - -.postedit-icon-checkmark { - /* @embed */ - background-image: url( images/green-checkmark.png ); - background-position: left; -} - -.postedit-close { - position: absolute; - padding: 0 0.8em; - right: 0; - top: 0; - font-size: 1.25em; - font-weight: bold; - line-height: 2.3em; - color: #000; - 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 ); -} 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 = $( '
' ).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 = $( '
' ).addClass( 'postedit mw-notification' ).append( + $content, + $( '' ).addClass( 'postedit-close' ).attr( 'href', '#' ).text( '×' ) + ).on( 'click', function ( e ) { + e.preventDefault(); + clearTimeout( timeoutId ); + fadeOutConfirmation(); + } ); + + $container = $( '
' ).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.less b/resources/src/mediawiki.action/mediawiki.action.view.postEdit.less new file mode 100644 index 0000000000..8094559084 --- /dev/null +++ b/resources/src/mediawiki.action/mediawiki.action.view.postEdit.less @@ -0,0 +1,71 @@ +@import 'mediawiki.mixins'; + +.postedit-container { + margin: 0 auto; + position: fixed; + top: 0; + height: 0; + left: 50%; + z-index: 1000; + font-size: 13px; + + &:hover { + cursor: pointer; + } +} + +.postedit { + position: relative; + top: 0.6em; + left: -50%; + 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 */ +} + +.postedit-faded { + opacity: 0; +} + +.postedit-icon { + padding-left: 41px; /* 25 + 8 + 8 */ + /* like min-height, but old IE compatible and keeps text vertically aligned, too */ + line-height: 25px; + background-repeat: no-repeat; + background-position: 8px 50%; +} + +.postedit-icon-checkmark { + /* @embed */ + background-image: url( images/green-checkmark.png ); + background-position: left; +} + +.postedit-close { + position: absolute; + padding: 0 0.8em; + right: 0; + top: 0; + font-size: 1.25em; + font-weight: bold; + line-height: 2.3em; + color: #000; + text-shadow: 0 0.0625em 0 #fff; + text-decoration: none; + opacity: 0.2; + + .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 @@ -
-
-
- × -
-