category-selector-right, use selector on unread

templates/partials/category-selector-content.tpl

@@ -0,0 +1,17 @@
+<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 }}}
+    {{{ 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">
+</div>
+<ul component="category/list" class="dropdown-menu category-dropdown-menu {{{if pullRight}}}dropdown-menu-right{{{end}}}" role="menu">
+    <li component="category/no-matches" role="presentation" class="category hidden">
+        <a role="menu-item">[[search:no-matches]]</a>
+    </li>
+    {{{each categoryItems}}}
+    <li role="presentation" class="category {{{ if ../disabledClass }}}disabled {{{ end }}}" data-cid="{../cid}" data-name="{../name}" data-parent-cid="{../parentCid}">
+        <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 }}}
+</ul>

templates/partials/category-selector-right.tpl

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

templates/partials/category-selector.tpl

@@ -1,19 +1,3 @@
-<div component="category-selector" class="btn-group {{{ if pullRight }}}pull-right{{{ end }}}">
+<div component="category-selector" class="btn-group bottom-sheet">
-	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+<!-- IMPORT partials/category-selector-content.tpl -->
-		<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 }}}
-		{{{ 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">
-	</div>
-	<ul component="category/list" class="dropdown-menu category-dropdown-menu {{{if pullRight}}}dropdown-menu-right{{{end}}}" role="menu">
-		<li component="category/no-matches" role="presentation" class="category hidden">
-			<a role="menu-item">[[search:no-matches]]</a>
-		</li>
-		{{{each categoryItems}}}
-		<li role="presentation" class="category {{{ if ../disabledClass }}}disabled {{{ end }}}" data-cid="{../cid}" data-name="{../name}" data-parent-cid="{../parentCid}">
-			<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 }}}
-	</ul>
 </div>

templates/unread.tpl

@@ -17,26 +17,8 @@
 		<!-- 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 -->">
+		<div class="markread btn-group pull-right {{{ if !topics.length }}}hidden{{{ end }}}">
-			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+		<!-- IMPORT partials/category-selector-right.tpl -->
-				[[unread:mark_as_read]] <span class="caret"></span>
-			</button>
-			<ul class="dropdown-menu category-dropdown-menu" role="menu">
-
-				<li role="presentation">
-					<a id="markSelectedRead" role="menuitem" tabindex="-1" href="#">[[unread:selected]]</a>
-				</li>
-
-				<li role="presentation">
-					<a id="markAllRead" role="menuitem" tabindex="-1" href="#">[[unread:all]]</a>
-				</li>
-				<li class="divider"></li>
-				{{{each categories}}}
-				<li role="presentation" class="category" data-cid="{categories.cid}">
-					<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}}}
-			</ul>
 		</div>
 
 		<!-- IMPORT partials/category-filter-right.tpl -->