From: Alexander Ebert Date: Thu, 26 May 2016 14:29:49 +0000 (+0200) Subject: Added visual separator between editor toolbar icons X-Git-Tag: 3.0.0_Beta_1~1624 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=b48081676ea61ee2a6e97840f4a72a5dfd9d924b;p=GitHub%2FWoltLab%2FWCF.git Added visual separator between editor toolbar icons --- 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;