r57030 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r57029‎ | r57030 | r57031 >
Date:22:25, 28 September 2009
Author:tparscal
Status:reverted
Tags:
Comment:
Refactored the watch/unwatch icon for Vector.
1. Changed from using an image to a div with background images.
2. Redesigned the star icon, and implemented it as a sprite with unique watched/unwatch and normal/hover versions.
3. Designed custom spinning star icon - used while waiting for server to respond.
4. Added $wgVectorUseIconWatch setting to default preferences (defaults to false) and added support for enabling and disabling the feature.
5. Got rid of old now unused icons.
6. Changed styles and ajaxwatch.js code so that javascript is not needed for hovering
7. Changed ajaxwatch.js code to work with the div icon rather than the previous img setup.
8. Regenerated RTL versions.
Modified paths:
  • /trunk/phase3/includes/DefaultSettings.php (modified) (history)
  • /trunk/phase3/skins/Vector.php (modified) (history)
  • /trunk/phase3/skins/common/ajaxwatch.js (modified) (history)
  • /trunk/phase3/skins/vector/images/watch-icon-loading.gif (added) (history)
  • /trunk/phase3/skins/vector/images/watch-icons.png (added) (history)
  • /trunk/phase3/skins/vector/images/watch_off.gif (deleted) (history)
  • /trunk/phase3/skins/vector/images/watch_on.gif (deleted) (history)
  • /trunk/phase3/skins/vector/images/watch_over.gif (deleted) (history)
  • /trunk/phase3/skins/vector/main-ltr.css (modified) (history)
  • /trunk/phase3/skins/vector/main-rtl.css (modified) (history)

Diff [purge]

