Use boxes for system tags, shorten permission text

Permission text now doesn't appear when all permissions are there, or
shows as "invisible" or "not assignable", which should better cover all
use cases.

Changed select2 style to use boxes in the input field.

core/css/systemtags.css

@@ -45,7 +45,7 @@
 }
 
 .systemtags-select2-container { 
-	width: 80%;
+	width: 100%;
 }
 
 .systemtags-select2-container .select2-choices {
@@ -62,24 +62,18 @@
 }
 
 .systemtags-select2-container .select2-choices .select2-search-choice {
-	border: 0;
-	box-shadow: none;
-	background: none;
-	padding: 0;
-	margin: 0;
 	line-height: 20px;
+	padding-left: 5px;
 }
 
 .systemtags-select2-container .select2-choices .select2-search-choice.select2-locked .label {
-	font-style: italic;
+	opacity: 0.5;
 }
 
 .systemtags-select2-container .select2-choices .select2-search-choice-close {
 	display: none;
 }
 .systemtags-select2-container .select2-choices .select2-search-field input {
-	margin: 0;
-	padding: 0;
 	line-height: 20px;
 }
 

core/js/systemtags/systemtags.js

@@ -31,15 +31,25 @@
 				);
 			}
 
-			var $span = $('<span>'),
+			var $span = $('<span>');
-				$tag = $('<em>').text(
+			$span.append(escapeHTML(tag.name));
-					t('core', '({uservisible}, {userassignable})', {
+
-						uservisible: tag.userVisible ? t('core', 'visible') : t('core', 'invisible'),
+			var scope;
-						userassignable: tag.userAssignable ? t('core', 'assignable') : t('core', 'not assignable')
+			if (!tag.userAssignable) {
+				scope = t('core', 'not assignable');
+			}
+			if (!tag.userVisible) {
+				// invisible also implicitly means not assignable
+				scope = t('core', 'invisible');
+			}
+			if (scope) {
+				var $tag = $('<em>').text(' ' +
+					t('core', '({scope})', {
+						scope: scope
 					})
 				);
-			$span.append(escapeHTML(tag.name) + ' ');
+				$span.append($tag);
-			$span.append($tag);
+			}
 			return $span;
 		}
 	};

core/js/systemtags/systemtagsinputfield.js

@@ -34,8 +34,7 @@
 		'    <span class="label">{{{tagMarkup}}}</span>' +
 		'{{else}}' +
 		'    <span class="label">{{name}}</span>' +
-		'{{/if}}' +
+		'{{/if}}';
-		'<span class="comma">,&nbsp;</span>';
 
 	var RENAME_FORM_TEMPLATE =
 		'<form class="systemtags-rename-form">' +

core/js/tests/specs/systemtags/systemtagsSpec.js

@@ -34,7 +34,7 @@ describe('OC.SystemTags tests', function() {
 			userVisible: true
 		});
 		var $return = OC.SystemTags.getDescriptiveTag(tag);
-		expect($return.text()).toEqual('Twenty Three (visible, assignable)');
+		expect($return.text()).toEqual('Twenty Three');
 		expect($return.hasClass('non-existing-tag')).toEqual(false);
 	});
 
@@ -42,10 +42,28 @@ describe('OC.SystemTags tests', function() {
 		var $return = OC.SystemTags.getDescriptiveTag({
 			id: 42,
 			name: 'Fourty Two',
-			userAssignable: false,
+			userAssignable: true,
-			userVisible: false
+			userVisible: true
 		});
-		expect($return.text()).toEqual('Fourty Two (invisible, not assignable)');
+		expect($return.text()).toEqual('Fourty Two');
 		expect($return.hasClass('non-existing-tag')).toEqual(false);
 	});
+
+	it('scope', function() {
+		function testScope(userVisible, userAssignable, expectedText) {
+			var $return = OC.SystemTags.getDescriptiveTag({
+				id: 42,
+				name: 'Fourty Two',
+				userAssignable: userAssignable,
+				userVisible: userVisible
+			});
+			expect($return.text()).toEqual(expectedText);
+			expect($return.hasClass('non-existing-tag')).toEqual(false);
+		}
+
+		testScope(true, true, 'Fourty Two');
+		testScope(false, true, 'Fourty Two (invisible)');
+		testScope(false, false, 'Fourty Two (invisible)');
+		testScope(true, false, 'Fourty Two (not assignable)');
+	});
 });

core/js/tests/specs/systemtags/systemtagsinputfieldSpec.js

@@ -234,12 +234,12 @@ describe('OC.SystemTags.SystemTagsInputField tests', function() {
 		it('formatResult renders tag name with visibility', function() {
 			var opts = select2Stub.getCall(0).args[0];
 			var $el = $(opts.formatResult({id: '1', name: 'test', userVisible: false, userAssignable: false}));
-			expect($el.find('.label').text()).toEqual('test (invisible, not assignable)');
+			expect($el.find('.label').text()).toEqual('test (invisible)');
 		});
 		it('formatSelection renders tag name with visibility', function() {
 			var opts = select2Stub.getCall(0).args[0];
 			var $el = $(opts.formatSelection({id: '1', name: 'test', userVisible: false, userAssignable: false}));
-			expect($el.text().trim()).toEqual('test (invisible, not assignable),');
+			expect($el.text().trim()).toEqual('test (invisible)');
 		});
 		describe('initSelection', function() {
 			var fetchStub;
@@ -337,7 +337,7 @@ describe('OC.SystemTags.SystemTagsInputField tests', function() {
 		it('formatSelection renders tag name only', function() {
 			var opts = select2Stub.getCall(0).args[0];
 			var $el = $(opts.formatSelection({id: '1', name: 'test'}));
-			expect($el.text().trim()).toEqual('test,');
+			expect($el.text().trim()).toEqual('test');
 		});
 		describe('initSelection', function() {
 			var fetchStub;