diff --git a/SimpleCaptcha/SimpleCaptcha.php b/SimpleCaptcha/SimpleCaptcha.php index 44920048..2672ca74 100644 --- a/SimpleCaptcha/SimpleCaptcha.php +++ b/SimpleCaptcha/SimpleCaptcha.php @@ -122,21 +122,30 @@ class SimpleCaptcha { $index = $this->storeCaptcha( $captcha ); return [ - 'html' => "

" . - Xml::element( 'input', [ - 'name' => 'wpCaptchaWord', - 'class' => 'mw-ui-input', - 'id' => 'wpCaptchaWord', - 'size' => 5, - 'autocomplete' => 'off', - // tab in before the edit textarea - 'tabindex' => $tabIndex ] ) . - "

\n" . - Xml::element( 'input', [ - 'type' => 'hidden', - 'name' => 'wpCaptchaId', - 'id' => 'wpCaptchaId', - 'value' => $index ] ) + 'html' => + new OOUI\FieldLayout( + new OOUI\NumberInputWidget( [ + 'name' => 'wpCaptchaWord', + 'classes' => [ 'simplecaptcha-answer' ], + 'id' => 'wpCaptchaWord', + 'autocomplete' => 'off', + // tab in before the edit textarea + 'tabIndex' => $tabIndex + ] ), + [ + 'align' => 'left', + 'label' => $captcha['question'] . ' = ', + 'classes' => [ 'simplecaptcha-field' ], + ] + ) . + new OOUI\HiddenInputWidget( [ + 'name' => 'wpCaptchaId', + 'id' => 'wpCaptchaId', + 'value' => $index + ] ), + 'modulestyles' => [ + 'ext.confirmEdit.simpleCaptcha' + ] ]; } diff --git a/SimpleCaptcha/resources/ext.confirmEdit.simpleCaptcha.css b/SimpleCaptcha/resources/ext.confirmEdit.simpleCaptcha.css new file mode 100644 index 00000000..cea42749 --- /dev/null +++ b/SimpleCaptcha/resources/ext.confirmEdit.simpleCaptcha.css @@ -0,0 +1,10 @@ +.simplecaptcha-field .oo-ui-fieldLayout-header { + /* stylelint-disable declaration-no-important */ + width: auto !important; + padding-right: 1em !important; + /* stylelint-enable declaration-no-important */ +} + +.simplecaptcha-answer.oo-ui-textInputWidget { + width: 5em; +} diff --git a/extension.json b/extension.json index d763e5b3..64f0032f 100644 --- a/extension.json +++ b/extension.json @@ -73,6 +73,9 @@ }, "ext.confirmEdit.visualEditor": { "scripts": "ve-confirmedit/ve.init.mw.CaptchaSaveErrorHandler.js" + }, + "ext.confirmEdit.simpleCaptcha": { + "styles": "../SimpleCaptcha/resources/ext.confirmEdit.simpleCaptcha.css" } }, "VisualEditorPluginModules": [