Amritsreekumar has uploaded a new change for review. ( 
https://gerrit.wikimedia.org/r/359811 )

Change subject: Convert Index: Pages editing form to OOjsUI
......................................................................

Convert Index: Pages editing form to OOjsUI

[WiP]: The editing interface of Index: pages is converted to OOjs UI.

Bug: T153120
Change-Id: If5cc06a13348b5cf976dba1dfb6d4fc5ece5c132
---
M includes/index/EditIndexPage.php
M modules/index/ext.proofreadpage.index.css
2 files changed, 60 insertions(+), 73 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/ProofreadPage 
refs/changes/11/359811/1

diff --git a/includes/index/EditIndexPage.php b/includes/index/EditIndexPage.php
index 2c25d86..9274de0 100644
--- a/includes/index/EditIndexPage.php
+++ b/includes/index/EditIndexPage.php
@@ -4,14 +4,15 @@
 
 use ContentHandler;
 use EditPage;
-use Html;
-use OutputPage;
+use OOUI\ButtonWidget;
+use OOUI\DropdownInputWidget;
+use OOUI\FieldLayout;
+use OOUI\FieldsetLayout;
+use OOUI\HtmlSnippet;
+use OOUI\TextInputWidget;
 use ProofreadIndexEntry;
 use ProofreadIndexPage;
 use Status;
-use WikitextContent;
-use Xml;
-use XmlSelect;
 
 /**
  * @licence GNU GPL v2+
@@ -38,76 +39,73 @@
        protected function showContentForm() {
                $pageLang = $this->mTitle->getPageLanguage();
                $out = $this->context->getOutput();
-               $inputAttributes = [ 'lang' => $pageLang->getCode(), 'dir' => 
$pageLang->getDir() ];
+               $out->enableOOUI();
+               $inputOptions = [ 'lang' => $pageLang->getCode(), 'dir' => 
$pageLang->getDir() ];
                if ( wfReadOnly() ) {
-                       $inputAttributes['readonly'] = '';
+                       $inputOptions['readOnly'] = '';
                }
 
-               $entries = $this->getActualContent()->getIndexEntries();
-
-               $out->addHTML( Html::openElement( 'table', [ 'id' => 
'prp-formTable' ] ) );
+               $fields = [];
                $i = 10;
-               foreach ( $entries as $entry ) {
-                       $inputAttributes['tabindex'] = $i;
-                       $this->addEntry( $entry, $inputAttributes, $out );
+               /** @var ProofreadIndexEntry $entry */
+               foreach ( $this->getActualContent()->getIndexEntries() as 
$entry ) {
+                       $inputOptions['tabIndex'] = $i;
+                       if ( !$entry->isHidden() ) {
+                               $fields[] = $this->buildEntry( $entry, 
$inputOptions );
+                       }
                        $i++;
                }
-               $out->addHTML( Html::closeElement( 'table' ) );
+
+               $out->addHTML( new FieldsetLayout( [
+                       'items' => $fields
+               ] ) );
 
                $out->addModules( 'ext.proofreadpage.index' );
        }
 
