Improve the visuals of the custom box order of pages

See https://www.woltlab.com/community/thread/302270-6-0-1-boxen-sortieren-nicht-an-darkmode-angepasst/

diff --git a/ts/WoltLabSuite/Core/Acp/Ui/Page/BoxOrder.ts b/ts/WoltLabSuite/Core/Acp/Ui/Page/BoxOrder.ts
index 41701e0d6057529924878787ba68f124576ca6ec..23fe11a8675a24580248649b31aea3a95a52cfc5 100644 (file)
--- a/ts/WoltLabSuite/Core/Acp/Ui/Page/BoxOrder.ts
+++ b/ts/WoltLabSuite/Core/Acp/Ui/Page/BoxOrder.ts
@@ -49,6 +49,11 @@ class AcpUiPageBoxOrder {
 
         item.innerHTML = box.name + icon;
 
+        const sortableIndicator = document.createElement("fa-icon");
+        sortableIndicator.setIcon("up-down");
+
+        item.prepend(sortableIndicator);
+
         container.appendChild(item);
       });
 

diff --git a/wcfsetup/install/files/acp/templates/pageBoxOrder.tpl b/wcfsetup/install/files/acp/templates/pageBoxOrder.tpl
index 7d5936a1f51f7fd7f174db5b753d42fda57cd4a1..6234dbabb37320c0331cab75a1c80226f4dcef11 100644 (file)
--- a/wcfsetup/install/files/acp/templates/pageBoxOrder.tpl
+++ b/wcfsetup/install/files/acp/templates/pageBoxOrder.tpl
@@ -2,12 +2,14 @@
 
 <style>
        #pbo {
-               border: 1px solid #ccc;
+               border: 1px solid var(--wcfContentBorderInner);
+               border-radius: var(--wcfBorderRadius);
                padding: 5px;
        }
        
        #pbo [data-placeholder] {
                background-color: rgb(224, 224, 224);
+               border-radius: var(--wcfBorderRadius);
                padding: 20px 10px;
                position: relative;
        }
@@ -58,12 +60,6 @@
                cursor: move;
        }
        
-       #pbo [data-placeholder] .ui-sortable > li::before {
-               content: "\f047";
-               font-family: FontAwesome;
-               padding-right: 5px;
-       }
-       
        #pbo [data-placeholder] li + li {
                margin-top: 5px;
        }
@@ -99,6 +95,7 @@
        
        #pboContent {
                background-color: #BBDEFB;
+               border-radius: var(--wcfBorderRadius);
                padding: 40px 20px;
                text-align: center;
        }
@@ -110,6 +107,18 @@
        #pboContent:not(:last-child) {
                margin-bottom: 10px;
        }
+
+       html[data-color-scheme="dark"] #pbo [data-placeholder] {
+               background-color: rgb(37 46 61);
+       }
+       
+       html[data-color-scheme="dark"] #pbo [data-placeholder]::before {
+               color: rgb(8 166 149);
+       }
+
+       html[data-color-scheme="dark"] #pboContent {
+               background-color: rgb(26 29 33);
+       }
 </style>
 
 <script data-relocate="true">
@@ -128,7 +137,6 @@
                
                AcpUiPageBoxOrder.init({@$page->pageID}, boxes);
        });
-       
 </script>
 
 <header class="contentHeader">

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Page/BoxOrder.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Page/BoxOrder.js
index 56b190f3f2bdfb6bd423bbba6179be4bd3f0b4ce..bb49e2054c6555af8a698edba7174d658376264c 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Page/BoxOrder.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Page/BoxOrder.js
@@ -35,6 +35,9 @@ define(["require", "exports", "tslib", "../../../Ajax", "../../../Dom/Change/Lis
           </span>`;
                     }
                     item.innerHTML = box.name + icon;
+                    const sortableIndicator = document.createElement("fa-icon");
+                    sortableIndicator.setIcon("up-down");
+                    item.prepend(sortableIndicator);
                     container.appendChild(item);
                 });
                 if (boxData.length > 1) {