Added toggle mode to display all categories at once

See #2314

diff --git a/wcfsetup/install/files/acp/style/acpStyleEditor.css b/wcfsetup/install/files/acp/style/acpStyleEditor.css
index 139016ee815d66e6acbec03ef62040c6a82c59b0..875863939c63f8744daa180b69452a1f3e88b807 100644 (file)
--- a/wcfsetup/install/files/acp/style/acpStyleEditor.css
+++ b/wcfsetup/install/files/acp/style/acpStyleEditor.css
@@ -98,15 +98,14 @@ html[dir="rtl"] .spColorBox { margin-left: 10px !important; }
 .spColorBox > span { display: block; height: 24px; width: 24px; }
 .spVariable, .spDescription { display: block; font-size: 12px; }
 .spVariable { font-family: Consolas, Courier, monospace; }
+#spSidebar .button { display: block; }
 @media (min-width: 769px) {
        #spVariablesWrapper { position: sticky; top: 60px; }
-        #spSidebar .button { display: block; }
-        #spSidebar .jsButtonSelectCategoryByClick { margin-bottom: 5px; }
-        #spSidebar .jsButtonToggleColorPalette { margin-bottom: 10px; }
 }
 
 /* ### style region marker ### */
 #stylePreviewRegionMarker { border: 3px solid rgba(255, 0, 0, .4); position: absolute; pointer-events: none; }
+#stylePreviewRegionMarker.forceHide { display: none !important; }
 #stylePreviewRegionMarkerBottom { height: 100%; }
 #stylePreviewRegionMarkerBottom::after, #stylePreviewRegionMarkerBottom::before, #stylePreviewRegionMarker::after, #stylePreviewRegionMarker::before { border: 3px solid red; content: ""; display: block; height: 20px; position: absolute; width: 20px; }
 #stylePreviewRegionMarker::after { border-width: 0 0 3px 3px; right: -20px; top: -20px; }
@@ -114,48 +113,55 @@ html[dir="rtl"] .spColorBox { margin-left: 10px !important; }
 #stylePreviewRegionMarkerBottom::after { border-width: 3px 0 0 3px; right: -20px; bottom: -20px; }
 #stylePreviewRegionMarkerBottom::before { border-width: 3px 3px 0 0; left: -20px; bottom: -20px; }
 
-/* ### click on area to select ### */
-#spWindow.spShowRegions { pointer-events: none; z-index: 5; }
-#spWindow.spShowRegions [data-region]:not(#spSubMenu) { position: relative; }
-#spWindow.spShowRegions [data-region]::before {
-       background-color: rgba(242, 222, 222, .9);
-       border: 2px dashed rgb(235, 204, 204);
-       bottom: 0;
-       content: "";
-       cursor: pointer;
-       display: block;
-       left: 0;
-       pointer-events: all;
-       position: absolute;
-       right: 0;
-       top: 0;
-       transition: background-color .12s linear;
-       z-index: 10;
+@media (max-width: 768px) {
+       #spSidebar .jsButtonSelectCategoryByClick, #spSidebar .jsButtonToggleColorPalette { display: none; }
 }
-
-#spWindow.spShowRegions [data-region]:hover::before {
-       background-color: rgba(242, 222, 222, 1);
-}
-
-#spWindow.spShowRegions [data-region]::after {
-       color: rgb(169, 68, 66);
-       content: attr(data-region);
-       font-size: 12px !important;
-       font-weight: 400 !important;
-       left: 50%;
-       position: absolute;
-       top: 50%;
-       transform: translateX(-50%) translateY(-50%);
-       z-index: 40;
-}
-
-#spWindow.spShowRegions [data-region] [data-region] {
-       z-index: 20;
-}
-
-#spWindow.spShowRegions [data-region] [data-region]::before {
-       z-index: 30;
+@media (min-width: 769px) {
+       #spSidebar .jsButtonSelectCategoryByClick { margin-bottom: 5px; }
+       #spSidebar .jsButtonToggleColorPalette { margin-bottom: 10px; }
+        
+       /* ### click on area to select ### */
+       #spWindow.spShowRegions { pointer-events: none; z-index: 5; }
+       #spWindow.spShowRegions [data-region]:not(#spSubMenu) { position: relative; }
+       #spWindow.spShowRegions [data-region]::before {
+               background-color: rgba(242, 222, 222, .9);
+               border: 2px dashed rgb(235, 204, 204);
+               bottom: 0;
+               content: "";
+               cursor: pointer;
+               display: block;
+               left: 0;
+               pointer-events: all;
+               position: absolute;
+               right: 0;
+               top: 0;
+               transition: background-color .12s linear;
+               z-index: 10;
+       }
+       
+       #spWindow.spShowRegions [data-region]:hover::before { background-color: rgba(242, 222, 222, 1); }
+       
+       #spWindow.spShowRegions [data-region]::after {
+               color: rgb(169, 68, 66);
+               content: attr(data-region);
+               font-size: 12px !important;
+               font-weight: 400 !important;
+               left: 50%;
+               position: absolute;
+               top: 50%;
+               transform: translateX(-50%) translateY(-50%);
+               z-index: 40;
+       }
+       
+       #spWindow.spShowRegions [data-region] [data-region] { z-index: 20; }
+       #spWindow.spShowRegions [data-region] [data-region]::before { z-index: 30; }
+       #spWindow.spShowRegions + #spSidebar .jsButtonToggleColorPalette { pointer-events: none; }
+       #spWindow.spShowRegions + #spSidebar .spSidebarBox:not(#spSidebarButtons) > ul { opacity: .6; pointer-events: none; }
+        
+        #spWindow.spColorPalette { display: none; }
+       #spWindow.spColorPalette + #spSidebar { flex: 1; }
+       #spWindow.spColorPalette + #spSidebar #spVariablesWrapper { position: static !important; column-count: auto; column-width: 300px; }
+        #spWindow.spColorPalette + #spSidebar .spSidebarBox { break-inside: avoid; display: block !important; page-break-inside: avoid; position: relative; }
+       #spWindow.spColorPalette + #spSidebar .spSidebarBox[data-category="none"], #spWindow.spColorPalette + #spSidebar .spSidebarBox.spSidebarBoxCategorySelection { display: none !important; }
+       #spWindow.spColorPalette + #spSidebar .spSidebarBox::before { color: rgb(125, 130, 135); content: attr(data-category); display: block; font-family: Consolas, Courier, monospace; font-size: 1.2rem; margin-bottom: 10px; }
 }
