r77998 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r77997‎ | r77998 | r77999 >
Date:18:24, 7 December 2010
Author:tparscal
Status:deferred
Tags:
Comment:
* Improved graphics for stars - now we show a down and hover state
* Added clearing button (trash can)
Modified paths:
  • /trunk/extensions/ArticleFeedback/modules/ext.articleFeedback-beta/ext.articleFeedback-beta.css (modified) (history)
  • /trunk/extensions/ArticleFeedback/modules/ext.articleFeedback-beta/ext.articleFeedback-beta.js (modified) (history)
  • /trunk/extensions/ArticleFeedback/modules/ext.articleFeedback-beta/images/star-empty.png (modified) (history)
  • /trunk/extensions/ArticleFeedback/modules/ext.articleFeedback-beta/images/star-full.png (modified) (history)
  • /trunk/extensions/ArticleFeedback/modules/ext.articleFeedback-beta/images/star-new-down.png (added) (history)
  • /trunk/extensions/ArticleFeedback/modules/ext.articleFeedback-beta/images/star-new-hover.png (added) (history)
  • /trunk/extensions/ArticleFeedback/modules/ext.articleFeedback-beta/images/star-new.png (modified) (history)
  • /trunk/extensions/ArticleFeedback/modules/ext.articleFeedback-beta/images/trash.png (modified) (history)

Diff [purge]

