Added styles for ACLs

diff --git a/wcfsetup/install/files/js/WCF.ACL.js b/wcfsetup/install/files/js/WCF.ACL.js
index a171fe9d98e2d0a24289a33b3c28003540b93ace..5e703d670345326290e321ebc0f26363e48c027b 100644 (file)
--- a/wcfsetup/install/files/js/WCF.ACL.js
+++ b/wcfsetup/install/files/js/WCF.ACL.js
@@ -101,9 +101,9 @@ WCF.ACL.List = Class.extend({
                
                // insert container elements
                var $elementContainer = this._container.children('dd');
-               var $aclList = $('<ul class="aclList container" />').appendTo($elementContainer);
+               var $aclList = $('<ul class="aclList containerList" />').appendTo($elementContainer);
                var $searchInput = $('<input type="text" class="long" placeholder="' + WCF.Language.get('wcf.acl.search.' + (!includeUserGroups ? 'user.' : '') + 'description') + '" />').appendTo($elementContainer);
-               var $permissionList = $('<ul class="aclPermissionList container" />').hide().appendTo($elementContainer);
+               var $permissionList = $('<ul class="aclPermissionList containerList" />').hide().appendTo($elementContainer);
                
                // set elements
                this._containerElements = {
@@ -205,7 +205,7 @@ WCF.ACL.List = Class.extend({
         * @return      jQuery
         */
        _createListItem: function(objectID, label, type) {
-               var $listItem = $('<li><span class="icon icon16 fa-user' + (type === 'group' ? 's' : '') + '" /> <span>' + label + '</span></li>').appendTo(this._containerElements.aclList);
+               var $listItem = $('<li><span class="icon icon16 fa-user' + (type === 'group' ? 's' : '') + '" /> <span class="aclLabel">' + label + '</span></li>').appendTo(this._containerElements.aclList);
                $listItem.data('objectID', objectID).data('type', type).data('label', label).click($.proxy(this._click, this));
                $('<span class="icon icon16 fa-times jsTooltip pointer" title="' + WCF.Language.get('wcf.global.button.delete') + '" />').click($.proxy(this._removeItem, this)).appendTo($listItem);
                

diff --git a/wcfsetup/install/files/style/ui/acl.scss b/wcfsetup/install/files/style/ui/acl.scss
new file mode 100644 (file)
index 0000000..b406ac7
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/acl.scss
@@ -0,0 +1,69 @@
+/* object list, e.g. users and groups */
+.aclList {
+       > li {
+               align-items: center;
+               display: flex;
+               padding: 10px 0;
+               
+               &:not(.active) {
+                       cursor: pointer;
+               }
+               
+               &.active {
+                       background-color: $wcfTabularBoxBackgroundActive;
+               }
+               
+               > .icon {
+                       flex: 0 0 36px;
+                       padding: 0 5px;
+               }
+               
+               > .aclLabel {
+                       flex: 1 1 auto;
+                       margin: 0 5px;
+               }
+       }
+       
+       /* search input */
+       & + .dropdown {
+               display: block;
+               margin-top: 20px;
+       }
+}
+
+/* permissions per object */
+.aclPermissionList {
+       margin-top: 40px;
+       
+       > li {
+               &.aclCategory {
+                       padding: 20px 10px 10px 0;
+                       
+                       @include wcfFontHeadline;
+                       
+                       &:hover {
+                               background-color: transparent;
+                       }
+               }
+               
+               &:not(.aclCategory) {
+                       display: flex;
+                       padding: 10px 0;
+               }
+               
+               > span {
+                       flex: 1 1 auto;
+                       padding-left: 10px;
+               }
+               
+               > label {
+                       cursor: pointer;
+                       flex: 0 0 auto;
+                       padding: 0 20px;
+                       
+                       & + label {
+                               margin-left: 20px;
+                       }
+               }
+       }
+}