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.
$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
*/
*/
function buildNavigationUrls() {
global $wgContLang, $wgLang, $wgOut, $wgUser, $wgRequest, $wgArticle, $wgStylePath;
- global $wgDisableLangConversion;
+ global $wgDisableLangConversion, $wgVectorUseIconWatch;
wfProfileIn( __METHOD__ );
}
}
wfProfileOut( __METHOD__ . '-live' );
-
/**
* The following actions use messages which, if made particular to
* the Vector skin, would break the Ajax code which makes this
* 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 ) );
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 {
}
}
- // 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"
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
position: relative;
width: 100%;
}
+
#mw-js-message {
font-size: 0.8em;
}
}
+
/* Babaco color scheme */
/* Still working on this. Needs incorporated above once it's closer to final */
body {
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