Merge pull request #5473 from pichalite/acp-tags

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%);
-		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;
-		}
+		font-size: 14px;
 	}
 }

public/src/admin/manage/tags.js

@@ -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,7 +90,7 @@ 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,
@@ -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);
 					}

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');
 		},
 	};
 

src/views/admin/header.tpl

@@ -5,7 +5,6 @@
 		<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>
@@ -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 -->
-							">{tags.value}</span>
-							<span class="tag-topic-count">
-								<a href="{config.relative_path}/tags/{tags.value}" target="_blank">{tags.score}</a>
+								<!-- IF tags.bgColor -->background-color: {tags.bgColor};<!-- ENDIF tags.bgColor -->">
+							    <span class="mdl-chip__contact mdl-color--light-blue mdl-color-text--white tag-topic-count">{tags.score}</span>
+							    <span class="mdl-chip__text">{tags.value}</span>
 							</span>
 						</div>
 						<div class="tag-modal hidden">