MarkTraceur has uploaded a new change for review.
https://gerrit.wikimedia.org/r/201230
Change subject: Change dialog for Special:MWOAuth to use OOUI
......................................................................
Change dialog for Special:MWOAuth to use OOUI
As part of the request for a better-designed form, I'm moving this to
OOUI so it's easier to work with. Further design changes may be needed
to make this work in the best possible way, but it's a start!
Bug: T75062
Change-Id: I0fb02f729e4dd09b6da3ee4abeada32473ccd8aa
---
M frontend/MWOAuthUI.setup.php
M frontend/modules/ext.MWOAuth.AuthorizeDialog.js
M frontend/modules/ext.MWOAuth.AuthorizeForm.css
M frontend/specialpages/SpecialMWOAuth.php
4 files changed, 69 insertions(+), 28 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/OAuth
refs/changes/30/201230/1
diff --git a/frontend/MWOAuthUI.setup.php b/frontend/MWOAuthUI.setup.php
index 836cf96..e90d291 100644
--- a/frontend/MWOAuthUI.setup.php
+++ b/frontend/MWOAuthUI.setup.php
@@ -35,10 +35,14 @@
);
$wgResourceModules['ext.MWOAuth.AuthorizeDialog'] = array(
'scripts' => array(
'ext.MWOAuth.AuthorizeDialog.js' ),
- 'dependencies' => array( 'jquery.ui.dialog' ),
+ 'dependencies' => array( 'oojs-ui' ),
'localBasePath' => dirname( __FILE__ ) . '/modules',
'remoteExtPath' => 'OAuth/frontend/modules',
- 'messages' => array( 'mwoauth-desc' )
+ 'messages' => array(
+ 'mwoauth-desc',
+ 'mwoauth-form-button-approve',
+ 'mwoauth-form-button-cancel',
+ )
);
}
diff --git a/frontend/modules/ext.MWOAuth.AuthorizeDialog.js
b/frontend/modules/ext.MWOAuth.AuthorizeDialog.js
index f8c6df8..e602e48 100644
--- a/frontend/modules/ext.MWOAuth.AuthorizeDialog.js
+++ b/frontend/modules/ext.MWOAuth.AuthorizeDialog.js
@@ -2,30 +2,49 @@
* OAuth JavaScript
* @author Aaron Schulz 2013
*/
-( function( mw, $ ) {
+( function( mw, $, oo ) {
"use strict";
var mwoauth = {
'init' : function () {
- var form = $( '#mw-mwoauth-authorize-dialog' );
- form.find( '.mw-htmlform-submit-buttons' ).addClass(
'mw-ui-flush-right' );
- form.dialog( {
- dialogClass:
'mw-mwoauth-authorize-jQuery-dialog',
- width: 0.3 * $( window ).width(),
- title: mw.msg( 'mwoauth-desc' ),
- draggable: false,
- resizable: false,
- open: function () {
- $( window ).scrollTop( 0 );
- },
- create: function() {
- $(this).parents( ".ui-dialog:first" )
- .find( ".ui-dialog-content"
).css( "padding", "20px" );
- $(this).css( "maxHeight", 0.9 * $(
window ).height() );
- $(this).css( "background-color", '#FFF'
);
- $(this).css( "border", '1px #CCC' );
- $(this).dialog( 'option', 'modal', true
);
- }
+ var $accept = $(
'input.mw-mwoauth-authorize-button[name=accept]' ),
+ $cancel = $(
'input.mw-mwoauth-authorize-button[name=cancel]' ),
+ $form = $( '#mw-mwoauth-authorize-form'
).detach(),
+ dialog = new oo.ui.MessageDialog( {
+ id: 'mw-mwoauth-authorize-dialog',
+ width: '50%'
+ } ),
+ manager = new oo.ui.WindowManager();
+
+ $form
+ .find( '.mw-htmlform-submit-buttons' )
+ .addClass( 'mw-ui-flush-right' );
+
+ manager.$element.appendTo( 'body' );
+ manager.addWindows( [ dialog ] );
+ dialog.setSize( 'larger' );
+
+ manager.openWindow( dialog, {
+ title: mw.message( 'mwoauth-desc' ).text(),
+ message: $form,
+ actions: [
+ { action: 'accept', label: mw.message(
'mwoauth-form-button-approve' ).text(), flags: [ 'primary', 'constructive' ] },
+ { action: 'reject', label: mw.message(
'mwoauth-form-button-cancel' ).text(), flags: [ 'safe' ] }
+ ]
+ } ).then( function ( opening ) {
+ opening.then( function ( opened ) {
+ opened.then( function ( data ) {
+ switch ( data.action ) {
+ case 'accept':
+ $accept.click();
+ break;
+ case 'reject':
+ console.log(
$cancel );
+ $cancel.click();
+ break;
+ }
+ } );
+ } );
} );
}
};
@@ -35,4 +54,4 @@
mwoauth.init();
} );
-})( mediaWiki, jQuery );
+})( mediaWiki, jQuery, OO );
diff --git a/frontend/modules/ext.MWOAuth.AuthorizeForm.css
b/frontend/modules/ext.MWOAuth.AuthorizeForm.css
index f310259..1c5bea9 100644
--- a/frontend/modules/ext.MWOAuth.AuthorizeForm.css
+++ b/frontend/modules/ext.MWOAuth.AuthorizeForm.css
@@ -29,10 +29,20 @@
margin-bottom: .5em;
}
-.client-js #mw-mwoauth-authorize-dialog {
+.client-js #mw-mwoauth-authorize-form .mw-htmlform-submit-buttons {
+ position: absolute;
+ top: -1000px;
+ left: -1000px;
+}
+
+.client-js #mw-mwoauth-authorize-form {
display: none; /* no flicker */
}
+.client-js #mw-mwoauth-authorize-dialog #mw-mwoauth-authorize-form {
+ display: block;
+}
+
.mw-mwoauth-authorize-jQuery-dialog .ui-dialog-titlebar {
display: none;
}
diff --git a/frontend/specialpages/SpecialMWOAuth.php
b/frontend/specialpages/SpecialMWOAuth.php
index 9f4a933..5c184af 100644
--- a/frontend/specialpages/SpecialMWOAuth.php
+++ b/frontend/specialpages/SpecialMWOAuth.php
@@ -1,6 +1,7 @@
<?php
namespace MediaWiki\Extensions\OAuth;
+use OOUI;
/*
(c) Chris Steipp, Aaron Schulz 2013, GPL
@@ -365,10 +366,17 @@
$privacyMessage = MWOAuthUtils::getSiteMessage(
'mwoauth-form-privacypolicy-link' );
$form->addFooterText( wfMessage( $privacyMessage )->parse() );
- $this->getOutput()->addHtml(
- '<div id="mw-mwoauth-authorize-dialog"
class="mw-ui-container">' );
- $status = $form->show();
- $this->getOutput()->addHtml( '</div>' );
+ $out = $this->getOutput();
+ $out->enableOOUI();
+ $form->prepareForm();
+ $status = $form->tryAuthorizedSubmit();
+
+ $out->addHtml( new OOUI\PanelLayout( array(
+ 'id' => 'mw-mwoauth-authorize-form',
+ 'expanded' => false,
+ 'content' => new OOUI\HtmlSnippet( $form->getHTML(
$status ) ),
+ ) ) );
+
if ( $status instanceof \Status && $status->isOk() ) {
// Redirect to callback url
$this->getOutput()->redirect(
$status->value['result']['callbackUrl'] );
--
To view, visit https://gerrit.wikimedia.org/r/201230
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I0fb02f729e4dd09b6da3ee4abeada32473ccd8aa
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/OAuth
Gerrit-Branch: master
Gerrit-Owner: MarkTraceur <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
