Improved the UX of the style color palette

The style compatibility notice is now context sensitive. The boxes for the color selection now show a "hand" cursor and use a distinct hover state to highlight them.

Closes #3576

diff --git a/wcfsetup/install/files/acp/style/acpStyleEditor.css b/wcfsetup/install/files/acp/style/acpStyleEditor.css
index 816939242519b5cd9011a3a34333f13af83e6407..f06877540f4b435c8eff257aae12679033d93b4e 100644 (file)
--- a/wcfsetup/install/files/acp/style/acpStyleEditor.css
+++ b/wcfsetup/install/files/acp/style/acpStyleEditor.css
@@ -98,9 +98,13 @@ html[dir="rtl"] #spStatus > li > div { border-right: 5px solid #000; }
 .spSidebarBox { background-color: rgb(217, 237, 247); margin-bottom: 10px; padding: 10px; }
 .spColor { align-items: center; }
 .spColor:not(:first-child) { margin-top: 5px; }
+html:not(.touch) .spColor:hover .spColorBox { border: 2px dashed #6e7792; left: -2px; padding: 2px; position: relative; }
 .spColorBox { background-color: #fff; border: 1px solid #ccc; padding: 1px; }
 html[dir="ltr"] .spColorBox { margin-right: 10px !important; }
+html[dir="ltr"]:not(.touch) .spColor:hover .spColorBox { margin-right: 6px !important; }
 html[dir="rtl"] .spColorBox { margin-left: 10px !important; }
+html[dir="rtl"]:not(.touch) .spColor:hover .spColorBox { margin-left: 6px !important; }
+html:not(.touch) .spColorBox { cursor: pointer; }
 .spColorBox > span { display: block; height: 24px; width: 24px; }
 .spVariable, .spDescription { display: block; font-size: 12px; }
 .spVariable { font-family: Consolas, Courier, monospace; }
@@ -174,4 +178,5 @@ html[dir="rtl"] .spColorBox { margin-left: 10px !important; }
         #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.spColorPalette + #spSidebar .spSidebarBox[data-category="apiVersion"]::before { display: none; }
 }

diff --git a/wcfsetup/install/files/acp/templates/styleAdd.tpl b/wcfsetup/install/files/acp/templates/styleAdd.tpl
index 2b4e6d52d95fc72458866eaaba4740103b3f55d3..7877c4dfd77c8f23ca6c8644d889f8e7deabb115 100644 (file)
--- a/wcfsetup/install/files/acp/templates/styleAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/styleAdd.tpl
@@ -834,9 +834,6 @@
                                                        
                                                        <div class="spSidebarBox" data-category="none">
                                                                <p>{lang}wcf.acp.style.colors.description{/lang}</p>
-                                                               <p><br></p>
-                                                               <p><sup class="spApiVersion">3.1</sup> <small>{lang version='3.1'}wcf.acp.style.colors.description.apiVersion{/lang}</small></p>
-                                                               <p><sup class="spApiVersion">5.2</sup> <small>{lang version='5.2'}wcf.acp.style.colors.description.apiVersion{/lang}</small></p>
                                                        </div>
                                                        
                                                        {foreach from=$colors key=spCategory item=spColors}
@@ -858,6 +855,11 @@
                                                                        </ul>
                                                                </div>
                                                        {/foreach}
+                                                       
+                                                       <div class="spSidebarBox" data-category="apiVersion" style="display: none;">
+                                                               <p><sup class="spApiVersion">3.1</sup> <small>{lang version='3.1'}wcf.acp.style.colors.description.apiVersion{/lang}</small></p>
+                                                               <p><sup class="spApiVersion">5.2</sup> <small>{lang version='5.2'}wcf.acp.style.colors.description.apiVersion{/lang}</small></p>
+                                                       </div>
                                                </div>
                                        </div>
                                </div>

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 7f3819cf549670a80c122fb85c0c4491d72b0590..78f2b30f5e158bf67c2f9d3a3a80a2591ff6d0f0 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
@@ -183,6 +183,7 @@ define(['Ajax', 'Core', 'Dictionary', 'Dom/Util', 'EventHandler', 'Ui/Screen'],
                                }
                        };
                        
+                       var apiVersions = elBySel('.spSidebarBox[data-category="apiVersion"]', container);
                        var element;
                        var callbackChange = function() {
                                element = elBySel('.spSidebarBox[data-category="' + lastValue + '"]', container);
@@ -192,6 +193,9 @@ define(['Ajax', 'Core', 'Dictionary', 'Dom/Util', 'EventHandler', 'Ui/Screen'],
                                element = elBySel('.spSidebarBox[data-category="' + lastValue + '"]', container);
                                elShow(element);
                                
+                               var showCompatibilityNotice = elBySel('.spApiVersion', element) !== null;
+                               window[showCompatibilityNotice ? 'elShow' : 'elHide'](apiVersions);
+                               
                                // set region marker
                                _updateRegionMarker();
                        };