From e8c2d62c6bc008a963fe69cc868fc95027b72c6b Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Tue, 23 Aug 2016 17:22:10 +0200 Subject: [PATCH 1/3] Users page lazy multiselect group dropdowns Instead of pre-rendering all multiselects with lots of group entries, the current groups are now displayed as simple labels. Behind the labels there is a pencil icon like for other fields. When clicking the pencil icon, the dropdown will be spawned and will open itself. Upon closing of the dropdown, the label comes back with the updated selection and the dropdown is destroyed. --- core/js/multiselect.js | 52 +++--- settings/css/settings.css | 9 ++ settings/js/users/groups.js | 4 - settings/js/users/users.js | 161 ++++++++++--------- settings/templates/users/part.createuser.php | 11 +- settings/templates/users/part.userlist.php | 8 +- 6 files changed, 128 insertions(+), 117 deletions(-) diff --git a/core/js/multiselect.js b/core/js/multiselect.js index 71cf3e10a698c..bdf420a2f7faa 100644 --- a/core/js/multiselect.js +++ b/core/js/multiselect.js @@ -32,7 +32,7 @@ 'onuncheck':false, 'minWidth': 'default;' }; - var slideDuration = 200; + var slideDuration = 0; $(this).attr('data-msid', multiSelectId); $.extend(settings,options); $.each(this.children(),function(i,option) { @@ -75,6 +75,26 @@ var self = this; self.menuDirection = 'down'; + + function closeDropDown() { + if(!button.parent().data('preventHide')) { + // How can I save the effect in a var? + if(self.menuDirection === 'down') { + button.parent().children('ul').slideUp(slideDuration,function() { + button.parent().children('ul').remove(); + button.removeClass('active down'); + $(self).trigger($.Event('dropdownclosed', settings)); + }); + } else { + button.parent().children('ul').fadeOut(slideDuration,function() { + button.parent().children('ul').remove(); + button.removeClass('active up'); + $(self).trigger($.Event('dropdownclosed', settings)); + }); + } + } + } + button.click(function(event){ var button=$(this); @@ -83,21 +103,20 @@ button.parent().children('ul').slideUp(slideDuration,function() { button.parent().children('ul').remove(); button.removeClass('active down'); + $(self).trigger($.Event('dropdownclosed', settings)); }); } else { button.parent().children('ul').fadeOut(slideDuration,function() { button.parent().children('ul').remove(); button.removeClass('active up'); + $(self).trigger($.Event('dropdownclosed', settings)); }); } return; } + // tell other lists to shut themselves var lists=$('ul.multiselectoptions'); - lists.slideUp(slideDuration,function(){ - lists.remove(); - $('div.multiselect').removeClass('active'); - button.addClass('active'); - }); + lists.trigger($.Event('shut')); button.addClass('active'); event.stopPropagation(); var options=$(this).parent().next().children(); @@ -309,29 +328,16 @@ list.detach().insertBefore($(this)); list.addClass('up'); button.addClass('up'); - list.fadeIn(); + list.show(); self.menuDirection = 'up'; } list.click(function(event) { event.stopPropagation(); }); + list.one('shut', closeDropDown); }); - $(window).click(function() { - if(!button.parent().data('preventHide')) { - // How can I save the effect in a var? - if(self.menuDirection === 'down') { - button.parent().children('ul').slideUp(slideDuration,function() { - button.parent().children('ul').remove(); - button.removeClass('active down'); - }); - } else { - button.parent().children('ul').fadeOut(slideDuration,function() { - button.parent().children('ul').remove(); - button.removeClass('active up'); - }); - } - } - }); + + $(window).click(closeDropDown); return span; }; diff --git a/settings/css/settings.css b/settings/css/settings.css index d3fd395747ee4..6ed707f7c451d 100644 --- a/settings/css/settings.css +++ b/settings/css/settings.css @@ -267,6 +267,15 @@ span.usersLastLoginTooltip { white-space: nowrap; } top: 3px; } +#newuser .groups { + display: inline; +} + +#newuser .groupsListContainer.hidden, +#userlist .groupsListContainer.hidden { + display: none; +} + tr:hover>td.password>span, tr:hover>td.displayName>span { margin:0; cursor:pointer; } tr:hover>td.remove>a, tr:hover>td.password>img,tr:hover>td.displayName>img, tr:hover>td.quota>img { visibility:visible; cursor:pointer; } td.remove { diff --git a/settings/js/users/groups.js b/settings/js/users/groups.js index e83f00970c2e7..8f4d95432a81a 100644 --- a/settings/js/users/groups.js +++ b/settings/js/users/groups.js @@ -138,10 +138,6 @@ GroupList = { var addedGroup = result.groupname; UserList.availableGroups = $.unique($.merge(UserList.availableGroups, [addedGroup])); GroupList.addGroup(result.groupname); - - $('.groupsselect, .subadminsselect') - .append($('')); + }); + + $td.append($groupsSelect); + + if (isSubadminSelect) { + UserList.applySubadminSelect($groupsSelect, user, checked); + } else { + UserList.applyGroupSelect($groupsSelect, user, checked); + } + + $groupsListContainer.addClass('hidden'); + $td.find('.multiselect:not(.groupsListContainer):first').click(); + $groupsSelect.on('dropdownclosed', function(e) { + $groupsSelect.remove(); + $td.find('.multiselect:not(.groupsListContainer)').parent().remove(); + $td.find('.multiselectoptions').remove(); + $groupsListContainer.removeClass('hidden'); + UserList._updateGroupListLabel($td, e.checked); + }); + }, + + /** + * Updates the groups list td with the given groups selection + */ + _updateGroupListLabel: function($td, groups) { + var placeholder = $td.find('.groupsListContainer').attr('data-placeholder'); + var $groupsEl = $td.find('.groupsList'); + $groupsEl.text(groups.join(', ') || placeholder || t('settings', 'no group')); + $td.data('groups', groups); } }; @@ -637,13 +635,6 @@ $(document).ready(function () { // TODO: move other init calls inside of initialize UserList.initialize($('#userlist')); - $('.groupsselect').each(function (index, element) { - UserList.applyGroupSelect(element); - }); - $('.subadminsselect').each(function (index, element) { - UserList.applySubadminSelect(element); - }); - $userListBody.on('click', '.password', function (event) { event.stopPropagation(); @@ -787,11 +778,25 @@ $(document).ready(function () { }); }); + $('#newuser .groupsListContainer').on('click', function (event) { + var $target = $(event.target); + event.stopPropagation(); + var $div = $(this).closest('.groups'); + UserList._triggerGroupEdit($div); + }); + $userListBody.on('click', '.groups .groupsListContainer, .subadmins .groupsListContainer', function (event) { + event.stopPropagation(); + var $td = $(this).closest('td'); + var isSubadminSelect = $td.hasClass('subadmins'); + UserList._triggerGroupEdit($td, isSubadminSelect); + }); + // init the quota field select box after it is shown the first time $('#app-settings').one('show', function() { $(this).find('#default_quota').singleSelect().on('change', UserList.onQuotaSelect); }); + UserList._updateGroupListLabel($('#newuser .groups'), []); $('#newuser').submit(function (event) { event.preventDefault(); var username = $('#newusername').val(); @@ -827,7 +832,7 @@ $(document).ready(function () { } promise.then(function() { - var groups = $('#newusergroups').val() || []; + var groups = $('#newuser .groups').data('groups') || []; $.post( OC.generateUrl('/settings/users/users'), { diff --git a/settings/templates/users/part.createuser.php b/settings/templates/users/part.createuser.php index 0fc5a2bdeaaea..6f23d06cfa3fc 100644 --- a/settings/templates/users/part.createuser.php +++ b/settings/templates/users/part.createuser.php @@ -10,16 +10,7 @@ - +
diff --git a/settings/templates/users/part.userlist.php b/settings/templates/users/part.userlist.php index 2bdd0714a3cd6..bab68e5a765b9 100644 --- a/settings/templates/users/part.userlist.php +++ b/settings/templates/users/part.userlist.php @@ -38,9 +38,13 @@ src="" alt="t('change email address'))?>" title="t('change email address'))?>"/> - +
+ - +
+ ') } - $.each(this.availableGroups, function (i, group) { + function createItem(group) { if (isSubadminSelect && group === 'admin') { // can't become subadmin of "admin" group return; } $groupsSelect.append($('')); + } + + $.each(this.availableGroups, function (i, group) { + // some new groups might be selected but not in the available groups list yet + var extraIndex = extraGroups.indexOf(group); + if (extraIndex >= 0) { + // remove extra group as it was found + extraGroups.splice(extraIndex, 1); + } + createItem(group); + }); + $.each(extraGroups, function (i, group) { + createItem(group); }); $td.append($groupsSelect); @@ -779,7 +793,6 @@ $(document).ready(function () { }); $('#newuser .groupsListContainer').on('click', function (event) { - var $target = $(event.target); event.stopPropagation(); var $div = $(this).closest('.groups'); UserList._triggerGroupEdit($div); From 1f3d34eb28cfc993259520fc8feb060e9b362f82 Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Wed, 24 Aug 2016 10:06:46 +0200 Subject: [PATCH 3/3] Fix group sorting in user list group selection --- settings/templates/users/main.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/settings/templates/users/main.php b/settings/templates/users/main.php index f50f83b38b364..b363a4c4da822 100644 --- a/settings/templates/users/main.php +++ b/settings/templates/users/main.php @@ -19,10 +19,10 @@ $userlistParams = array(); $allGroups=array(); -foreach($_["groups"] as $group) { +foreach($_["adminGroup"] as $group) { $allGroups[] = $group['name']; } -foreach($_["adminGroup"] as $group) { +foreach($_["groups"] as $group) { $allGroups[] = $group['name']; } $userlistParams['subadmingroups'] = $allGroups;