tpl changes

templates/partials/topic/watch.tpl

@@ -1,9 +1,15 @@
 <!-- IF config.loggedIn -->
-<button component="topic/follow" class="btn btn-info <!-- IF isFollowing -->hidden<!-- ENDIF isFollowing -->">
-	<span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:watch]]</span> <i class="fa fa-eye"></i>
-</button>
-
-<button component="topic/unfollow" class="btn btn-warning <!-- IF !isFollowing -->hidden<!-- ENDIF !isFollowing -->">
-	<span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:unwatch]]</span> <i class="fa fa-eye-slash"></i>
-</button>
+<div class="btn-group topic-watch-dropdown" component="topic/watch">
+	<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button"><span class="visible-sm-inline visible-md-inline visible-lg-inline">
+		<span component="topic/following/menu" <!-- IF !isFollowing -->class="hidden"<!-- ENDIF !isFollowing -->><i class="fa fa-fw fa-bell"></i>[[topic:following]]</span>
+		<span component="topic/reading/menu" <!-- IF !isReading -->class="hidden"<!-- ENDIF !isReading -->><i class="fa fa-fw fa-eye"></i>[[topic:reading]]</span>
+		<span component="topic/ignoring/menu" <!-- IF !isIgnoring -->class="hidden"<!-- ENDIF !isIgnoring -->><i class="fa fa-fw fa-eye-slash"></i>[[topic:ignoring]]</span>
+	</span>
+	<span class="caret"></span></button>
+	<ul class="dropdown-menu dropdown-menu-right">
+		<li><a href="#" component="topic/following"><i component="topic/following/check" class="fa fa-fw <!-- IF isFollowing -->fa-check<!-- ENDIF isFollowing -->"></i><i class="fa fa-fw fa-bell"></i> [[topic:following]]<p class="help-text"><small>[[topic:following.description]]</small></p></a></li>
+		<li><a href="#" component="topic/reading"><i component="topic/reading/check" class="fa fa-fw <!-- IF isReading -->fa-check<!-- ENDIF isReading -->"></i><i class="fa fa-fw fa-eye"></i> [[topic:reading]]<p class="help-text"><small>[[topic:reading.description]]</small></p></a></li>
+		<li><a href="#" component="topic/ignoring"><i component="topic/ignoring/check" class="fa fa-fw <!-- IF isIgnoring -->fa-check<!-- ENDIF isIgnoring -->"></i><i class="fa fa-fw fa-eye-slash"></i> [[topic:ignoring]]<p class="help-text"><small>[[topic:ignoring.description]]</small></p></a></li>
+	</ul>
+</div>
 <!-- ENDIF config.loggedIn -->