From f5e9eebbd124d36639ae7177e096bf8256d44be3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <baris@nodebb.org>
Date: Wed, 10 Oct 2018 11:55:40 -0400
Subject: [PATCH] https://github.com/NodeBB/NodeBB/issues/6822

---
 less/category.less                       |  2 ++
 templates/partials/category-filter.tpl   | 16 ++++++++++++++++
 templates/partials/category-selector.tpl |  2 +-
 templates/partials/topics_list.tpl       |  2 +-
 templates/popular.tpl                    | 17 +----------------
 templates/recent.tpl                     | 17 +----------------
 templates/top.tpl                        | 17 +----------------
 templates/unread.tpl                     | 19 ++-----------------
 8 files changed, 25 insertions(+), 67 deletions(-)
 create mode 100644 templates/partials/category-filter.tpl

diff --git a/less/category.less b/less/category.less
index a77dba2..63defa8 100644
--- a/less/category.less
+++ b/less/category.less
@@ -104,6 +104,7 @@
 
 			.fa-stack {
 				font-size: 90%;
+				border-radius: 50%;
 			}
 
 			.card .user-icon {
@@ -165,6 +166,7 @@
 [component="category-selector"], .category-dropdown-container {
 	.fa-stack {
 		font-size: 65%;
+		border-radius: 50%;
 	}
 }
 
diff --git a/templates/partials/category-filter.tpl b/templates/partials/category-filter.tpl
new file mode 100644
index 0000000..984afd0
--- /dev/null
+++ b/templates/partials/category-filter.tpl
@@ -0,0 +1,16 @@
+<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 --><!-- IF selectedCategory.icon --><span class="fa-stack"><i style="color: {selectedCategory.bgColor};" class="fa fa-circle fa-stack-2x"></i><i class="fa fa-fw fa-stack-1x {selectedCategory.icon}" style="color: {selectedCategory.color};"></i></span><!-- ENDIF selectedCategory.icon --> {selectedCategory.name}<!-- ELSE -->
+        [[unread:all_categories]]<!-- ENDIF selectedCategory --> <span class="caret"></span>
+    </button>
+    <ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
+        <li role="presentation" class="category">
+            <a role="menu-item" href="{config.relative_path}/{allCategoriesUrl}"><i class="fa fa-fw <!-- IF !selectedCategory -->fa-check<!-- ENDIF !selectedCategory -->"></i> [[unread:all_categories]]</a>
+        </li>
+        <!-- BEGIN categories -->
+        <li role="presentation" class="category" data-cid="{categories.cid}" data-parent-cid="{categories.parentCid}">
+            <a role="menu-item" href="#"><i component="category/select/icon" class="fa fa-fw <!-- IF categories.selected -->fa-check<!-- ENDIF categories.selected -->"></i>{categories.level}<!-- IF categories.icon --><span class="fa-stack" style="{function.generateCategoryBackground}"><i class="fa fa-fw fa-stack-1x {categories.icon}" style="color: {categories.color};"></i></span><!-- ENDIF categories.icon --> {categories.name}</a>
+        </li>
+        <!-- END categories -->
+    </ul>
+</div>
\ No newline at end of file
diff --git a/templates/partials/category-selector.tpl b/templates/partials/category-selector.tpl
index dd351b4..1eb5078 100644
--- a/templates/partials/category-selector.tpl
+++ b/templates/partials/category-selector.tpl
@@ -5,7 +5,7 @@
 	<ul class="dropdown-menu category-dropdown-menu" role="menu">
 		<!-- BEGIN categories -->
 		<li role="presentation" class="category <!-- IF categories.disabledClass -->disabled<!-- ENDIF categories.disabledClass -->" data-cid="{categories.cid}" data-name="{categories.name}">
-			<a role="menu-item">{categories.level}<span component="category-markup"><!-- IF categories.icon --><span class="fa-stack"><i style="color: {categories.bgColor};" class="fa fa-circle fa-stack-2x"></i><i style="color: {categories.color};" class="fa fa-stack-1x fa-fw {categories.icon}"></i></span><!-- ENDIF categories.icon --> {categories.name}</span></a>
+			<a role="menu-item">{categories.level}<span component="category-markup"><!-- IF categories.icon --><span class="fa-stack" style="{function.generateCategoryBackground}"><i style="color: {categories.color};" class="fa fa-stack-1x fa-fw {categories.icon}"></i></span><!-- ENDIF categories.icon --> {categories.name}</span></a>
 		</li>
 		<!-- END categories -->
 	</ul>
diff --git a/templates/partials/topics_list.tpl b/templates/partials/topics_list.tpl
index ccc7619..9e94b8e 100644
--- a/templates/partials/topics_list.tpl
+++ b/templates/partials/topics_list.tpl
@@ -51,7 +51,7 @@
 
 				<!-- IF !template.category -->
 				<small>
-					<a href="{config.relative_path}/category/{topics.category.slug}"><span class="fa-stack fa-lg"><i style="color:{topics.category.bgColor};" class="fa fa-circle fa-stack-2x"></i><i style="color:{topics.category.color};" class="fa {topics.category.icon} fa-stack-1x"></i></span> {topics.category.name}</a> &bull;
+					<a href="{config.relative_path}/category/{topics.category.slug}"><span class="fa-stack fa-lg" style="{function.generateCategoryBackground, topics.category}"><i style="color:{topics.category.color};" class="fa {topics.category.icon} fa-stack-1x"></i></span> {topics.category.name}</a> &bull;
 				</small>
 				<!-- ENDIF !template.category -->
 
diff --git a/templates/popular.tpl b/templates/popular.tpl
index 2cc8305..1b945d8 100644
--- a/templates/popular.tpl
+++ b/templates/popular.tpl
@@ -14,22 +14,7 @@
 			<!-- ENDIF loggedIn -->
 		</div>
 
-		<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 --><!-- IF selectedCategory.icon --><span class="fa-stack"><i style="color: {selectedCategory.bgColor};" class="fa fa-circle fa-stack-2x"></i><i class="fa fa-fw fa-stack-1x {selectedCategory.icon}" style="color: {selectedCategory.color};"></i></span><!-- ENDIF selectedCategory.icon --> {selectedCategory.name}<!-- ELSE -->
-				[[unread:all_categories]]<!-- ENDIF selectedCategory --> <span class="caret"></span>
-			</button>
-			<ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
-				<li role="presentation" class="category">
-					<a role="menu-item" href="{config.relative_path}/{allCategoriesUrl}"><i class="fa fa-fw <!-- IF !selectedCategory -->fa-check<!-- ENDIF !selectedCategory -->"></i> [[unread:all_categories]]</a>
-				</li>
-				<!-- BEGIN categories -->
-				<li role="presentation" class="category" data-cid="{categories.cid}" data-parent-cid="{categories.parentCid}">
-					<a role="menu-item" href="#"><i component="category/select/icon" class="fa fa-fw <!-- IF categories.selected -->fa-check<!-- ENDIF categories.selected -->"></i>{categories.level}<!-- IF categories.icon --><span class="fa-stack"><i style="color: {categories.bgColor};" class="fa fa-circle fa-stack-2x"></i><i class="fa fa-fw fa-stack-1x {categories.icon}" style="color: {categories.color};"></i></span><!-- ENDIF categories.icon --> {categories.name}</a>
-				</li>
-				<!-- END categories -->
-			</ul>
-		</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">
diff --git a/templates/recent.tpl b/templates/recent.tpl
index e03d676..7dbdcde 100644
--- a/templates/recent.tpl
+++ b/templates/recent.tpl
@@ -14,22 +14,7 @@
 			<!-- ENDIF loggedIn -->
 		</div>
 
-		<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 --><!-- IF selectedCategory.icon --><span class="fa-stack"><i style="color: {selectedCategory.bgColor};" class="fa fa-circle fa-stack-2x"></i><i class="fa fa-fw fa-stack-1x {selectedCategory.icon}" style="color: {selectedCategory.color};"></i></span><!-- ENDIF selectedCategory.icon --> {selectedCategory.name}<!-- ELSE -->
-				[[unread:all_categories]]<!-- ENDIF selectedCategory --> <span class="caret"></span>
-			</button>
-			<ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
-				<li role="presentation" class="category">
-					<a role="menu-item" href="{config.relative_path}/{allCategoriesUrl}"><i class="fa fa-fw <!-- IF !selectedCategory -->fa-check<!-- ENDIF !selectedCategory -->"></i> [[unread:all_categories]]</a>
-				</li>
-				<!-- BEGIN categories -->
-				<li role="presentation" class="category" data-cid="{categories.cid}" data-parent-cid="{categories.parentCid}">
-					<a role="menu-item" href="#"><i component="category/select/icon" class="fa fa-fw <!-- IF categories.selected -->fa-check<!-- ENDIF categories.selected -->"></i>{categories.level}<!-- IF categories.icon --><span class="fa-stack"><i style="color: {categories.bgColor};" class="fa fa-circle fa-stack-2x"></i><i class="fa fa-fw fa-stack-1x {categories.icon}" style="color: {categories.color};"></i></span><!-- ENDIF categories.icon --> {categories.name}</a>
-				</li>
-				<!-- END categories -->
-			</ul>
-		</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">
diff --git a/templates/top.tpl b/templates/top.tpl
index 2aad423..a3c2b2d 100644
--- a/templates/top.tpl
+++ b/templates/top.tpl
@@ -14,22 +14,7 @@
 			<!-- ENDIF loggedIn -->
 		</div>
 
-		<div component="category/dropdown" class="btn-group pull-right category-dropdown-container <!-- IF !categories.length -->hidden<!-- ENDIF !categories.length -->">
-			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-				<!-- IF selectedCategory --><!-- IF selectedCategory.icon --><span class="fa-stack"><i style="color: {selectedCategory.bgColor};" class="fa fa-circle fa-stack-2x"></i><i class="fa fa-fw fa-stack-1x {selectedCategory.icon}" style="color: {selectedCategory.color};"></i></span><!-- ENDIF selectedCategory.icon --> {selectedCategory.name}<!-- ELSE -->
-				[[unread:all_categories]]<!-- ENDIF selectedCategory --> <span class="caret"></span>
-			</button>
-			<ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
-				<li role="presentation" class="category">
-					<a role="menu-item" href="{config.relative_path}/{allCategoriesUrl}"><i class="fa fa-fw <!-- IF !selectedCategory -->fa-check<!-- ENDIF !selectedCategory -->"></i> [[unread:all_categories]]</a>
-				</li>
-				<!-- BEGIN categories -->
-				<li role="presentation" class="category" data-cid="{categories.cid}" data-parent-cid="{categories.parentCid}">
-					<a role="menu-item" href="#"><i component="category/select/icon" class="fa fa-fw <!-- IF categories.selected -->fa-check<!-- ENDIF categories.selected -->"></i>{categories.level}<!-- IF categories.icon --><span class="fa-stack"><i style="color: {categories.bgColor};" class="fa fa-circle fa-stack-2x"></i><i class="fa fa-fw fa-stack-1x {categories.icon}" style="color: {categories.color};"></i></span><!-- ENDIF categories.icon --> {categories.name}</a>
-				</li>
-				<!-- END categories -->
-			</ul>
-		</div>
+		<!-- IMPORT partials/category-filter.tpl -->
 
 		<div class="btn-group pull-right <!-- IF !filters.length -->hidden<!-- ENDIF !filters.length -->">
 			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
diff --git a/templates/unread.tpl b/templates/unread.tpl
index 5a7f559..bcc6299 100644
--- a/templates/unread.tpl
+++ b/templates/unread.tpl
@@ -29,28 +29,13 @@
 				<li class="divider"></li>
 				<!-- BEGIN categories -->
 				<li role="presentation" class="category" data-cid="{categories.cid}">
-					<a role="menu-item" href="#">{categories.level}<!-- IF categories.icon --><span class="fa-stack"><i style="color: {categories.bgColor};" class="fa fa-circle fa-stack-2x"></i><i class="fa fa-fw fa-stack-1x {categories.icon}" style="color: {categories.color};"></i></span><!-- ENDIF categories.icon --> {categories.name}</a>
+					<a role="menu-item" href="#">{categories.level}<!-- IF categories.icon --><span class="fa-stack" style="{function.generateCategoryBackground}"><i class="fa fa-fw fa-stack-1x {categories.icon}" style="color: {categories.color};"></i></span><!-- ENDIF categories.icon --> {categories.name}</a>
 				</li>
 				<!-- END categories -->
 			</ul>
 		</div>
 
-		<div component="category/dropdown" class="btn-group pull-right category-dropdown-container bottom-sheet">
-			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-				<!-- IF selectedCategory --><!-- IF selectedCategory.icon --><span class="fa-stack"><i style="color: {selectedCategory.bgColor};" class="fa fa-circle fa-stack-2x"></i><i class="fa fa-fw fa-stack-1x {selectedCategory.icon}" style="color: {selectedCategory.color};"></i></span><!-- ENDIF selectedCategory.icon --> {selectedCategory.name}<!-- ELSE -->
-				[[unread:all_categories]]<!-- ENDIF selectedCategory --> <span class="caret"></span>
-			</button>
-			<ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
-				<li role="presentation" class="category">
-					<a role="menu-item" href="{config.relative_path}/{allCategoriesUrl}"><i class="fa fa-fw <!-- IF !selectedCategory -->fa-check<!-- ENDIF !selectedCategory -->"></i> [[unread:all_categories]]</a>
-				</li>
-				<!-- BEGIN categories -->
-				<li role="presentation" class="category" data-cid="{categories.cid}" data-parent-cid="{categories.parentCid}">
-					<a role="menu-item" href="#"><i component="category/select/icon" class="fa fa-fw <!-- IF categories.selected -->fa-check<!-- ENDIF categories.selected -->"></i>{categories.level}<!-- IF categories.icon --><span class="fa-stack"><i style="color: {categories.bgColor};" class="fa fa-circle fa-stack-2x"></i><i class="fa fa-fw fa-stack-1x {categories.icon}" style="color: {categories.color};"></i></span><!-- ENDIF categories.icon --> {categories.name}</a>
-				</li>
-				<!-- END categories -->
-			</ul>
-		</div>
+		<!-- IMPORT partials/category-filter.tpl -->
 
 		<div class="btn-group pull-right bottom-sheet">
 			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">