From: Alexander Ebert <ebert@woltlab.com>
Date: Mon, 23 May 2016 09:16:55 +0000 (+0200)
Subject: Added editor icons and labels (WIP)
X-Git-Tag: 3.0.0_Beta_1~1657
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=fd4c3c751a7deb09814bd75a3f993e38094d19af;p=GitHub%2FWoltLab%2FWCF.git

Added editor icons and labels (WIP)
---

diff --git a/com.woltlab.wcf/templates/wysiwyg.tpl b/com.woltlab.wcf/templates/wysiwyg.tpl
index 0f98454c9b..6208299c3c 100644
--- a/com.woltlab.wcf/templates/wysiwyg.tpl
+++ b/com.woltlab.wcf/templates/wysiwyg.tpl
@@ -9,7 +9,8 @@
 </style>
 <script data-relocate="true">
 (function() {
-	var buttons = ['format', 'wcfSeparator', 'bold', 'italic', 'underline', 'deleted', 'wcfSeparator', 'lists', 'image', 'link'];
+	var buttons = [], buttonOptions = [];
+	{include file='wysiwygToolbar'}
 	
 	var elementId = '{if $wysiwygSelector|isset}{$wysiwygSelector|encodeJS}{else}text{/if}';
 	var callbackIdentifier = 'Redactor2_' + elementId;
@@ -27,10 +28,11 @@
 		var config = {
 			buttons: buttons,
 			minHeight: 200,
-			plugins: ['alignment', 'source', 'table', 'WoltLabButton', 'WoltLabColor', 'WoltLabDropdown', 'WoltLabEvent', 'WoltLabLink', 'WoltLabQuote'],
+			plugins: ['alignment', 'source', 'table', 'WoltLabColor', 'WoltLabDropdown', 'WoltLabEvent', 'WoltLabLink', 'WoltLabQuote'],
 			toolbarFixed: false,
 			woltlab: {
-				autosave: autosave
+				autosave: autosave,
+				buttons: buttonOptions
 			}
 		};
 		
@@ -44,6 +46,10 @@
 			config.plugins.push('WoltLabMedia');
 		{/if}
 		
+		// load the button plugin last to ensure all buttons have been initialized
+		// already and we can safely add all icons
+		config.plugins.push('WoltLabButton');
+		
 		$(element).redactor(config);
 	});
 		
