Moving watch/unwatch action out of the drop down

diff --git a/skins/Vector.php b/skins/Vector.php
index f65d29a..bd863f8 100644 (file)
--- a/skins/Vector.php
+++ b/skins/Vector.php
@@ -59,7 +59,7 @@ class SkinVector extends SkinTemplate {
         * @private
         */
        function buildNavigationUrls() {
-               global $wgContLang, $wgLang, $wgOut, $wgUser, $wgRequest, $wgArticle;
+               global $wgContLang, $wgLang, $wgOut, $wgUser, $wgRequest, $wgArticle, $wgStylePath;
                global $wgDisableLangConversion;
 
                wfProfileIn( __METHOD__ );
@@ -285,21 +285,23 @@ class SkinVector extends SkinTemplate {
                        if( $this->loggedin ) {
                                // Checks if the user is watching this page
                                if( !$this->mTitle->userIsWatching() ) {
-                                       // Adds watch action link
-                                       $links['actions']['watch'] = array(
+                                       // 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' )
                                        );
                                } else {
-                                       // Adds unwatch action link
-                                       $links['actions']['unwatch'] = array(
+                                       // 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' )
                                        );
                                }
@@ -722,7 +724,7 @@ class VectorTemplate extends QuickTemplate {
        <h5><?php $this->msg('views') ?></h5>
        <ul <?php $this->html('userlangattributes') ?>>
                <?php foreach ($this->data['view_urls'] as $key => $link ): ?>
-                       <li<?php echo $link['attributes'] ?>><a href="<?php echo htmlspecialchars( $link['href'] ) ?>" <?php echo $link['key'] ?>><span><?php echo htmlspecialchars( $link['text'] ) ?></span></a></li>
+                       <li<?php echo $link['attributes'] ?>><a href="<?php echo htmlspecialchars( $link['href'] ) ?>" <?php echo $link['key'] ?>><?php echo (array_key_exists('img',$link) ?  '<img src="'.$link['img'].'" alt="'.$link['text'].'" />' : '<span>'.htmlspecialchars( $link['text'] ).'</span>') ?></a></li>
                <?php endforeach; ?>
        </ul>
 </div>

diff --git a/skins/common/ajaxwatch.js b/skins/common/ajaxwatch.js
index c8d90b8..2127cbf 100644 (file)
--- a/skins/common/ajaxwatch.js
+++ b/skins/common/ajaxwatch.js
@@ -21,11 +21,26 @@ wgAjaxWatch.watching = false; // currently watching page
 wgAjaxWatch.inprogress = false; // ajax request in progress
 wgAjaxWatch.timeoutID = null; // see wgAjaxWatch.ajaxCall
 wgAjaxWatch.watchLinks = []; // "watch"/"unwatch" links
+wgAjaxWatch.iconMode = false; // new icon driven functionality 
+wgAjaxWatch.imgBasePath = ""; // base img path derived from icons on load
 
 wgAjaxWatch.setLinkText = function(newText) {
-       for (i = 0; i < wgAjaxWatch.watchLinks.length; i++) {
-               changeText(wgAjaxWatch.watchLinks[i], 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+"/skins/common/images/spinner.gif";
+               }else if(newText==wgAjaxWatch.watchMsg){
+                 wgAjaxWatch.watchLinks[i].firstChild.src = wgAjaxWatch.imgBasePath+"/skins/vector/images/watch_off.gif";
+               }else if(newText==wgAjaxWatch.unwatchMsg){
+                 wgAjaxWatch.watchLinks[i].firstChild.src = wgAjaxWatch.imgBasePath+"/skins/vector/images/watch_on.gif";
+               }
+       }
+  }else{
+    for (i = 0; i < wgAjaxWatch.watchLinks.length; i++) {
+               changeText(wgAjaxWatch.watchLinks[i], newText);
+       }
+  }
 };
 
 wgAjaxWatch.setLinkID = function(newId) {
@@ -112,6 +127,7 @@ wgAjaxWatch.processResult = function(request) {
 wgAjaxWatch.onLoad = function() {
        // This document structure hardcoding sucks.  We should make a class and
        // toss all this out the window.
+       
        var el1 = document.getElementById("ca-unwatch");
        var el2 = null;
        if (!el1) {
@@ -132,6 +148,23 @@ wgAjaxWatch.onLoad = function() {
                        return;
                }
        }
+       
+       // 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(/\/skins\/vector\/images\/watch_(off|on).gif/, "");
+         el1.firstChild.onmouseover = function(e){
+           this.firstChild.src = (wgAjaxWatch.watching ? this.firstChild.src.replace(/_on/, "_off") : this.firstChild.src.replace(/_off/, "_on"));
+         }
+         el1.firstChild.onmouseout = function(e){
+           this.firstChild.src = (wgAjaxWatch.watching ? this.firstChild.src.replace(/_off/, "_on") : this.firstChild.src.replace(/_on/, "_off"));
+         }
+       }
+       }catch(e){
+         // not using the icon 
+       }
+
 
        // The id can be either for the parent (Monobook-based) or the element
        // itself (non-Monobook)

diff --git a/skins/vector/images/watch_off.gif b/skins/vector/images/watch_off.gif
new file mode 100644 (file)
index 0000000..a17f626
Binary files /dev/null and b/skins/vector/images/watch_off.gif differ

diff --git a/skins/vector/images/watch_on.gif b/skins/vector/images/watch_on.gif
new file mode 100644 (file)
index 0000000..6c1c587
Binary files /dev/null and b/skins/vector/images/watch_on.gif differ

diff --git a/skins/vector/main-ltr.css b/skins/vector/main-ltr.css
index 411ff76..2b27cfd 100644 (file)
--- a/skins/vector/main-ltr.css
+++ b/skins/vector/main-ltr.css
@@ -1042,6 +1042,7 @@ h3, h4, h5 {
        position: relative;
        width: 100%;
 }
+
 #mw-js-message {
        font-size: 0.8em;
 }
@@ -1049,3 +1050,52 @@ div#bodyContent {
        line-height: 1.5em;
 }
 
+
+
+/* Babaco color scheme */
+/* Still working on this. Needs incorporated above once it's closer to final */
+body{
+  background-color:#f9f9f9;
+  color:#000000;
+}
+a{
+  color:#003cb3;
+}
+a.new{
+  color:#990000;
+}
+
+a:visited,
+div.vectorTabs li.selected a:visited div.vectorTabs li.selected a:visited span {
+  color:#260e9c;
+}
+
+html .thumbimage,
+#toc, .toc, .mw-warning, div.thumbinner{
+  border-color:#c0c0c0;
+  background-color:#f0f0f0;
+}
+
+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 a,
+#ca-watch a{
+  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;
+}
\ No newline at end of file