From 831dc0daff1d8cf9542bb1eff83c773ca3721fa9 Mon Sep 17 00:00:00 2001 From: Alexander Ebert 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