Added visual separator between editor toolbar icons

diff --git a/com.woltlab.wcf/templates/wysiwygToolbar.tpl b/com.woltlab.wcf/templates/wysiwygToolbar.tpl
index 4f6066f3e69c8f3cc18b7e66c7149fa30a9ece6d..ddd7aaa58270245ac21d473af99da0e4252ac518 100644 (file)
--- 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 de1ab9c4467c2f7f44de53cdbbd264db17c3277f..512fcc4f08df411837c146e1ec595141dbe8edd9 100644 (file)
--- 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 b353004107f138bf1e4adc28a598b00a5b7930da..06a8a291d16751c143aad3f6c477d358ad3f27a8 100644 (file)
--- 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;