disabled categories are now faded in the "Move Thread" modal. closes #409

Why is it called "move topic"? Renamed.

public/language/en/topic.json

@@ -16,6 +16,7 @@
 	"thread_tools.move": "Move Thread",
 	"thread_tools.delete": "Delete Thread",
 	"load_categories": "Loading Categories",
+	"disabled_categories_note": "Disabled Categories are greyed out",
 	"confirm_move": "Move",
 	"favourites.not_logged_in.title": "Not Logged In",
 	"favourites.not_logged_in.message": "Please log in in order to favourite this post"

public/src/forum/topic.js

@@ -37,9 +37,11 @@ define(function() {
 				$('#delete_thread').on('click', function(e) {
 					if (thread_state.deleted !== '1') {
 						bootbox.confirm('Are you sure you want to delete this thread?', function(confirm) {
-							if (confirm) socket.emit('api:topic.delete', {
+							if (confirm) {
+								socket.emit('api:topic.delete', {
 									tid: tid
 								});
+							}
 						});
 					} else {
 						bootbox.confirm('Are you sure you want to restore this thread?', function(confirm) {
@@ -87,6 +89,7 @@ define(function() {
 					var loadingEl = document.getElementById('categories-loading');
 					if (loadingEl) {
 						socket.once('api:categories.get', function(data) {
+							console.log(data);
 							// Render categories
 							var categoriesFrag = document.createDocumentFragment(),
 								categoryEl = document.createElement('li'),
@@ -102,7 +105,7 @@ define(function() {
 							categoriesEl.className = 'category-list';
 							for (x = 0; x < numCategories; x++) {
 								info = data.categories[x];
-								categoryEl.className = info.blockclass;
+								categoryEl.className = info.blockclass + (info.disabled === '1' ? ' disabled' : '');
 								categoryEl.innerHTML = '<i class="' + info.icon + '"></i> ' + info.name;
 								categoryEl.setAttribute('data-cid', info.cid);
 								categoriesFrag.appendChild(categoryEl.cloneNode(true));

public/templates/topic.tpl

@@ -178,16 +178,19 @@
 		</div>
 	</div>
 
-	<div id="move_thread_modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="Move Thread" aria-hidden="true">
+	<div id="move_thread_modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="Move Topic" aria-hidden="true">
 		<div class="modal-dialog">
 			<div class="modal-content">
 				<div class="modal-header">
 					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-					<h3>Move Thread</h3>
+					<h3>Move Topic</h3>
 				</div>
 				<div class="modal-body">
 					<p id="categories-loading"><i class="icon-spin icon-refresh"></i> [[topic:load_categories]]</p>
 					<ul class="category-list"></ul>
+					<p>
+						[[topic:disabled_categories_note]]
+					</p>
 					<div id="move-confirm" style="display: none;">
 						<hr />
 						<div class="alert alert-info">This topic will be moved to the category <strong><span id="confirm-category-name"></span></strong></div>

public/themes/vanilla/mixins.less

@@ -31,3 +31,18 @@
 		background: rgba(223,223,223,0.2);
 	}
 }
+
+.opacity(@opacity: 1) {
+	-moz-opacity: @opacity;
+	opacity: @opacity;
+	-ms-filter: ~`"progid:DXImageTransform.Microsoft.Alpha(opacity=(" + "@{opacity}" * 100 + "))"`;
+	filter: ~`"alpha(opacity = (" + "@{opacity}" * 100 + "))"`;
+}
+
+.border-radius (@radius: 5px) {
+	-webkit-border-radius: @radius;
+	-moz-border-radius: @radius;
+	-ms-border-radius: @radius;
+	-o-border-radius: @radius;
+	border-radius: @radius;
+}

public/themes/vanilla/topic.less

@@ -230,9 +230,12 @@
 			.pointer;
 			padding: 0.5em;
 			margin: 0.25em;
-			-webkit-border-radius: 3px;
+			.border-radius(3px);
-			-moz-border-radius: 3px;
+
-			border-radius: 3px;
+			&.disabled {
+				-webkit-filter: grayscale(30%);
+				.opacity(0.5);
+			}
 		}
 	}
 }