Refactored the watch/unwatch icon for Vector.
authorTrevor Parscal <tparscal@users.mediawiki.org>
Mon, 28 Sep 2009 22:25:42 +0000 (22:25 +0000)
committerTrevor Parscal <tparscal@users.mediawiki.org>
Mon, 28 Sep 2009 22:25:42 +0000 (22:25 +0000)
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.

includes/DefaultSettings.php
skins/Vector.php
skins/common/ajaxwatch.js
skins/vector/images/watch-icon-loading.gif [new file with mode: 0644]
skins/vector/images/watch-icons.png [new file with mode: 0644]
skins/vector/images/watch_off.gif [deleted file]
skins/vector/images/watch_on.gif [deleted file]
skins/vector/images/watch_over.gif [deleted file]
skins/vector/main-ltr.css
skins/vector/main-rtl.css

index 87edd1b..54d10d4 100644 (file)
@@ -4096,12 +4096,19 @@ $wgEnforceHtmlIds = true;
 $wgUseTwoButtonsSearchForm = true;
 
 /**
- *  Search form behavior for Vector skin only
+ * Search form behavior for Vector skin only
  * true = use an icon search button
  * false = use Go & Search buttons
  */
 $wgVectorUseSimpleSearch = false;
 
+/**
+ * Watch and unwatch as an icon rather than a link for Vector skin only
+ * true = use an icon watch/unwatch button
+ * false = use watch/unwatch text link
+ */
+$wgVectorUseIconWatch = false;
+
 /**
  * Preprocessor caching threshold
  */