Index: trunk/extensions/ArticleFeedback/modules/ext.articleFeedback-beta/images/star-new.png
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Index: trunk/extensions/ArticleFeedback/modules/ext.articleFeedback-beta/images/star-empty.png
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Index: trunk/extensions/ArticleFeedback/modules/ext.articleFeedback-beta/images/star-new-down.png
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Property changes on: trunk/extensions/ArticleFeedback/modules/ext.articleFeedback-beta/images/star-new-down.png
___________________________________________________________________
Added: svn:mime-type
11 + application/octet-stream
Index: trunk/extensions/ArticleFeedback/modules/ext.articleFeedback-beta/images/star-full.png
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Index: trunk/extensions/ArticleFeedback/modules/ext.articleFeedback-beta/images/trash.png
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Index: trunk/extensions/ArticleFeedback/modules/ext.articleFeedback-beta/images/star-new-hover.png
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Property changes on: trunk/extensions/ArticleFeedback/modules/ext.articleFeedback-beta/images/star-new-hover.png
___________________________________________________________________
Added: svn:mime-type
22 + application/octet-stream
Index: trunk/extensions/ArticleFeedback/modules/ext.articleFeedback-beta/ext.articleFeedback-beta.css
——@@ -39,6 +39,7 @@
4040 .articleFeedback-tabs {
4141 width: 8em;
4242 height: 15em;
 43+ /* @embed */
4344 background-image: url(images/tab-break.png);
4445 background-position: right top;
4546 background-repeat: repeat-y;
——@@ -52,12 +53,14 @@
5354 height: 7.5em;
5455 cursor: pointer;
5556 background-color: #ffffff;
 57+ /* @embed */
5658 background-image: url(images/tab-edge.png);
5759 background-position: right top;
5860 background-repeat: repeat-y;
5961 }
6062
6163 .articleFeedback-tabs .articleFeedback-tab-current {
 64+ /* @embed */
6265 background-image: url(images/tab-fade.png);
6366 }
6467
——@@ -79,10 +82,12 @@
8083 }
8184
8285 .articleFeedback-tab-form .articleFeedback-buffer {
 86+ /* @embed */
8387 background-image: url(images/form-icon.png);
8488 }
8589
8690 .articleFeedback-tab-report .articleFeedback-buffer {
 91+ /* @embed */
8792 background-image: url(images/report-icon.png);
8893 }
8994
——@@ -115,26 +120,50 @@
116121 padding-left: 1em;
117122 }
118123
119 -.articleFeedback-rating-labels label {
 124+.articleFeedback-rating-labels label, .articleFeedback-rating-clear {
120125 float: left;
121126 height: 2em;
122127 width: 2em;
123128 margin: 0;
124129 padding: 0;
 130+ /* @embed */
125131 background-image: url(images/star-empty.png);
126132 background-repeat: no-repeat;
127133 background-position: center center;
128134 cursor: pointer;
129135 }
130136
 137+.articleFeedback-rating-clear {
 138+ /* @embed */
 139+ background-image: url(images/trash.png);
 140+ display: none;
 141+}
 142+
 143+.articleFeedback-rating-labels:hover .articleFeedback-rating-clear {
 144+ /* @embed */
 145+ background-image: url(images/trash-hover.png);
 146+}
 147+
131148 .articleFeedback-rating-labels label.articleFeedback-rating-label-full {
 149+ /* @embed */
132150 background-image: url(images/star-full.png);
133151 }
134152
135 -.articleFeedback-rating-labels label.articleFeedback-rating-label-new {
 153+.articleFeedback-rating-new .articleFeedback-rating-labels label.articleFeedback-rating-label-full {
 154+ /* @embed */
136155 background-image: url(images/star-new.png);
137156 }
138157
 158+.articleFeedback-rating-new .articleFeedback-rating-labels label.articleFeedback-rating-label-hover {
 159+ /* @embed */
 160+ background-image: url(images/star-new-hover.png);
 161+}
 162+
 163+.articleFeedback-rating-new .articleFeedback-rating-labels label.articleFeedback-rating-label-down {
 164+ /* @embed */
 165+ background-image: url(images/star-new-down.png);
 166+}
 167+
139168 .articleFeedback-rating {
140169 float: left;
141170 width: 50%;
——@@ -145,12 +174,14 @@
146175 .articleFeedback-label {
147176 cursor: pointer;
148177 padding-left: 20px;
 178+ /* @embed */
149179 background-image: url(images/question.png);
150180 background-repeat: no-repeat;
151181 background-position: center left;
152182 }
153183
154184 .articleFeedback-label:hover {
 185+ /* @embed */
155186 background-image: url(images/question-hover.png);
156187 }
157188
Index: trunk/extensions/ArticleFeedback/modules/ext.articleFeedback-beta/ext.articleFeedback-beta.js
——@@ -7,21 +7,21 @@
88 $.articleFeedback = {
99 'fn': {
1010 'updateRating': function() {
11 - $(this)
12 - .find( 'label' )
13 - .removeClass( 'articleFeedback-rating-label-new' )
14 - .each( function() {
15 - if ( $( 'input#' + $(this).attr( 'for' ) + ':checked' ).length ) {
16 - $(this)
17 - .prevAll( 'label' )
18 - .andSelf()
19 - .addClass( 'articleFeedback-rating-label-full' )
20 - .end()
21 - .end()
22 - .nextAll( 'label' )
23 - .removeClass( 'articleFeedback-rating-label-full' );
24 - }
25 - } );
 11+ $(this).find( 'label' ).removeClass( 'articleFeedback-rating-label-full' );
 12+ var $label = $(this).find( 'label[for=' + $(this).find( 'input:radio:checked' ).attr( 'id' ) + ']' )
 13+ if ( $label.length ) {
 14+ $label
 15+ .prevAll( 'label' )
 16+ .add( $label )
 17+ .addClass( 'articleFeedback-rating-label-full' )
 18+ .end()
 19+ .end()
 20+ .nextAll( 'label' )
 21+ .removeClass( 'articleFeedback-rating-label-full' );
 22+ $(this).find( '.articleFeedback-rating-clear' ).show();
 23+ } else {
 24+ $(this).find( '.articleFeedback-rating-clear' ).hide();
 25+ }
2626 },
2727 'build': function( context ) {
2828 context.$ui
——@@ -44,25 +44,25 @@
4545 <div class="articleFeedback-description articleFeedback-report"><msg key="report-panel-description" /></div>\
4646 <div style="clear:both;"></div>\
4747 <div class="articleFeedback-ratings">\
48 - <div class="articleFeedback-rating" rel="wellsourced">\
 48+ <div class="articleFeedback-rating articleFeedback-rating-new" rel="wellsourced">\
4949 <span class="articleFeedback-label" title-msg="field-wellsourced-tip"><msg key="field-wellsourced-label" /></span>\
5050 <div class="articleFeedback-rating-fields articleFeedback-form"><input type="radio" /><input type="radio" /><input type="radio" /><input type="radio" /><input type="radio" /></div>\
51 - <div class="articleFeedback-rating-labels articleFeedback-form"><label></label><label></label><label></label><label></label><label></label></div>\
 51+ <div class="articleFeedback-rating-labels articleFeedback-form"><label></label><label></label><label></label><label></label><label></label><div class="articleFeedback-rating-clear"></div></div>\
5252 </div>\
53 - <div class="articleFeedback-rating" rel="neutral">\
 53+ <div class="articleFeedback-rating articleFeedback-rating-new" rel="neutral">\
5454 <span class="articleFeedback-label" title-msg="field-neutral-tip"><msg key="field-neutral-label" /></span>\
5555 <div class="articleFeedback-rating-fields articleFeedback-form"><input type="radio" /><input type="radio" /><input type="radio" /><input type="radio" /><input type="radio" /></div>\
56 - <div class="articleFeedback-rating-labels articleFeedback-form"><label></label><label></label><label></label><label></label><label></label></div>\
 56+ <div class="articleFeedback-rating-labels articleFeedback-form"><label></label><label></label><label></label><label></label><label></label><div class="articleFeedback-rating-clear"></div></div>\
5757 </div>\
58 - <div class="articleFeedback-rating" rel="complete">\
 58+ <div class="articleFeedback-rating articleFeedback-rating-new" rel="complete">\
5959 <span class="articleFeedback-label" title-msg="field-complete-tip"><msg key="field-complete-label" /></span>\
6060 <div class="articleFeedback-rating-fields articleFeedback-form"><input type="radio" /><input type="radio" /><input type="radio" /><input type="radio" /><input type="radio" /></div>\
61 - <div class="articleFeedback-rating-labels articleFeedback-form"><label></label><label></label><label></label><label></label><label></label></div>\
 61+ <div class="articleFeedback-rating-labels articleFeedback-form"><label></label><label></label><label></label><label></label><label></label><div class="articleFeedback-rating-clear"></div></div>\
6262 </div>\
63 - <div class="articleFeedback-rating" rel="readable">\
 63+ <div class="articleFeedback-rating articleFeedback-rating-new" rel="readable">\
6464 <span class="articleFeedback-label" title-msg="field-readable-tip"><msg key="field-readable-label" /></span>\
6565 <div class="articleFeedback-rating-fields articleFeedback-form"><input type="radio" /><input type="radio" /><input type="radio" /><input type="radio" /><input type="radio" /></div>\
66 - <div class="articleFeedback-rating-labels articleFeedback-form"><label></label><label></label><label></label><label></label><label></label></div>\
 66+ <div class="articleFeedback-rating-labels articleFeedback-form"><label></label><label></label><label></label><label></label><label></label><div class="articleFeedback-rating-clear"></div></div>\
6767 </div>\
6868 <div style="clear:both;"></div>\
6969 </div>\
——@@ -110,13 +110,19 @@
111111 .each( function( i ) {
112112 $(this)
113113 .val( i + 1 )
114 - .attr( 'id', 'articleFeedback-rating-field-' + rel + '-' + ( i + 1 ) );
 114+ .attr(
 115+ 'id',
 116+ 'articleFeedback-rating-field-' + rel + '-' + ( i + 1 )
 117+ );
115118 } )
116119 .end()
117120 .find( '.articleFeedback-rating-labels label' )
118121 .each( function( i ) {
119122 $(this)
120 - .attr( 'for', 'articleFeedback-rating-field-' + rel + '-' + ( i + 1 ) );
 123+ .attr(
 124+ 'for',
 125+ 'articleFeedback-rating-field-' + rel + '-' + ( i + 1 )
 126+ );
121127 } );
122128 } )
123129 .end()
——@@ -144,15 +150,40 @@
145151 .find( '.articleFeedback-rating-labels label' )
146152 .hover(
147153 function() {
148 - $(this).prevAll( 'label' ).andSelf()
149 - .addClass( 'articleFeedback-rating-label-new' );
 154+ $(this)
 155+ .addClass( 'articleFeedback-rating-label-hover' )
 156+ .prevAll( 'label' )
 157+ .andSelf()
 158+ .addClass( 'articleFeedback-rating-label-full' );
150159 },
151160 function() {
 161+ $(this).removeClass( 'articleFeedback-rating-label-hover' );
152162 $.articleFeedback.fn.updateRating.call(
153163 $(this).closest( '.articleFeedback-rating' )
154164 );
155165 }
156 - );
 166+ )
 167+ .mousedown( function() {
 168+ $(this)
 169+ .addClass( 'articleFeedback-rating-label-down' )
 170+ .nextAll()
 171+ .removeClass( 'articleFeedback-rating-label-full' )
 172+ .end()
 173+ .parent()
 174+ .find( '.articleFeedback-rating-clear' )
 175+ .show();
 176+ } )
 177+ .mouseup( function() {
 178+ $(this).removeClass( 'articleFeedback-rating-label-down' );
 179+ } )
 180+ .end()
 181+ .find( '.articleFeedback-rating-clear' )
 182+ .click( function() {
 183+ $(this).hide();
 184+ var $rating = $(this).closest( '.articleFeedback-rating' );
 185+ $rating.find( 'input:radio' ).attr( 'checked', false );
 186+ $.articleFeedback.fn.updateRating.call( $rating );
 187+ } );
157188 }
158189 }
159190 };

Status & tagging log