Change watcher icon to heart

LICENSE

@@ -1,5 +1,5 @@
 /*
-* 4chan X - Version 1.2.2 - 2013-05-13
+* 4chan X - Version 1.2.2 - 2013-05-14
 *
 * Licensed under the MIT license.
 * https://github.com/seaweedchan/4chan-x/blob/master/LICENSE

src/General/css/burichan.css

@@ -50,3 +50,9 @@
 :root.burichan .focused.entry {
   background: rgba(255, 255, 255, .33);
 }
+
+/* Watcher Favicon */
+:root.burichan .watch-thread-link
+{
+  background-image: url("data:image/svg+xml,<svg viewBox='0 0 26 26' preserveAspectRatio='true' xmlns='http://www.w3.org/2000/svg'><path fill='rgb(0,0,0)' d='M24.132,7.971c-2.203-2.205-5.916-2.098-8.25,0.235L15.5,8.588l-0.382-0.382c-2.334-2.333-6.047-2.44-8.25-0.235c-2.204,2.203-2.098,5.916,0.235,8.249l8.396,8.396l8.396-8.396C26.229,13.887,26.336,10.174,24.132,7.971z'/></svg>");
+}

src/General/css/futaba.css

@@ -50,3 +50,9 @@
 :root.futaba .focused.entry {
   background: rgba(255, 255, 255, .33);
 }
+
+/* Watcher Favicon */
+:root.futaba .watch-thread-link
+{
+  background-image: url("data:image/svg+xml,<svg viewBox='0 0 26 26' preserveAspectRatio='true' xmlns='http://www.w3.org/2000/svg'><path fill='rgb(128,0,0)' d='M24.132,7.971c-2.203-2.205-5.916-2.098-8.25,0.235L15.5,8.588l-0.382-0.382c-2.334-2.333-6.047-2.44-8.25-0.235c-2.204,2.203-2.098,5.916,0.235,8.249l8.396,8.396l8.396-8.396C26.229,13.887,26.336,10.174,24.132,7.971z'/></svg>");
+}

src/General/css/photon.css

@@ -50,3 +50,9 @@
 :root.photon .focused.entry {
   background: rgba(255, 255, 255, .33);
 }
+
+/* Watcher Favicon */
+:root.photon .watch-thread-link
+{
+  background-image: url("data:image/svg+xml,<svg viewBox='0 0 26 26' preserveAspectRatio='true' xmlns='http://www.w3.org/2000/svg'><path fill='rgb(51,51,51)' d='M24.132,7.971c-2.203-2.205-5.916-2.098-8.25,0.235L15.5,8.588l-0.382-0.382c-2.334-2.333-6.047-2.44-8.25-0.235c-2.204,2.203-2.098,5.916,0.235,8.249l8.396,8.396l8.396-8.396C26.229,13.887,26.336,10.174,24.132,7.971z'/></svg>");
+}

src/General/css/style.css

@@ -98,6 +98,9 @@ a {
   z-index: 30;
 }
 #watcher {
+  z-index: 8;
+}
+:root.fixed-watcher #watcher {
   z-index: 20;
 }
 .fixed #header-bar {
@@ -492,6 +495,19 @@ a.hide-announcement {
   top: 0px;
   padding: 0px 4px;
 }
+.watch-thread-link {
+  padding-top: 18px;
+  width: 18px;
+  height: 0px;
+  display: inline-block;
+  background-repeat: no-repeat;
+  opacity: 0.2;
+  position: relative;
+  top: 1px;
+}
+.watch-thread-link.watched {
+  opacity: 1;
+}
 
 /* Thread Stats */
 #thread-stats {
@@ -1023,4 +1039,4 @@ a:only-of-type > .remove {
 .linkify.InstallGentoo {
   background: transparent url('data:image/png;base64,<%= grunt.file.read("src/General/img/links/installgentoo.png",    {encoding: "base64"}) %>') center left no-repeat!important;
   padding-left: 18px;
-}
+}

src/General/css/tomorrow.css

@@ -56,3 +56,9 @@
 :root.tomorrow .focused.entry {
   background: rgba(0, 0, 0, .33);
 }
+
+/* Watcher Favicon */
+:root.tomorrow .watch-thread-link
+{
+  background-image: url("data:image/svg+xml,<svg viewBox='0 0 26 26' preserveAspectRatio='true' xmlns='http://www.w3.org/2000/svg'><path fill='rgb(197,200,198)' d='M24.132,7.971c-2.203-2.205-5.916-2.098-8.25,0.235L15.5,8.588l-0.382-0.382c-2.334-2.333-6.047-2.44-8.25-0.235c-2.204,2.203-2.098,5.916,0.235,8.249l8.396,8.396l8.396-8.396C26.229,13.887,26.336,10.174,24.132,7.971z'/></svg>");
+}

