From e013cc51ecffbcc7c29b7939a967c63e943d1e8c Mon Sep 17 00:00:00 2001 From: Trevor Parscal Date: Mon, 28 Sep 2009 22:25:42 +0000 Subject: [PATCH] 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. --- includes/DefaultSettings.php | 9 +++- skins/Vector.php | 37 ++++++---------- skins/common/ajaxwatch.js | 39 ++++------------ skins/vector/images/watch-icon-loading.gif | Bin 0 -> 840 bytes skins/vector/images/watch-icons.png | Bin 0 -> 1745 bytes skins/vector/images/watch_off.gif | Bin 550 -> 0 bytes skins/vector/images/watch_on.gif | Bin 331 -> 0 bytes skins/vector/images/watch_over.gif | Bin 336 -> 0 bytes skins/vector/main-ltr.css | 47 ++++++++++++++------ skins/vector/main-rtl.css | 49 +++++++++++++++------ 10 files changed, 97 insertions(+), 84 deletions(-) create mode 100644 skins/vector/images/watch-icon-loading.gif create mode 100644 skins/vector/images/watch-icons.png delete mode 100644 skins/vector/images/watch_off.gif delete mode 100644 skins/vector/images/watch_on.gif delete mode 100644 skins/vector/images/watch_over.gif 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 0000000000000000000000000000000000000000..618c308e0b0a95912a39e2e303523efc2c08facc GIT binary patch literal 840 zcmZ?wbhEHb6krfwI3mw*>(;GDj~;#a@Zr;^PcL4)c=P7XwQJXY{P^+h+qZM)&fU3l z=gO5U@7}$8@ZiD4ix*$LdiD43-+TA&{rU6f_wV2T{{6dr`SOh$H-7#4b@S%U=g*&i z{rdIk)2Gj#J^S+I%YQIX{Lk&@8WQa67~pE8XTZ$Jz`&sRlZBI+L7qVe$Obw>fPsNE z`+<62e85DFsKTgOd2^@lSn;^>;6txlk7dj~nl4Z5(3$4pRlQAW4ZiH*%6c z@3c^fT;pia^ykndu9+rczA`}gmblZnN(Os1=s}{nNq|w zCHeSRSY!oxIw@myPb1JhPs*p7jBtY&N7wZtzf34%?Tcs%#2!w z6D!td&JtkY(F_tW$Yp5gba{R8jSJiHNpBh%_!coOyRakRM#Du%p+J#E>`ZdvjFsxb ze1U@8f@}+~R)fB7AJji#2#-{lHFQMN2r957g@f0(_HK z)wMCK+3-+Mnx+5lGsi|J7HOZvlEh4#6NlQ2GhFPZDaBPY$HC1AwP%_Pmnz#yh2!p6#1q9nyC Sqs=DDZmubiyjWh5!5RSd-6zoi literal 0 HcmV?d00001 diff --git a/skins/vector/images/watch-icons.png b/skins/vector/images/watch-icons.png new file mode 100644 index 0000000000000000000000000000000000000000..54b2c793f9c1538dae3764414e5d0e9df1355039 GIT binary patch literal 1745 zcmd^A`BRez6pTl`1s$~&rz)PMjv~~Hij`ue77xk@-mNzpw1@~At%wK4fK-vA89a+8 zm=Kg8R|0_~Bq5Lk2m}%cfk;RQgpivgU%uDO^v~#FJD3y|e#uIhir7%!*$b_Q&^3!;l#`rl`-rm&6qO=;_EH&gdTG~dSzb!*F zjG9cNLiTlGQ%1EQ7hi7?%7(gl=U+&n#te+2Q!nM<(32n1MT}xxJvHWG3)(=9eN|L$d^K6TRUR_XlejgJByl7&;v9T+%M-6rSN$` zlTA~Ztz(&G%nNleY;>q>pwsJfsnwKjxXgx^eEDNJu=F4mGg|oN8VRn1*Qb<=)9X#d zR>%+mjsqei;n73Ouo(>6$`hXgi=>9J0y!{I~{nLrT0 zn+~XZfla-_EKNh*Zkx?&8r54Z=06y~D1S4g z)1>mjF=o>a^dX4rqXJ5m&`^)Fq>JeImBisfv#i7s4YFC zg(Bq@nlX>w3*Z#8;`%g3aQC|qlv$j}@9$<%k`T9BP>E%h#L1109$7QHCJ`}G#cf>@ z8Cfioi)17~#KhLY?7Gp~(&L4+8c{Wt)FI7kfs~@!EYC#>v3^+ltl3#bi7TYHirYIB z4oIWWq=x=By}qlrua3jzH8!=Y%;hTgP5LlXqH~(K4wE4J70Kp6UQkMmYO-~ZB&1>g zEYqgYG+YgmQCfRT0Q^2do!Y_rl*t`*JSb)9hqRiZ;o*^yDv|b6J+I$_3<5~&6Z0sn zuEu2bK$UjbEE;s=G#H*Ws-JWKAl-GPnb{v`P1RTq1IxDnfP+_8oLts2=IO-cqR2DN>1FOb#L++mK?7Ox?8GS+Vdbt(O-+rzHK? z>B%=1k)0WWbiYaKP*=wtVQd1Rzc+A~7Gtdh`uL~LeLdr40jY}*iz{QT24(!u_&MH@ z(dvncPN!jU)IagbQ}0)*xf}icf7&YbCMvMH%w$R6Z(S4iivvE0j()yW7vg(-K=RQZ zNO-SGyUL;O@?M^DW0RrEpbkhlfE$S^zrFcwc^Pfe%#odmvvglfEVwCIQ&y&b{%w$Y z$M>n}mXPJ6`^LTdc-)&>=@+~k$qrbz_`sn*i-`NNg+%+j*_FwEUOBTi{g)cLv?Og>#OQR6Ei|jAc!1U3 zm-=%auDY;twa=*of7=g5Ox)v+oBZf%-h$xuRg^6=0(;+XCb1T5OsiZpnKTwvH9t7` z!>^6CYeA9M?zvlBw^w%Nud3cOU3)mc50?|kQOEirG%PP$8syfWa&4NuueGjHUK_4viDMsC-f_4y{idxL2u}609W!P5sjmMWaocaURO%OPt?<=ZLv^<& z+0V1TE7-WxUwA3?v1b3>)#zKFGe^x{-8vssG6genK8AAn%DpB%N9*}fnDDTO?Zw-U G-}x6_gRL0= literal 0 HcmV?d00001 diff --git a/skins/vector/images/watch_off.gif b/skins/vector/images/watch_off.gif deleted file mode 100644 index a17f62629fe39e9e64db79ddfce759e97890c972..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 550 zcmZ?wbhEHbU4xj~%jsyBBYNc;d>N{bye( zgzQlb-}mOjcLwXtiLK|=Blms%_VdWa*UNW3VzuA$?&J51x8JinZ2kQ8hkWp!=Wo6~ zeEx;mcFT*m-*jRRB)4BUeeG@C?CaZ(Js0-eQ8x7|hvU{84?dPpyK0tl=>4Z3)7Rbe zEIKh^M)$?F2cG8kU)pu@ z#mCP-j$L|Vn|UO(=Jcw)PhEFgvp3#`)t%%VQ>J&pDbX9=zvI2oG`FAHv}~`xyxBJcXX(T zn{#${u*f*rd-c1@avHM-iSg-pYBs3{FgkH_H7UC3vKv||J97C8cJQic@mbk2%J&CJ zn=$YPDX@8WvPd%61O)~PtBRgG$Kj!WIgo>q>4r74)D2T@CRQE|X9**v8w@-GY^?ku XcFYDhTuglQ&iVRr3!P(PWUvMR@8H6W diff --git a/skins/vector/images/watch_on.gif b/skins/vector/images/watch_on.gif deleted file mode 100644 index a13a49a6c8dfa4ef5b914f2573f676e4326b9c76..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 331 zcmZ?wbhEHbH^E`akorT9GUXS2r`%%7IAh#;?fcJPAv5pPZ+g7p{M)UU-hTQ1>;0FXmFph) zPQ4X0{kBZS#WiQ&bZmbrQF?*D;Jj$@1;N7exyv7Hzx-~&(U%PAXMX+q_51g4hO{#b zs6g>23s^u0M1uUpz?N}fPQVKWPq)KQ42pJ#PC41;w*2>k1+$sny6sKm(tPO6BGIzq zE@RF|kAjOI^b(vpkMk~@)1A0HD$CNsf+N4c+^nfdvNeNCz0*RAEyP$n#86;@4vVh2 YthTuki^>EUCPwxqIYuVcCPxNq0Ge5xAOHXW diff --git a/skins/vector/images/watch_over.gif b/skins/vector/images/watch_over.gif deleted file mode 100644 index efc5ea8bf94804f87b60f26eb01c4ff371a26a7a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 336 zcmV-W0k8f?Nk%w1VGaNd0M!5h7Ie@~mD@&;+0*0m6m!rFZq5m8&H`x62W!m;Y|Ws> z>7mBzu+QyUoZa&F`FXD5eX-+;xaJ#o(QT*TbgSWUs^K+;)|$fTEP>Qmo80g8`4Vx@ z9Cy)?yyvXV>{OZDO_kayf7H6w?)3NiRhis>vg3%i<(RZ_m5c?zhwKs>|zFn%qs4+Vl4MFN4)8fYbqK%ough0B6kl`uh9( z`+>9MA^8LV00000EC2ui01f~R000JUK%Y=}v(;F`z(DnsIopsm4#_xtfG z1C7w+0vHb6F3+&DL^j;CTn$(x8uN4@#_)My0eL70Gd?{%7jbet3WtX@ifKA2jy(?& iT{swB01%Zb1R*>xAUrt)AC(jZ0y2jp0tF?9K>#~S{;F31 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 -- 2.20.1