#5723

public/language/en-GB/global.json

@@ -132,5 +132,6 @@
 	"cookies.learn_more": "Learn More",
 
 	"edited": "Edited",
-	"disabled": "Disabled"
+	"disabled": "Disabled",
+	"select": "Select"
 }

public/language/en-GB/topic.json

@@ -100,7 +100,6 @@
 	"move_post": "Move Post",
 	"post_moved": "Post moved!",
 	"fork_topic": "Fork Topic",
-	"topic_will_be_moved_to": "This topic will be moved to the category",
 	"fork_topic_instruction": "Click the posts you want to fork",
 	"fork_no_pids": "No posts selected!",
 	"fork_pid_count": "%1 post(s) selected",

public/less/admin/admin.less

@@ -232,6 +232,11 @@ body {
 	}
 }
 
+.category-dropdown-menu {
+  max-height: 600px;
+  overflow-y: auto;
+}
+
 .table-reordering {
 	tr:hover {
 		cursor: move;

public/src/admin/manage/category.js

@@ -7,7 +7,8 @@ define('admin/manage/category', [
 	'admin/modules/colorpicker',
 	'autocomplete',
 	'translator',
-], function (uploader, iconSelect, colorpicker, autocomplete, translator) {
+	'categorySelector',
+], function (uploader, iconSelect, colorpicker, autocomplete, translator, categorySelector) {
 	var	Category = {};
 	var modified_categories = {};
 
@@ -411,21 +412,24 @@ define('admin/manage/category', [
 		}, function (html) {
 			translator.translate(html, function (html) {
 				var modal = bootbox.dialog({
-					title: 'Select a Category',
+					title: '[[modules:composer.select_category]]',
 					message: html,
 					buttons: {
 						save: {
-							label: 'Copy',
+							label: '[[global:select]]',
 							className: 'btn-primary',
 							callback: submit,
 						},
 					},
 				});
-
+				categorySelector.init(modal.find('[component="category-selector"]'));
-				function submit() {
+				function submit(ev) {
-					var formData = modal.find('form').serializeObject();
+					ev.preventDefault();
-					callback(formData['select-cid']);
+					var selectedCategory = categorySelector.getSelectedCategory();
-					modal.modal('hide');
+					if (selectedCategory) {
+						callback(selectedCategory.cid);
+						modal.modal('hide');
+					}
 					return false;
 				}
 

public/src/client/topic/move.js

@@ -1,7 +1,7 @@
 'use strict';
 
 
-define('forum/topic/move', function () {
+define('forum/topic/move', ['categorySelector'], function (categorySelector) {
 	var Move = {};
 	var modal;
 	var selectedCategory;
@@ -31,18 +31,7 @@ define('forum/topic/move', function () {
 				modal.find('.modal-header h3').translateText('[[topic:move_topics]]');
 			}
 
-			modal.find('#select-cid').on('change', function () {
+			categorySelector.init(modal.find('[component="category-selector"]'), onCategorySelected);
-				var cid = $(this).val();
-				var optionEl = $(this).find('option[value="' + cid + '"]');
-
-				var selectedCategory = {
-					cid: cid,
-					name: optionEl.attr('data-name'),
-					text: optionEl.text(),
-					icon: optionEl.attr('data-icon'),
-				};
-				selectCategory(selectedCategory);
-			});
 
 			modal.find('#move_thread_commit').on('click', onCommitClicked);
 
@@ -58,10 +47,7 @@ define('forum/topic/move', function () {
 		});
 	}
 
-	function selectCategory(category) {
+	function onCategorySelected(category) {
-		modal.find('#confirm-category-name').text(category.name);
-		modal.find('#move-confirm').removeClass('hide');
-
 		selectedCategory = category;
 		modal.find('#move_thread_commit').prop('disabled', false);
 	}
@@ -88,7 +74,7 @@ define('forum/topic/move', function () {
 				return app.alertError(err.message);
 			}
 
-			app.alertSuccess('[[topic:topic_move_success, ' + selectedCategory.name + ']] <i class="fa fa-fw ' + selectedCategory.icon + '"></i>');
+			app.alertSuccess('[[topic:topic_move_success, ' + selectedCategory.name + ']]');
 			if (typeof Move.onComplete === 'function') {
 				Move.onComplete();
 			}

public/src/modules/categorySelector.js

@@ -0,0 +1,33 @@
+'use strict';
+
+
+define('categorySelector', function () {
+	var categorySelector = {};
+	var selectedCategory;
+	var el;
+	categorySelector.init = function (_el, callback) {
+		callback = callback || function () {};
+		el = _el;
+		el.on('click', '[data-cid]', function () {
+			var categoryEl = $(this);
+			categorySelector.selectCategory(categoryEl.attr('data-cid'));
+			callback(selectedCategory);
+		});
+	};
+
+	categorySelector.getSelectedCategory = function () {
+		return selectedCategory;
+	};
+
+	categorySelector.selectCategory = function (cid) {
+		var categoryEl = el.find('[data-cid="' + cid + '"]');
+		selectedCategory = {
+			cid: cid,
+			name: categoryEl.attr('data-name'),
+		};
+		el.find('[component="category-selector-selected"]').html(categoryEl.find('[component="category-markup"]').html());
+	};
+
+	return categorySelector;
+});
+

src/categories.js

@@ -314,10 +314,10 @@ Categories.getTree = function (categories, parentCid) {
 	return tree;
 };
 
-Categories.buildForSelect = function (uid, callback) {
+Categories.buildForSelect = function (uid, privilege, callback) {
 	async.waterfall([
 		function (next) {
-			Categories.getCategoriesByPrivilege('cid:0:children', uid, 'read', next);
+			Categories.getCategoriesByPrivilege('cid:0:children', uid, privilege, next);
 		},
 		function (categories, next) {
 			Categories.buildForSelectCategories(categories, next);
@@ -333,6 +333,7 @@ Categories.buildForSelectCategories = function (categories, callback) {
 
 		var bullet = level ? '• ' : '';
 		category.value = category.cid;
+		category.level = level;
 		category.text = level + bullet + category.name;
 		categoriesData.push(category);
 

src/controllers/admin/categories.js

@@ -16,7 +16,7 @@ categoriesController.get = function (req, res, callback) {
 			async.parallel({
 				category: async.apply(categories.getCategories, [req.params.category_id], req.user.uid),
 				privileges: async.apply(privileges.categories.list, req.params.category_id),
-				allCategories: async.apply(categories.buildForSelect, req.uid),
+				allCategories: async.apply(categories.buildForSelect, req.uid, 'read'),
 			}, next);
 		},
 		function (data, next) {

src/controllers/mods.js

@@ -59,7 +59,7 @@ modsController.flags.list = function (req, res, next) {
 			async.parallel({
 				flags: async.apply(flags.list, filters, req.uid),
 				analytics: async.apply(analytics.getDailyStatsForSet, 'analytics:flags', Date.now(), 30),
-				categories: async.apply(categories.buildForSelect, req.uid),
+				categories: async.apply(categories.buildForSelect, req.uid, 'read'),
 			}, next);
 		},
 		function (data) {

src/controllers/search.js

@@ -46,7 +46,7 @@ searchController.search = function (req, res, next) {
 	};
 
 	async.parallel({
-		categories: async.apply(categories.buildForSelect, req.uid),
+		categories: async.apply(categories.buildForSelect, req.uid, 'read'),
 		search: async.apply(search.search, data),
 	}, function (err, results) {
 		if (err) {

src/meta/js.js

@@ -67,6 +67,7 @@ module.exports = function (Meta) {
 			'public/src/modules/sort.js',
 			'public/src/modules/navigator.js',
 			'public/src/modules/topicSelect.js',
+			'public/src/modules/categorySelector.js',
 			'public/src/modules/share.js',
 			'public/src/modules/search.js',
 			'public/src/modules/alerts.js',

src/views/admin/partials/categories/select-category.tpl

@@ -1,10 +1,16 @@
 <form type="form">
 	<div class="form-group">
-		<label for="select-cid">[[admin/manage/categories:select-category]]</label>
+		<div component="category-selector" class="btn-group">
-		<select class="form-control" name="select-cid" id="select-cid">
+			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-			<!-- BEGIN categories -->
+				<span component="category-selector-selected">[[topic:thread_tools.select_category]]</span> <span class="caret"></span>
-			<option value="{categories.cid}">{categories.text}</option>
+			</button>
-			<!-- END categories -->
+			<ul class="dropdown-menu category-dropdown-menu" role="menu">
-		</select>
+				<!-- BEGIN categories -->
+				<li role="presentation" class="category" 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>
+				</li>
+				<!-- END categories -->
+			</ul>
+		</div>
 	</div>
 </form>