Merge pull request #278 from NodeBB/topic-watching

Topic watching

templates/category.tpl

@@ -15,8 +15,8 @@
 
 		<span class="pull-right">
 			<!-- IMPORT partials/category/watch.tpl -->
-			<!-- IMPORT partials/category/tools.tpl -->
 			<!-- IMPORT partials/category/sort.tpl -->
+			<!-- IMPORT partials/category/tools.tpl -->
 		</span>
 	</div>
 

templates/partials/category/watch.tpl

@@ -1,10 +1,18 @@
-<!-- IF loggedIn -->
+<!-- IF config.loggedIn -->
-<button type="button" class="btn btn-default btn-success watch <!-- IF !isIgnored -->hidden<!-- ENDIF !isIgnored -->">
+<div class="btn-group topic-watch-dropdown" component="topic/watch">
-	<i class="fa fa-eye"></i>
+
-	<span class="visible-sm-inline visible-md-inline visible-lg-inline">[[category:watch]]</span>
+	<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
-</button>
+
-<button type="button" class="btn btn-default btn-warning ignore <!-- IF isIgnored -->hidden<!-- ENDIF isIgnored -->">
+		<span component="category/watching/menu" <!-- IF isIgnored -->class="hidden"<!-- ENDIF isIgnored -->><i class="fa fa-fw fa-eye"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline">[[category:watching]]</span></span>
-	<i class="fa fa-eye-slash"></i>
+
-	<span class="visible-sm-inline visible-md-inline visible-lg-inline">[[category:ignore]]</span>
+		<span component="category/ignoring/menu" <!-- IF !isIgnored -->class="hidden"<!-- ENDIF !isIgnored -->><i class="fa fa-fw fa-eye-slash"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline">[[category:ignoring]]</span></span>
-</button>
+
-<!-- ENDIF loggedIn -->
+		<span class="caret"></span>
+	</button>
+
+	<ul class="dropdown-menu dropdown-menu-right">
+		<li><a href="#" component="category/watching"><i component="category/watching/check" class="fa fa-fw <!-- IF !isIgnored -->fa-check<!-- ENDIF !isIgnored -->"></i><i class="fa fa-fw fa-eye"></i> [[category:watching]]<p class="help-text"><small>[[category:watching.description]]</small></p></a></li>
+		<li><a href="#" component="category/ignoring"><i component="category/ignoring/check" class="fa fa-fw <!-- IF isIgnored -->fa-check<!-- ENDIF isIgnored -->"></i><i class="fa fa-fw fa-eye-slash"></i> [[category:ignoring]]<p class="help-text"><small>[[category:ignoring.description]]</small></p></a></li>
+	</ul>
+</div>
+<!-- ENDIF config.loggedIn -->

templates/partials/post_bar.tpl

@@ -16,14 +16,14 @@
 
 		<!-- IMPORT partials/topic/reply-button.tpl -->
 
-		<!-- IMPORT partials/topic/watch.tpl -->
-
 		<!-- IF loggedIn -->
 		<button component="topic/mark-unread" class="btn btn-default">
-			<span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:mark_unread]]</span> <i class="fa fa-inbox"></i>
+			<i class="fa fa-inbox"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline"> [[topic:mark_unread]]</span>
 		</button>
 		<!-- ENDIF loggedIn -->
 
+		<!-- IMPORT partials/topic/watch.tpl -->
+
 		<!-- IMPORT partials/topic/sort.tpl -->
 
 		<!-- IMPORT partials/thread_tools.tpl -->

templates/partials/topic/watch.tpl

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