summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--core/js/multiselect.js52
-rw-r--r--settings/css/settings.css9
-rw-r--r--settings/js/users/groups.js4
-rw-r--r--settings/js/users/users.js161
-rw-r--r--settings/templates/users/part.createuser.php11
-rw-r--r--settings/templates/users/part.userlist.php8
6 files changed, 128 insertions, 117 deletions
diff --git a/core/js/multiselect.js b/core/js/multiselect.js
index 71cf3e10a69..bdf420a2f7f 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 d3fd395747e..6ed707f7c45 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 e83f00970c2..8f4d95432a8 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($('<option>', { value: result.groupname })
- .text(result.groupname));
}
GroupList.toggleAddGroup();
}).fail(function(result) {
diff --git a/settings/js/users/users.js b/settings/js/users/users.js
index 4ce77648826..7922cd9c656 100644
--- a/settings/js/users/users.js
+++ b/settings/js/users/users.js
@@ -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'),
{
diff --git a/settings/templates/users/part.createuser.php b/settings/templates/users/part.createuser.php
index 0fc5a2bdeaa..6f23d06cfa3 100644
--- a/settings/templates/users/part.createuser.php
+++ b/settings/templates/users/part.createuser.php
@@ -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']): ?>
diff --git a/settings/templates/users/part.userlist.php b/settings/templates/users/part.userlist.php
index 2bdd0714a3c..bab68e5a765 100644
--- a/settings/templates/users/part.userlist.php
+++ b/settings/templates/users/part.userlist.php
@@ -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")')) ?>">
generated by cgit v1.2.3 (git 2.39.1) at 2025-02-03 19:40:17 +0000