From: Alexander Ebert <ebert@woltlab.com>
Date: Fri, 13 Jan 2017 13:18:11 +0000 (+0100)
Subject: Added proper support for button images
X-Git-Tag: 3.0.1~47
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=b1464920030313bef2c35aef1600f9a9a4a4d96c;p=GitHub%2FWoltLab%2FWCF.git

Added proper support for button images
---

diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabButton.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabButton.js
index 2622325489..41370b0a07 100644
--- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabButton.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabButton.js
@@ -17,7 +17,7 @@ $.Redactor.prototype.WoltLabButton = function() {
 			}
 			
 			// set button icons and labels
-			var buttonData;
+			var buttonData, icon, iconIsImage;
 			for (i = 0, length = this.opts.buttons.length; i < length; i++) {
 				buttonName = this.opts.buttons[i];
 				
@@ -58,8 +58,15 @@ $.Redactor.prototype.WoltLabButton = function() {
 						break;
 				}
 				
+				icon = buttonData.icon;
+				iconIsImage = false;
+				if (!icon.match(/^fa-/) && icon.match(/\.(gif|jpe?g|png|svg)$/)) {
+					iconIsImage = true;
+				}
+				
 				// set icon
-				this.button.setIcon(button, '<span class="icon icon16 ' + buttonData.icon + '"></span>');
+				//noinspection CssUnknownTarget
+				this.button.setIcon(button, '<span class="icon icon16 ' + (iconIsImage ? 'redactorButtonImage' : icon) + '"' + (iconIsImage ? ' style="background-image: url(\'' + WCF_PATH + 'icon/' + icon + '\')"' : '') + '></span>');
 				if (!button[0]) {
 					throw new Error("Missing button element for '" + buttonName + "'.");
 				}
diff --git a/wcfsetup/install/files/style/ui/redactor.scss b/wcfsetup/install/files/style/ui/redactor.scss
index 39ebb68365..2384b5adf6 100644
--- a/wcfsetup/install/files/style/ui/redactor.scss
+++ b/wcfsetup/install/files/style/ui/redactor.scss
@@ -183,6 +183,11 @@
 			.icon {
 				color: inherit;
 				cursor: inherit !important;
+				
+				&.redactorButtonImage {
+					background: no-repeat center center;
+					background-size: contain;
+				}
 			}
 			
 			@include screen-lg {