-
-#spWindow.spShowRegions + #spSidebar .jsButtonToggleColorPalette { pointer-events: none; }
-#spWindow.spShowRegions + #spSidebar .spSidebarBox:not(#spSidebarButtons) > ul { opacity: .6; pointer-events: none; }

diff --git a/wcfsetup/install/files/acp/templates/styleAdd.tpl b/wcfsetup/install/files/acp/templates/styleAdd.tpl
index bd99a07b60e3efd10266397a1b22cad48f4be709..c43e955ed1478dcc679e53975928c4691803b114 100644 (file)
--- a/wcfsetup/install/files/acp/templates/styleAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/styleAdd.tpl
@@ -716,11 +716,11 @@
                                                <div id="spVariablesWrapper">
                                                        <div id="spSidebarButtons">
                                                                <ul>
-                                                                       <li><a href="#" class="button jsButtonSelectCategoryByClick">{lang}wcf.acp.style.colors.selectCategoryByClick{/lang}</a></li>
+                                                                       <li id="spSelectCategory"><a href="#" class="button jsButtonSelectCategoryByClick">{lang}wcf.acp.style.colors.selectCategoryByClick{/lang}</a></li>
                                                                        <li><a href="#" class="button jsButtonToggleColorPalette">{lang}wcf.acp.style.colors.toggleColorPalette{/lang}</a></li>
                                                                </ul>
                                                        </div>
-                                                       <div class="spSidebarBox">
+                                                       <div class="spSidebarBox spSidebarBoxCategorySelection">
                                                                <select id="spCategories">
                                                                        <option value="none" selected>{lang}wcf.global.noSelection{/lang}</option>
                                                                        {foreach from=$colorCategories key=spName item=spCategory}

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Style/Editor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Style/Editor.js
index 7b94c217edf2cb068294ee40027f0a2d5957a089..8773d606b0cee71022fc906fa36fbb0efa98c9b5 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Style/Editor.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Style/Editor.js
@@ -259,6 +259,7 @@ define(['Ajax', 'Core', 'Dictionary', 'Dom/Util', 'EventHandler', 'Ui/Screen'],
                                buttonSelectCategoryByClick.classList.toggle('active');
                                buttonToggleColorPalette.classList.toggle('disabled');
                                _stylePreviewWindow.classList.toggle('spShowRegions');
+                               _stylePreviewRegionMarker.classList.toggle('forceHide');
                                select.disabled = !select.disabled;
                        };
                        
@@ -283,6 +284,19 @@ define(['Ajax', 'Core', 'Dictionary', 'Dom/Util', 'EventHandler', 'Ui/Screen'],
                                        Core.triggerEvent(select, 'change');
                                });
                        });
+                       
+                       // toggle view
+                       var spSelectCategory = elById('spSelectCategory');
+                       buttonToggleColorPalette.addEventListener(WCF_CLICK_EVENT, function (event) {
+                               event.preventDefault();
+                               
+                               buttonSelectCategoryByClick.classList.toggle('disabled');
+                               elToggle(spSelectCategory);
+                               buttonToggleColorPalette.classList.toggle('active');
+                               _stylePreviewWindow.classList.toggle('spColorPalette');
+                               _stylePreviewRegionMarker.classList.toggle('forceHide');
+                               select.disabled = !select.disabled;
+                       });
                },
                
                hideVisualEditor: function() {