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.

5 files changed, 46 insertions, 25 deletions

diff --git a/core/css/systemtags.css b/core/css/systemtags.css
index d847baa6800..2a02bc05ea7 100644
--- a/core/css/systemtags.css
+++ b/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;
 }
 
diff --git a/core/js/systemtags/systemtags.js b/core/js/systemtags/systemtags.js
index 05d3ba2c7b8..042f49bb8ed 100644
--- a/core/js/systemtags/systemtags.js
+++ b/core/js/systemtags/systemtags.js
@@ -31,15 +31,25 @@
 				);
 			}
 
-			var $span = $('<span>'),
-				$tag = $('<em>').text(
-					t('core', '({uservisible}, {userassignable})', {
-						uservisible: tag.userVisible ? t('core', 'visible') : t('core', 'invisible'),
-						userassignable: tag.userAssignable ? t('core', 'assignable') : t('core', 'not assignable')
+			var $span = $('<span>');
+			$span.append(escapeHTML(tag.name));
+
+			var scope;
+			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;
 		}
 	};
diff --git a/core/js/systemtags/systemtagsinputfield.js b/core/js/systemtags/systemtagsinputfield.js
index b90ecbe4265..3e0bfbbc55c 100644
--- a/core/js/systemtags/systemtagsinputfield.js
+++ b/core/js/systemtags/systemtagsinputfield.js
@@ -34,8 +34,7 @@
 		'    <span class="label">{{{tagMarkup}}}</span>' +
 		'{{else}}' +
 		'    <span class="label">{{name}}</span>' +
-		'{{/if}}' +
-		'<span class="comma">,&nbsp;</span>';
+		'{{/if}}';
 
 	var RENAME_FORM_TEMPLATE =
 		'<form class="systemtags-rename-form">' +
diff --git a/core/js/tests/specs/systemtags/systemtagsSpec.js b/core/js/tests/specs/systemtags/systemtagsSpec.js
index 2e8390ad9f0..515b75258a0 100644
--- a/core/js/tests/specs/systemtags/systemtagsSpec.js
+++ b/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,
-			userVisible: false
+			userAssignable: true,
+			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)');
+	});
 });
diff --git a/core/js/tests/specs/systemtags/systemtagsinputfieldSpec.js b/core/js/tests/specs/systemtags/systemtagsinputfieldSpec.js
index 07e926cd2a9..a2347eb6893 100644
--- a/core/js/tests/specs/systemtags/systemtagsinputfieldSpec.js
+++ b/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;