| Index: trunk/extensions/StyleGuideDemo/HTMLStyleForm.php |
| — | — | @@ -509,7 +509,7 @@ |
| 510 | 510 | } |
| 511 | 511 | |
| 512 | 512 | /** |
| 513 | | - * Format and display an error message stack. |
| | 513 | + * Format and display an error message stack on top of the form. |
| 514 | 514 | * @param $errors String|Array|Status |
| 515 | 515 | * @return String |
| 516 | 516 | */ |
| — | — | @@ -525,10 +525,19 @@ |
| 526 | 526 | } else { |
| 527 | 527 | $errorstr = $errors; |
| 528 | 528 | } |
| 529 | | - |
| 530 | | - return $errorstr |
| 531 | | - ? Html::rawElement( 'div', array( 'class' => 'error' ), $errorstr ) |
| 532 | | - : ''; |
| | 529 | + // Build errors |
| | 530 | + if ( $errorstr ) { |
| | 531 | + $errorTitle = Html::element( 'strong', array( |
| | 532 | + 'class' => 'mw-htmlform-errors-title', |
| | 533 | + ), wfMsg( 'htmlform-errors-title' ) ); |
| | 534 | + $errorContent = Html::rawElement( 'div', array( |
| | 535 | + ), $errorstr ); |
| | 536 | + return Html::rawElement( 'div', array( |
| | 537 | + 'class' => 'mw-htmlform-errors' |
| | 538 | + ), $errorTitle . $errorContent ); |
| | 539 | + } else { |
| | 540 | + return ''; |
| | 541 | + } |
| 533 | 542 | } |
| 534 | 543 | |
| 535 | 544 | /** |
| — | — | @@ -948,6 +957,7 @@ |
| 949 | 958 | # Hint / Tip |
| 950 | 959 | $hinttext = null; |
| 951 | 960 | $hinthtml = ''; |
| | 961 | + $afterLabelHtml = ''; // inserted into mw-label after the <label> |
| 952 | 962 | |
| 953 | 963 | if ( isset( $this->mParams['hint-message'] ) ) { |
| 954 | 964 | $msg = call_user_func_array( 'wfMessage', (array)$this->mParams['hint-message'] ); |
| — | — | @@ -965,8 +975,15 @@ |
| 966 | 976 | "</div>\n"; |
| 967 | 977 | } |
| 968 | 978 | |
| | 979 | + # Required ? |
| | 980 | + if ( isset( $this->mParams['required'] ) ) { |
| | 981 | + $afterLabelHtml .= Html::element( 'span', array( |
| | 982 | + 'class' => 'mw-htmlform-required-tip', |
| | 983 | + ), wfMsg( 'parentheses', wfMsg( 'htmlform-required-tip' ) ) ); |
| | 984 | + } |
| | 985 | + |
| 969 | 986 | # Label |
| 970 | | - $label = $this->getLabelHtml( $attributes, $hinthtml ); |
| | 987 | + $label = $this->getLabelHtml( $attributes, $hinthtml, $afterLabelHtml ); |
| 971 | 988 | |
| 972 | 989 | # Help message (optional) |
| 973 | 990 | $helptext = null; |
| — | — | @@ -991,8 +1008,10 @@ |
| 992 | 1009 | $helptext = $this->mParams['help']; |
| 993 | 1010 | } |
| 994 | 1011 | |
| 995 | | - if ( !is_null( $helptext ) ) { |
| 996 | | - $helphtml = Html::rawElement( 'div', array( 'class' => 'mw-htmlform-tip' ), $helptext ); |
| | 1012 | + if ( !is_null( $helptext ) && $helptext != '' ) { |
| | 1013 | + $helphtml = Html::rawElement( 'div', array( |
| | 1014 | + 'class' => 'mw-htmlform-tip', |
| | 1015 | + ), $helptext ); |
| 997 | 1016 | } |
| 998 | 1017 | |
| 999 | 1018 | # Input |
| — | — | @@ -1014,7 +1033,7 @@ |
| 1015 | 1034 | function getLabel() { |
| 1016 | 1035 | return $this->mLabel; |
| 1017 | 1036 | } |
| 1018 | | - function getLabelHtml( $attributes = array(), $hintHtml = '' ) { |
| | 1037 | + function getLabelHtml( $attributes = array(), $beforeLabelHtml = '', $afterLabelHtml = '' ) { |
| 1019 | 1038 | $labelAttrs = array(); |
| 1020 | 1039 | |
| 1021 | 1040 | if ( $this->needsLabel() ) { |
| — | — | @@ -1022,7 +1041,7 @@ |
| 1023 | 1042 | } |
| 1024 | 1043 | |
| 1025 | 1044 | return Html::rawElement( 'div', array( 'class' => 'mw-label' ) + $attributes, |
| 1026 | | - $hintHtml . Html::rawElement( 'label', $labelAttrs, $this->getLabel() ) |
| | 1045 | + $beforeLabelHtml . Html::rawElement( 'label', $labelAttrs, $this->getLabel() ) . $afterLabelHtml |
| 1027 | 1046 | ); |
| 1028 | 1047 | } |
| 1029 | 1048 | |
| Index: trunk/extensions/StyleGuideDemo/StyleGuideDemo.i18n.php |
| — | — | @@ -7,6 +7,9 @@ |
| 8 | 8 | $messages['en'] = array( |
| 9 | 9 | 'styleguidedemo' => 'Style guide demonstration', |
| 10 | 10 | 'styleguidedemo-desc' => 'An extension to demonstrate and find out how the [[mediawikiwiki:Style guide|style guide]] should be used. Visible on [[Special:StyleGuideDemo]].', |
| | 11 | + /* HTMLStyleForm */ |
| | 12 | + 'htmlform-errors-title' => 'There has been a problem.', |
| | 13 | + 'htmlform-required-tip' => 'Required', |
| 11 | 14 | /* Special:StyleGuideDemo */ |
| 12 | 15 | 'styleguidedemo-head-createform' => 'Create Account', |
| 13 | 16 | 'styleguidedemo-username' => 'Username', |
| Index: trunk/extensions/StyleGuideDemo/modules/ext.styleguidedemo/ext.styleguidedemo.css |
| — | — | @@ -7,8 +7,21 @@ |
| 8 | 8 | |
| 9 | 9 | .mw-htmlform-form { |
| 10 | 10 | padding: 10px; |
| | 11 | + float: left; |
| | 12 | + max-width: 70%; |
| 11 | 13 | } |
| 12 | 14 | |
| | 15 | +.mw-htmlform-errors { |
| | 16 | + background: #ffffff url(images/MW-StyleGuide-Icon-AlertMark2.png) 6px 6px no-repeat; |
| | 17 | + border: 2px solid #cc0000; |
| | 18 | + padding: 8px 12px 8px 60px; |
| | 19 | + margin: 0px 0px 21px 0px; |
| | 20 | +} |
| | 21 | + |
| | 22 | +.mw-htmlform-errors-title { |
| | 23 | + font-weight: bold; |
| | 24 | +} |
| | 25 | + |
| 13 | 26 | .mw-htmlform-field { |
| 14 | 27 | margin: 0px 0px 21px 0px; |
| 15 | 28 | } |
| — | — | @@ -29,11 +42,17 @@ |
| 30 | 43 | width: 12px; |
| 31 | 44 | } |
| 32 | 45 | |
| | 46 | +.mw-htmlform-required-tip { |
| | 47 | + color: #cc0000; |
| | 48 | + font-size: 10px; |
| | 49 | + line-height: 14px; |
| | 50 | +} |
| | 51 | + |
| 33 | 52 | .mw-htmlform-tip { |
| 34 | 53 | margin: 0px 0px 0px 30px; |
| 35 | 54 | font-size: 10px; |
| 36 | 55 | line-height: 14px; |
| 37 | | - color: #777777; |
| | 56 | + color: #6c6c6c; |
| 38 | 57 | } |
| 39 | 58 | |
| 40 | 59 | .mw-htmlform-field-HTMLTextField .mw-input { |
| — | — | @@ -48,5 +67,37 @@ |
| 49 | 68 | width: 200px; /* width: 214px; */ |
| 50 | 69 | } |
| 51 | 70 | |
| | 71 | +/* no-js */ |
| 52 | 72 | .mw-htmlform-submit { |
| | 73 | + float: right; |
| 53 | 74 | } |
| | 75 | + |
| | 76 | +/* js-only */ |
| | 77 | +.mw-htmlform-button, |
| | 78 | +.mw-htmlform-button-wrap { |
| | 79 | + -webkit-border-radius: 4px; |
| | 80 | + -moz-border-radius: 4px; |
| | 81 | + border-radius: 4px; |
| | 82 | +} |
| | 83 | +.mw-htmlform-button-wrap { |
| | 84 | + float: right; |
| | 85 | + border: 1px solid #9d9d9d; |
| | 86 | +} |
| | 87 | +.mw-htmlform-button { |
| | 88 | + padding: 5px 10px; |
| | 89 | + background: #edecef url(images/MW-StyleGuide-Form-Button-BGShade.png) center center repeat-x; |
| | 90 | + border: 1px solid #ffffff; |
| | 91 | + font-size: 14px; |
| | 92 | + font-weight: bold; |
| | 93 | + color: #6c6c6c; |
| | 94 | +} |
| | 95 | + |
| | 96 | +.mw-htmlform-button:hover { |
| | 97 | + cursor: pointer; |
| | 98 | + background: #3cb878 url(images/MW-StyleGuide-Form-Button-BGShadeHover.png) center center repeat-x; |
| | 99 | + color: #ffffff; |
| | 100 | + border-color: #5ac084; |
| | 101 | +} |
| | 102 | +.mw-htmlform-button:active { |
| | 103 | + background-image: url(images/MW-StyleGuide-Form-Button-BGShadeActive.png); |
| | 104 | +} |
| Index: trunk/extensions/StyleGuideDemo/modules/ext.styleguidedemo/ext.styleguidedemo.js |
| — | — | @@ -1,7 +1,7 @@ |
| 2 | 2 | /** |
| 3 | 3 | * Script for the Style guide demo extension. |
| 4 | 4 | */ |
| 5 | | -jQuery( document ).ready(function( $ ) { |
| | 5 | +jQuery( document ).ready( function( $ ) { |
| 6 | 6 | |
| 7 | 7 | // Set up the help system |
| 8 | 8 | $( '.mw-help-field-data' ) |
| — | — | @@ -16,4 +16,19 @@ |
| 17 | 17 | .slideToggle( 'fast' ); |
| 18 | 18 | } ); |
| 19 | 19 | |
| 20 | | -}); |
| | 20 | + // Set up buttons |
| | 21 | + $( '.mw-htmlform-submit' ).each( function( i, button ) { |
| | 22 | + var $realButton = $( button ), |
| | 23 | + $styleButton = $( '<div>', { |
| | 24 | + 'class': 'mw-htmlform-button', |
| | 25 | + text: 'Share Mood'//$realButton.val() |
| | 26 | + }) |
| | 27 | + .insertAfter( $realButton.hide() ) |
| | 28 | + .wrap( |
| | 29 | + $( '<div>' ).addClass( 'mw-htmlform-button-wrap' ) |
| | 30 | + ) |
| | 31 | + .click( function( e ) { |
| | 32 | + $realButton.click(); |
| | 33 | + } ); |
| | 34 | + }); |
| | 35 | +} ); |