open-dsi
/
nextcloud-server
mirror of https://github.com/nextcloud/server
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Users page lazy multiselect group dropdowns

Browse Source 
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.
pull/1128/head
Vincent Petry 9 years ago committed by Arthur Schiwon
parent 3647fbe7cd
commit e8c2d62c6b
No known key found for this signature in database
GPG Key ID: 7424F1874854DF23
6 changed files with 128 additions and 117 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 52
      core/js/multiselect.js
  2. 9
      settings/css/settings.css
  3. 4
      settings/js/users/groups.js
  4. 161
      settings/js/users/users.js
  5. 11
      settings/templates/users/part.createuser.php
  6. 8
      settings/templates/users/part.userlist.php

52
core/js/multiselect.js
Unescape View File

@ -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;
};

9
settings/css/settings.css
Unescape View File

@ -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 {

4
settings/js/users/groups.js
Unescape View File

@ -138,10 +138,6 @@ GroupList = {
var addedGroup = result.groupname;
UserList.availableGroups = $.unique($.merge(UserList.availableGroups, [addedGroup]));
GroupList.addGroup(result.groupname);
$('.groupsselect, .subadminsselect')
.append($('<option>', { value: result.groupname })
.text(result.groupname));
}
GroupList.toggleAddGroup();
}).fail(function(result) {

161
settings/js/users/users.js
Unescape View File

@ -59,9 +59,6 @@ var UserList = {
var $tr = $userListBody.find('tr:first-child').clone();
// this removes just the `display:none` of the template row
$tr.removeAttr('style');
var subAdminsEl;
var subAdminSelect;
var groupsSelect;
/**
* Avatar or placeholder
@ -88,32 +85,17 @@ var UserList = {
$tr.find('td.mailAddress > .action').tooltip({placement: 'top'});
$tr.find('td.password > .action').tooltip({placement: 'top'});
/**
* groups and subadmins
*/
// make them look like the multiselect buttons
// until they get time to really get initialized
groupsSelect = $('<select multiple="multiple" class="groupsselect multiselect button" data-placehoder="Groups" title="' + t('settings', 'No group') + '"></select>')
.data('username', user.name)
.data('user-groups', user.groups);
if ($tr.find('td.subadmins').length > 0) {
subAdminSelect = $('<select multiple="multiple" class="subadminsselect multiselect button" data-placehoder="subadmins" title="' + t('settings', 'No group') + '">')
.data('username', user.name)
.data('user-groups', user.groups)
.data('subadmin', user.subadmin);
$tr.find('td.subadmins').empty();
}
$.each(this.availableGroups, function (i, group) {
groupsSelect.append($('<option value="' + escapeHTML(group) + '">' + escapeHTML(group) + '</option>'));
if (typeof subAdminSelect !== 'undefined' && group !== 'admin') {
subAdminSelect.append($('<option value="' + escapeHTML(group) + '">' + escapeHTML(group) + '</option>'));
}
});
$tr.find('td.groups').empty().append(groupsSelect);
subAdminsEl = $tr.find('td.subadmins');
if (subAdminsEl.length > 0) {
subAdminsEl.append(subAdminSelect);
}
var $tdGroups = $tr.find('td.groups');
this._updateGroupListLabel($tdGroups, user.groups);
$tdGroups.find('.action').tooltip({placement: 'top'});
var $tdSubadmins = $tr.find('td.subadmins');
this._updateGroupListLabel($tdSubadmins, user.subadmin);
$tdSubadmins.find('.action').tooltip({placement: 'top'});
/**
* remove action
@ -200,10 +182,6 @@ var UserList = {
// defer init so the user first sees the list appear more quickly
window.setTimeout(function(){
$quotaSelect.singleSelect();
UserList.applyGroupSelect(groupsSelect);
if (subAdminSelect) {
UserList.applySubadminSelect(subAdminSelect);
}
}, 0);
return $tr;
},
@ -324,7 +302,7 @@ var UserList = {
},
markRemove: function(uid) {
var $tr = UserList.getRow(uid);
var groups = $tr.find('.groups .groupsselect').val();
var groups = $tr.find('.groups').data('groups');
for(var i in groups) {
var gid = groups[i];
var $li = GroupList.getGroupLI(gid);
@ -339,7 +317,7 @@ var UserList = {
},
undoRemove: function(uid) {
var $tr = UserList.getRow(uid);
var groups = $tr.find('.groups .groupsselect').val();
var groups = $tr.find('.groups').data('groups');
for(var i in groups) {
var gid = groups[i];
var $li = GroupList.getGroupLI(gid);
@ -440,19 +418,9 @@ var UserList = {
});
},
applyGroupSelect: function (element) {
var checked = [];
applyGroupSelect: function (element, user, checked) {
var $element = $(element);
var user = UserList.getUID($element);
if ($element.data('user-groups')) {
if (typeof $element.data('user-groups') === 'string') {
checked = $element.data('user-groups').split(", ");
}
else {
checked = $element.data('user-groups');
}
}
var checkHandler = null;
if(user) { // Only if in a user row, and not the #newusergroups select
checkHandler = function (group) {
@ -492,13 +460,6 @@ var UserList = {
};
}
var addGroup = function (select, group) {
$('select[multiple]').each(function (index, element) {
$element = $(element);
if ($element.find('option').filterAttr('value', group).length === 0 &&
select.data('msid') !== $element.data('msid')) {
$element.append('<option value="' + escapeHTML(group) + '">' + escapeHTML(group) + '</option>');
}
});
GroupList.addGroup(escapeHTML(group));
};
var label;
@ -519,19 +480,8 @@ var UserList = {
});
},
applySubadminSelect: function (element) {
var checked = [];
applySubadminSelect: function (element, user, checked) {
var $element = $(element);
var user = UserList.getUID($element);
if ($element.data('subadmin')) {
if (typeof $element.data('subadmin') === 'string') {
checked = $element.data('subadmin').split(", ");
}
else {
checked = $element.data('subadmin');
}
}
var checkHandler = function (group) {
if (group === 'admin') {
return false;
@ -547,15 +497,7 @@ var UserList = {
);
};
var addSubAdmin = function (group) {
$('select[multiple]').each(function (index, element) {
if ($(element).find('option').filterAttr('value', group).length === 0) {
$(element).append('<option value="' + escapeHTML(group) + '">' + escapeHTML(group) + '</option>');
}
});
};
$element.multiSelect({
createCallback: addSubAdmin,
createText: null,
checked: checked,
oncheck: checkHandler,
@ -613,6 +555,62 @@ var UserList = {
}
}
);
},
/**
* Creates a temporary jquery.multiselect selector on the given group field
*/
_triggerGroupEdit: function($td, isSubadminSelect) {
var $groupsListContainer = $td.find('.groupsListContainer');
var placeholder = $groupsListContainer.attr('data-placeholder') || t('settings', 'no group');
var user = UserList.getUID($td);
var checked = $td.data('groups') || [];
$td.find('.multiselectoptions').remove();
// jquery.multiselect can only work with select+options in DOM ? We'll give jquery.multiselect what it wants...
var $groupsSelect;
if (isSubadminSelect) {
$groupsSelect = $('<select multiple="multiple" class="groupsselect multiselect button" title="' + placeholder + '"></select>');
} else {
$groupsSelect = $('<select multiple="multiple" class="subadminsselect multiselect button" title="' + placeholder + '"></select>')
}
$.each(this.availableGroups, function (i, group) {
if (isSubadminSelect && group === 'admin') {
// can't become subadmin of "admin" group
return;
}
$groupsSelect.append($('<option value="' + escapeHTML(group) + '">' + escapeHTML(group) + '</option>'));
});
$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'),
{

11
settings/templates/users/part.createuser.php
Unescape View File

@ -10,16 +10,7 @@
<input id="newemail" type="text" style="display:none"
placeholder="<?php p($l->t('E-Mail'))?>"
autocomplete="off" autocapitalize="off" autocorrect="off" />
<select
class="groupsselect" id="newusergroups" data-placeholder="groups"
title="<?php p($l->t('Groups'))?>" multiple="multiple">
<?php foreach($_["adminGroup"] as $adminGroup): ?>
<option value="<?php p($adminGroup['name']);?>"><?php p($adminGroup['name']); ?></option>
<?php endforeach; ?>
<?php foreach($_["groups"] as $group): ?>
<option value="<?php p($group['name']);?>"><?php p($group['name']);?></option>
<?php endforeach;?>
</select>
<div class="groups"><div class="groupsListContainer multiselect button" data-placeholder="<?php p($l->t('Groups'))?>"><span class="title groupsList"></span><span class="icon-triangle-s"></span></div></div>
<input type="submit" class="button" value="<?php p($l->t('Create'))?>" />
</form>
<?php if((bool)$_['recoveryAdminEnabled']): ?>

8
settings/templates/users/part.userlist.php
Unescape View File

@ -38,9 +38,13 @@
src="<?php p(image_path('core', 'actions/rename.svg'))?>"
alt="<?php p($l->t('change email address'))?>" title="<?php p($l->t('change email address'))?>"/>
</td>
<td class="groups"></td>
<td class="groups"><div class="groupsListContainer multiselect button"
><span class="title groupsList"></span><span class="icon-triangle-s"></span></div>
</td>
<?php if(is_array($_['subadmins']) || $_['subadmins']): ?>
<td class="subadmins"></td>
<td class="subadmins"><div class="groupsListContainer multiselect button"
><span class="title groupsList"></span><span class="icon-triangle-s"></span></div>
</td>
<?php endif;?>
<td class="quota">
<select class="quota-user" data-inputtitle="<?php p($l->t('Please enter storage quota (ex: "512 MB" or "12 GB")')) ?>">

Write Preview
Loading…
Cancel
Save