From: Alexander Ebert Date: Sun, 28 Aug 2016 22:05:06 +0000 (+0200) Subject: Updated quick reply visuals X-Git-Tag: 3.0.0_Beta_1~425 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=8e8cc42047e2eb3c1323d342fbc72a355351c406;p=GitHub%2FWoltLab%2FWCF.git Updated quick reply visuals --- diff --git a/com.woltlab.wcf/templates/wysiwyg.tpl b/com.woltlab.wcf/templates/wysiwyg.tpl index e8a72536f7..b4a15e2d09 100644 --- a/com.woltlab.wcf/templates/wysiwyg.tpl +++ b/com.woltlab.wcf/templates/wysiwyg.tpl @@ -30,6 +30,7 @@ '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabModal.js?v={@LAST_UPDATE_TIME}', '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabPaste.js?v={@LAST_UPDATE_TIME}', '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabQuote.js?v={@LAST_UPDATE_TIME}', + '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabReply.js?v={@LAST_UPDATE_TIME}', '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabSize.js?v={@LAST_UPDATE_TIME}', '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabSmiley.js?v={@LAST_UPDATE_TIME}', '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabSource.js?v={@LAST_UPDATE_TIME}', @@ -101,29 +102,6 @@ element.value = autosave.getInitialValue(); } - var placeholderCallback = null, replyContainer = element.closest('.messageQuickReplyContent'); - if (replyContainer) { - var container = elById('messageQuickReply'); - if (container.classList.contains('messageQuickReplyCollapsed')) { - placeholderCallback = function (event) { - if (event instanceof Event) { - event.preventDefault(); - } - - if (container.classList.contains('messageQuickReplyCollapsed')) { - container.classList.remove('messageQuickReplyCollapsed'); - $(element).redactor('focus.end'); - - replyContainer.removeEventListener(WCF_CLICK_EVENT, placeholderCallback); - } - - return null; - }; - - replyContainer.addEventListener(WCF_CLICK_EVENT, placeholderCallback); - } - } - var config = { buttons: buttons, formatting: ['p', 'h2', 'h3', 'h4'], @@ -202,6 +180,7 @@ 'WoltLabModal', 'WoltLabPaste', 'WoltLabQuote', + 'WoltLabReply', 'WoltLabSize', 'WoltLabSmiley', 'WoltLabSource', @@ -214,8 +193,7 @@ buttons: buttonOptions, buttonMobile: buttonMobile, customButtons: customButtons, - highlighters: highlighters, - placeholderCallback: placeholderCallback + highlighters: highlighters } }; @@ -243,15 +221,9 @@ config.callbacks = config.callbacks || { }; config.callbacks.init = function() { - var editor = element.previousElementSibling; - if (replyContainer) { - elData(editor, 'reply-placeholder', elData(element, 'reply-placeholder')); - } - // slight delay to allow Redactor to initialize itself window.setTimeout(function() { $(element).redactor('code.set', content); - editor.classList.add('redactorReady'); }, 10); }; diff --git a/wcfsetup/install/files/acp/templates/wysiwyg.tpl b/wcfsetup/install/files/acp/templates/wysiwyg.tpl index e8a72536f7..b4a15e2d09 100644 --- a/wcfsetup/install/files/acp/templates/wysiwyg.tpl +++ b/wcfsetup/install/files/acp/templates/wysiwyg.tpl @@ -30,6 +30,7 @@ '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabModal.js?v={@LAST_UPDATE_TIME}', '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabPaste.js?v={@LAST_UPDATE_TIME}', '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabQuote.js?v={@LAST_UPDATE_TIME}', + '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabReply.js?v={@LAST_UPDATE_TIME}', '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabSize.js?v={@LAST_UPDATE_TIME}', '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabSmiley.js?v={@LAST_UPDATE_TIME}', '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabSource.js?v={@LAST_UPDATE_TIME}', @@ -101,29 +102,6 @@ element.value = autosave.getInitialValue(); } - var placeholderCallback = null, replyContainer = element.closest('.messageQuickReplyContent'); - if (replyContainer) { - var container = elById('messageQuickReply'); - if (container.classList.contains('messageQuickReplyCollapsed')) { - placeholderCallback = function (event) { - if (event instanceof Event) { - event.preventDefault(); - } - - if (container.classList.contains('messageQuickReplyCollapsed')) { - container.classList.remove('messageQuickReplyCollapsed'); - $(element).redactor('focus.end'); - - replyContainer.removeEventListener(WCF_CLICK_EVENT, placeholderCallback); - } - - return null; - }; - - replyContainer.addEventListener(WCF_CLICK_EVENT, placeholderCallback); - } - } - var config = { buttons: buttons, formatting: ['p', 'h2', 'h3', 'h4'], @@ -202,6 +180,7 @@ 'WoltLabModal', 'WoltLabPaste', 'WoltLabQuote', + 'WoltLabReply', 'WoltLabSize', 'WoltLabSmiley', 'WoltLabSource', @@ -214,8 +193,7 @@ buttons: buttonOptions, buttonMobile: buttonMobile, customButtons: customButtons, - highlighters: highlighters, - placeholderCallback: placeholderCallback + highlighters: highlighters } }; @@ -243,15 +221,9 @@ config.callbacks = config.callbacks || { }; config.callbacks.init = function() { - var editor = element.previousElementSibling; - if (replyContainer) { - elData(editor, 'reply-placeholder', elData(element, 'reply-placeholder')); - } - // slight delay to allow Redactor to initialize itself window.setTimeout(function() { $(element).redactor('code.set', content); - editor.classList.add('redactorReady'); }, 10); }; diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabCaret.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabCaret.js index f868bb1884..95c00bd6fa 100644 --- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabCaret.js +++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabCaret.js @@ -19,6 +19,22 @@ $.Redactor.prototype.WoltLabCaret = function() { this.WoltLabCaret._initInternalRange(); }, + endOfEditor: function () { + var editor = this.core.editor()[0]; + + if (document.activeElement !== editor) { + editor.focus(); + } + + var lastElement = editor.lastElementChild; + if (lastElement.nodeName === 'P') { + this.caret.end(lastElement); + } + else { + this.caret.after(lastElement); + } + }, + _initInternalRange: function () { var editor = this.core.editor()[0]; var internalRange = null; diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabEvent.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabEvent.js index c9c11e2969..323f0aab7f 100644 --- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabEvent.js +++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabEvent.js @@ -6,7 +6,13 @@ $.Redactor.prototype.WoltLabEvent = function() { this._callbacks = []; this._elementId = this.$element[0].id; - require(['EventHandler'], this.WoltLabEvent._setEvents.bind(this)); + require(['EventHandler'], (function(EventHandler) { + this.WoltLabEvent._setEvents(EventHandler); + + var uuid = EventHandler.add('com.woltlab.wcf.redactor2', 'showEditor', (function (data) { + + }).bind(this)) + }).bind(this)); }, _setEvents: function(EventHandler) { diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabReply.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabReply.js new file mode 100644 index 0000000000..818a2fca49 --- /dev/null +++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabReply.js @@ -0,0 +1,43 @@ +$.Redactor.prototype.WoltLabReply = function() { + "use strict"; + + var _callbackClick = null; + var _messageContent = null; + var _messageQuickReply = null; + + return { + init: function () { + var messageContent = this.$editor[0].closest('.messageContent'); + var messageQuickReply = elById('messageQuickReply'); + + if (!messageContent || !messageContent.classList.contains('messageQuickReplyContent') || !messageQuickReply || !messageQuickReply.classList.contains('messageQuickReplyCollapsed')) { + return; + } + + _callbackClick = this.WoltLabReply._click.bind(this); + _messageContent = messageContent; + _messageQuickReply = messageQuickReply; + + WCF.System.Event.addListener('com.woltlab.wcf.redactor2', 'showEditor', this.WoltLabReply.showEditor.bind(this)); + + _messageContent.addEventListener(WCF_CLICK_EVENT, _callbackClick); + }, + + showEditor: function () { + if (!_messageQuickReply.classList.contains('messageQuickReplyCollapsed')) { + return; + } + + _messageQuickReply.classList.remove('messageQuickReplyCollapsed'); + _messageContent.removeEventListener(WCF_CLICK_EVENT, _callbackClick); + + this.WoltLabCaret.endOfEditor(); + }, + + _click: function (event) { + event.preventDefault(); + + WCF.System.Event.fireEvent('com.woltlab.wcf.redactor2', 'showEditor'); + } + }; +}; diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Message/Reply.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Message/Reply.js index 251b4e58c0..453a71f978 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Message/Reply.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Message/Reply.js @@ -49,8 +49,10 @@ define(['Ajax', 'Core', 'EventHandler', 'Language', 'Dom/ChangeListener', 'Dom/U replyButtons[i].addEventListener(WCF_CLICK_EVENT, (function(event) { event.preventDefault(); + this._getEditor().WoltLabReply.showEditor(); + UiScroll.element(this._container, (function() { - this._getEditor().focus.end(); + this._getEditor().WoltLabCaret.endOfEditor(); }).bind(this)); }).bind(this)); } diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Quote.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Quote.js index b40ac961ba..86b7e3aff2 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Quote.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Quote.js @@ -51,7 +51,7 @@ define(['Core', 'EventHandler', 'EventKey', 'Language', 'StringUtil', 'Dom/Util' * @protected */ _insertQuote: function (data) { - this._editor.selection.restore(); + EventHandler.fire('com.woltlab.wcf.redactor2', 'showEditor'); this._editor.buffer.set(); diff --git a/wcfsetup/install/files/style/ui/redactor.scss b/wcfsetup/install/files/style/ui/redactor.scss index b9332587fb..1dbba09a3b 100644 --- a/wcfsetup/install/files/style/ui/redactor.scss +++ b/wcfsetup/install/files/style/ui/redactor.scss @@ -492,64 +492,57 @@ } .messageQuickReplyCollapsed { + border-bottom-width: 0 !important; + + @include screen-sm-down { + margin-left: -10px; + margin-right: -10px; + } + .messageSidebar { - pointer-events: none; - - @include screen-sm-down { - opacity: .6; - } - - @include screen-md-up { - > .messageAuthor { - > :not(.userAvatar), - .badgeOnline { - display: none; - } - } - - > .userCredits { - display: none; - } - } + display: none; } .messageQuickReplyContent { - // simulate clickable area + background-color: $wcfSidebarBackground; cursor: pointer; + display: inline-block !important; + margin: 0 !important; + max-width: 100% !important; + overflow: hidden; + padding: 20px; + position: relative; + width: 100% !important; - .wysiwygTextarea { - height: 138px; + @include screen-md-up { + border-radius: 2px; } - > .messageBody, - > .messageFooter { - pointer-events: none; + &::before { + color: $wcfSidebarText; + content: $fa-var-reply; + font-family: FontAwesome; + font-size: 28px; + height: 32px; + line-height: 32px; + margin-right: 10px; + width: 32px; + vertical-align: -5px; } - .redactor-editor { - max-height: 100px !important; - min-height: 100px !important; - overflow: hidden; - position: relative; - - &::before { - color: rgb(169, 169, 169); - content: attr(data-reply-placeholder); - display: block; - left: 20px; - position: absolute; - top: 50%; - transform: translateY(-50%); - } + &::after { + color: $wcfSidebarText; + content: attr(data-placeholder); - > * { - visibility: hidden; + @include screen-sm-up { + @include wcfFontSection; } } - .redactor-toolbar > li, - .messageTabMenu li { - opacity: .5; + > .messageBody { + left: 200%; + position: absolute; + top: -100%; } > .messageFooter {