Added editor icons and labels (WIP)

diff --git a/com.woltlab.wcf/templates/wysiwyg.tpl b/com.woltlab.wcf/templates/wysiwyg.tpl
index 0f98454c9b802cb615853461074d5354fc992336..6208299c3c1a1e059fab88ba2cd8a6411a91ed16 100644 (file)
--- 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 6c2f63e17861f32114bfaa52160bf1dea6915971..d5a3dd44edd175a0dce2b6b557ff8e6ccc44d9f9 100644 (file)
--- 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 895f23b3c4ba59f0ebeb5eff1e947ba82635d26c..6ebf44a3415d3b8f3ea89d21cff113b2182e04e4 100644 (file)
--- 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 1fb8026ab4ced922c69a7c90bf8ba1a940117f91..0504856cec40f30c8d8edaf224ae05fdbb9071b5 100644 (file)
--- 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 7e6f84b4a27db0750df42301ae91952c187a73f0..be1e56f92daabf926677372e9352165196e34794 100644 (file)
--- 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 bc2500245bd6cae7002aa1a5e66f9987fdb1ba38..bf5d08fb668ec610f6f8190f3184d5fb45404d51 100644 (file)
--- 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 bd758ed6a21dcc013a90ebfaffea524d725091aa..7c3f2302ab0dd633de43bfd1ce3a1703237b4fb5 100644 (file)
--- 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 24a1ac36885a94a2abe18aa165ed13717cb3e61c..94d2381dbd2ea27f662e0430fa842753fedd9e56 100644 (file)
--- 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 182272f0b79ab95ab634ae2007f497d79dc6cc58..5f15b487ce0c785df1ea0d5061418560c67786ad 100644 (file)
--- 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>