From b48081676ea61ee2a6e97840f4a72a5dfd9d924b Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Thu, 26 May 2016 16:29:49 +0200
Subject: [PATCH] Added visual separator between editor toolbar icons

---
 com.woltlab.wcf/templates/wysiwygToolbar.tpl  | 24 ++++++++++---------
 .../redactor2/plugins/WoltLabButton.js        | 19 ++++++++++++++-
 wcfsetup/install/files/style/ui/redactor.scss | 15 ++++++++++++
 3 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/com.woltlab.wcf/templates/wysiwygToolbar.tpl b/com.woltlab.wcf/templates/wysiwygToolbar.tpl
index 4f6066f3e6..ddd7aaa582 100644
--- a/com.woltlab.wcf/templates/wysiwygToolbar.tpl
+++ b/com.woltlab.wcf/templates/wysiwygToolbar.tpl
@@ -20,22 +20,17 @@ buttons = [];
 
 buttons.push('html');
 
+buttons.push('wcfSeparator');
+
 buttons.push('bold');
 buttons.push('italic');
 buttons.push('underline');
-
 buttons.push('deleted');
-buttons.push('subscript');
-buttons.push('superscript');
 
-buttons.push('lists');
-buttons.push('alignment');
+buttons.push('wcfSeparator');
 
-{*
-{if $__wcf->getBBCodeHandler()->isAvailableBBCode('font')}
-	buttons.push('fontfamily');
-{/if}
-*}
+buttons.push('subscript');
+buttons.push('superscript');
 {if $__wcf->getBBCodeHandler()->isAvailableBBCode('size')}
 	buttons.push('woltlabSize');
 {/if}
@@ -43,6 +38,11 @@ buttons.push('alignment');
 	buttons.push('woltlabColor');
 {/if}
 
+buttons.push('wcfSeparator');
+
+buttons.push('lists');
+buttons.push('alignment');
+
 {if $__wcf->getBBCodeHandler()->isAvailableBBCode('url')}
 	buttons.push('link');
 {/if}
@@ -55,5 +55,7 @@ buttons.push('alignment');
 	buttons.push('table');
 {/if}
 
+buttons.push('wcfSeparator');
+
 buttons.push('woltlabMedia');
-buttons.push('woltlabQuote');
\ No newline at end of file
+buttons.push('woltlabQuote');
diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabButton.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabButton.js
index de1ab9c446..512fcc4f08 100644
--- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabButton.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabButton.js
@@ -8,6 +8,11 @@ $.Redactor.prototype.WoltLabButton = function() {
 			for (var i = 0, length = this.opts.buttons.length; i < length; i++) {
 				buttonName = this.opts.buttons[i];
 				
+				if (buttonName === 'wcfSeparator') {
+					// seperators will be inserted in the next step
+					continue;
+				}
+				
 				//noinspection JSUnresolvedVariable
 				buttonData = this.opts.woltlab.buttons[buttonName];
 				
@@ -38,11 +43,23 @@ $.Redactor.prototype.WoltLabButton = function() {
 				toolbarOrder.push(buttonName);
 			}
 			
+			var addSeparator = false;
 			for (i = 0, length = this.opts.buttons.length; i < length; i++) {
 				buttonName = this.opts.buttons[i];
 				
-				toolbar.appendChild(toolbarButtons[buttonName]);
+				if (buttonName === 'wcfSeparator') {
+					addSeparator = true;
+					continue;
+				}
+				
+				listItem = toolbarButtons[buttonName];
+				toolbar.appendChild(listItem);
 				toolbarOrder.splice(toolbarOrder.indexOf(buttonName), 1);
+				
+				if (addSeparator) {
+					listItem.classList.add('redactor-toolbar-separator');
+					addSeparator = false;
+				}
 			}
 			
 			// add remaining elements
diff --git a/wcfsetup/install/files/style/ui/redactor.scss b/wcfsetup/install/files/style/ui/redactor.scss
index b353004107..06a8a291d1 100644
--- a/wcfsetup/install/files/style/ui/redactor.scss
+++ b/wcfsetup/install/files/style/ui/redactor.scss
@@ -211,6 +211,21 @@
 		flex: 0 0 auto;
 		margin-bottom: 1px;
 		
+		&.redactor-toolbar-separator {
+			margin-left: 11px;
+			position: relative;
+			
+			&::before {
+				bottom: 7px;
+				border-left: 1px solid $wcfHeaderMenuLink;
+				content: "";
+				left: -6px;
+				opacity: .6;
+				position: absolute;
+				top: 7px;
+			}
+		}
+		
 		> a {
 			color: $wcfHeaderMenuLink;
 			display: block;
-- 
2.20.1