Spage has uploaded a new change for review.
https://gerrit.wikimedia.org/r/104011
Change subject: [WIP] Update login and HTMLForm to new design
......................................................................
[WIP] Update login and HTMLForm to new design
Add class mw-ui-actionbuttons for right-aligned style, and
use this instead of big block styling of submit button.
Use new mw-ui-constructive and mw-ui-quiet button styles.
This updates Login, Create account, and Special:PasswordReset; plus
any other form using HTMLForm's "vform" display format.
TODO: sample KSS code for new button layout.
Bug: 58297
Change-Id: I90954ea8e69bead335fee38ac7ec95b92bb9119c
---
M includes/htmlform/HTMLForm.php
M includes/templates/Usercreate.php
M includes/templates/Userlogin.php
M resources/mediawiki.ui/components/default/forms.less
4 files changed, 29 insertions(+), 23 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core
refs/changes/11/104011/1
diff --git a/includes/htmlform/HTMLForm.php b/includes/htmlform/HTMLForm.php
index 0aea070..ccf8e09 100644
--- a/includes/htmlform/HTMLForm.php
+++ b/includes/htmlform/HTMLForm.php
@@ -701,8 +701,8 @@
$this->getOutput()->addModules( 'mediawiki.htmlform' );
if ( $this->isVForm() ) {
$this->getOutput()->addModuleStyles( array(
- 'mediawiki.ui',
'mediawiki.ui.button',
+ 'mediawiki.ui',
) );
// @todo Should vertical form set setWrapperLegend(
false )
// to hide ugly fieldsets?
@@ -810,18 +810,16 @@
$attribs['class'] = array( 'mw-htmlform-submit' );
if ( $this->isVForm() ) {
- // mw-ui-block is necessary because the buttons
aren't necessarily in an
- // immediate child div of the vform.
- array_push( $attribs['class'], 'mw-ui-button',
'mw-ui-big', 'mw-ui-primary', 'mw-ui-block' );
+ array_push( $attribs['class'], 'mw-ui-button',
'mw-ui-constructive' );
}
$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
+ // but vform wants action buttons inside a div for
right-aligned
// styling.
if ( $this->isVForm() ) {
- $html = Html::rawElement( 'div', null,
"\n$html\n" );
+ $html = Html::rawElement( 'div', array( 'class'
=> 'mw-ui-actionbuttons' ), "\n$html\n" );
}
}
diff --git a/includes/templates/Usercreate.php
b/includes/templates/Usercreate.php
index 12210d0..eb74e6f 100644
--- a/includes/templates/Usercreate.php
+++ b/includes/templates/Usercreate.php
@@ -247,14 +247,14 @@
// so skip one index.
$tabIndex++;
?>
- <div class="mw-submit">
+ <div class="mw-submit mw-ui-actionbuttons">
<?php
echo Html::input(
'wpCreateaccount',
$this->getMsg( $this->data['loggedin']
? 'createacct-another-submit' : 'createacct-submit' ),
'submit',
array(
- 'class' => "mw-ui-button
mw-ui-big mw-ui-block mw-ui-primary",
+ 'class' => "mw-ui-button
mw-ui-constructive",
'id' => 'wpCreateaccount',
'tabindex' => $tabIndex++
)
diff --git a/includes/templates/Userlogin.php b/includes/templates/Userlogin.php
index 38e071c..2f1fb6b 100644
--- a/includes/templates/Userlogin.php
+++ b/includes/templates/Userlogin.php
@@ -144,12 +144,21 @@
<?php } ?>
</div>
- <div>
+ <div class="mw-ui-actionbuttons">
+ <?php if ( $this->haveData( 'createOrLoginHref'
) ) {
+ if ( $this->data['loggedin'] ) { ?>
+ <span
id="mw-createaccount-another">
+ <a href="<?php
$this->text( 'createOrLoginHref' ); ?>" id="mw-createaccount-join" tabindex="7"
class="mw-ui-button mw-ui-quiet mw-ui-progressive"><?php $this->msg(
'userlogin-createanother' ); ?></a>
+ </span>
+ <?php } else { ?>
+ <a href="<?php $this->text(
'createOrLoginHref' ); ?>" id="mw-createaccount-join" tabindex="7"
class="mw-ui-button mw-ui-quiet mw-ui-progressive"><?php $this->msg(
'userlogin-joinproject' ); ?></a>
+ <?php }
+ } ?>
<?php
echo Html::input( 'wpLoginAttempt',
$this->getMsg( 'login' )->text(), 'submit', array(
'id' => 'wpLoginAttempt',
'tabindex' => '6',
- 'class' => 'mw-ui-button mw-ui-big
mw-ui-block mw-ui-primary'
+ 'class' => 'mw-ui-button
mw-ui-constructive'
) );
?>
</div>
@@ -157,17 +166,6 @@
<div id="mw-userlogin-help">
<?php echo $this->getMsg( 'userlogin-helplink'
)->parse(); ?>
</div>
- <?php if ( $this->haveData( 'createOrLoginHref' ) ) { ?>
- <?php if ( $this->data['loggedin'] ) { ?>
- <div id="mw-createaccount-another">
- <h3 id="mw-userloginlink"><a
href="<?php $this->text( 'createOrLoginHref' ); ?>" id="mw-createaccount-join"
tabindex="7" class="mw-ui-button"><?php $this->msg( 'userlogin-createanother'
); ?></a></h3>
- </div>
- <?php } else { ?>
- <div id="mw-createaccount-cta">
- <h3 id="mw-userloginlink"><?php
$this->msg( 'userlogin-noaccount' ); ?><a href="<?php $this->text(
'createOrLoginHref' ); ?>" id="mw-createaccount-join" tabindex="7"
class="mw-ui-button mw-ui-constructive"><?php $this->msg(
'userlogin-joinproject' ); ?></a></h3>
- </div>
- <?php } ?>
- <?php } ?>
<?php if ( $this->haveData( 'uselang' ) ) { ?><input
type="hidden" name="uselang" value="<?php $this->text( 'uselang' ); ?>" /><?php
} ?>
<?php if ( $this->haveData( 'token' ) ) { ?><input
type="hidden" name="wpLoginToken" value="<?php $this->text( 'token' ); ?>"
/><?php } ?>
<?php if ( $this->data['cansecurelogin'] ) {?><input
type="hidden" name="wpForceHttps" value="<?php $this->text( 'stickhttps' ); ?>"
/><?php } ?>
diff --git a/resources/mediawiki.ui/components/default/forms.less
b/resources/mediawiki.ui/components/default/forms.less
index 66f4487..6954842 100644
--- a/resources/mediawiki.ui/components/default/forms.less
+++ b/resources/mediawiki.ui/components/default/forms.less
@@ -47,8 +47,8 @@
width: 100%;
// MW currently doesn't use the type attribute everywhere on
inputs.
- input,
- .mw-ui-button {
+ // The 2014 Agora "beveled bottom edge" design DOESN'T want
full-width buttons.
+ input:not(.mw-ui-button) {
display: block;
.box-sizing(border-box);
margin: 0;
@@ -125,6 +125,16 @@
}
// --------------------------------------------------------------------------
+// Containers
+// --------------------------------------------------------------------------
+
+// A row of right-aligned buttons, usually one constructive or progressive on
+// the end preceded by other neutral or quiet actions.
+.mw-ui-actionbuttons {
+ text-align: right;
+}
+
+// --------------------------------------------------------------------------
// Elements
// --------------------------------------------------------------------------
--
To view, visit https://gerrit.wikimedia.org/r/104011
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I90954ea8e69bead335fee38ac7ec95b92bb9119c
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