index bd863f8..e18230e 100644 (file)
@@ -60,7 +60,7 @@ class SkinVector extends SkinTemplate {
         */
        function buildNavigationUrls() {
                global $wgContLang, $wgLang, $wgOut, $wgUser, $wgRequest, $wgArticle, $wgStylePath;
-               global $wgDisableLangConversion;
+               global $wgDisableLangConversion, $wgVectorUseIconWatch;
 
                wfProfileIn( __METHOD__ );
 
@@ -271,7 +271,6 @@ class SkinVector extends SkinTemplate {
                                }
                        }
                        wfProfileOut( __METHOD__ . '-live' );
-
                        /**
                         * The following actions use messages which, if made particular to
                         * the Vector skin, would break the Ajax code which makes this
@@ -282,31 +281,21 @@ class SkinVector extends SkinTemplate {
                         * the global versions.
                         */
                        // Checks if the user is logged in
-                       if( $this->loggedin ) {
-                               // Checks if the user is watching this page
-                               if( !$this->mTitle->userIsWatching() ) {
-                                       // Adds watch view link
-                                       $links['views']['watch'] = array(
-                                               'class' =>
-                                                       ( $action == 'watch' or $action == 'unwatch' ) ?
-                                                               'selected' : false,
-                                               'text' => wfMsg( 'watch' ),
-                                               'img' => "{$wgStylePath}/vector/images/watch_off.gif",
-                                               'href' => $this->mTitle->getLocalUrl( 'action=watch' )
-                                       );
+                       if ( $this->loggedin ) {
+                               if ( $wgVectorUseIconWatch ) {
+                                       $class = 'icon ';
+                                       $place = 'views';
                                } else {
-                                       // Adds unwatch view link
-                                       $links['views']['unwatch'] = array(
-                                               'class' =>
-                                                       ($action == 'unwatch' or $action == 'watch') ?
-                                                               'selected' : false,
-                                               'text' => wfMsg( 'unwatch' ),
-                                               'img' => "{$wgStylePath}/vector/images/watch_on.gif",
-                                               'href' => $this->mTitle->getLocalUrl( 'action=unwatch' )
-                                       );
+                                       $class = '';
+                                       $place = 'actions';
                                }
+                               $mode = $this->mTitle->userIsWatching() ? 'unwatch' : 'watch';
+                               $links[$place][$mode] = array(
+                                       'class' => $class . ( ( $action == 'watch' || $action == 'unwatch' ) ? ' selected' : false ),
+                                       'text' => wfMsg( $mode ), // uses 'watch' or 'unwatch' message
+                                       'href' => $this->mTitle->getLocalUrl( 'action=' . $mode )
+                               );
                        }
-
                        // This is instead of SkinTemplateTabs - which uses a flat array
                        wfRunHooks( 'SkinTemplateNavigation', array( &$this, &$links ) );
 
index ff9d785..f3211ed 100644 (file)
@@ -28,15 +28,10 @@ wgAjaxWatch.setLinkText = function( newText ) {
        if( wgAjaxWatch.iconMode ) {
                for ( i = 0; i < wgAjaxWatch.watchLinks.length; i++ ) {
                        wgAjaxWatch.watchLinks[i].firstChild.alt = newText;
-                       if( newText == wgAjaxWatch.watchingMsg || newText == wgAjaxWatch.unwatchingMsg ) {
-                               wgAjaxWatch.watchLinks[i].firstChild.src = wgAjaxWatch.imgBasePath
-                                       + "/common/images/spinner.gif";
-                       } else if( newText==wgAjaxWatch.watchMsg ) {
-                               wgAjaxWatch.watchLinks[i].firstChild.src = wgAjaxWatch.imgBasePath
-                                       + "/vector/images/watch_off.gif";
-                       } else if( newText==wgAjaxWatch.unwatchMsg ) {
-                               wgAjaxWatch.watchLinks[i].firstChild.src = wgAjaxWatch.imgBasePath
-                                       + "/vector/images/watch_on.gif";
+                       if ( newText == wgAjaxWatch.watchingMsg || newText == wgAjaxWatch.unwatchingMsg ) {
+                               wgAjaxWatch.watchLinks[i].className += ' loading';
+                       } else if ( newText == wgAjaxWatch.watchMsg || newText == wgAjaxWatch.unwatchMsg ) {
+                               wgAjaxWatch.watchLinks[i].className = wgAjaxWatch.watchLinks[i].className.replace( /loading/i, '' );
                        }
                }
        } else {
@@ -152,29 +147,11 @@ wgAjaxWatch.onLoad = function() {
                }
        }
        
-       // If we're using the icon, add rollover affects
-       try {
-               if( el1.firstChild.firstChild.tagName.match( /img/i ) ) {
-                       wgAjaxWatch.iconMode = true;
-                       wgAjaxWatch.imgBasePath = el1.firstChild.firstChild.src
-                               .replace( /\/vector\/images\/watch_(off|on).gif/, "" );
-                       el1.firstChild.onmouseover = function( e ) {
-                               if ( !wgAjaxWatch.inprogress )
-                                       this.firstChild.src = wgAjaxWatch.imgBasePath
-                                               + "/vector/images/watch_over.gif";
-                       }
-                       el1.firstChild.onmouseout = function( e ) {
-                               if ( !wgAjaxWatch.inprogress )
-                                       this.firstChild.src = wgAjaxWatch.imgBasePath
-                                               + "/vector/images/watch_" + ( wgAjaxWatch.watching ?
-                                                       "on.gif" : "off.gif" );
-                       }
-               }
-       } catch( e ) {
-               // not using the icon 
+       // Detect if the watch/unwatch feature is in icon mode
+       if ( el1.className.match( /icon/i ) ) {
+               wgAjaxWatch.iconMode = true;
        }
-
-
+       
        // The id can be either for the parent (Monobook-based) or the element
        // itself (non-Monobook)
        wgAjaxWatch.watchLinks.push( el1.tagName.toLowerCase() == "a"
diff --git a/skins/vector/images/watch-icon-loading.gif b/skins/vector/images/watch-icon-loading.gif
new file mode 100644 (file)
index 0000000..618c308
Binary files /dev/null and b/skins/vector/images/watch-icon-loading.gif differ
diff --git a/skins/vector/images/watch-icons.png b/skins/vector/images/watch-icons.png
new file mode 100644 (file)
index 0000000..54b2c79
Binary files /dev/null and b/skins/vector/images/watch-icons.png differ
diff --git a/skins/vector/images/watch_off.gif b/skins/vector/images/watch_off.gif
deleted file mode 100644 (file)
index a17f626..0000000
Binary files a/skins/vector/images/watch_off.gif and /dev/null differ
diff --git a/skins/vector/images/watch_on.gif b/skins/vector/images/watch_on.gif
deleted file mode 100644 (file)
index a13a49a..0000000
Binary files a/skins/vector/images/watch_on.gif and /dev/null differ
diff --git a/skins/vector/images/watch_over.gif b/skins/vector/images/watch_over.gif
deleted file mode 100644 (file)
index efc5ea8..0000000
Binary files a/skins/vector/images/watch_over.gif and /dev/null differ
index a450c65..8417870 100644 (file)
@@ -1080,22 +1080,41 @@ h1, h2, h3, h4, h5, h6 {
        border-color: #8d8d8d;
 }
 
-
 /* Watch/Unwatch Icon Styling */
-#ca-unwatch,
-#ca-watch {
-       background-image: none;
-       background-color: #ffffff;
+#ca-unwatch.icon,
+#ca-watch.icon {
 }
-#ca-unwatch a,
-#ca-watch a {
+#ca-unwatch.icon a,
+#ca-watch.icon a {
+       margin: 0;
+       padding: 0;
        outline: none;
-}
-#ca-unwatch a img,
-#ca-watch a img {
-       padding-top: 1.35em;
        display: block;
-       font-size: 0.8em;
-       max-height: 14px;
-       max-width: 14px;
+       width: 26px;
+       height: 2.5em;
+}
+#ca-unwatch.icon a {
+       background-image: url(images/watch-icons.png);
+       background-position: 5px 60%;
+}
+#ca-watch.icon a {
+       background-image: url(images/watch-icons.png);
+       background-position: -43px 60%;
+}
+#ca-unwatch.icon a:hover {
+       background-image: url(images/watch-icons.png);
+       background-position: -19px 60%;
+}
+#ca-watch.icon a:hover {
+       background-image: url(images/watch-icons.png);
+       background-position: -67px 60%;
+}
+#ca-unwatch.icon a.loading,
+#ca-watch.icon a.loading {
+       background-image: url(images/watch-icon-loading.gif);
+       background-position: center 60%;
+}
+#ca-unwatch.icon a span,
+#ca-watch.icon a span {
+       display: none;
 }
