Add grid layout

diff --git a/ts/WoltLabSuite/Core/Ui/Acl/List.ts b/ts/WoltLabSuite/Core/Ui/Acl/List.ts
index 30c9cc24846c58f370d90646d5956a9ad235d691..82330cdfc3f3a91190f9d60742f356e172d0fbef 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Acl/List.ts
+++ b/ts/WoltLabSuite/Core/Ui/Acl/List.ts
@@ -45,7 +45,7 @@ export = class AclList {
   readonly #categoryName: string | undefined;
   readonly #container: HTMLElement;
   readonly #aclList: HTMLUListElement;
-  readonly #permissionList: HTMLUListElement;
+  readonly #permissionList: HTMLDivElement;
   readonly #searchInput: HTMLInputElement;
   readonly #objectID: number;
   readonly #objectTypeID: number;
@@ -97,11 +97,11 @@ export = class AclList {
     this.#searchInput.placeholder = getPhrase("wcf.acl.search." + (!includeUserGroups ? "user." : "") + "description");
     elementContainer.appendChild(this.#searchInput);
 
-    this.#permissionList = document.createElement("ul");
+    this.#permissionList = document.createElement("div");
     this.#permissionList.classList.add("aclPermissionList", "containerList");
-    this.#permissionList.dataset.grant = getPhrase("wcf.acl.option.grant");
+    /*this.#permissionList.dataset.grant = getPhrase("wcf.acl.option.grant");
     this.#permissionList.dataset.deny = getPhrase("wcf.acl.option.deny");
-    this.#permissionList.dataset.inherited = getPhrase("wcf.acl.option.inherited");
+    this.#permissionList.dataset.inherited = getPhrase("wcf.acl.option.inherited");*/
     DomUtil.hide(this.#permissionList);
     elementContainer.appendChild(this.#permissionList);
 
@@ -265,19 +265,27 @@ export = class AclList {
       return;
     }
 
+    const header = document.createElement("div");
+    header.classList.add("aclHeader");
+    header.innerHTML = `<span class="inherited">${getPhrase("wcf.acl.option.inherited")}</span>
+        <span class="grant">${getPhrase("wcf.acl.option.grant")}</span>
+        <span class="deny">${getPhrase("wcf.acl.option.deny")}</span>`;
+
+    this.#permissionList.appendChild(header);
+
     // prepare options
-    const structure: { [key: string]: HTMLLIElement[] } = {};
+    const structure: { [key: string]: HTMLDivElement[] } = {};
     for (const [optionID, option] of Object.entries(data.returnValues.options)) {
-      const listItem = document.createElement("li");
+      const listItem = document.createElement("div");
 
       listItem.innerHTML = `<span>${StringUtil.escapeHTML(option.label)}</span>
-        <label for="inherited${optionID}" class="jsTooltip" title="${getPhrase("wcf.acl.option.inherited")}">
+        <label for="inherited${optionID}" class="inherited jsTooltip" title="${getPhrase("wcf.acl.option.inherited")}">
           <input type="radio" id="inherited${optionID}" />
         </label>
-        <label for="grant${optionID}" class="jsTooltip" title="${getPhrase("wcf.acl.option.grant")}">
+        <label for="grant${optionID}" class="grant jsTooltip" title="${getPhrase("wcf.acl.option.grant")}">
           <input type="radio" id="grant${optionID}" />
         </label>
-        <label for="deny${optionID}" class="jsTooltip" title="${getPhrase("wcf.acl.option.deny")}">
+        <label for="deny${optionID}" class="deny jsTooltip" title="${getPhrase("wcf.acl.option.deny")}">
           <input type="radio" id="deny${optionID}" />
         </label>`;
       listItem.dataset.optionId = optionID;
@@ -313,7 +321,8 @@ export = class AclList {
     if (Object.keys(structure).length > 0) {
       for (const [categoryName, listItems] of Object.entries(structure)) {
         if (data.returnValues.categories[categoryName]) {
-          const category = document.createElement("li");
+          const category = document.createElement("div");
+          category.classList.add("aclCategory");
           category.innerText = StringUtil.escapeHTML(data.returnValues.categories[categoryName]);
           this.#permissionList.appendChild(category);
         }

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Acl/List.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Acl/List.js
index 73c21196385542f5c319cf982f89fa2ecdf134ff..12e944243d3bd3ad72e07c1af8358bda47757405 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Acl/List.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Acl/List.js
@@ -44,11 +44,11 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Ui/User/Search/Input",
             this.#searchInput.classList.add("long");
             this.#searchInput.placeholder = (0, Language_1.getPhrase)("wcf.acl.search." + (!includeUserGroups ? "user." : "") + "description");
             elementContainer.appendChild(this.#searchInput);
-            this.#permissionList = document.createElement("ul");
+            this.#permissionList = document.createElement("div");
             this.#permissionList.classList.add("aclPermissionList", "containerList");
-            this.#permissionList.dataset.grant = (0, Language_1.getPhrase)("wcf.acl.option.grant");
-            this.#permissionList.dataset.deny = (0, Language_1.getPhrase)("wcf.acl.option.deny");
-            this.#permissionList.dataset.inherited = (0, Language_1.getPhrase)("wcf.acl.option.inherited");
+            /*this.#permissionList.dataset.grant = getPhrase("wcf.acl.option.grant");
+            this.#permissionList.dataset.deny = getPhrase("wcf.acl.option.deny");
+            this.#permissionList.dataset.inherited = getPhrase("wcf.acl.option.inherited");*/
             Util_1.default.hide(this.#permissionList);
             elementContainer.appendChild(this.#permissionList);
             // prepare search input
@@ -181,18 +181,24 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Ui/User/Search/Input",
             if (Object.keys(data.returnValues.options).length === 0) {
                 return;
             }
+            const header = document.createElement("div");
+            header.classList.add("aclHeader");
+            header.innerHTML = `<span class="inherited">${(0, Language_1.getPhrase)("wcf.acl.option.inherited")}</span>
+        <span class="grant">${(0, Language_1.getPhrase)("wcf.acl.option.grant")}</span>
+        <span class="deny">${(0, Language_1.getPhrase)("wcf.acl.option.deny")}</span>`;
+            this.#permissionList.appendChild(header);
             // prepare options
             const structure = {};
             for (const [optionID, option] of Object.entries(data.returnValues.options)) {
-                const listItem = document.createElement("li");
+                const listItem = document.createElement("div");
                 listItem.innerHTML = `<span>${StringUtil.escapeHTML(option.label)}</span>
-        <label for="inherited${optionID}" class="jsTooltip" title="${(0, Language_1.getPhrase)("wcf.acl.option.inherited")}">
+        <label for="inherited${optionID}" class="inherited jsTooltip" title="${(0, Language_1.getPhrase)("wcf.acl.option.inherited")}">
           <input type="radio" id="inherited${optionID}" />
         </label>
-        <label for="grant${optionID}" class="jsTooltip" title="${(0, Language_1.getPhrase)("wcf.acl.option.grant")}">
+        <label for="grant${optionID}" class="grant jsTooltip" title="${(0, Language_1.getPhrase)("wcf.acl.option.grant")}">
           <input type="radio" id="grant${optionID}" />
         </label>
-        <label for="deny${optionID}" class="jsTooltip" title="${(0, Language_1.getPhrase)("wcf.acl.option.deny")}">
+        <label for="deny${optionID}" class="deny jsTooltip" title="${(0, Language_1.getPhrase)("wcf.acl.option.deny")}">
           <input type="radio" id="deny${optionID}" />
         </label>`;
                 listItem.dataset.optionId = optionID;
@@ -222,7 +228,8 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Ui/User/Search/Input",
             if (Object.keys(structure).length > 0) {
                 for (const [categoryName, listItems] of Object.entries(structure)) {
                     if (data.returnValues.categories[categoryName]) {
-                        const category = document.createElement("li");
+                        const category = document.createElement("div");
+                        category.classList.add("aclCategory");
                         category.innerText = StringUtil.escapeHTML(data.returnValues.categories[categoryName]);
                         this.#permissionList.appendChild(category);
                     }

diff --git a/wcfsetup/install/files/style/ui/acl.scss b/wcfsetup/install/files/style/ui/acl.scss
index 09086083933088d1463e6c916d116323e7eeac59..f078f5febe010f71efc507c867b21b2d359f428f 100644 (file)
--- a/wcfsetup/install/files/style/ui/acl.scss
+++ b/wcfsetup/install/files/style/ui/acl.scss
@@ -51,29 +51,14 @@
 .aclPermissionList {
        margin-top: 40px;
        position: relative;
+       display: grid;
+       column-gap: 1px;
+       grid-template-columns: 10px auto repeat(3, 75px);
+       grid-template-rows: auto;
 
-       &::after,
-       &::before {
-               min-width: 60px;
-               position: absolute;
-               text-align: center;
-               top: -5px;
-               transform: translateY(-100%);
+       > div {
+               grid-column: 1 / span 5;
 
-               @include wcfFontSmall;
-       }
-
-       &::after {
-               content: attr(data-deny);
-               right: 0;
-       }
-
-       &::before {
-               content: attr(data-grant);
-               right: 80px;
-       }
-
-       > li {
                &.aclCategory {
                        padding: 20px 10px 10px 0;
 
@@ -85,22 +70,43 @@
                }
 
                &:not(.aclCategory) {
-                       display: flex;
                        padding: 10px 0;
+                       display: grid;
+                       grid-template-columns: subgrid;
+                       grid-template-rows: subgrid;
                }
 
-               > span {
-                       flex: 1 1 auto;
-                       padding-left: 10px;
+               &.aclHeader {
+                       display: grid;
+                       grid-template-columns: subgrid;
+                       grid-template-rows: subgrid;
+
+                       > span {
+                               text-align: center;
+
+                               &.inherited {
+                                       grid-column-start: 3;
+                               }
+
+                               &.grant {
+                                       grid-column-start: 4;
+                               }
+
+                               &.deny {
+                                       grid-column-start: 5;
+                               }
+                       }
                }
 
-               > label {
-                       cursor: pointer;
-                       flex: 0 0 auto;
-                       padding: 0 20px;
+               &:not(.aclHeader) {
+                       > span {
+                               grid-column: span 2;
+                               grid-column-start: 2;
+                       }
 
-                       & + label {
-                               margin-left: 20px;
+                       > label {
+                               text-align: center;
+                               cursor: pointer;
                        }
                }
        }

diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml
index 64347ec96faa7d52f32c13545d70acd3ad498ab5..3125adb5992a1e5f24df0f332d98998b1757dec5 100644 (file)
--- a/wcfsetup/install/lang/de.xml
+++ b/wcfsetup/install/lang/de.xml
@@ -10,8 +10,8 @@
                <item name="wcf.acl.access.invertPermissions"><![CDATA[Berechtigungen umkehren]]></item>
                <item name="wcf.acl.access.invertPermissions.description"><![CDATA[Wenn ausgewählt, dürfen standardmäßig alle Benutzer, bis auf ausgewählte Benutzer und Benutzergruppen das Objekt sehen.]]></item>
                <item name="wcf.acl.allowAll"><![CDATA[Inhalt ist für alle Benutzer sichtbar]]></item>
-               <item name="wcf.acl.option.deny"><![CDATA[Verweigern]]></item>
-               <item name="wcf.acl.option.grant"><![CDATA[Erlauben]]></item>
+               <item name="wcf.acl.option.deny"><![CDATA[Nein]]></item>
+               <item name="wcf.acl.option.grant"><![CDATA[Ja]]></item>
                <item name="wcf.acl.option.inherited"><![CDATA[Standard]]></item>
                <item name="wcf.acl.permissions"><![CDATA[Benutzer- und Benutzergruppenrechte]]></item>
                <item name="wcf.acl.user.permissions"><![CDATA[Benutzerrechte]]></item>

diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml
index 7a34aee35d4fef746f7217ec36b9dad9d7ec169f..7831055063178a247fe7af32de04d3ffb6146e7d 100644 (file)
--- a/wcfsetup/install/lang/en.xml
+++ b/wcfsetup/install/lang/en.xml
@@ -10,8 +10,8 @@
                <item name="wcf.acl.access.invertPermissions"><![CDATA[Invert Permissions]]></item>
                <item name="wcf.acl.access.invertPermissions.description"><![CDATA[If selected, all users except selected users and user groups are allowed to see the object by default.]]></item>
                <item name="wcf.acl.allowAll"><![CDATA[Content Can be Accessed by Everyone]]></item>
-               <item name="wcf.acl.option.deny"><![CDATA[Deny]]></item>
-               <item name="wcf.acl.option.grant"><![CDATA[Grant]]></item>
+               <item name="wcf.acl.option.deny"><![CDATA[No]]></item>
+               <item name="wcf.acl.option.grant"><![CDATA[Yes]]></item>
                <item name="wcf.acl.option.inherited"><![CDATA[Default]]></item>
                <item name="wcf.acl.permissions"><![CDATA[User and User Group Permissions]]></item>
                <item name="wcf.acl.user.permissions"><![CDATA[User Permissions]]></item>