Index: trunk/phase3/skins/common/ajaxwatch.js
——@@ -28,15 +28,10 @@
2929 if( wgAjaxWatch.iconMode ) {
3030 for ( i = 0; i < wgAjaxWatch.watchLinks.length; i++ ) {
3131 wgAjaxWatch.watchLinks[i].firstChild.alt = newText;
32 - if( newText == wgAjaxWatch.watchingMsg || newText == wgAjaxWatch.unwatchingMsg ) {
33 - wgAjaxWatch.watchLinks[i].firstChild.src = wgAjaxWatch.imgBasePath
34 - + "/common/images/spinner.gif";
35 - } else if( newText==wgAjaxWatch.watchMsg ) {
36 - wgAjaxWatch.watchLinks[i].firstChild.src = wgAjaxWatch.imgBasePath
37 - + "/vector/images/watch_off.gif";
38 - } else if( newText==wgAjaxWatch.unwatchMsg ) {
39 - wgAjaxWatch.watchLinks[i].firstChild.src = wgAjaxWatch.imgBasePath
40 - + "/vector/images/watch_on.gif";
 32+ if ( newText == wgAjaxWatch.watchingMsg || newText == wgAjaxWatch.unwatchingMsg ) {
 33+ wgAjaxWatch.watchLinks[i].className += ' loading';
 34+ } else if ( newText == wgAjaxWatch.watchMsg || newText == wgAjaxWatch.unwatchMsg ) {
 35+ wgAjaxWatch.watchLinks[i].className = wgAjaxWatch.watchLinks[i].className.replace( /loading/i, '' );
4136 }
4237 }
4338 } else {
——@@ -152,29 +147,11 @@
153148 }
154149 }
155150
156 - // If we're using the icon, add rollover affects
157 - try {
158 - if( el1.firstChild.firstChild.tagName.match( /img/i ) ) {
159 - wgAjaxWatch.iconMode = true;
160 - wgAjaxWatch.imgBasePath = el1.firstChild.firstChild.src
161 - .replace( /\/vector\/images\/watch_(off|on).gif/, "" );
162 - el1.firstChild.onmouseover = function( e ) {
163 - if ( !wgAjaxWatch.inprogress )
164 - this.firstChild.src = wgAjaxWatch.imgBasePath
165 - + "/vector/images/watch_over.gif";
166 - }
167 - el1.firstChild.onmouseout = function( e ) {
168 - if ( !wgAjaxWatch.inprogress )
169 - this.firstChild.src = wgAjaxWatch.imgBasePath
170 - + "/vector/images/watch_" + ( wgAjaxWatch.watching ?
171 - "on.gif" : "off.gif" );
172 - }
173 - }
174 - } catch( e ) {
175 - // not using the icon
 151+ // Detect if the watch/unwatch feature is in icon mode
 152+ if ( el1.className.match( /icon/i ) ) {
 153+ wgAjaxWatch.iconMode = true;
176154 }
177 -
178 -
 155+
179156 // The id can be either for the parent (Monobook-based) or the element
180157 // itself (non-Monobook)
181158 wgAjaxWatch.watchLinks.push( el1.tagName.toLowerCase() == "a"
Index: trunk/phase3/skins/Vector.php
——@@ -60,7 +60,7 @@
6161 */
6262 function buildNavigationUrls() {
6363 global $wgContLang, $wgLang, $wgOut, $wgUser, $wgRequest, $wgArticle, $wgStylePath;
64 - global $wgDisableLangConversion;
 64+ global $wgDisableLangConversion, $wgVectorUseIconWatch;
6565
6666 wfProfileIn( __METHOD__ );
6767
——@@ -271,7 +271,6 @@
272272 }
273273 }
274274 wfProfileOut( __METHOD__ . '-live' );
275 -
276275 /**
277276 * The following actions use messages which, if made particular to
278277 * the Vector skin, would break the Ajax code which makes this
——@@ -282,31 +281,21 @@
283282 * the global versions.
284283 */
285284 // Checks if the user is logged in
286 - if( $this->loggedin ) {
287 - // Checks if the user is watching this page
288 - if( !$this->mTitle->userIsWatching() ) {
289 - // Adds watch view link
290 - $links['views']['watch'] = array(
291 - 'class' =>
292 - ( $action == 'watch' or $action == 'unwatch' ) ?
293 - 'selected' : false,
294 - 'text' => wfMsg( 'watch' ),
295 - 'img' => "{$wgStylePath}/vector/images/watch_off.gif",
296 - 'href' => $this->mTitle->getLocalUrl( 'action=watch' )
297 - );
 285+ if ( $this->loggedin ) {
 286+ if ( $wgVectorUseIconWatch ) {
 287+ $class = 'icon ';
 288+ $place = 'views';
298289 } else {
299 - // Adds unwatch view link
300 - $links['views']['unwatch'] = array(
301 - 'class' =>
302 - ($action == 'unwatch' or $action == 'watch') ?
303 - 'selected' : false,
304 - 'text' => wfMsg( 'unwatch' ),
305 - 'img' => "{$wgStylePath}/vector/images/watch_on.gif",
306 - 'href' => $this->mTitle->getLocalUrl( 'action=unwatch' )
307 - );
 290+ $class = '';
 291+ $place = 'actions';
308292 }
 293+ $mode = $this->mTitle->userIsWatching() ? 'unwatch' : 'watch';
 294+ $links[$place][$mode] = array(
 295+ 'class' => $class . ( ( $action == 'watch' || $action == 'unwatch' ) ? ' selected' : false ),
 296+ 'text' => wfMsg( $mode ), // uses 'watch' or 'unwatch' message
 297+ 'href' => $this->mTitle->getLocalUrl( 'action=' . $mode )
 298+ );
309299 }
310 -
311300 // This is instead of SkinTemplateTabs - which uses a flat array
312301 wfRunHooks( 'SkinTemplateNavigation', array( &$this, &$links ) );
313302
Index: trunk/phase3/skins/vector/images/watch_off.gif
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Index: trunk/phase3/skins/vector/images/watch_over.gif
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Index: trunk/phase3/skins/vector/images/watch_on.gif
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Index: trunk/phase3/skins/vector/images/watch-icons.png
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Property changes on: trunk/phase3/skins/vector/images/watch-icons.png
___________________________________________________________________
Name: svn:mime-type
314303 + application/octet-stream
Index: trunk/phase3/skins/vector/images/watch-icon-loading.gif
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Property changes on: trunk/phase3/skins/vector/images/watch-icon-loading.gif
___________________________________________________________________
Name: svn:mime-type
315304 + application/octet-stream
Index: trunk/phase3/skins/vector/main-ltr.css
——@@ -1080,22 +1080,41 @@
10811081 border-color: #8d8d8d;
10821082 }
10831083
1084 -
10851084 /* Watch/Unwatch Icon Styling */
1086 -#ca-unwatch,
1087 -#ca-watch {
1088 - background-image: none;
1089 - background-color: #ffffff;
 1085+#ca-unwatch.icon,
 1086+#ca-watch.icon {
10901087 }
1091 -#ca-unwatch a,
1092 -#ca-watch a {
 1088+#ca-unwatch.icon a,
 1089+#ca-watch.icon a {
 1090+ margin: 0;
 1091+ padding: 0;
10931092 outline: none;
 1093+ display: block;
 1094+ width: 26px;
 1095+ height: 2.5em;
10941096 }
1095 -#ca-unwatch a img,
1096 -#ca-watch a img {
1097 - padding-top: 1.35em;
1098 - display: block;
1099 - font-size: 0.8em;
1100 - max-height: 14px;
1101 - max-width: 14px;
 1097+#ca-unwatch.icon a {
 1098+ background-image: url(images/watch-icons.png);
 1099+ background-position: 5px 60%;
 1100+}
 1101+#ca-watch.icon a {
 1102+ background-image: url(images/watch-icons.png);
 1103+ background-position: -43px 60%;
 1104+}
 1105+#ca-unwatch.icon a:hover {
 1106+ background-image: url(images/watch-icons.png);
 1107+ background-position: -19px 60%;
 1108+}
 1109+#ca-watch.icon a:hover {
 1110+ background-image: url(images/watch-icons.png);
 1111+ background-position: -67px 60%;
 1112+}
 1113+#ca-unwatch.icon a.loading,
 1114+#ca-watch.icon a.loading {
 1115+ background-image: url(images/watch-icon-loading.gif);
 1116+ background-position: center 60%;
 1117+}
 1118+#ca-unwatch.icon a span,
 1119+#ca-watch.icon a span {
 1120+ display: none;