\ No newline at end of file
index 5594f6e..7647468 100644 (file)
@@ -1042,6 +1042,7 @@ h3, h4, h5 {
        position: relative;
        width: 100%;
 }
+
 #mw-js-message {
        font-size: 0.8em;
 }
@@ -1050,6 +1051,7 @@ div#bodyContent {
 }
 
 
+
 /* Babaco color scheme */
 /* Still working on this. Needs incorporated above once it's closer to final */
 body {
@@ -1078,22 +1080,41 @@ h1, h2, h3, h4, h5, h6 {
        border-color: #8d8d8d;
 }
 
-
 /* Watch/Unwatch Icon Styling */
-#ca-unwatch,
-#ca-watch {
-       background-image: none;
-       background-color: #ffffff;
+#ca-unwatch.icon,
+#ca-watch.icon {
 }
-#ca-unwatch a,
-#ca-watch a {
+#ca-unwatch.icon a,
+#ca-watch.icon a {
+       margin: 0;
+       padding: 0;
        outline: none;
-}
-#ca-unwatch a img,
-#ca-watch a img {
-       padding-top: 1.35em;
        display: block;
-       font-size: 0.8em;
-       max-height: 14px;
-       max-width: 14px;
+       width: 26px;
+       height: 2.5em;
+}
+#ca-unwatch.icon a {
+       background-image: url(images/watch-icons.png);
+       background-position: 5px 60%;
+}
+#ca-watch.icon a {
+       background-image: url(images/watch-icons.png);
+       background-position: -43px 60%;
+}
+#ca-unwatch.icon a:hover {
+       background-image: url(images/watch-icons.png);
+       background-position: -19px 60%;
+}
+#ca-watch.icon a:hover {
+       background-image: url(images/watch-icons.png);
+       background-position: -67px 60%;
+}
+#ca-unwatch.icon a.loading,
+#ca-watch.icon a.loading {
+       background-image: url(images/watch-icon-loading.gif);
+       background-position: center 60%;
+}
+#ca-unwatch.icon a span,
+#ca-watch.icon a span {
+       display: none;
 }
\ No newline at end of file