Spage has uploaded a new change for review.
https://gerrit.wikimedia.org/r/65346
Change subject: Implement Agora styles in HTMLForms
......................................................................
Implement Agora styles in HTMLForms
This adds a new 'vform' display format to HTMLForm which styles forms
using it in the new compact stacked vertical format:
* Applies class mw-ui-vform to the form.
* Gives Submit button 'mw-ui-{button,big,block,primary}' classes and
spaced block styling.
* Styles the error class.
* HTMLForm divs are too nested to get styling "for free", so add
.mw-ui-vform-div selector to Agora CSS and apply this class to form
divs (maybe not ideal fix).
* HTMLCheckField nests the checkbox inside label.
* Add method to setShowEmptyLabel(); vform format sets this false
as it doesn't want generated HTML for labels adding vertical space.
In FormSpecialPage, don't set the wrapper legend if in vform style, to
disable the old-school line surrounding the form.
(not ideal fix, and forms like Special:Block explicitly set a wrapper
legend).
Build new mediawiki.ui CSS with the .mw-ui-vform-div styling
Forms can request the new styling with setDisplayFormat( 'vform' );
To try the new layout in forms Special:PasswordReset, Special:Block,
Special:Redirect:
* You can set $wgDefaultHTMLFormFormat to 'vform' in LocalSettings.php.
* Add ?useNew=1 to a URL to use the new vform.
* Add ?useNew=div (or vform, raw, table) to a URL to specify an alternative
format.
Regarding gerrit 27022, there's lots to do to get HTMLForm to work for
the login form in the Agora design, as the login form adds right-aligned
label content and a complicated [Join MyWiki] to the form.
Notes are at
https://www.mediawiki.org/wiki/Agora/Engineering#HTMLForm_Issues
Change-Id: Id03d185bbee990595bfc469a61163cc598fc3441
---
M includes/HTMLForm.php
M includes/SpecialPage.php
M resources/mediawiki.ui/mediawiki.ui.default.css
M resources/mediawiki.ui/mediawiki.ui.vector.css
M resources/mediawiki.ui/sourcefiles/scss/components/default/_forms.scss
5 files changed, 157 insertions(+), 22 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core
refs/changes/46/65346/1
diff --git a/includes/HTMLForm.php b/includes/HTMLForm.php
index 7adbfc8..5b5e26b 100644
--- a/includes/HTMLForm.php
+++ b/includes/HTMLForm.php
@@ -186,6 +186,7 @@
'table',
'div',
'raw',
+ 'vform',
);
/**
@@ -196,6 +197,8 @@
* @param string $messagePrefix a prefix to go in front of default
messages
*/
public function __construct( $descriptor, /*IContextSource*/ $context =
null, $messagePrefix = '' ) {
+ global $wgDefaultHTMLFormFormat;
+
if ( $context instanceof IContextSource ) {
$this->setContext( $context );
$this->mTitle = false; // We don't need them to set a
title
@@ -206,6 +209,18 @@
// it's actually $messagePrefix
$this->mMessagePrefix = $context;
}
+ }
+
+ if ( isset( $wgDefaultHTMLFormFormat ) ) {
+ $this->displayFormat = $wgDefaultHTMLFormFormat;
+ }
+ // You can use ?useNew=div in query string to specify a
particular
+ // format for testing, or ?useNew=1 for the new l33t 'vform'
style.
+ $overrideFormat = $this->getRequest()->getVal( 'useNew', false
);
+ if ( in_array( $overrideFormat, $this->availableDisplayFormats
) ) {
+ $this->displayFormat = $overrideFormat;
+ } else if ( $overrideFormat ) {
+ $this->displayFormat = 'vform';
}
// Expand out into a tree.
@@ -222,7 +237,14 @@
}
$field = self::loadInputFromParameters( $fieldname,
$info );
+ // FIXME During field's construct, the parent form
isn't available!
+ // could add a 'parent' name-value to $info, could add
a third parameter.
$field->mParent = $this;
+
+ // vform gets too much space if empty labels generate
HTML.
+ if ( $this->isVForm() ) {
+ $field->setShowEmptyLabel( false );
+ }
$setSection =& $loadedDescriptor;
if ( $section ) {
@@ -269,6 +291,15 @@
*/
public function getDisplayFormat() {
return $this->displayFormat;
+ }
+
+ /**
+ * Test if displayFormat is 'vform'
+ * @since 1.22
+ * @return Bool
+ */
+ public function isVForm() {
+ return $this->displayFormat === 'vform';
}
/**
@@ -610,6 +641,11 @@
# For good measure (it is the default)
$this->getOutput()->preventClickjacking();
$this->getOutput()->addModules( 'mediawiki.htmlform' );
+ if ( $this->isVForm() ) {
+ $this->getOutput()->addModuleStyles( 'mediawiki.ui' );
+ // TODO should vertical form set setWrapperLegend(
false )
+ // to hide ugly fieldsets?
+ }
$html = ''
. $this->getErrors( $submitResult )
@@ -651,6 +687,9 @@
$attribs['id'] = $this->mId;
}
+ if ( $this->isVForm() ) {
+ $attribs['class'] .= ' mw-ui-vform mw-ui-container';
+ }
return Html::rawElement( 'form', $attribs, $html );
}
@@ -703,7 +742,20 @@
$attribs['class'] = 'mw-htmlform-submit';
+ if ( $this->isVForm() ) {
+ // XXX mw-ui-block wouldn't be necessary if the
div was styled
+ // a certain way.0
+ $attribs['class'] .= ' mw-ui-button mw-ui-big
mw-ui-primary mw-ui-block';
+ }
+
$html .= Xml::submitButton( $this->getSubmitText(),
$attribs ) . "\n";
+
+ // Buttons are top-level form elements in table and div
layouts,
+ // but vform wants all elements inside divs to get
spaced-out block
+ // styling.
+ if ( $this->isVForm() ) {
+ $html = Html::rawElement( 'div', null,
"\n$html\n" );
+ }
}
if ( $this->mShowReset ) {
@@ -963,7 +1015,17 @@
$subsectionHtml = '';
$hasLabel = false;
- $getFieldHtmlMethod = ( $displayFormat == 'table' ) ?
'getTableRow' : 'get' . ucfirst( $displayFormat );
+ switch( $displayFormat ) {
+ case 'table':
+ $getFieldHtmlMethod = 'getTableRow';
+ break;
+ case 'vform':
+ // Close enough to a div.
+ $getFieldHtmlMethod = 'getDiv';
+ break;
+ default:
+ $getFieldHtmlMethod = 'get' . ucfirst(
$displayFormat );
+ }
foreach ( $fields as $key => $value ) {
if ( $value instanceof HTMLFormField ) {
@@ -1011,7 +1073,7 @@
if ( $displayFormat === 'table' ) {
$html = Html::rawElement( 'table', $attribs,
Html::rawElement( 'tbody', array(),
"\n$html\n" ) ) . "\n";
- } elseif ( $displayFormat === 'div' ) {
+ } elseif ( $displayFormat === 'div' || $displayFormat
=== 'vform' ) {
$html = Html::rawElement( 'div', $attribs,
"\n$html\n" );
}
}
@@ -1192,6 +1254,17 @@
}
/**
+ * Tell the field whether to generate a separate label element if its
label
+ * is blank.
+ *
+ * @param bool $show Set to false to not generate a label.
+ * @return void
+ */
+ function setShowEmptyLabel( $show ) {
+ $this->mShowEmptyLabels = $show;
+ }
+
+ /**
* Get the value that this input has been set to from a posted form,
* or the input's default value if it has not been set.
* @param $request WebRequest
@@ -1354,8 +1427,12 @@
array( 'class' => $outerDivClass ) + $cellAttributes,
$inputHtml . "\n$errors"
);
+ $divCssClasses = "mw-htmlform-field-$fieldType {$this->mClass}
$errorClass";
+ if ( $this->mParent->isVForm() ) {
+ $divCssClasses .= ' mw-ui-vform-div';
+ }
$html = Html::rawElement( 'div',
- array( 'class' => "mw-htmlform-field-$fieldType
{$this->mClass} $errorClass" ),
+ array( 'class' => $divCssClasses ),
$label . $field );
$html .= $helptext;
return $html;
@@ -1799,8 +1876,25 @@
$attr['class'] = $this->mClass;
}
- return Xml::check( $this->mName, $value, $attr ) . ' ' .
- Html::rawElement( 'label', array( 'for' => $this->mID
), $this->mLabel );
+ if ( $this->mParent->isVForm() ) {
+ // Nest checkbox inside label.
+ return Html::rawElement(
+ 'label',
+ array(
+ 'class' =>
'mw-ui-checkbox-label'
+ ),
+ Xml::check(
+ $this->mName,
+ $value,
+ $attr
+ ) .
+ // Html:rawElement doesn't escape
contents.
+ htmlspecialchars( $this->mLabel )
+ );
+ } else {
+ return Xml::check( $this->mName, $value, $attr ) .
' ' .
+ Html::rawElement( 'label', array( 'for' =>
$this->mID ), $this->mLabel );
+ }
}
/**
@@ -1813,6 +1907,13 @@
}
/**
+ * checkboxes don't need a label.
+ */
+ protected function needsLabel() {
+ return false;
+ }
+
+ /**
* @param $request WebRequest
* @return String
*/
diff --git a/includes/SpecialPage.php b/includes/SpecialPage.php
index ac838a5..68ffb76 100644
--- a/includes/SpecialPage.php
+++ b/includes/SpecialPage.php
@@ -982,7 +982,13 @@
$form = new HTMLForm( $this->fields, $this->getContext(),
$this->getMessagePrefix() );
$form->setSubmitCallback( array( $this, 'onSubmit' ) );
- $form->setWrapperLegendMsg( $this->getMessagePrefix() .
'-legend' );
+ // If the form is a compact vertical form, then don't output
this ugly
+ // fieldset surrounding it.
+ // TODO if special pages specify they want vform' in
alterForm(), it
+ // happens too late.
+ if ( !$form->isVForm() ) {
+ $form->setWrapperLegendMsg( $this->getMessagePrefix() .
'-legend' );
+ }
$headerMsg = $this->msg( $this->getMessagePrefix() . '-text' );
if ( !$headerMsg->isDisabled() ) {
diff --git a/resources/mediawiki.ui/mediawiki.ui.default.css
b/resources/mediawiki.ui/mediawiki.ui.default.css
index 0f8d420..0c00ec7 100644
--- a/resources/mediawiki.ui/mediawiki.ui.default.css
+++ b/resources/mediawiki.ui/mediawiki.ui.default.css
@@ -140,14 +140,14 @@
box-sizing: border-box;
width: 290px;
}
-/* line 19, sourcefiles/scss/components/default/_forms.scss */
+/* line 20, sourcefiles/scss/components/default/_forms.scss */
.mw-ui-vform > div {
display: block;
margin: 0 0 15px 0;
padding: 0;
width: 100%;
}
-/* line 27, sourcefiles/scss/components/default/_forms.scss */
+/* line 28, sourcefiles/scss/components/default/_forms.scss */
.mw-ui-vform > div input,
.mw-ui-vform > div .mw-ui-button {
display: block;
@@ -157,7 +157,7 @@
margin: 0;
width: 100%;
}
-/* line 34, sourcefiles/scss/components/default/_forms.scss */
+/* line 35, sourcefiles/scss/components/default/_forms.scss */
.mw-ui-vform > div input {
outline: 0;
border-style: solid;
@@ -171,7 +171,7 @@
box-shadow: #4091ed 0px 0px 5px;
border-color: #4091ed;
}
-/* line 38, sourcefiles/scss/components/default/_forms.scss */
+/* line 39, sourcefiles/scss/components/default/_forms.scss */
.mw-ui-vform > div label {
display: block;
-webkit-box-sizing: border-box;
@@ -187,7 +187,7 @@
.mw-ui-vform > div label * {
font-weight: normal;
}
-/* line 49, sourcefiles/scss/components/default/_forms.scss */
+/* line 50, sourcefiles/scss/components/default/_forms.scss */
.mw-ui-vform > div input[type="checkbox"],
.mw-ui-vform > div input[type="radio"] {
display: inline;
@@ -197,7 +197,15 @@
width: auto;
}
-/* line 65, sourcefiles/scss/components/default/_forms.scss */
+/* line 67, sourcefiles/scss/components/default/_forms.scss */
+.mw-ui-vform-div {
+ display: block;
+ margin: 0 0 15px 0;
+ padding: 0;
+ width: 100%;
+}
+
+/* line 77, sourcefiles/scss/components/default/_forms.scss */
.mw-ui-input {
outline: 0;
border-style: solid;
@@ -212,7 +220,7 @@
border-color: #4091ed;
}
-/* line 72, sourcefiles/scss/components/default/_forms.scss */
+/* line 84, sourcefiles/scss/components/default/_forms.scss */
.mw-ui-label {
font-size: 0.9em;
color: #7d7d7d;
@@ -222,7 +230,7 @@
font-weight: normal;
}
-/* line 81, sourcefiles/scss/components/default/_forms.scss */
+/* line 93, sourcefiles/scss/components/default/_forms.scss */
.mw-ui-checkbox-label, .mw-ui-radio-label {
margin-bottom: 0.5em;
cursor: pointer;
diff --git a/resources/mediawiki.ui/mediawiki.ui.vector.css
b/resources/mediawiki.ui/mediawiki.ui.vector.css
index 9826526..ab4bb9c 100644
--- a/resources/mediawiki.ui/mediawiki.ui.vector.css
+++ b/resources/mediawiki.ui/mediawiki.ui.vector.css
@@ -269,14 +269,14 @@
box-sizing: border-box;
width: 290px;
}
-/* line 19, sourcefiles/scss/components/default/_forms.scss */
+/* line 20, sourcefiles/scss/components/default/_forms.scss */
.mw-ui-vform > div {
display: block;
margin: 0 0 15px 0;
padding: 0;
width: 100%;
}
-/* line 27, sourcefiles/scss/components/default/_forms.scss */
+/* line 28, sourcefiles/scss/components/default/_forms.scss */
.mw-ui-vform > div input,
.mw-ui-vform > div .mw-ui-button {
display: block;
@@ -286,7 +286,7 @@
margin: 0;
width: 100%;
}
-/* line 34, sourcefiles/scss/components/default/_forms.scss */
+/* line 35, sourcefiles/scss/components/default/_forms.scss */
.mw-ui-vform > div input {
outline: 0;
border-style: solid;
@@ -300,7 +300,7 @@
box-shadow: #4091ed 0px 0px 5px;
border-color: #4091ed;
}
-/* line 38, sourcefiles/scss/components/default/_forms.scss */
+/* line 39, sourcefiles/scss/components/default/_forms.scss */
.mw-ui-vform > div label {
display: block;
-webkit-box-sizing: border-box;
@@ -316,7 +316,7 @@
.mw-ui-vform > div label * {
font-weight: normal;
}
-/* line 49, sourcefiles/scss/components/default/_forms.scss */
+/* line 50, sourcefiles/scss/components/default/_forms.scss */
.mw-ui-vform > div input[type="checkbox"],
.mw-ui-vform > div input[type="radio"] {
display: inline;
@@ -326,7 +326,15 @@
width: auto;
}
-/* line 65, sourcefiles/scss/components/default/_forms.scss */
+/* line 67, sourcefiles/scss/components/default/_forms.scss */
+.mw-ui-vform-div {
+ display: block;
+ margin: 0 0 15px 0;
+ padding: 0;
+ width: 100%;
+}
+
+/* line 77, sourcefiles/scss/components/default/_forms.scss */
.mw-ui-input {
outline: 0;
border-style: solid;
@@ -341,7 +349,7 @@
border-color: #4091ed;
}
-/* line 72, sourcefiles/scss/components/default/_forms.scss */
+/* line 84, sourcefiles/scss/components/default/_forms.scss */
.mw-ui-label {
font-size: 0.9em;
color: #7d7d7d;
@@ -351,7 +359,7 @@
font-weight: normal;
}
-/* line 81, sourcefiles/scss/components/default/_forms.scss */
+/* line 93, sourcefiles/scss/components/default/_forms.scss */
.mw-ui-checkbox-label, .mw-ui-radio-label {
margin-bottom: 0.5em;
cursor: pointer;
diff --git
a/resources/mediawiki.ui/sourcefiles/scss/components/default/_forms.scss
b/resources/mediawiki.ui/sourcefiles/scss/components/default/_forms.scss
index 8bbe3c2..309ba04 100644
--- a/resources/mediawiki.ui/sourcefiles/scss/components/default/_forms.scss
+++ b/resources/mediawiki.ui/sourcefiles/scss/components/default/_forms.scss
@@ -16,6 +16,7 @@
width: $defaultFormWidth;
+ // Immediate divs in a vform are block and spaced-out.
& > div {
display: block;
margin: 0 0 15px 0;
@@ -59,6 +60,17 @@
// Elements
// --------------------------------------------------------------------------
+// Apply this to individual elements to style them.
+// You generally don't need to use this class on divs within an Agora
+// form container such as mw-ui-vform
+// XXX DRY: This repeats earlier styling, use an @include agora-div-styling ?
+.mw-ui-vform-div {
+ display: block;
+ margin: 0 0 15px 0;
+ padding: 0;
+ width: 100%;
+}
+
// Apply mw-ui-input to individual input fields to style them.
// You generally don't need to use this class if <input> is within an Agora
// form container such as mw-ui-vform
--
To view, visit https://gerrit.wikimedia.org/r/65346
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Id03d185bbee990595bfc469a61163cc598fc3441
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Spage <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