11021121 }
\ No newline at end of file
Index: trunk/phase3/skins/vector/main-rtl.css
——@@ -1042,6 +1042,7 @@
10431043 position: relative;
10441044 width: 100%;
10451045 }
 1046+
10461047 #mw-js-message {
10471048 font-size: 0.8em;
10481049 }
——@@ -1050,6 +1051,7 @@
10511052 }
10521053
10531054
 1055+
10541056 /* Babaco color scheme */
10551057 /* Still working on this. Needs incorporated above once it's closer to final */
10561058 body {
——@@ -1078,22 +1080,41 @@
10791081 border-color: #8d8d8d;
10801082 }
10811083
1082 -
10831084 /* Watch/Unwatch Icon Styling */
1084 -#ca-unwatch,
1085 -#ca-watch {
1086 - background-image: none;
1087 - background-color: #ffffff;
 1085+#ca-unwatch.icon,
 1086+#ca-watch.icon {
10881087 }
1089 -#ca-unwatch a,
1090 -#ca-watch a {
 1088+#ca-unwatch.icon a,
 1089+#ca-watch.icon a {
 1090+ margin: 0;
 1091+ padding: 0;
10911092 outline: none;
 1093+ display: block;
 1094+ width: 26px;
 1095+ height: 2.5em;
10921096 }
1093 -#ca-unwatch a img,
1094 -#ca-watch a img {
1095 - padding-top: 1.35em;
1096 - display: block;
1097 - font-size: 0.8em;
1098 - max-height: 14px;
1099 - max-width: 14px;
 1097+#ca-unwatch.icon a {
 1098+ background-image: url(images/watch-icons.png);
 1099+ background-position: 5px 60%;
 1100+}
 1101+#ca-watch.icon a {
 1102+ background-image: url(images/watch-icons.png);
 1103+ background-position: -43px 60%;
 1104+}
 1105+#ca-unwatch.icon a:hover {
 1106+ background-image: url(images/watch-icons.png);
 1107+ background-position: -19px 60%;
 1108+}
 1109+#ca-watch.icon a:hover {
 1110+ background-image: url(images/watch-icons.png);
 1111+ background-position: -67px 60%;
 1112+}
 1113+#ca-unwatch.icon a.loading,
 1114+#ca-watch.icon a.loading {
 1115+ background-image: url(images/watch-icon-loading.gif);
 1116+ background-position: center 60%;
 1117+}
 1118+#ca-unwatch.icon a span,
 1119+#ca-watch.icon a span {
 1120+ display: none;
11001121 }
\ No newline at end of file
Index: trunk/phase3/includes/DefaultSettings.php
——@@ -4096,13 +4096,20 @@
40974097 $wgUseTwoButtonsSearchForm = true;
40984098
40994099 /**
4100 - * Search form behavior for Vector skin only
 4100+ * Search form behavior for Vector skin only
41014101 * true = use an icon search button
41024102 * false = use Go & Search buttons
41034103 */
41044104 $wgVectorUseSimpleSearch = false;
41054105
41064106 /**
 4107+ * Watch and unwatch as an icon rather than a link for Vector skin only
 4108+ * true = use an icon watch/unwatch button
 4109+ * false = use watch/unwatch text link
 4110+ */
 4111+$wgVectorUseIconWatch = false;
 4112+
 4113+/**
41074114 * Preprocessor caching threshold
41084115 */
41094116 $wgPreprocessorCacheThreshold = 1000;

Follow-up revisions

RevisionCommit summaryAuthorDate
r57036Inc $wgStyleVersion to reflect changes in r57030 and r57034 (watch/unwatch ic...tparscal22:49, 28 September 2009
r57125Revert r56924 (new watch icon and color changes for Vector) and followups r57...catrope17:58, 30 September 2009

Status & tagging log