Optimized toolbar buttons on smartphones

diff --git a/com.woltlab.wcf/templates/wysiwyg.tpl b/com.woltlab.wcf/templates/wysiwyg.tpl
index 516f3714ecb427ff8020ed7c314051624a433b11..cd19fe024db6e54e1579c8ad4d6a2a198241fd87 100644 (file)
--- a/com.woltlab.wcf/templates/wysiwyg.tpl
+++ b/com.woltlab.wcf/templates/wysiwyg.tpl
@@ -86,7 +86,7 @@
                                'wcf.editor.spoiler.title': '{lang __literal=true}wcf.editor.spoiler.title{/lang}'
                        });
                        
-                       var buttons = [], buttonOptions = [], customButtons = [];
+                       var buttons = [], buttonMobile = [], buttonOptions = [], customButtons = [];
                        {include file='wysiwygToolbar'}
                        
                        var highlighters = { {implode from=$__wcf->getBBCodeHandler()->getHighlighters() item=__highlighter}'{$__highlighter}': '{lang}wcf.bbcode.code.{@$__highlighter}.title{/lang}'{/implode} };
@@ -175,6 +175,7 @@
                                woltlab: {
                                        autosave: autosave,
                                        buttons: buttonOptions,
+                                       buttonMobile: buttonMobile,
                                        customButtons: customButtons,
                                        highlighters: highlighters
                                }

diff --git a/com.woltlab.wcf/templates/wysiwygToolbar.tpl b/com.woltlab.wcf/templates/wysiwygToolbar.tpl
index c1e4fcc367fb3d4566e679456c2f2d753c47990b..1df0449ed02b065787044e82615e54f086ad57af 100644 (file)
--- a/com.woltlab.wcf/templates/wysiwygToolbar.tpl
+++ b/com.woltlab.wcf/templates/wysiwygToolbar.tpl
@@ -18,6 +18,8 @@ buttonOptions = {
        woltlabSize: { icon: 'fa-text-height', title: '{lang}wcf.editor.button.size{/lang}' }
 };
 
+buttonMobile = ['format', 'bold', 'italic', 'underline', 'alignment', 'link', 'woltlabImage', 'woltlabMedia'];
+
 buttons.push('html');
 
 buttons.push('wcfSeparator');

diff --git a/wcfsetup/install/files/acp/templates/wysiwyg.tpl b/wcfsetup/install/files/acp/templates/wysiwyg.tpl
index 3be785ecd616999467d28c78f558a542997fb2b7..cd19fe024db6e54e1579c8ad4d6a2a198241fd87 100644 (file)
--- a/wcfsetup/install/files/acp/templates/wysiwyg.tpl
+++ b/wcfsetup/install/files/acp/templates/wysiwyg.tpl
@@ -28,6 +28,7 @@
                        '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabEvent.js?v={@LAST_UPDATE_TIME}',
                        '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabImage.js?v={@LAST_UPDATE_TIME}',
                        '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabInlineCode.js?v={@LAST_UPDATE_TIME}',
+                       '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabKeydown.js?v={@LAST_UPDATE_TIME}',
                        '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabLink.js?v={@LAST_UPDATE_TIME}',
                        '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabMedia.js?v={@LAST_UPDATE_TIME}',
                        '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabMention.js?v={@LAST_UPDATE_TIME}',
@@ -85,7 +86,7 @@
                                'wcf.editor.spoiler.title': '{lang __literal=true}wcf.editor.spoiler.title{/lang}'
                        });
                        
-                       var buttons = [], buttonOptions = [], customButtons = [];
+                       var buttons = [], buttonMobile = [], buttonOptions = [], customButtons = [];
                        {include file='wysiwygToolbar'}
                        
                        var highlighters = { {implode from=$__wcf->getBBCodeHandler()->getHighlighters() item=__highlighter}'{$__highlighter}': '{lang}wcf.bbcode.code.{@$__highlighter}.title{/lang}'{/implode} };
