https://github.com/NodeBB/NodeBB/issues/8456

templates/partials/category-filter.tpl

@@ -1,7 +1,7 @@
 <div component="category/dropdown" class="btn-group pull-right category-dropdown-container bottom-sheet <!-- IF !categories.length -->hidden<!-- ENDIF !categories.length -->">
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-        <!-- IF selectedCategory --><span class="fa-stack" style="{function.generateCategoryBackground, selectedCategory}"><i class="fa fa-fw fa-stack-1x {selectedCategory.icon}" style="color: {selectedCategory.color};"></i></span> {selectedCategory.name}<!-- ELSE -->
+        <!-- IF selectedCategory --><span class="fa-stack" style="{function.generateCategoryBackground, selectedCategory}"><i class="fa fa-fw fa-stack-1x {selectedCategory.icon}" style="color: {selectedCategory.color};"></i></span> <span class="visible-sm-inline visible-md-inline visible-lg-inline">{selectedCategory.name}</span><!-- ELSE -->
-        [[unread:all_categories]]<!-- ENDIF selectedCategory --> <span class="caret"></span>
+        <span class="visible-sm-inline visible-md-inline visible-lg-inline">[[unread:all_categories]]</span><span class="visible-xs-inline"><i class="fa fa-fw fa-list"></i></span><!-- ENDIF selectedCategory --> <span class="caret"></span>
     </button>
     <div component="category-selector-search" class="hidden">
         <input type="text" class="form-control" autocomplete="off">

templates/partials/category/tools.tpl

@@ -1,4 +1,4 @@
-<!-- IF privileges.editable -->
+<!-- IF showTopicTools -->
 <div class="btn-group thread-tools bottom-sheet">
 	<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
 		<span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:thread_tools.title]]</span>
@@ -40,11 +40,13 @@
 				<i class="fa fa-fw fa-arrows"></i> [[topic:thread_tools.move]]
 			</a>
 		</li>
+		{{{if template.category}}}
 		<li>
 			<a component="topic/move-all" href="#">
 				<i class="fa fa-fw fa-arrows"></i> [[topic:thread_tools.move_all]]
 			</a>
 		</li>
+		{{{end}}}
 		<li>
 			<a component="topic/merge" href="#">
 				<i class="fa fa-fw fa-code-fork"></i> [[topic:thread_tools.merge]]
@@ -76,4 +78,4 @@
 		{{{end}}}
 	</ul>
 </div>
-<!-- ENDIF privileges.editable -->
+<!-- ENDIF showTopicTools -->

templates/popular.tpl

@@ -14,11 +14,15 @@
 			<!-- ENDIF canPost -->
 		</div>
 
+		<div class="btn-group pull-right">
+		<!-- IMPORT partials/category/tools.tpl -->
+		</div>
+
 		<!-- IMPORT partials/category-filter.tpl -->
 
 		<div class="btn-group pull-right bottom-sheet <!-- IF !filters.length -->hidden<!-- ENDIF !filters.length -->">
 			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-			{selectedFilter.name} <span class="caret"></span>
+				<span class="visible-sm-inline visible-md-inline visible-lg-inline">{selectedFilter.name}</span><span class="visible-xs-inline"><i class="fa fa-fw {selectedFilter.icon}"></i></span> <span class="caret"></span>
 			</button>
 			<ul class="dropdown-menu" role="menu">
 				{{{each filters}}}

templates/recent.tpl

@@ -17,11 +17,15 @@
 			</a>
 		</div>
 
+		<div class="btn-group pull-right">
+		<!-- IMPORT partials/category/tools.tpl -->
+		</div>
+
 		<!-- IMPORT partials/category-filter.tpl -->
 
 		<div class="btn-group pull-right bottom-sheet <!-- IF !filters.length -->hidden<!-- ENDIF !filters.length -->">
 			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-			{selectedFilter.name} <span class="caret"></span>
+				<span class="visible-sm-inline visible-md-inline visible-lg-inline">{selectedFilter.name}</span><span class="visible-xs-inline"><i class="fa fa-fw {selectedFilter.icon}"></i></span> <span class="caret"></span>
 			</button>
 			<ul class="dropdown-menu" role="menu">
 				{{{each filters}}}

templates/top.tpl

@@ -14,11 +14,15 @@
 			<!-- ENDIF loggedIn -->
 		</div>
 
+		<div class="btn-group pull-right">
+		<!-- IMPORT partials/category/tools.tpl -->
+		</div>
+
 		<!-- IMPORT partials/category-filter.tpl -->
 
-		<div class="btn-group pull-right <!-- IF !filters.length -->hidden<!-- ENDIF !filters.length -->">
+		<div class="btn-group pull-right bottom-sheet <!-- IF !filters.length -->hidden<!-- ENDIF !filters.length -->">
 			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-			{selectedFilter.name} <span class="caret"></span>
+				<span class="visible-sm-inline visible-md-inline visible-lg-inline">{selectedFilter.name}</span><span class="visible-xs-inline"><i class="fa fa-fw {selectedFilter.icon}"></i></span> <span class="caret"></span>
 			</button>
 			<ul class="dropdown-menu" role="menu">
 				{{{each filters}}}

templates/unread.tpl

@@ -12,6 +12,11 @@
 				<div class="alert alert-warning hide" id="new-topics-alert"></div>
 			</a>
 		</div>
+
+		<div class="btn-group pull-right">
+		<!-- IMPORT partials/category/tools.tpl -->
+		</div>
+
 		<div class="markread btn-group pull-right category-dropdown-container bottom-sheet<!-- IF !topics.length --> hidden<!-- ENDIF !topics.length -->">
 			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 				[[unread:mark_as_read]] <span class="caret"></span>
@@ -38,7 +43,7 @@
 
 		<div class="btn-group pull-right bottom-sheet">
 			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-			{selectedFilter.name} <span class="caret"></span>
+				<span class="visible-sm-inline visible-md-inline visible-lg-inline">{selectedFilter.name}</span><span class="visible-xs-inline"><i class="fa fa-fw fa-filter"></i></span> <span class="caret"></span>
 			</button>
 			<ul class="dropdown-menu" role="menu">
 				{{{each filters}}}