Improved editor toolbar for small devices

diff --git a/com.woltlab.wcf/templates/wysiwygToolbar.tpl b/com.woltlab.wcf/templates/wysiwygToolbar.tpl
index 0399c8bad080a5999bc6cec055097f0aecfb18a7..9eb2097f516d1e9d61c3b437b13f4158ac76bdbb 100644 (file)
--- a/com.woltlab.wcf/templates/wysiwygToolbar.tpl
+++ b/com.woltlab.wcf/templates/wysiwygToolbar.tpl
@@ -21,7 +21,7 @@ buttonOptions = {
        woltlabSize: { icon: 'fa-text-height', title: '{lang}wcf.editor.button.size{/lang}' }
 };
 
-buttonMobile = ['format', 'bold', 'italic', 'underline', 'alignment', 'link', 'woltlabImage', 'woltlabMedia'];
+buttonMobile = ['format', 'bold', 'italic', 'underline', 'lists', 'link', 'woltlabImage'];
 
 buttons.push('html');
 buttons.push('undo');

diff --git a/wcfsetup/install/files/acp/templates/wysiwyg.tpl b/wcfsetup/install/files/acp/templates/wysiwyg.tpl
index 02eab9aad3789a121865ac653ede06b680c16407..162b73b792781c030fcfa7f27e7eea022efee4b1 100644 (file)
--- a/wcfsetup/install/files/acp/templates/wysiwyg.tpl
+++ b/wcfsetup/install/files/acp/templates/wysiwyg.tpl
@@ -113,10 +113,11 @@
                        
                        var config = {
                                buttons: buttons,
-                               clipboardImageUpload: false,
+                               clipboardImageUpload: {if $__wcf->getBBCodeHandler()->isAvailableBBCode('img')}true{else}false{/if},
                                direction: '{lang}wcf.global.pageDirection{/lang}',
                                formatting: ['p', 'h2', 'h3', 'h4'],
                                imageCaption: false,
+                               imageUpload: {if $__wcf->getBBCodeHandler()->isAvailableBBCode('img')}true{else}false{/if},
                                lang: 'wsc', // fake language to offload phrases
                                langs: {
                                        wsc: {
@@ -165,7 +166,7 @@
                                linkify: false,
                                linkSize: 0xBADC0DED, // some random value to disable truncating
                                minHeight: 200,
-                               pasteImages: false,
+                               pasteImages: {if $__wcf->getBBCodeHandler()->isAvailableBBCode('img')}true{else}false{/if},
                                plugins: [
                                        // Imperavi
                                        'alignment',

diff --git a/wcfsetup/install/files/acp/templates/wysiwygToolbar.tpl b/wcfsetup/install/files/acp/templates/wysiwygToolbar.tpl
index 0399c8bad080a5999bc6cec055097f0aecfb18a7..9eb2097f516d1e9d61c3b437b13f4158ac76bdbb 100644 (file)
--- a/wcfsetup/install/files/acp/templates/wysiwygToolbar.tpl
+++ b/wcfsetup/install/files/acp/templates/wysiwygToolbar.tpl
@@ -21,7 +21,7 @@ buttonOptions = {
        woltlabSize: { icon: 'fa-text-height', title: '{lang}wcf.editor.button.size{/lang}' }
 };
 
-buttonMobile = ['format', 'bold', 'italic', 'underline', 'alignment', 'link', 'woltlabImage', 'woltlabMedia'];
+buttonMobile = ['format', 'bold', 'italic', 'underline', 'lists', 'link', 'woltlabImage'];
 
 buttons.push('html');
 buttons.push('undo');

diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabButton.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabButton.js
index e2c9ef80ad74c234e5808b683c76c57670248c39..03f85d908170080ebb147753a529df6183787a16 100644 (file)
--- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabButton.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabButton.js
@@ -1,6 +1,8 @@
 $.Redactor.prototype.WoltLabButton = function() {
        "use strict";
        
+       var _toggleButton;
+       
        return {
                init: function() {
                        // add custom buttons
@@ -110,6 +112,14 @@ $.Redactor.prototype.WoltLabButton = function() {
                        });
                        
                        WCF.DOMNodeInsertedHandler.execute();
+                       
+                       require(['Ui/Screen'], (function (UiScreen) {
+                               UiScreen.on('screen-xs', {
+                                       match: this.WoltLabButton._enableToggleButton.bind(this),
+                                       unmatch: this.WoltLabButton._disableToggleButton.bind(this),
+                                       setup: this.WoltLabButton._setupToggleButton.bind(this)
+                               });
+                       }).bind(this));
                },
                
                _handleCustomButton: function (bbcode) {
@@ -129,6 +139,38 @@ $.Redactor.prototype.WoltLabButton = function() {
                                        this.$editor[0].focus();
                                }
                        }).bind(this), 10);
+               },
+               
+               _enableToggleButton: function () {
+                       if (_toggleButton.parentNode === null) {
+                               this.$toolbar[0].appendChild(_toggleButton);
+                       }
+               },
+               
+               _disableToggleButton: function () {
+                       if (_toggleButton.parentNode !== null) {
+                               this.$toolbar[0].removeChild(_toggleButton);
+                       }
+               },
+               
+               _setupToggleButton: function () {
+                       _toggleButton = elCreate('li');
+                       _toggleButton.className = 'redactorToolbarToggle';
+                       _toggleButton.innerHTML = '<a href="#"><span class="icon icon16 fa-caret-down"></span></a>';
+                       elData(_toggleButton, 'show-on-mobile', true);
+                       
+                       var icon = _toggleButton.children[0].children[0];
+                       
+                       _toggleButton.children[0].addEventListener('mousedown', (function (event) {
+                               event.preventDefault();
+                               
+                               this.$toolbar[0].classList.toggle('redactorToolbarOverride');
+                               
+                               icon.classList.toggle('fa-caret-down');
+                               icon.classList.toggle('fa-caret-up');
+                       }).bind(this));
+                       
+                       this.$toolbar[0].appendChild(_toggleButton);
                }
        };
 };

diff --git a/wcfsetup/install/files/style/ui/redactor.scss b/wcfsetup/install/files/style/ui/redactor.scss
index bf03bc7c4e7b9ba61196c893e92204f643fb890d..be3ca19efe67a84d2e739396e1de0abef102df43 100644 (file)
--- a/wcfsetup/install/files/style/ui/redactor.scss
+++ b/wcfsetup/install/files/style/ui/redactor.scss
@@ -212,12 +212,42 @@
                                }
                        }
                }
-               
-               @include screen-xs {
+       }
+       
+       @include screen-xs {
+               &:not(.redactorToolbarOverride) > li {
                        &[data-show-on-mobile="false"] {
                                display: none;
                        }
                }
+               
+               &.redactorToolbarOverride > .redactor-toolbar-separator {
+                       position: relative;
+                       
+                       &::before {
+                               bottom: 7px;
+                               border-left: 1px solid $wcfHeaderMenuLink;
+                               content: "";
+                               left: 0;
+                               opacity: .6;
+                               position: absolute;
+                               top: 7px;
+                       }
+               }
+               
+               .redactorToolbarToggle {
+                       position: relative;
+                       
+                       &::before {
+                               bottom: 7px;
+                               border-left: 1px solid $wcfHeaderMenuLink;
+                               content: "";
+                               left: 0;
+                               opacity: .6;
+                               position: absolute;
+                               top: 7px;
+                       }
+               }
        }
 }