Merge pull request #21958 from owncloud/systemtags-style

Use boxes for system tags, shorten permission text

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

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">' +

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

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

@@ -293,12 +293,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;
@@ -396,7 +396,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;