From 831dc0daff1d8cf9542bb1eff83c773ca3721fa9 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Sat, 21 May 2016 20:26:57 +0200
Subject: [PATCH] Added styling for text color overlay

---
 .../redactor2/plugins/WoltLabColor.js         | 11 ++-
 wcfsetup/install/files/style/ui/redactor.scss | 69 +++++++++++++++++++
 2 files changed, 79 insertions(+), 1 deletion(-)

diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabColor.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabColor.js
index 8dbc017a99..1fb8026ab4 100644
--- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabColor.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabColor.js
@@ -30,6 +30,15 @@ $.Redactor.prototype.WoltLabColor = function() {
 			
 			var button = this.button.add('woltlabColor', 'Color');
 			this.button.addDropdown(button, dropdown);
+			
+			// add styling
+			button.data('dropdown').find('a').each(function(index, link) {
+				if (link.className.match(/redactor-dropdown-color_([A-F0-9]{6})/)) {
+					link.parentNode.classList.add('woltlab-color-' + RegExp.$1);
+					link.parentNode.classList.add('woltlab-color-selection');
+				}
+			});
+			
 		},
 		
 		setColor: function(key) {
@@ -38,7 +47,7 @@ $.Redactor.prototype.WoltLabColor = function() {
 			require(['WoltLab/WCF/Ui/Redactor/Format'], (function(UiRedactorFormat) {
 				this.selection.save();
 				
-				UiRedactorFormat.format(this.$editor[0], 'woltlab-color', 'woltlab-color' + key);
+				UiRedactorFormat.format(this.$editor[0], 'woltlab-color', 'woltlab-color-' + key);
 				
 				this.selection.restore();
 			}).bind(this));
diff --git a/wcfsetup/install/files/style/ui/redactor.scss b/wcfsetup/install/files/style/ui/redactor.scss
index 87f4474ca4..bd758ed6a2 100644
--- a/wcfsetup/install/files/style/ui/redactor.scss
+++ b/wcfsetup/install/files/style/ui/redactor.scss
@@ -384,3 +384,72 @@
 .text-right {
 	text-align: right;
 }
+
+/* text color */
+.woltlab-color-000000 { color: #000000 !important; }
+.woltlab-color-000080 { color: #000080 !important; }
+.woltlab-color-0000CD { color: #0000CD !important; }
+.woltlab-color-0000FF { color: #0000FF !important; }
+.woltlab-color-006400 { color: #006400 !important; }
+.woltlab-color-008000 { color: #008000 !important; }
+.woltlab-color-008080 { color: #008080 !important; }
+.woltlab-color-00FF00 { color: #00FF00 !important; }
+.woltlab-color-00FFFF { color: #00FFFF !important; }
+.woltlab-color-2F4F4F { color: #2F4F4F !important; }
+.woltlab-color-40E0D0 { color: #40E0D0 !important; }
+.woltlab-color-4B0082 { color: #4B0082 !important; }
+.woltlab-color-696969 { color: #696969 !important; }
+.woltlab-color-800000 { color: #800000 !important; }
+.woltlab-color-800080 { color: #800080 !important; }
+.woltlab-color-808080 { color: #808080 !important; }
+.woltlab-color-8B4513 { color: #8B4513 !important; }
+.woltlab-color-A52A2A { color: #A52A2A !important; }
+.woltlab-color-A9A9A9 { color: #A9A9A9 !important; }
+.woltlab-color-ADD8E6 { color: #ADD8E6 !important; }
+.woltlab-color-AFEEEE { color: #AFEEEE !important; }
+.woltlab-color-B22222 { color: #B22222 !important; }
+.woltlab-color-D3D3D3 { color: #D3D3D3 !important; }
+.woltlab-color-DAA520 { color: #DAA520 !important; }
+.woltlab-color-DDA0DD { color: #DDA0DD !important; }
+.woltlab-color-E6E6FA { color: #E6E6FA !important; }
+.woltlab-color-EE82EE { color: #EE82EE !important; }
+.woltlab-color-F0F8FF { color: #F0F8FF !important; }
+.woltlab-color-F0FFF0 { color: #F0FFF0 !important; }
+.woltlab-color-F0FFFF { color: #F0FFFF !important; }
+.woltlab-color-FAEBD7 { color: #FAEBD7 !important; }
+.woltlab-color-FF0000 { color: #FF0000 !important; }
+.woltlab-color-FF8C00 { color: #FF8C00 !important; }
+.woltlab-color-FFA07A { color: #FFA07A !important; }
+.woltlab-color-FFA500 { color: #FFA500 !important; }
+.woltlab-color-FFD700 { color: #FFD700 !important; }
+.woltlab-color-FFF0F5 { color: #FFF0F5 !important; }
+.woltlab-color-FFFF00 { color: #FFFF00 !important; }
+.woltlab-color-FFFFE0 { color: #FFFFE0 !important; }
+.woltlab-color-FFFFFF { color: #FFFFFF !important; }
+
+/* text color selection */
+.redactor-dropdown-box-woltlabColor {
+	> ul {
+		display: flex !important;
+		flex-wrap: wrap;
+		width: 272px;
+		
+		> li:first-child {
+			flex: 0 0 100%;
+		}
+	}
+	
+	.woltlab-color-selection {
+		flex: 0 0 30px;
+		margin: 2px;
+		overflow: hidden;
+		
+		> a {
+			background-color: currentColor !important;
+			color: inherit !important;
+			display: block;
+			height: 30px;
+			width: 30px;
+		}
+	}
+}
-- 
2.20.1