fix(acp): hard-to-discover dropdown selector in ACP

Made the dropdown an MDL button fab with better positioning via
a p.lead so that it is more easily discoverable and obvious that
it is a button that can be pressed.

Fixes #6899

public/src/admin/manage/privileges.js

@@ -13,12 +13,11 @@ define('admin/manage/privileges', [
 	Privileges.init = function () {
 		cid = ajaxify.data.cid || 0;
 
-		$('#category-selector').on('change', function () {
-			var val = $(this).val();
-			ajaxify.go('admin/manage/privileges/' + (val === 'global' ? '' : $(this).val()));
+		$('ul[for="category-selector"]').on('click', 'li', function () {
+			var val = this.getAttribute('data-cid');
+			ajaxify.go('admin/manage/privileges/' + (val === 'global' ? '' : val));
 		});
 
-
 		Privileges.setupPrivilegeTable();
 	};
 

src/controllers/admin/privileges.js

@@ -40,11 +40,16 @@ privilegesController.get = function (req, res, callback) {
 				if (category) {
 					category.selected = category.cid === cid;
 				}
+
+				if (category.selected) {
+					data.selected = category;
+				}
 			});
 
 			res.render('admin/manage/privileges', {
 				privileges: data.privileges,
 				allCategories: data.allCategories,
+				selected: data.selected ? data.selected.name : '[[admin/manage/privileges:global]]',
 				cid: cid,
 			});
 		},

src/views/admin/manage/privileges.tpl

@@ -1,23 +1,26 @@
 <div class="row">
 	<form role="form" class="category">
-		<div class="row">
-			<div class="col-md-3 pull-right">
-				<select id="category-selector" class="form-control">
-					<option value="global" <!-- IF !cid --> selected <!-- ENDIF !cid -->>[[admin/manage/privileges:global]]</option>
-					<option disabled>_____________</option>
-					<!-- BEGIN allCategories -->
-					<option value="{allCategories.value}" <!-- IF allCategories.selected -->selected<!-- ENDIF allCategories.selected -->>{allCategories.text}</option>
-					<!-- END allCategories -->
-				</select>
-			</div>
-		</div>
-
-		<br/>
-
 		<div class="">
 			<p>
 				[[admin/manage/categories:privileges.description]]
 			</p>
+
+			<p class="lead">
+				Currently viewing privileges for
+				<button type="button" id="category-selector" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
+					{selected}
+				</button>
+
+				<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="category-selector">
+					<li class="mdl-menu__item mdl-menu__item--full-bleed-divider" data-cid="global">[[admin/manage/privileges:global]]</li>
+					<!-- BEGIN allCategories -->
+					<li class="mdl-menu__item" data-cid="{../value}">{../text}</li>
+					<!-- END -->
+				</ul>
+			</p>
+
+			<hr />
+
 			<div class="privilege-table-container">
 				<!-- IF cid -->
 				<!-- IMPORT admin/partials/categories/privileges.tpl -->