@@ -108,12 +109,21 @@
                                lang: 'wsc', // fake language to offload phrases
                                langs: {
                                        wsc: {
+                                               // general
+                                               edit: '{lang}wcf.global.button.edit{/lang}',
+                                               
                                                // formatting dropdown
                                                heading2: '{lang}wcf.editor.format.heading2{/lang}',
                                                heading3: '{lang}wcf.editor.format.heading3{/lang}',
                                                heading4: '{lang}wcf.editor.format.heading4{/lang}',
                                                paragraph: '{lang}wcf.editor.format.paragraph{/lang}',
                                                
+                                               // links
+                                               'link-edit': '{lang}wcf.editor.link.edit{/lang}',
+                                               'link-insert': '{lang}wcf.editor.link.add{/lang}',
+                                               unlink: '{lang}wcf.editor.link.unlink{/lang}',
+                                               
+                                               // text alignment
                                                'align-center': '{lang}wcf.editor.alignment.center{/lang}',
                                                'align-justify': '{lang}wcf.editor.alignment.justify{/lang}',
                                                'align-left': '{lang}wcf.editor.alignment.left{/lang}',
@@ -136,12 +146,18 @@
                                linkSize: 0xBADC0DED, // some random value to disable truncating
                                minHeight: 200,
                                plugins: [
+                                       // Imperavi
                                        'alignment',
                                        'source',
                                        'table',
+                                       
+                                       // WoltLab specials
+                                       'WoltLabBlock',
+                                       'WoltLabKeydown',
+                                       
+                                       // WoltLab core
                                        'WoltLabAlignment',
                                        'WoltLabAttachment',
-                                       'WoltLabBlock',
                                        'WoltLabCode',
                                        'WoltLabColor',
                                        'WoltLabDropdown',
@@ -159,6 +175,7 @@
                                woltlab: {
                                        autosave: autosave,
                                        buttons: buttonOptions,
+                                       buttonMobile: buttonMobile,
                                        customButtons: customButtons,
                                        highlighters: highlighters
                                }

diff --git a/wcfsetup/install/files/acp/templates/wysiwygToolbar.tpl b/wcfsetup/install/files/acp/templates/wysiwygToolbar.tpl
index c1e4fcc367fb3d4566e679456c2f2d753c47990b..1df0449ed02b065787044e82615e54f086ad57af 100644 (file)
--- a/wcfsetup/install/files/acp/templates/wysiwygToolbar.tpl
+++ b/wcfsetup/install/files/acp/templates/wysiwygToolbar.tpl
@@ -18,6 +18,8 @@ buttonOptions = {
        woltlabSize: { icon: 'fa-text-height', title: '{lang}wcf.editor.button.size{/lang}' }
 };
 
+buttonMobile = ['format', 'bold', 'italic', 'underline', 'alignment', 'link', 'woltlabImage', 'woltlabMedia'];
+
 buttons.push('html');
 
 buttons.push('wcfSeparator');

diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabButton.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabButton.js
index 8a449f21c87a8f1cf1846f25e5d936b52710a859..11ad487a0b9663b3a0860ab0cd3020e9389d7ccb 100644 (file)
--- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabButton.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabButton.js
@@ -80,6 +80,14 @@ $.Redactor.prototype.WoltLabButton = function() {
                                }
                        }
                        
+                       // button mobile visibility
+                       for (i = 0, length = toolbar.childElementCount; i < length; i++) {
+                               listItem = toolbar.children[i];
+                               button = listItem.children[0];
+                               
+                               elData(listItem, 'show-on-mobile', (this.opts.woltlab.buttonMobile.indexOf(button.rel) !== -1));
+                       }
+                       
                        // add remaining elements
                        toolbarOrder.forEach(function(buttonName) {
                                toolbar.appendChild(toolbarButtons[buttonName]);

diff --git a/wcfsetup/install/files/style/ui/redactor.scss b/wcfsetup/install/files/style/ui/redactor.scss
index 429bdc9cacc16b4ba8f9e2a19a6cdc3a40eaca38..1b882e7fb9a38492bad706207b92f5516b34898e 100644 (file)
--- a/wcfsetup/install/files/style/ui/redactor.scss
+++ b/wcfsetup/install/files/style/ui/redactor.scss
@@ -156,21 +156,6 @@
                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;
@@ -198,6 +183,29 @@
                                cursor: inherit !important;
                        }
                }
+               
+               @include screen-sm-up {
+                       &.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;
+                               }
+                       }
+               }
+               
+               @include screen-xs {
+                       &[data-show-on-mobile="false"] {
+                               display: none;
+                       }
+               }
        }
 }