From d640929861bb86987a77485d4933cb3c35403f3b Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Sat, 22 Jul 2017 20:53:51 +0200 Subject: [PATCH] Overhauled ACP user list edit icons See #2347 --- .../install/files/acp/templates/userList.tpl | 72 +++++++---- .../WoltLabSuite/Core/Acp/Ui/User/Editor.js | 122 ++++++++++++++++++ 2 files changed, 172 insertions(+), 22 deletions(-) create mode 100644 wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/User/Editor.js diff --git a/wcfsetup/install/files/acp/templates/userList.tpl b/wcfsetup/install/files/acp/templates/userList.tpl index 4fb5671c95..f4f950d81e 100644 --- a/wcfsetup/install/files/acp/templates/userList.tpl +++ b/wcfsetup/install/files/acp/templates/userList.tpl @@ -42,6 +42,10 @@ WCF.ACP.User.SendNewPasswordHandler.init(); {/if} + require(['WoltLabSuite/Core/Acp/Ui/User/Editor'], function (AcpUiUserList) { + AcpUiUserList.init(); + }); + {event name='javascriptInit'} }); @@ -96,35 +100,59 @@ {foreach from=$users item=user} - + + + + + + {@$user->userID} + {@$user->getAvatar()->getImageTag(24)} + {if $user->editable} - - {else} - - {/if} - {if $user->deletable} - - {else} - - {/if} - {if $user->bannable} - + {$user->username} {else} - + {$user->username} {/if} - {if $user->canBeEnabled} - - {else} - + {if MODULE_USER_RANK} + {if $user->getUserTitle()} {$user->getUserTitle()}{/if} + {if $user->getRank() && $user->getRank()->rankImage} {@$user->getRank()->getImage()}{/if} {/if} - - {event name='rowButtons'} - {@$user->userID} - {@$user->getAvatar()->getImageTag(24)} - {if $user->editable}{$user->username}{else}{$user->username}{/if}{if MODULE_USER_RANK}{if $user->getUserTitle()} {$user->getUserTitle()}{/if}{if $user->getRank() && $user->getRank()->rankImage} {@$user->getRank()->getImage()}{/if}{/if} {foreach from=$columnHeads key=column item=columnLanguageVariable} {if $columnValues[$user->userID][$column]|isset}{@$columnValues[$user->userID][$column]}{/if} diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/User/Editor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/User/Editor.js new file mode 100644 index 0000000000..25aa931a1f --- /dev/null +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/User/Editor.js @@ -0,0 +1,122 @@ +/** + * User editing capabilities for the user list. + * + * @author Alexander Ebert + * @copyright 2001-2017 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Acp/Ui/User/Editor + * @since 3.1 + */ +define(['Ajax', 'Core', 'Ui/SimpleDropdown'], function(Ajax, Core, UiSimpleDropdown) { + "use strict"; + + /** + * @exports WoltLabSuite/Core/Acp/Ui/User/Editor + */ + return { + /** + * Initializes the edit dropdown for each user. + */ + init: function () { + elBySelAll('.jsUserRow', undefined, this._initUser.bind(this)); + }, + + /** + * Initializes the edit dropdown for a user. + * + * @param {Element} userRow + * @protected + */ + _initUser: function (userRow) { + var userId = ~~elData(userRow, 'object-id'); + var dropdownMenu = UiSimpleDropdown.getDropdownMenu('userListDropdown' + userId); + var legacyButtonContainer = elBySel('.jsLegacyButtons', userRow); + + UiSimpleDropdown.registerCallback('userListDropdown' + userId, (function (identifier, action) { + if (action === 'open') { + this._rebuild(userId, dropdownMenu, legacyButtonContainer); + } + }).bind(this)); + + var editLink = elBySel('.jsEditLink', dropdownMenu); + if (editLink !== null) { + elBySel('.dropdownToggle', userRow).addEventListener('dblclick', function (event) { + event.preventDefault(); + + editLink.click(); + }); + } + }, + + /** + * Rebuilds the dropdown by adding wrapper links for legacy buttons, + * that will eventually receive the click event. + * + * @param {int} userId + * @param {Element} dropdownMenu + * @param {Element} legacyButtonContainer + * @protected + */ + _rebuild: function (userId, dropdownMenu, legacyButtonContainer) { + elBySelAll('.jsLegacyItem', dropdownMenu, elRemove); + + // inject buttons + var button, item, link; + var items = []; + var deleteButton = null; + for (var i = 0, length = legacyButtonContainer.childElementCount; i < length; i++) { + button = legacyButtonContainer.children[i]; + if (button.classList.contains('jsDeleteButton')) { + deleteButton = button; + continue; + } + + item = elCreate('li'); + item.className = 'jsLegacyItem'; + item.innerHTML = ''; + + link = item.children[0]; + link.textContent = elData(button, 'tooltip'); + (function(button) { + link.addEventListener(WCF_CLICK_EVENT, function (event) { + event.preventDefault(); + + // forward click onto original button + if (button.nodeName === 'A') button.click(); + else Core.triggerEvent(button, WCF_CLICK_EVENT); + }); + })(button); + + items.push(item); + } + + while (items.length) { + dropdownMenu.insertBefore(items.pop(), dropdownMenu.firstElementChild); + } + + if (deleteButton !== null) { + elBySel('.jsDispatchDelete', dropdownMenu).addEventListener(WCF_CLICK_EVENT, function (event) { + event.preventDefault(); + + Core.triggerEvent(deleteButton, WCF_CLICK_EVENT); + }); + } + + // check if there are visible items before each divider + for (i = 0, length = dropdownMenu.childElementCount; i < length; i++) { + elShow(dropdownMenu.children[i]); + } + + var hasItem = false; + for (i = 0, length = dropdownMenu.childElementCount; i < length; i++) { + item = dropdownMenu.children[i]; + if (item.classList.contains('dropdownDivider')) { + if (!hasItem) elHide(item); + } + else { + hasItem = true; + } + } + } + }; +}); -- 2.20.1