-       /**
-        * Add an entry to the form
-        *
-        * @param ProofreadIndexEntry $entry
-        * @param array $inputAttributes
-        */
-       protected function addEntry( ProofreadIndexEntry $entry, 
$inputAttributes, OutputPage $out ) {
-               if ( $entry->isHidden() ) {
-                       return;
-               }
+       private function buildEntry( ProofreadIndexEntry $entry, $inputOptions 
) {
                $key = $this->getFieldNameForEntry( $entry->getKey() );
                $val = $this->safeUnicodeOutput( $entry->getStringValue() );
 
-               $out->addHTML( Html::openElement( 'tr' ) . Html::openElement( 
'th', [ 'scope' => 'row' ] ) . Xml::label( $entry->getLabel(), $key ) );
-
-               $help = $entry->getHelp();
-               if ( $help !== '' ) {
-                       $out->addHTML( Html::element( 'span', [ 'title' => 
$help, 'class' => 'prp-help-field' ] ) );
-               }
-
-               $out->addHTML( Html::closeElement( 'th' ) . Html::openElement( 
'td' ) );
+               $inputOptions['name'] = $key;
+               $inputOptions['value'] = $val;
+               $inputOptions['inputId'] = $key;
 
                $values = $entry->getPossibleValues();
                if ( $values !== null ) {
-                       $select = new XmlSelect( $key, $key, $val );
-                       foreach ( $values as $value => $label ) {
-                               $select->addOption( $label, $value );
+                       $options = [];
+                       foreach ( $values as $data => $label ) {
+                               $options[] = [ 'data' => $data, 'label' => 
$label ];
                        }
-                       if ( !isset( $values[$val] ) && $val !== '' ) { // 
compatiblity with already set data that aren't in the list
-                               $select->addOption( $val, $val );
+                       if ( !array_key_exists( $val, $values ) && $val !== '' 
) {
+                               $options[] = [ 'data' => $val, 'label' => $val 
];
                        }
-                       $out->addHTML( $select->getHtml() );
+                       $input = new DropdownInputWidget( $inputOptions + [
+                               'options' => $options
+                       ] );
                } else {
-                       $type = $entry->getType();
-                       $inputType = ( $type === 'number' && ( $val === '' || 
is_numeric( $val ) ) ) ? 'number' : 'text';
-                       $size = $entry->getSize();
-                       $inputAttributes['class'] = 'prp-input-' . $type;
-
-                       if ( $size === 1 ) {
-                               $inputAttributes['type'] = $inputType;
-                               $inputAttributes['id'] = $key;
-                               $inputAttributes['size'] = 60;
-                               $out->addHTML( Html::input( $key, $val, 
$inputType, $inputAttributes ) );
-                       } else {
-                               $inputAttributes['cols'] = 60;
-                               $inputAttributes['rows'] = $size;
-                               $out->addHTML( Html::textarea( $key, $val, 
$inputAttributes ) );
-                       }
+                       $inputAttributes['classes'][] = 'prp-input-' . 
$entry->getType();
+                       $input = new TextInputWidget( $inputOptions + [
+                               'type' => ( $entry->getType() === 'number' && ( 
$val === '' || is_numeric( $val ) ) ) ? 'number' : 'text',
+                               'multiline' => $entry->getSize() > 1,
+                               'rows' => $entry->getSize()
+                       ] );
                }
 
-               $out->addHTML( Html::closeElement( 'td' ) . Html::closeElement( 
'tr' ) );
+               $fieldLayoutArgs = [
+                       'label' => $entry->getLabel(),
+                       'classes' => [ 'max-width' ]
+               ];
+               if ( $entry->getHelp() ) {
+                       $fieldLayoutArgs['label'] = new HtmlSnippet( 
$fieldLayoutArgs['label'] . ' ' . new ButtonWidget( [
+                                       'classes' => [ 'oo-ui-fieldLayout-help' 
],
+                                       'framed' => false,
+                                       'icon' => 'info',
+                                       'title' => $entry->getHelp(),
+                               ] ) );
+               }
+
+               return new FieldLayout( $input, $fieldLayoutArgs );
        }
 
        /**
@@ -116,7 +114,7 @@
         * @param string $key the entry key
         * @return string
         */
-       protected function getFieldNameForEntry( $key ) {
+       private function getFieldNameForEntry( $key ) {
                return 'wpprpindex-' . str_replace( ' ', '_', $key );
        }
 
@@ -129,16 +127,17 @@
                }
 
                $config = ProofreadIndexPage::getDataConfig();
-               $fields = [];
+               $text = "{{:MediaWiki:Proofreadpage_index_template";
                foreach ( $config as $key => $params ) {
                        $field = $this->getFieldNameForEntry( $key );
                        $value = $this->cleanInputtedContent( 
$this->safeUnicodeInput( $request, $field ) );
                        $entry = new ProofreadIndexEntry( $key, $value, $params 
);
                        if ( !$entry->isHidden() ) {
-                               $fields[$entry->getKey()] = new 
WikitextContent( $entry->getStringValue() );
+                               $text .= "\n|" . $entry->getKey() . "=" . 
$entry->getStringValue();
                        }
                }
-               return ( new IndexContent( $fields ) )->serialize( 
$this->contentFormat );
+
+               return $text . "\n}}";
        }
 
        /**
diff --git a/modules/index/ext.proofreadpage.index.css 
b/modules/index/ext.proofreadpage.index.css
index 9ed47da..037272a 100644
--- a/modules/index/ext.proofreadpage.index.css
+++ b/modules/index/ext.proofreadpage.index.css
@@ -1,16 +1,4 @@
-/* TODO: Don't use IDs */
-table#prp-formTable th { /* stylelint-disable-line selector-no-id */
-       text-align: left;
-       font-weight: normal;
-}
-
-.prp-help-field {
-       margin-left: 0.5em;
-       padding: 0 0 0 15px;
-
-       /* @embed */
-       background-image: url( images/help-question.gif );
-       background-position: left center;
-       background-repeat: no-repeat;
-       cursor: pointer;
+.max-width {
+       width: auto;
+       max-width: 750px;
 }

-- 
To view, visit https://gerrit.wikimedia.org/r/359811
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: If5cc06a13348b5cf976dba1dfb6d4fc5ece5c132
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/ProofreadPage
Gerrit-Branch: master
Gerrit-Owner: Amritsreekumar <amrit.sreeku...@gmail.com>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to