From 3b4e6b4f052c021c783d19c9cd914527d6363aed Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Sun, 27 Sep 2020 21:03:09 +0200
Subject: [PATCH] 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
---
 wcfsetup/install/files/acp/style/acpStyleEditor.css       | 5 +++++
 wcfsetup/install/files/acp/templates/styleAdd.tpl         | 8 +++++---
 .../files/js/WoltLabSuite/Core/Acp/Ui/Style/Editor.js     | 4 ++++
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/wcfsetup/install/files/acp/style/acpStyleEditor.css b/wcfsetup/install/files/acp/style/acpStyleEditor.css
index 8169392425..f06877540f 100644
--- 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 2b4e6d52d9..7877c4dfd7 100644
--- 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 7f3819cf54..78f2b30f5e 100644
--- 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();
 			};
-- 
2.20.1