From 1473e156f4c1f6c634cc7933343de0fbcc91cbe8 Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Wed, 27 Jan 2016 15:49:11 +0100 Subject: [PATCH] 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 | 12 +++------ core/js/systemtags/systemtags.js | 24 ++++++++++++----- core/js/systemtags/systemtagsinputfield.js | 3 +-- .../tests/specs/systemtags/systemtagsSpec.js | 26 ++++++++++++++++--- .../systemtags/systemtagsinputfieldSpec.js | 6 ++--- 5 files changed, 46 insertions(+), 25 deletions(-) diff --git a/core/css/systemtags.css b/core/css/systemtags.css index d847baa680..2a02bc05ea 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 05d3ba2c7b..042f49bb8e 100644 --- a/core/js/systemtags/systemtags.js +++ b/core/js/systemtags/systemtags.js @@ -31,15 +31,25 @@ ); } - var $span = $(''), - $tag = $('').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.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 = $('').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 b90ecbe426..3e0bfbbc55 100644 --- a/core/js/systemtags/systemtagsinputfield.js +++ b/core/js/systemtags/systemtagsinputfield.js @@ -34,8 +34,7 @@ ' {{{tagMarkup}}}' + '{{else}}' + ' {{name}}' + - '{{/if}}' + - ', '; + '{{/if}}'; var RENAME_FORM_TEMPLATE = '
' + diff --git a/core/js/tests/specs/systemtags/systemtagsSpec.js b/core/js/tests/specs/systemtags/systemtagsSpec.js index 2e8390ad9f..515b75258a 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 07e926cd2a..a2347eb689 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;