diff --git a/com.woltlab.wcf/templates/wysiwygToolbar.tpl b/com.woltlab.wcf/templates/wysiwygToolbar.tpl
index 6c2f63e178..d5a3dd44ed 100644
--- a/com.woltlab.wcf/templates/wysiwygToolbar.tpl
+++ b/com.woltlab.wcf/templates/wysiwygToolbar.tpl
@@ -1,73 +1,58 @@
-$buttons.push('html');
-
-$buttons.push('separator');
-
-{if $__wcf->getBBCodeHandler()->isAvailableBBCode('b')}
-	$buttons.push('bold');
-{/if}
-{if $__wcf->getBBCodeHandler()->isAvailableBBCode('i')}
-	$buttons.push('italic');
-{/if}
-{if $__wcf->getBBCodeHandler()->isAvailableBBCode('u')}
-	$buttons.push('underline');
-{/if}
-
-if ($buttons.length) {
-	$buttons.push('separator');
-}
-
-{if $__wcf->getBBCodeHandler()->isAvailableBBCode('s')}
-	$buttons.push('deleted');
-{/if}
-{if $__wcf->getBBCodeHandler()->isAvailableBBCode('sub')}
-	$buttons.push('subscript');
-{/if}
-{if $__wcf->getBBCodeHandler()->isAvailableBBCode('sup')}
-	$buttons.push('superscript');
-{/if}
-
-if ($buttons.length && $buttons[$buttons.length -1] != 'separator') {
-	$buttons.push('separator');
-}
-
-{if $__wcf->getBBCodeHandler()->isAvailableBBCode('list')}
-	$buttons.push('orderedlist');
-	$buttons.push('unorderedlist');
-	$buttons.push('outdent');
-	$buttons.push('indent');
-{/if}
-{if $__wcf->getBBCodeHandler()->isAvailableBBCode('align')}
-	$buttons.push('alignment');
-{/if}
-
-if ($buttons.length && $buttons[$buttons.length -1] != 'separator') {
-	$buttons.push('separator');
-}
-
+buttonOptions = {
+	alignment: { icon: 'fa-align-left', title: '{lang}wcf.editor.button.alignment{/lang}' },
+	bold: { icon: 'fa-bold', title: '{lang}wcf.editor.button.bold{/lang}' },
+	deleted: { icon: 'fa-strikethrough', title: '{lang}wcf.editor.button.strikethrough{/lang}' },
+	html: { icon: 'fa-code', title: '{lang}wcf.editor.button.html{/lang}' },
+	italic: { icon: 'fa-italic', title: '{lang}wcf.editor.button.italic{/lang}' },
+	link: { icon: 'fa-link', title: '{lang}wcf.editor.button.link{/lang}' },
+	lists: { icon: 'fa-list', title: '{lang}wcf.editor.button.lists{/lang}' },
+	subscript: { icon: 'fa-subscript', title: '{lang}wcf.editor.button.subscript{/lang}' },
+	superscript: { icon: 'fa-superscript', title: '{lang}wcf.editor.button.superscript{/lang}' },
+	table: { icon: 'fa-table', title: '{lang}wcf.editor.button.table{/lang}' },
+	underline: { icon: 'fa-underline', title: '{lang}wcf.editor.button.underline{/lang}' },
+	woltlabColor: { icon: 'fa-paint-brush', title: '{lang}wcf.editor.button.color{/lang}' },
+	woltlabMedia: { icon: 'fa-file-o', title: '{lang}wcf.editor.button.media{/lang}' },
+	woltlabQuote: { icon: 'fa-comment', title: '{lang}wcf.editor.button.quote{/lang}' }
+};
+	
+buttons = [];
+
+buttons.push('html');
+
+buttons.push('bold');
+buttons.push('italic');
+buttons.push('underline');
+
+buttons.push('deleted');
+buttons.push('subscript');
+buttons.push('superscript');
+
+buttons.push('lists');
+buttons.push('alignment');
+
+{*
 {if $__wcf->getBBCodeHandler()->isAvailableBBCode('font')}
-	$buttons.push('fontfamily');
+	buttons.push('fontfamily');
 {/if}
 {if $__wcf->getBBCodeHandler()->isAvailableBBCode('size')}
-	$buttons.push('fontsize');
+	buttons.push('fontsize');
 {/if}
+*}
 {if $__wcf->getBBCodeHandler()->isAvailableBBCode('color')}
-	$buttons.push('fontcolor');
+	buttons.push('woltlabColor');
 {/if}
 
-if ($buttons.length && $buttons[$buttons.length -1] != 'separator') {
-	$buttons.push('separator');
-}
-
 {if $__wcf->getBBCodeHandler()->isAvailableBBCode('url')}
-	$buttons.push('link');
+	buttons.push('link');
 {/if}
+{*
 {if $__wcf->getBBCodeHandler()->isAvailableBBCode('img')}
-	$buttons.push('image');
+	buttons.push('image');
 {/if}
+*}
 {if $__wcf->getBBCodeHandler()->isAvailableBBCode('table')}
-	$buttons.push('table');
+	buttons.push('table');
 {/if}
 
