From: Trevor Parscal Date: Mon, 28 Sep 2009 22:25:42 +0000 (+0000) Subject: Refactored the watch/unwatch icon for Vector. X-Git-Tag: 1.31.0-rc.0~39484 X-Git-Url: http://git.cyclocoop.org/%7B%24www_url%7Dadmin/compta/operations/recherche.php?a=commitdiff_plain;h=e013cc51ecffbcc7c29b7939a967c63e943d1e8c;p=lhc%2Fweb%2Fwiklou.git 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. --- diff --git a/includes/DefaultSettings.php b/includes/DefaultSettings.php index 87edd1be9a..54d10d414b 100644 --- a/includes/DefaultSettings.php +++ b/includes/DefaultSettings.php @@ -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 */ diff --git a/skins/Vector.php b/skins/Vector.php index bd863f84ca..e18230e4b0 100644 --- a/skins/Vector.php +++ b/skins/Vector.php @@ -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 ) ); diff --git a/skins/common/ajaxwatch.js b/skins/common/ajaxwatch.js index ff9d7851aa..f3211edd81 100644 --- a/skins/common/ajaxwatch.js +++ b/skins/common/ajaxwatch.js @@ -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 index 0000000000..618c308e0b 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 index 0000000000..54b2c793f9 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 index a17f62629f..0000000000 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 index a13a49a6c8..0000000000 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 index efc5ea8bf9..0000000000 Binary files a/skins/vector/images/watch_over.gif and /dev/null differ diff --git a/skins/vector/main-ltr.css b/skins/vector/main-ltr.css index a450c65541..841787055e 100644 --- a/skins/vector/main-ltr.css +++ b/skins/vector/main-ltr.css @@ -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 diff --git a/skins/vector/main-rtl.css b/skins/vector/main-rtl.css index 5594f6ef7c..7647468965 100644 --- a/skins/vector/main-rtl.css +++ b/skins/vector/main-rtl.css @@ -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