From: Alexander Ebert Date: Thu, 28 Jul 2016 13:55:41 +0000 (+0200) Subject: Optimized toolbar buttons on smartphones X-Git-Tag: 3.0.0_Beta_1~935 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=8399847cbea747edbfd1475ab641eede08ad73d4;p=GitHub%2FWoltLab%2FWCF.git Optimized toolbar buttons on smartphones --- diff --git a/com.woltlab.wcf/templates/wysiwyg.tpl b/com.woltlab.wcf/templates/wysiwyg.tpl index 516f3714ec..cd19fe024d 100644 --- 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 c1e4fcc367..1df0449ed0 100644 --- 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 3be785ecd6..cd19fe024d 100644 --- 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 c1e4fcc367..1df0449ed0 100644 --- 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 8a449f21c8..11ad487a0b 100644 --- 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 429bdc9cac..1b882e7fb9 100644 --- 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; + } + } } }