Categories refactor (#517)

* feat: pagination on /categories and /category page for sub categories

* feat: show subcategories left

* fix: rename categories to allCategories on /search

* feat: add component for subcategory container

* feat: update filter/selector tpls

* feat: change multi to regular input

entire category list is no longer returned on group page

* feat: add pagination to user/:slug/categories

* feat: flags category selector

* feat: left/right filter

* feat: move filter right

* feat: add selector to /categories and /category

only when categories dont fit on one page

* fix: show title if only one page

templates/account/categories.tpl

@@ -22,6 +22,7 @@
 				<!-- IMPORT partials/account/category-item.tpl -->
 				{{{end}}}
 			</ul>
+			<!-- IMPORT partials/paginator.tpl -->
 		</div>
 	</div>
 </div>

templates/categories.tpl

@@ -6,7 +6,11 @@
 </div>
 <div class="row">
 	<div class="<!-- IF widgets.sidebar.length -->col-lg-9 col-sm-12<!-- ELSE -->col-lg-12<!-- ENDIF widgets.sidebar.length -->">
+		{{{ if pagination.pages.length }}}
+		<div><!-- IMPORT partials/category-selector.tpl --></div>
+		{{{ else }}}
 		<h1 class="categories-title">[[pages:categories]]</h1>
+		{{{ end }}}
 		<ul class="categories" itemscope itemtype="http://www.schema.org/ItemList">
 			{{{each categories}}}
 			<!-- IMPORT partials/categories/item.tpl -->

templates/flags/list.tpl

@@ -8,7 +8,7 @@
 		<!-- IF hasFilter -->
 		<div class="alert alert-warning">
 			<p class="pull-right">
-				<a href="{config.relative_path}/flags?reset=1">[[flags:filter-reset]]</a>
+				<a href="{config.relative_path}/flags">[[flags:filter-reset]]</a>
 			</p>
 			[[flags:filter-active]]
 		</div>

templates/groups/details.tpl

@@ -164,14 +164,14 @@
 					<hr />
 					<div class="form-group">
 						<label for="memberPostCids">[[groups:details.member-post-cids]]</label>
-						<select multiple="true" name="memberPostCids" id="memberPostCids" class="form-control" size="15">
+						<div class="row">
-							{{{each group.categories}}}
+							<div class="col-md-6">
-							<option value="{categories.cid}"{{{ if ../selected }}} selected{{{ end }}}>
+								<input id="memberPostCids" type="text" class="form-control" value="{group.memberPostCids}">
-								{../level}{../name}
+							</div>
-							</option>
+							<div class="col-md-6 member-post-cids-selector">
-							{{{end}}}
+								<!-- IMPORT partials/category-selector.tpl -->
-						</select>
+							</div>
-						<p class="help-block">[[groups:details.member-post-cids-help]]</p>
+						</div>
 					</div>
 
 					<hr />

templates/partials/category-filter-content.tpl

@@ -0,0 +1,19 @@
+<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> <span class="visible-sm-inline visible-md-inline visible-lg-inline">{selectedCategory.name}</span>{{{ else }}}
+    <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>{{{ end }}} <span class="caret"></span>
+</button>
+<div component="category-selector-search" class="hidden">
+    <input type="text" class="form-control" autocomplete="off">
+</div>
+<ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
+    {{{ if allCategoriesUrl }}}
+    <li role="presentation" class="category" data-all="all">
+        <a role="menu-item" href="{config.relative_path}/{allCategoriesUrl}"><i component="category/select/icon" class="fa fa-fw fa-check {{{if selectedCategory}}}invisible{{{end}}}"></i> [[unread:all_categories]]</a>
+    </li>
+    {{{ end }}}
+    {{{each categoryItems}}}
+    <li role="presentation" class="category {{{ if ../disabledClass }}}disabled{{{ end }}}" data-cid="{../cid}" data-parent-cid="{../parentCid}" data-name="{../name}">
+        <a role="menu-item" href="#">{../level}<i component="category/select/icon" class="fa fa-fw fa-check {{{ if !../selected }}}invisible{{{ end }}}"></i><span component="category-markup" style="{{{ if ../match }}}font-weight: bold;{{{end}}}">{{{ if ../icon }}}<span class="fa-stack" style="{function.generateCategoryBackground}"><i class="fa fa-fw fa-stack-1x {../icon}" style="color: {../color};"></i></span>{{{ end }}} {../name}</span></a>
+    </li>
+    {{{end}}}
+</ul>

templates/partials/category-filter-right.tpl

@@ -0,0 +1,3 @@
+<div component="category/dropdown" class="btn-group pull-right category-dropdown-container bottom-sheet">
+   <!-- IMPORT partials/category-filter-content.tpl -->
+</div>

templates/partials/category-filter.tpl

@@ -1,19 +1,3 @@
-<div component="category/dropdown" class="btn-group pull-right category-dropdown-container bottom-sheet {{{ if !categories.length }}}hidden{{{end}}}">
+<div component="category/dropdown" class="btn-group category-dropdown-container bottom-sheet">
-    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+   <!-- IMPORT partials/category-filter-content.tpl -->
-        {{{ 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 }}}
-        <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>{{{ end }}} <span class="caret"></span>
-    </button>
-    <div component="category-selector-search" class="hidden">
-        <input type="text" class="form-control" autocomplete="off">
-    </div>
-    <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 component="category/select/icon" class="fa fa-fw fa-check {{{if selectedCategory}}}invisible{{{end}}}"></i> [[unread:all_categories]]</a>
-        </li>
-        {{{each categories}}}
-        <li role="presentation" class="category {{{ if categories.disabledClass }}}disabled{{{ end }}}" data-cid="{categories.cid}" data-parent-cid="{categories.parentCid}" data-name="{categories.name}">
-            <a role="menu-item" href="#">{categories.level}<i component="category/select/icon" class="fa fa-fw fa-check {{{ if !categories.selected }}}invisible{{{ end }}}"></i><span component="category-markup">{{{ 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>{{{ end }}} {categories.name}</span></a>
-        </li>
-        {{{end}}}
-    </ul>
 </div>

templates/partials/category-selector.tpl

@@ -1,7 +1,7 @@
-<div component="category-selector" class="btn-group <!-- IF pullRight -->pull-right<!-- ENDIF pullRight -->">
+<div component="category-selector" class="btn-group {{{ if pullRight }}}pull-right{{{ end }}}">
 	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-		<span component="category-selector-selected"><!-- 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 -->
+		<span component="category-selector-selected">{{{ 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 }}}
-		[[topic:thread_tools.select_category]]<!-- ENDIF selectedCategory --></span> <span class="caret"></span>
+		{{{ if selectCategoryLabel }}}{selectCategoryLabel}{{{ else }}}[[topic:thread_tools.select_category]]{{{ end }}}{{{ end }}}</span> <span class="caret"></span>
 	</button>
 	<div component="category-selector-search" class="hidden">
 		<input type="text" class="form-control" autocomplete="off">
@@ -10,10 +10,10 @@
 		<li component="category/no-matches" role="presentation" class="category hidden">
 			<a role="menu-item">[[search:no-matches]]</a>
 		</li>
-		{{{each categories}}}
+		{{{each categoryItems}}}
-		<li role="presentation" class="category <!-- IF categories.disabledClass -->disabled<!-- ENDIF categories.disabledClass -->" data-cid="{categories.cid}" data-name="{categories.name}" data-parent-cid="{categories.parentCid}">
+		<li role="presentation" class="category {{{ if ../disabledClass }}}disabled {{{ end }}}" data-cid="{../cid}" data-name="{../name}" data-parent-cid="{../parentCid}">
-			<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>
+			<a role="menu-item">{../level}<span component="category-markup" style="{{{ if ../match }}}font-weight: bold;{{{end}}}">{{{ if ./icon }}}<span class="fa-stack" style="{function.generateCategoryBackground}"><i style="color: {../color};" class="fa fa-stack-1x fa-fw {../icon}"></i></span>{{{ end }}} {../name}</span></a>
 		</li>
-		{{{end}}}
+		{{{ end }}}
 	</ul>
 </div>

templates/partials/category/subcategory.tpl

@@ -1,6 +1,10 @@
 {{{ if children.length }}}
 <div class="subcategory">
+	{{{ if hasMoreSubCategories }}}
+	<div><!-- IMPORT partials/category-selector.tpl --></div>
+	{{{ else }}}
 	<p>[[category:subcategories]]</p>
+	{{{ end }}}
 
 	<ul component="category/subcategory/container" class="categories" itemscope itemtype="http://www.schema.org/ItemList">
 		{{{each children}}}

templates/partials/flags/filters.tpl

@@ -25,6 +25,10 @@
 	<div class="panel-body">
 		<form role="form" component="flags/filters">
 			<fieldset>
+				<div class="form-group">
+					<label for="filter-cid">[[flags:filter-cid]]</label>
+					<!-- IMPORT partials/category-filter.tpl -->
+				</div>
 				<div class="form-group">
 					<label for="sort">[[flags:sort]]</label>
 					<select class="form-control" id="sort" name="sort">
@@ -59,16 +63,6 @@
 						<option value="user">[[flags:filter-type-user]]</option>
 					</select>
 				</div>
-
-				<div class="form-group">
-					<label for="filter-cid">[[flags:filter-cid]]</label>
-					<select class="form-control" id="filter-cid" name="cid" multiple="true">
-						<option value="">[[flags:filter-cid-all]]</option>
-						{{{each categories}}}
-						<option value="{@key}">{@value}</option>
-						{{{end}}}
-					</select>
-				</div>
 			</fieldset>
 
 			<fieldset class="collapse" id="more-filters" aria-expanded="false">

templates/popular.tpl

@@ -18,7 +18,7 @@
 		<!-- IMPORT partials/category/tools.tpl -->
 		</div>
 
-		<!-- IMPORT partials/category-filter.tpl -->
+		<!-- IMPORT partials/category-filter-right.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">

templates/post-queue.tpl

@@ -1,6 +1,6 @@
 <!-- IMPORT partials/breadcrumbs.tpl -->
 <div class="btn-toolbar">
-	<!-- IMPORT partials/category-filter.tpl -->
+	<!-- IMPORT partials/category-filter-right.tpl -->
 </div>
 <hr/>
 <div class="row">

templates/recent.tpl

@@ -21,7 +21,7 @@
 		<!-- IMPORT partials/category/tools.tpl -->
 		</div>
 
-		<!-- IMPORT partials/category-filter.tpl -->
+		<!-- IMPORT partials/category-filter-right.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">

templates/top.tpl

@@ -18,7 +18,7 @@
 		<!-- IMPORT partials/category/tools.tpl -->
 		</div>
 
-		<!-- IMPORT partials/category-filter.tpl -->
+		<!-- IMPORT partials/category-filter-right.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">

templates/unread.tpl

@@ -39,7 +39,7 @@
 			</ul>
 		</div>
 
-		<!-- IMPORT partials/category-filter.tpl -->
+		<!-- IMPORT partials/category-filter-right.tpl -->
 
 		<div class="btn-group pull-right bottom-sheet">
 			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">