http://www.mediawiki.org/wiki/Special:Code/MediaWiki/90908
Revision: 90908 Author: krinkle Date: 2011-06-27 21:21:14 +0000 (Mon, 27 Jun 2011) Log Message: ----------- StyleGuideDemo Continue implementation of the style guide for forms: - Replacing plain <div class="error"> with the error box as mocked up at http://commons.wikimedia.org/wiki/File:MW-StyleGuide-Error-Banner.png - Adding "(Required)" note inside the mw-label after the <label> as mocked up at http://www.mediawiki.org/wiki/File:MW-StyleGuide-Input-Required.png - Implemented the submit button (namely the normal state and active-green state. The disabled state and special-red state aren't implemented yet) For now visually tested in Safari 5, Firefox 4 and 5, Chrome and Opera 10 and 11 (Mac OS X). Modified Paths: -------------- trunk/extensions/StyleGuideDemo/HTMLStyleForm.php trunk/extensions/StyleGuideDemo/StyleGuideDemo.i18n.php trunk/extensions/StyleGuideDemo/modules/ext.styleguidedemo/ext.styleguidedemo.css trunk/extensions/StyleGuideDemo/modules/ext.styleguidedemo/ext.styleguidedemo.js Modified: trunk/extensions/StyleGuideDemo/HTMLStyleForm.php =================================================================== --- trunk/extensions/StyleGuideDemo/HTMLStyleForm.php 2011-06-27 21:16:40 UTC (rev 90907) +++ trunk/extensions/StyleGuideDemo/HTMLStyleForm.php 2011-06-27 21:21:14 UTC (rev 90908) @@ -509,7 +509,7 @@ } /** - * Format and display an error message stack. + * Format and display an error message stack on top of the form. * @param $errors String|Array|Status * @return String */ @@ -525,10 +525,19 @@ } else { $errorstr = $errors; } - - return $errorstr - ? Html::rawElement( 'div', array( 'class' => 'error' ), $errorstr ) - : ''; + // Build errors + if ( $errorstr ) { + $errorTitle = Html::element( 'strong', array( + 'class' => 'mw-htmlform-errors-title', + ), wfMsg( 'htmlform-errors-title' ) ); + $errorContent = Html::rawElement( 'div', array( + ), $errorstr ); + return Html::rawElement( 'div', array( + 'class' => 'mw-htmlform-errors' + ), $errorTitle . $errorContent ); + } else { + return ''; + } } /** @@ -948,6 +957,7 @@ # Hint / Tip $hinttext = null; $hinthtml = ''; + $afterLabelHtml = ''; // inserted into mw-label after the <label> if ( isset( $this->mParams['hint-message'] ) ) { $msg = call_user_func_array( 'wfMessage', (array)$this->mParams['hint-message'] ); @@ -965,8 +975,15 @@ "</div>\n"; } + # Required ? + if ( isset( $this->mParams['required'] ) ) { + $afterLabelHtml .= Html::element( 'span', array( + 'class' => 'mw-htmlform-required-tip', + ), wfMsg( 'parentheses', wfMsg( 'htmlform-required-tip' ) ) ); + } + # Label - $label = $this->getLabelHtml( $attributes, $hinthtml ); + $label = $this->getLabelHtml( $attributes, $hinthtml, $afterLabelHtml ); # Help message (optional) $helptext = null; @@ -991,8 +1008,10 @@ $helptext = $this->mParams['help']; } - if ( !is_null( $helptext ) ) { - $helphtml = Html::rawElement( 'div', array( 'class' => 'mw-htmlform-tip' ), $helptext ); + if ( !is_null( $helptext ) && $helptext != '' ) { + $helphtml = Html::rawElement( 'div', array( + 'class' => 'mw-htmlform-tip', + ), $helptext ); } # Input @@ -1014,7 +1033,7 @@ function getLabel() { return $this->mLabel; } - function getLabelHtml( $attributes = array(), $hintHtml = '' ) { + function getLabelHtml( $attributes = array(), $beforeLabelHtml = '', $afterLabelHtml = '' ) { $labelAttrs = array(); if ( $this->needsLabel() ) { @@ -1022,7 +1041,7 @@ } return Html::rawElement( 'div', array( 'class' => 'mw-label' ) + $attributes, - $hintHtml . Html::rawElement( 'label', $labelAttrs, $this->getLabel() ) + $beforeLabelHtml . Html::rawElement( 'label', $labelAttrs, $this->getLabel() ) . $afterLabelHtml ); } Modified: trunk/extensions/StyleGuideDemo/StyleGuideDemo.i18n.php =================================================================== --- trunk/extensions/StyleGuideDemo/StyleGuideDemo.i18n.php 2011-06-27 21:16:40 UTC (rev 90907) +++ trunk/extensions/StyleGuideDemo/StyleGuideDemo.i18n.php 2011-06-27 21:21:14 UTC (rev 90908) @@ -7,6 +7,9 @@ $messages['en'] = array( 'styleguidedemo' => 'Style guide demonstration', 'styleguidedemo-desc' => 'An extension to demonstrate and find out how the [[mediawikiwiki:Style guide|style guide]] should be used. Visible on [[Special:StyleGuideDemo]].', + /* HTMLStyleForm */ + 'htmlform-errors-title' => 'There has been a problem.', + 'htmlform-required-tip' => 'Required', /* Special:StyleGuideDemo */ 'styleguidedemo-head-createform' => 'Create Account', 'styleguidedemo-username' => 'Username', Modified: trunk/extensions/StyleGuideDemo/modules/ext.styleguidedemo/ext.styleguidedemo.css =================================================================== --- trunk/extensions/StyleGuideDemo/modules/ext.styleguidedemo/ext.styleguidedemo.css 2011-06-27 21:16:40 UTC (rev 90907) +++ trunk/extensions/StyleGuideDemo/modules/ext.styleguidedemo/ext.styleguidedemo.css 2011-06-27 21:21:14 UTC (rev 90908) @@ -7,8 +7,21 @@ .mw-htmlform-form { padding: 10px; + float: left; + max-width: 70%; } +.mw-htmlform-errors { + background: #ffffff url(images/MW-StyleGuide-Icon-AlertMark2.png) 6px 6px no-repeat; + border: 2px solid #cc0000; + padding: 8px 12px 8px 60px; + margin: 0px 0px 21px 0px; +} + +.mw-htmlform-errors-title { + font-weight: bold; +} + .mw-htmlform-field { margin: 0px 0px 21px 0px; } @@ -29,11 +42,17 @@ width: 12px; } +.mw-htmlform-required-tip { + color: #cc0000; + font-size: 10px; + line-height: 14px; +} + .mw-htmlform-tip { margin: 0px 0px 0px 30px; font-size: 10px; line-height: 14px; - color: #777777; + color: #6c6c6c; } .mw-htmlform-field-HTMLTextField .mw-input { @@ -48,5 +67,37 @@ width: 200px; /* width: 214px; */ } +/* no-js */ .mw-htmlform-submit { + float: right; } + +/* js-only */ +.mw-htmlform-button, +.mw-htmlform-button-wrap { + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +.mw-htmlform-button-wrap { + float: right; + border: 1px solid #9d9d9d; +} +.mw-htmlform-button { + padding: 5px 10px; + background: #edecef url(images/MW-StyleGuide-Form-Button-BGShade.png) center center repeat-x; + border: 1px solid #ffffff; + font-size: 14px; + font-weight: bold; + color: #6c6c6c; +} + +.mw-htmlform-button:hover { + cursor: pointer; + background: #3cb878 url(images/MW-StyleGuide-Form-Button-BGShadeHover.png) center center repeat-x; + color: #ffffff; + border-color: #5ac084; +} +.mw-htmlform-button:active { + background-image: url(images/MW-StyleGuide-Form-Button-BGShadeActive.png); +} Modified: trunk/extensions/StyleGuideDemo/modules/ext.styleguidedemo/ext.styleguidedemo.js =================================================================== --- trunk/extensions/StyleGuideDemo/modules/ext.styleguidedemo/ext.styleguidedemo.js 2011-06-27 21:16:40 UTC (rev 90907) +++ trunk/extensions/StyleGuideDemo/modules/ext.styleguidedemo/ext.styleguidedemo.js 2011-06-27 21:21:14 UTC (rev 90908) @@ -1,7 +1,7 @@ /** * Script for the Style guide demo extension. */ -jQuery( document ).ready(function( $ ) { +jQuery( document ).ready( function( $ ) { // Set up the help system $( '.mw-help-field-data' ) @@ -16,4 +16,19 @@ .slideToggle( 'fast' ); } ); -}); + // Set up buttons + $( '.mw-htmlform-submit' ).each( function( i, button ) { + var $realButton = $( button ), + $styleButton = $( '<div>', { + 'class': 'mw-htmlform-button', + text: 'Share Mood'//$realButton.val() + }) + .insertAfter( $realButton.hide() ) + .wrap( + $( '<div>' ).addClass( 'mw-htmlform-button-wrap' ) + ) + .click( function( e ) { + $realButton.click(); + } ); + }); +} ); _______________________________________________ MediaWiki-CVS mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-cvs
