ACP manage tags page UI changes

public/less/admin/manage/tags.less

@@ -25,30 +25,7 @@
 		}
 	}
 
-	.tag-item {
-		border: solid 1px @gray-light;
-		background-color: transparent;
-		color: @gray-light;
-		padding: .2em .6em .3em;
-		font-size: 75%;
-		font-weight: 700;
-		white-space: nowrap;
-	}
-
 	.tag-topic-count {
-		border: solid 1px lighten(@brand-primary, 20%);
+		font-size: 14px;
-		background-color: lighten(@brand-primary, 20%);
-		padding: 6px;
-		font-size: 75%;
-		font-weight: 700;
-		white-space: nowrap;
-		border-left: none;
-		padding-right: 5px;
-		padding-left: 5px;
-		border-width: 1px 1px 2px medium;
-
-		a {
-			color: #FFFFFF;
-		}
 	}
 }

public/src/admin/manage/tags.js

@@ -6,7 +6,7 @@ define('admin/manage/tags', [
 	'admin/modules/selectable',
 	'admin/modules/colorpicker'
 ], function (infinitescroll, selectable, colorpicker) {
-	var	Tags = {},
+	var Tags = {},
 		timeoutId = 0;
 
 	Tags.init = function () {
@@ -61,12 +61,16 @@ define('admin/manage/tags', [
 			}
 
 			timeoutId = setTimeout(function () {
-				socket.emit('topics.searchAndLoadTags', {query: $('#tag-search').val()}, function (err, result) {
+				socket.emit('topics.searchAndLoadTags', {
+					query: $('#tag-search').val()
+				}, function (err, result) {
 					if (err) {
 						return app.alertError(err.message);
 					}
 
-					app.parseAndTranslate('admin/manage/tags', 'tags', {tags: result.tags}, function (html) {
+					app.parseAndTranslate('admin/manage/tags', 'tags', {
+						tags: result.tags
+					}, function (html) {
 						$('.tag-list').html(html);
 						utils.makeNumbersHumanReadable(html.find('.human-readable-number'));
 						timeoutId = 0;
@@ -86,10 +90,10 @@ define('admin/manage/tags', [
 			}
 
 			var firstTag = $(tagsToModify[0]),
-				title = tagsToModify.length > 1 ? '[[admin/manage/tags:alerts.editing-multiple]]' : '[[admin/manage/tags:alerts.editing-x, ' + firstTag.find('.tag-item').text() + ']]';
+				title = tagsToModify.length > 1 ? '[[admin/manage/tags:alerts.editing-multiple]]' : '[[admin/manage/tags:alerts.editing-x, ' + firstTag.find('.tag-item').attr('data-tag') + ']]';
 
 			var modal = bootbox.dialog({
-				title:  title,
+				title: title,
 				message: firstTag.find('.tag-modal').html(),
 				buttons: {
 					success: {
@@ -133,7 +137,9 @@ define('admin/manage/tags', [
 				tagsToDelete.each(function (index, el) {
 					tags.push($(el).attr('data-tag'));
 				});
-				socket.emit('admin.tags.deleteTags', {tags: tags}, function (err) {
+				socket.emit('admin.tags.deleteTags', {
+					tags: tags
+				}, function (err) {
 					if (err) {
 						return app.alertError(err.message);
 					}
@@ -155,8 +161,8 @@ define('admin/manage/tags', [
 	function save(tag) {
 		var data = {
 			tag: tag.attr('data-tag'),
-			bgColor : tag.find('[data-name="bgColor"]').val(),
+			bgColor: tag.find('[data-name="bgColor"]').val(),
-			color : tag.find('[data-name="color"]').val()
+			color: tag.find('[data-name="color"]').val()
 		};
 
 		socket.emit('admin.tags.update', data, function (err) {
@@ -169,4 +175,4 @@ define('admin/manage/tags', [
 	}
 
 	return Tags;
-});
+});

src/meta/css.js

@@ -32,7 +32,9 @@ module.exports = function (Meta) {
 				'@import "../../public/less/generics.less";',
 				'@import "../../public/less/mixins.less";',
 				'@import "../../public/less/global.less";',
-			].map(function (str) { return str.replace(/\//g, path.sep); }).join('\n');
+			].map(function (str) {
+				return str.replace(/\//g, path.sep);
+			}).join('\n');
 		},
 		admin: function (source) {
 			return source + '\n' + [
@@ -42,7 +44,10 @@ module.exports = function (Meta) {
 				'@import (inline) "../public/vendor/colorpicker/colorpicker.css";',
 				'@import (inline) "../public/vendor/jquery/css/smoothness/jquery-ui.css";',
 				'@import (inline) "../public/vendor/jquery/bootstrap-tagsinput/bootstrap-tagsinput.css";',
-			].map(function (str) { return str.replace(/\//g, path.sep); }).join('\n');
+				'@import (inline) "../public/vendor/mdl/material.css";',
+			].map(function (str) {
+				return str.replace(/\//g, path.sep);
+			}).join('\n');
 		},
 	};
 
@@ -90,7 +95,7 @@ module.exports = function (Meta) {
 	};
 
 	function getStyleSource(files, prefix, extension, callback) {
-		var	pluginDirectories = [],
+		var pluginDirectories = [],
 			source = '';
 
 		files.forEach(function (styleFile) {
@@ -143,7 +148,7 @@ module.exports = function (Meta) {
 				return callback(err);
 			}
 
-			postcss(global.env === 'development' ? [ autoprefixer ] : [
+			postcss(global.env === 'development' ? [autoprefixer] : [
 				autoprefixer,
 				clean({
 					processImportFrom: ['local']

src/views/admin/header.tpl

@@ -3,11 +3,10 @@
 	<head>
 		<title>{title}</title>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	
+
 		<link rel="stylesheet" type="text/css" href="{relative_path}/assets/admin.css?{cache-buster}" />
-		<link rel="stylesheet" type="text/css" href="{relative_path}/assets/vendor/mdl/mdl.min.css?{cache-buster}" />
 		<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-	
+
 		<script>
 			var RELATIVE_PATH = "{relative_path}";
 			var config = JSON.parse('{{configJSON}}');
@@ -20,7 +19,7 @@
 			};
 		</script>
 
-		<script src="https://storage.googleapis.com/code.getmdl.io/1.0.3/material.min.js"></script>
+		<script src="https://storage.googleapis.com/code.getmdl.io/1.3.0/material.min.js"></script>
 		<script type="text/javascript" src="{relative_path}/assets/vendor/jquery/sortable/Sortable.js?{cache-buster}"></script>
 		<script type="text/javascript" src="{relative_path}/assets/acp.min.js?{cache-buster}"></script>
 		<script type="text/javascript" src="{relative_path}/assets/vendor/colorpicker/colorpicker.js?{cache-buster}"></script>

src/views/admin/manage/tags.tpl

@@ -10,12 +10,11 @@
 					<!-- BEGIN tags -->
 					<div class="tag-row" data-tag="{tags.value}">
 						<div data-value="{tags.value}">
-							<span class="tag-item" data-tag="{tags.value}" style="
+							<span class="mdl-chip mdl-chip--contact tag-item" data-tag="{tags.value}" style="
 								<!-- IF tags.color -->color: {tags.color};<!-- ENDIF tags.color -->
-								<!-- IF tags.bgColor -->background-color: {tags.bgColor};<!-- ENDIF tags.bgColor -->
+								<!-- IF tags.bgColor -->background-color: {tags.bgColor};<!-- ENDIF tags.bgColor -->">
-							">{tags.value}</span>
+							    <span class="mdl-chip__contact mdl-color--light-blue mdl-color-text--white tag-topic-count">{tags.score}</span>
-							<span class="tag-topic-count">
+							    <span class="mdl-chip__text">{tags.value}</span>
-								<a href="{config.relative_path}/tags/{tags.value}" target="_blank">{tags.score}</a>
 							</span>
 						</div>
 						<div class="tag-modal hidden">