-if ($buttons.length && $buttons[$buttons.length -1] != 'separator') {
-	$buttons.push('separator');
-}
+buttons.push('woltlabMedia');
+buttons.push('woltlabQuote');
\ No newline at end of file
diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabButton.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabButton.js
index 895f23b3c4..6ebf44a341 100644
--- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabButton.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabButton.js
@@ -3,11 +3,63 @@ $.Redactor.prototype.WoltLabButton = function() {
 	
 	return {
 		init: function() {
-			// insert separators
-			var button, buttonName, lastButtonName;
+			// set button icons and labels
+			var button, buttonData, buttonName;
 			for (var i = 0, length = this.opts.buttons.length; i < length; i++) {
 				buttonName = this.opts.buttons[i];
 				
+				//noinspection JSUnresolvedVariable
+				buttonData = this.opts.woltlab.buttons[buttonName];
+				
+				if (buttonName === 'subscript' || buttonName === 'superscript') {
+					button = this.button.addAfter(this.opts.buttons[i - 1], buttonName, '');
+					this.button.setEvent(button, buttonName, { func: 'inline.format' });
+				}
+				else {
+					button = this.button.get(buttonName);
+				}
+				
+				// set icon
+				this.button.setIcon(button, '<span class="icon icon16 ' + buttonData.icon + '"></span>');
+				
+				// set title
+				//noinspection JSUnresolvedVariable
+				elAttr(button[0], 'title', buttonData.title);
+				button[0].classList.add('jsTooltip');
+			}
+			
+			WCF.DOMNodeInsertedHandler.execute();
+			
+			return;
+			var button, buttonName, i, lastButtonName = '', length;
+			
+			// add missing buttons
+			for (i = 0, length = this.opts.buttons.length; i < length; i++) {
+				buttonName = this.opts.buttons[i];
+				
+				// check if button exists
+				button = this.button.get(buttonName);
+				if (button.length === 0) {
+					button = this.button.addAfter(lastButtonName, buttonName, this.opts.lang[buttonName]);
+					
+					if (buttonName === 'subscript' || buttonName === 'superscript') {
+						this.button.setEvent(button, buttonName, {func: 'inline.format'});
+					}
+				}
+				
+				if (_icons.hasOwnProperty(buttonName)) {
+					this.button.setIcon(button, '<span class="icon icon16 ' + _icons[buttonName] + '"></span>');
+				}
+				
+				lastButtonName = buttonName;
+			}
+			
+			
+			// insert separators
+			/*var button, buttonName, lastButtonName, i, length;
+			for (i = 0, length = this.opts.buttons.length; i < length; i++) {
+				buttonName = this.opts.buttons[i];
+				
 				if (buttonName === 'wcfSeparator') {
 					if (lastButtonName) {
 						button = this.button.get(lastButtonName);
@@ -19,11 +71,11 @@ $.Redactor.prototype.WoltLabButton = function() {
 				else {
 					lastButtonName = buttonName;
 				}
-			}
+			}*/
 			
 			// add tooltips
 			var buttons = elByClass('re-button', this.button.toolbar()[0]), label;
-			for (var i = 0, length = buttons.length; i < length; i++) {
+			for (i = 0, length = buttons.length; i < length; i++) {
 				button = buttons[i];
 				label = elAttr(button, 'aria-label');
 				
diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabColor.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabColor.js
index 1fb8026ab4..0504856cec 100644
--- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabColor.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabColor.js
@@ -28,7 +28,7 @@ $.Redactor.prototype.WoltLabColor = function() {
 				};
 			}
 			
-			var button = this.button.add('woltlabColor', 'Color');
+			var button = this.button.add('woltlabColor', '');
 			this.button.addDropdown(button, dropdown);
 			
 			// add styling
diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabMedia.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabMedia.js
index 7e6f84b4a2..be1e56f92d 100644
--- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabMedia.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabMedia.js
@@ -3,7 +3,7 @@ $.Redactor.prototype.WoltLabMedia = function() {
 	
 	return {
 		init: function() {
-			var button = this.button.add('woltlabMedia', 'Media');
+			var button = this.button.add('woltlabMedia', '');
 			$(button).addClass('jsMediaEditorButton');
 			
 			require(['WoltLab/WCF/Media/Manager/Editor'], function(MediaManagerEditor) {
diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabQuote.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabQuote.js
index bc2500245b..bf5d08fb66 100644
--- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabQuote.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabQuote.js
@@ -4,7 +4,7 @@ $.Redactor.prototype.WoltLabQuote = function() {
 	return {
 		init: function() {
 			// TODO: this should be somewhere else
-			var button = this.button.add('woltlabQuote', 'Quote');
+			var button = this.button.add('woltlabQuote', '');
 			this.button.addCallback(button, this.WoltLabQuote.insert);
 			
 			require(['WoltLab/WCF/Ui/Redactor/Quote'], (function(UiRedactorQuote) {
diff --git a/wcfsetup/install/files/style/ui/redactor.scss b/wcfsetup/install/files/style/ui/redactor.scss
index bd758ed6a2..7c3f2302ab 100644
--- a/wcfsetup/install/files/style/ui/redactor.scss
+++ b/wcfsetup/install/files/style/ui/redactor.scss
@@ -220,10 +220,10 @@
 			
 			@include wcfFontSmall;
 			
-			&.redactor-button-disabled,
-			&.redactor-button-disabled:before,
-			&.redactor-button-disabled > i:before {
-				color: $wcfButtonDisabledText;
+			&.redactor-button-disabled {
+				background-color: transparent !important;
+				color: $wcfButtonDisabledText !important;
+				cursor: default;
 			}
 			
 			&:hover,
@@ -232,6 +232,11 @@
 				background-color: $wcfHeaderMenuBackgroundActive;
 				color: $wcfHeaderMenuLinkActive;
 			}
+			
+			.icon {
+				color: inherit;
+				cursor: inherit !important;
+			}
 		}
 	}
 }
@@ -255,22 +260,6 @@
 	}
 }
 
-.re-bold {
-	font-weight: 600;
-}
-
-.re-italic {
-	font-style: italic;
-}
-
-.re-underline {
-	text-decoration: underline !important;
-}
-
-.re-deleted {
-	text-decoration: line-through !important;
-}
-
 #redactor-image-box {
 	border: 1px dashed rgba(0, 0, 0, .5);
 	display: inline-block;
@@ -436,6 +425,7 @@
 		
 		> li:first-child {
 			flex: 0 0 100%;
+			margin-bottom: 10px;
 		}
 	}
 	
diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml
index 24a1ac3688..94d2381dbd 100644
--- a/wcfsetup/install/lang/de.xml
+++ b/wcfsetup/install/lang/de.xml
@@ -1760,21 +1760,6 @@ Erlaubte Dateiendungen: {', '|implode:$attachmentHandler->getFormattedAllowedExt
 	</category>
 	
 	<category name="wcf.bbcode">
-		<item name="wcf.bbcode.button.code"><![CDATA[Code]]></item>
-		<item name="wcf.bbcode.button.fontColor"><![CDATA[Schriftfarbe]]></item>
-		<item name="wcf.bbcode.button.fontFamily"><![CDATA[Schriftart]]></item>
-		<item name="wcf.bbcode.button.fontSize"><![CDATA[Schriftgröße]]></item>
-		<item name="wcf.bbcode.button.image"><![CDATA[Bild]]></item>
-		<item name="wcf.bbcode.button.inlineCode"><![CDATA[Inline-Code]]></item>
-		<item name="wcf.bbcode.button.quote"><![CDATA[Zitat]]></item>
-		<item name="wcf.bbcode.button.redo"><![CDATA[Wiederholen]]></item>
-		<item name="wcf.bbcode.button.showAll"><![CDATA[Alles anzeigen]]></item>
-		<item name="wcf.bbcode.button.spoiler"><![CDATA[Spoiler]]></item>
-		<item name="wcf.bbcode.button.subscript"><![CDATA[Tiefgestellt]]></item>
-		<item name="wcf.bbcode.button.superscript"><![CDATA[Hochgestellt]]></item>
-		<item name="wcf.bbcode.button.toggleBBCode"><![CDATA[BBCode]]></item>
-		<item name="wcf.bbcode.button.toggleHTML"><![CDATA[WYSIWYG]]></item>
-		<item name="wcf.bbcode.button.undo"><![CDATA[Rückgängig]]></item>
 		<item name="wcf.bbcode.code"><![CDATA[Quellcode]]></item>
 		<item name="wcf.bbcode.code.bash.title"><![CDATA[Shell-Script]]></item>
 		<item name="wcf.bbcode.code.brainfuck.title"><![CDATA[Brainfuck-Quellcode]]></item>
@@ -2123,6 +2108,23 @@ Fehler sind beispielsweise:
 		<item name="wcf.edit.headline.new"><![CDATA[{if $newID == 'current'}Aktuelle {/if}Version vom {@$new->time|plainTime} ({$new->username})]]></item>
 	</category>
 	
+	<category name="wcf.editor">
+		<item name="wcf.editor.button.alignment"><![CDATA[Ausrichtung]]></item>
+		<item name="wcf.editor.button.bold"><![CDATA[Fett]]></item>
+		<item name="wcf.editor.button.color"><![CDATA[Schriftfarbe]]></item>
+		<item name="wcf.editor.button.html"><![CDATA[HTML]]></item>
+		<item name="wcf.editor.button.italic"><![CDATA[Kursiv]]></item>
+		<item name="wcf.editor.button.link"><![CDATA[Link]]></item>
+		<item name="wcf.editor.button.lists"><![CDATA[Liste]]></item>
+		<item name="wcf.editor.button.media"><![CDATA[Media]]></item>
+		<item name="wcf.editor.button.quote"><![CDATA[Zitat]]></item>
+		<item name="wcf.editor.button.strikethrough"><![CDATA[Durchgestrichen]]></item>
+		<item name="wcf.editor.button.subscript"><![CDATA[Tiefgestellt]]></item>
+		<item name="wcf.editor.button.superscript"><![CDATA[Hochgestellt]]></item>
+		<item name="wcf.editor.button.table"><![CDATA[Tabelle]]></item>
+		<item name="wcf.editor.button.underline"><![CDATA[Unterstrichen]]></item>
+	</category>
+	
 	<category name="wcf.global">
 		<item name="wcf.global.availableUpdates"><![CDATA[Es sind <a href="{link controller='PackageUpdate' isACP=true}{/link}">Aktualisierungen für installierte Pakete</a> verfügbar.]]></item>
 		<item name="wcf.global.button.add"><![CDATA[Hinzufügen]]></item>
diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml
index 182272f0b7..5f15b487ce 100644
--- a/wcfsetup/install/lang/en.xml
+++ b/wcfsetup/install/lang/en.xml
@@ -1766,21 +1766,6 @@ Allowed extensions: {', '|implode:$attachmentHandler->getFormattedAllowedExtensi
 	</category>
 	
 	<category name="wcf.bbcode">
-		<item name="wcf.bbcode.button.code"><![CDATA[Code]]></item>
-		<item name="wcf.bbcode.button.fontColor"><![CDATA[Font Color]]></item>
-		<item name="wcf.bbcode.button.fontFamily"><![CDATA[Font Family]]></item>
-		<item name="wcf.bbcode.button.fontSize"><![CDATA[Font Size]]></item>
-		<item name="wcf.bbcode.button.image"><![CDATA[Image]]></item>
-		<item name="wcf.bbcode.button.inlineCode"><![CDATA[Inline-Code]]></item>
-		<item name="wcf.bbcode.button.quote"><![CDATA[Quote]]></item>
-		<item name="wcf.bbcode.button.redo"><![CDATA[Redo]]></item>
-		<item name="wcf.bbcode.button.showAll"><![CDATA[Display All]]></item>
-		<item name="wcf.bbcode.button.spoiler"><![CDATA[Spoiler]]></item>
-		<item name="wcf.bbcode.button.subscript"><![CDATA[Subscript]]></item>
-		<item name="wcf.bbcode.button.superscript"><![CDATA[Superscript]]></item>
-		<item name="wcf.bbcode.button.toggleBBCode"><![CDATA[BBCode]]></item>
-		<item name="wcf.bbcode.button.toggleHTML"><![CDATA[WYSIWYG]]></item>
-		<item name="wcf.bbcode.button.undo"><![CDATA[Undo]]></item>
 		<item name="wcf.bbcode.code"><![CDATA[Source Code]]></item>
 		<item name="wcf.bbcode.code.bash.title"><![CDATA[Shell-Script]]></item>
 		<item name="wcf.bbcode.code.brainfuck.title"><![CDATA[Brainfuck Source Code]]></item>
@@ -2133,6 +2118,23 @@ Errors are:
 		<item name="wcf.edit.headline.new"><![CDATA[{if $newID == 'current'}Current version{else}Version{/if} as of {@$new->time|plainTime} ({$new->username})]]></item>
 	</category>
 	
+	<category name="wcf.editor">
+		<item name="wcf.editor.button.alignment"><![CDATA[Alignment]]></item>
+		<item name="wcf.editor.button.bold"><![CDATA[Bold]]></item>
+		<item name="wcf.editor.button.color"><![CDATA[Font Color]]></item>
+		<item name="wcf.editor.button.html"><![CDATA[HTML]]></item>
+		<item name="wcf.editor.button.italic"><![CDATA[Italic]]></item>
+		<item name="wcf.editor.button.link"><![CDATA[Link]]></item>
+		<item name="wcf.editor.button.lists"><![CDATA[List]]></item>
+		<item name="wcf.editor.button.media"><![CDATA[Media]]></item>
+		<item name="wcf.editor.button.quote"><![CDATA[Quote]]></item>
+		<item name="wcf.editor.button.strikethrough"><![CDATA[Strikethrough]]></item>
+		<item name="wcf.editor.button.subscript"><![CDATA[Subscript]]></item>
+		<item name="wcf.editor.button.superscript"><![CDATA[Superscript]]></item>
+		<item name="wcf.editor.button.table"><![CDATA[Table]]></item>
+		<item name="wcf.editor.button.underline"><![CDATA[Underline]]></item>
+	</category>
+	
 	<category name="wcf.global">
 		<item name="wcf.global.availableUpdates"><![CDATA[There are <a href="{link controller='PackageUpdate' isACP=true}{/link}">updates available</a> for installed packages.]]></item>
 		<item name="wcf.global.button.add"><![CDATA[Add]]></item>