src/General/css/yotsuba-b.css

@@ -50,3 +50,9 @@
 :root.yotsuba-b .focused.entry {
   background: rgba(255, 255, 255, .33);
 }
+
+/* Watcher Favicon */
+:root.yotsuba-b .watch-thread-link
+{
+  background-image: url("data:image/svg+xml,<svg viewBox='0 0 26 26' preserveAspectRatio='true' xmlns='http://www.w3.org/2000/svg'><path fill='rgb(0,0,0)' d='M24.132,7.971c-2.203-2.205-5.916-2.098-8.25,0.235L15.5,8.588l-0.382-0.382c-2.334-2.333-6.047-2.44-8.25-0.235c-2.204,2.203-2.098,5.916,0.235,8.249l8.396,8.396l8.396-8.396C26.229,13.887,26.336,10.174,24.132,7.971z'/></svg>");
+}

src/General/css/yotsuba.css

@@ -50,3 +50,9 @@
 :root.yotsuba .focused.entry {
   background: rgba(255, 255, 255, .33);
 }
+
+/* Watcher Favicon */
+:root.yotsuba .watch-thread-link
+{
+  background-image: url("data:image/svg+xml,<svg viewBox='0 0 26 26' preserveAspectRatio='true' xmlns='http://www.w3.org/2000/svg'><path fill='rgb(128,0,0)' d='M24.132,7.971c-2.203-2.205-5.916-2.098-8.25,0.235L15.5,8.588l-0.382-0.382c-2.334-2.333-6.047-2.44-8.25-0.235c-2.204,2.203-2.098,5.916,0.235,8.249l8.396,8.396l8.396-8.396C26.229,13.887,26.336,10.174,24.132,7.971z'/></svg>");
+}

src/Monitoring/Favicon.coffee

@@ -44,6 +44,5 @@ Favicon =
     else
       Favicon.unread  = Favicon.unreadNSFW
       Favicon.unreadY = Favicon.unreadNSFWY
-
+      
-  empty: 'data:image/gif;base64,<%= grunt.file.read("src/General/img/favicons/empty.gif", {encoding: "base64"}) %>'
   dead:  'data:image/gif;base64,<%= grunt.file.read("src/General/img/favicons/dead.gif",  {encoding: "base64"}) %>'

src/Monitoring/ThreadWatcher.coffee

@@ -5,7 +5,7 @@ ThreadWatcher =
       textContent: 'Watcher'
       id:   'watcher-link'
       href: 'javascript:;'
-      className: "#{if Conf['Persistent Thread Watcher'] then '' else 'disabled'}"
+      className: 'disabled'
 
     @dialog = UI.dialog 'watcher', 'top: 50px; left: 0px;',
       '<div class=move>Thread Watcher<a class=close href=javascript:;>×</a></div>'
@@ -30,8 +30,9 @@ ThreadWatcher =
       cb:   @node
 
   node: ->
-    favicon = $.el 'img',
+    favicon = $.el 'a',
-      className: 'favicon'
+      className: 'watch-thread-link'
+      href: 'javascript:;'
     $.on favicon, 'click', ThreadWatcher.cb.toggle
     $.before $('input', @OP.nodes.post), favicon
     return if g.VIEW isnt 'thread'
@@ -65,11 +66,11 @@ ThreadWatcher =
 
     watched = watched[g.BOARD] or {}
     for ID, thread of g.BOARD.threads
-      favicon = $ '.favicon', thread.OP.nodes.post
+      favicon = $ '.watch-thread-link', thread.OP.nodes.post
-      favicon.src = if ID of watched
+      if ID of watched
-        Favicon.default
+        $.addClass favicon, 'watched'
       else
-        Favicon.empty
+        $.rmClass favicon, 'watched'
     return
 
   toggleWatcher: ->
@@ -91,7 +92,7 @@ ThreadWatcher =
         ThreadWatcher.watch board.threads[threadID]
 
   toggle: (thread) ->
-    if $('.favicon', thread.OP.nodes.post).src is Favicon.empty
+    unless $.hasClass $('.watch-thread-link', thread.OP.nodes.post), 'watched'
       ThreadWatcher.watch thread
     else
       ThreadWatcher.unwatch thread.board, thread.ID