r91122 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r91121‎ | r91122 | r91123 >
Date:22:08, 29 June 2011
Author:krinkle
Status:ok (Comments)
Tags:
Comment:
Implementing tooltips for ArticleFeedback
* Rating container needed 1em more height to avoid text going through the form options
* Messages swapped on-hover based on context of the rating-star-hover, then shown on hover-in and hidden on hover-out
Modified paths:
  • /trunk/extensions/ArticleFeedback/ArticleFeedback.hooks.php (modified) (history)
  • /trunk/extensions/ArticleFeedback/ArticleFeedback.i18n.php (modified) (history)
  • /trunk/extensions/ArticleFeedback/modules/jquery.articleFeedback/jquery.articleFeedback.css (modified) (history)
  • /trunk/extensions/ArticleFeedback/modules/jquery.articleFeedback/jquery.articleFeedback.js (modified) (history)

Diff [purge]

Index: trunk/extensions/ArticleFeedback/ArticleFeedback.hooks.php
——@@ -21,12 +21,32 @@
2222 'messages' => array(
2323 'articlefeedback-field-trustworthy-label',
2424 'articlefeedback-field-trustworthy-tip',
 25+ 'articlefeedback-field-trustworthy-tooltip-1',
 26+ 'articlefeedback-field-trustworthy-tooltip-2',
 27+ 'articlefeedback-field-trustworthy-tooltip-3',
 28+ 'articlefeedback-field-trustworthy-tooltip-4',
 29+ 'articlefeedback-field-trustworthy-tooltip-5',
2530 'articlefeedback-field-complete-label',
2631 'articlefeedback-field-complete-tip',
 32+ 'articlefeedback-field-complete-tooltip-1',
 33+ 'articlefeedback-field-complete-tooltip-2',
 34+ 'articlefeedback-field-complete-tooltip-3',
 35+ 'articlefeedback-field-complete-tooltip-4',
 36+ 'articlefeedback-field-complete-tooltip-5',
2737 'articlefeedback-field-objective-label',
2838 'articlefeedback-field-objective-tip',
 39+ 'articlefeedback-field-objective-tooltip-1',
 40+ 'articlefeedback-field-objective-tooltip-2',
 41+ 'articlefeedback-field-objective-tooltip-3',
 42+ 'articlefeedback-field-objective-tooltip-4',
 43+ 'articlefeedback-field-objective-tooltip-5',
2944 'articlefeedback-field-wellwritten-label',
3045 'articlefeedback-field-wellwritten-tip',
 46+ 'articlefeedback-field-wellwritten-tooltip-1',
 47+ 'articlefeedback-field-wellwritten-tooltip-2',
 48+ 'articlefeedback-field-wellwritten-tooltip-3',
 49+ 'articlefeedback-field-wellwritten-tooltip-4',
 50+ 'articlefeedback-field-wellwritten-tooltip-5',
3151 'articlefeedback-pitch-reject',
3252 'articlefeedback-pitch-or',
3353 'articlefeedback-pitch-thanks',
Index: trunk/extensions/ArticleFeedback/modules/jquery.articleFeedback/jquery.articleFeedback.js
——@@ -112,6 +112,7 @@
113113 <div class="articleFeedback-rating-label" rel="5"></div>\
114114 <div class="articleFeedback-rating-clear"></div>\
115115 </div>\
 116+ <div class="articleFeedback-rating-tooltip articleFeedback-visibleWith-form"></div>\
116117 <div class="articleFeedback-rating-average articleFeedback-visibleWith-report"></div>\
117118 <div class="articleFeedback-rating-meter articleFeedback-visibleWith-report"><div></div></div>\
118119 <div class="articleFeedback-rating-count articleFeedback-visibleWith-report"></div>\
——@@ -486,11 +487,12 @@
487488 .find( '.articleFeedback-ratings' )
488489 .each( function() {
489490 for ( var key in context.options.ratings ) {
 491+ var rating = context.options.ratings[key];
490492 $( $.articleFeedback.tpl.rating )
491493 .attr( 'rel', key )
492494 .find( '.articleFeedback-label' )
493 - .attr( 'title', mw.msg( context.options.ratings[key].tip ) )
494 - .text( mw.msg( context.options.ratings[key].label ) )
 495+ .attr( 'title', mw.msg( rating.tip ) )
 496+ .text( mw.msg( rating.label ) )
495497 .end()
496498 .find( '.articleFeedback-rating-clear' )
497499 .attr( 'title', mw.msg( 'articlefeedback-form-panel-clear' ) )
——@@ -731,19 +733,30 @@
732734 .find( '.articleFeedback-rating-label' )
733735 .hover(
734736 function() {
735 - $(this)
 737+ var $el = $(this),
 738+ $rating = $el.closest( '.articleFeedback-rating' );
 739+ $el
736740 .addClass( 'articleFeedback-rating-label-hover-head' )
737741 .prevAll( '.articleFeedback-rating-label' )
738742 .addClass( 'articleFeedback-rating-label-hover-tail' );
 743+ $rating
 744+ .find( '.articleFeedback-rating-tooltip' )
 745+ .text( mw.msg( 'articlefeedback-field-' + $rating.attr( 'rel' ) + '-tooltip-' + $el.attr( 'rel' ) ) )
 746+ .show();
739747 },
740748 function() {
741 - $(this)
 749+ var $el = $(this),
 750+ $rating = $el.closest( '.articleFeedback-rating' );
 751+ $el
742752 .removeClass( 'articleFeedback-rating-label-hover-head' )
743753 .prevAll( '.articleFeedback-rating-label' )
744754 .removeClass( 'articleFeedback-rating-label-hover-tail' );
745 - $.articleFeedback.fn.updateRating.call(
746 - $(this).closest( '.articleFeedback-rating' )
747 - );
 755+ $rating
 756+ .closest( '.articleFeedback-rating' )
 757+ .find( '.articleFeedback-rating-tooltip' )
 758+ .hide();
 759+
 760+ $.articleFeedback.fn.updateRating.call( $rating );
748761 }
749762 )
750763 .mousedown( function() {
Index: trunk/extensions/ArticleFeedback/modules/jquery.articleFeedback/jquery.articleFeedback.css
——@@ -174,7 +174,8 @@
175175 margin-left: 10px;
176176 }
177177
178 -.articleFeedback-rating-label, .articleFeedback-rating-clear {
 178+.articleFeedback-rating-label,
 179+.articleFeedback-rating-clear {
179180 float: left;
180181 height: 21px;
181182 width: 21px;
——@@ -224,10 +225,19 @@
225226 background-image: url(images/star-new-down.png);
226227 }
227228
 229+.articleFeedback-rating-tooltip {
 230+ float: left;
 231+ width: 170px;
 232+ margin-left: 12px;
 233+ color: #999999;
 234+ font-size: 0.9em;
 235+ display: none;
 236+}
 237+
228238 .articleFeedback-rating {
229239 float: left;
230240 width: 11em;
231 - height: 4em;
 241+ height: 5em;
232242 margin-bottom: 0.5em;
233243 }
234244
Index: trunk/extensions/ArticleFeedback/ArticleFeedback.i18n.php
——@@ -55,12 +55,32 @@
5656 'articlefeedback-report-ratings' => '$1 ratings',
5757 'articlefeedback-field-trustworthy-label' => 'Trustworthy',
5858 'articlefeedback-field-trustworthy-tip' => 'Do you feel this page has sufficient citations and that those citations come from trustworthy sources?',
 59+ 'articlefeedback-field-trustworthy-tooltip-1' => 'Lacks reputable sources',
 60+ 'articlefeedback-field-trustworthy-tooltip-2' => 'Few reputable sources',
 61+ 'articlefeedback-field-trustworthy-tooltip-3' => 'Adequate reputable sources',
 62+ 'articlefeedback-field-trustworthy-tooltip-4' => 'Good reputable sources',
 63+ 'articlefeedback-field-trustworthy-tooltip-5' => 'Great reputable sources',
5964 'articlefeedback-field-complete-label' => 'Complete',
6065 'articlefeedback-field-complete-tip' => 'Do you feel that this page covers the essential topic areas that it should?',
 66+ 'articlefeedback-field-complete-tooltip-1' => 'Missing most information',
 67+ 'articlefeedback-field-complete-tooltip-2' => 'Contains some information',
 68+ 'articlefeedback-field-complete-tooltip-3' => 'Contains key information, but with gaps',
 69+ 'articlefeedback-field-complete-tooltip-4' => 'Contains most key information',
 70+ 'articlefeedback-field-complete-tooltip-5' => 'Comprehensive coverage',
6171 'articlefeedback-field-objective-label' => 'Objective',
6272 'articlefeedback-field-objective-tip' => 'Do you feel that this page shows a fair representation of all perspectives on the issue?',
 73+ 'articlefeedback-field-objective-tooltip-1' => 'Heavily biased',
 74+ 'articlefeedback-field-objective-tooltip-2' => 'Moderate bias',
 75+ 'articlefeedback-field-objective-tooltip-3' => 'Minimal bias',
 76+ 'articlefeedback-field-objective-tooltip-4' => 'No obvious bias',
 77+ 'articlefeedback-field-objective-tooltip-5' => 'Completely unbiased',
6378 'articlefeedback-field-wellwritten-label' => 'Well-written',
6479 'articlefeedback-field-wellwritten-tip' => 'Do you feel that this page is well-organized and well-written?',
 80+ 'articlefeedback-field-wellwritten-tooltip-1' => 'Incomprehensible',
 81+ 'articlefeedback-field-wellwritten-tooltip-2' => 'Difficult to understand',
 82+ 'articlefeedback-field-wellwritten-tooltip-3' => 'Adequate clarity',
 83+ 'articlefeedback-field-wellwritten-tooltip-4' => 'Good clarity',
 84+ 'articlefeedback-field-wellwritten-tooltip-5' => 'Exceptional clarity',
6585 'articlefeedback-pitch-reject' => 'Maybe later',
6686 'articlefeedback-pitch-or' => 'or',
6787 'articlefeedback-pitch-thanks' => 'Thanks! Your ratings have been saved.',

Sign-offs

UserFlagDate
He7d3rtested19:09, 30 June 2011

Comments

#Comment by He7d3r (talk | contribs)   19:07, 30 June 2011

This fix Bug 29386 but the increase of the rating container height goes against fixing Bug 29303.

On Thread:Talk:Article feedback/Please stop/reply (39), I suggested the following:

"the bottom half of the box could stay invisible until the user interacts with the tool clicking in some of stars (note: this saves ~50% of its current height). This wouldn't require any extra control (the first click made would serve both to define a rating and to display the remaining of the interface)."

I think the same solution is still possible after the addition of these tooltips.

#Comment by He7d3r (talk | contribs)   20:07, 30 June 2011

Specifically, the message "I am highly knowledgeable about this topic (optional)" and the "submit" button could be hidden by default and the function enableSubmission which is called during the event .find( '.articleFeedback-rating-label' ).mousedown could be responsible by un-hiding the elements when the user clicks in some star.

#Comment by Krinkle (talk | contribs)   21:52, 3 July 2011

ArticleFeedback has been changed and improved during the last few trials. Both due to technical needs and in response to needs by the community. The original design will most likely be reconsidered as soon as the current version is (technically) ready.

Status & tagging log