Updated quick reply visuals

diff --git a/com.woltlab.wcf/templates/wysiwyg.tpl b/com.woltlab.wcf/templates/wysiwyg.tpl
index e8a72536f7a0ccad5e3a102b355e636acadfb250..b4a15e2d096bc7916d567d9476c31005cb94b226 100644 (file)
--- 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 e8a72536f7a0ccad5e3a102b355e636acadfb250..b4a15e2d096bc7916d567d9476c31005cb94b226 100644 (file)
--- 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 f868bb1884e2495732ed07d67c1425995250d347..95c00bd6fa1b243fcaa4ddfacedc77612c212a51 100644 (file)
--- 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 c9c11e296928d36d08a4502bfc9680c9c53b6cfa..323f0aab7f46c9060825b5fa3df3963b3dd9b35f 100644 (file)
--- 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 (file)
index 0000000..818a2fc
--- /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 251b4e58c006ef18fd46800d334171efdb36f6ec..453a71f978df1cce0be01a03aa6a2a203bf21edd 100644 (file)
--- 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 b40ac961ba343eaf8da64e64c02e9737df50cd92..86b7e3aff2a04627aaf7a638352d1421a5f0f73b 100644 (file)
--- 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 b9332587fb8cb84e2e631e1f596d1b306691294e..1dbba09a3bc4000375fcc7c9a651e88f7913fa6c 100644 (file)
--- 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 {