Added placeholder support, improved styles

See #2222

diff --git a/com.woltlab.wcf/templates/commentListAddComment.tpl b/com.woltlab.wcf/templates/commentListAddComment.tpl
index fb8d28090362188568270a2e1992c0b5c40a16f1..831c6420a8ca052b65a9a113f76f8afd367d070a 100644 (file)
--- a/com.woltlab.wcf/templates/commentListAddComment.tpl
+++ b/com.woltlab.wcf/templates/commentListAddComment.tpl
@@ -1,16 +1,19 @@
 <li class="box48 jsCommentAdd jsOnly">
        {@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(48)}
-       <div class="commentListAddComment">
-               <textarea id="text" name="text" class="wysiwygTextarea"
-                         data-disable-attachments="true"
-                         data-support-mention="true"
-               ></textarea>
-               {include file='wysiwyg' userProfileCommentList=$commentListContainerID}
-               
-               <div class="formSubmit">
-                       <button class="buttonPrimary" data-type="save" accesskey="s">{lang}wcf.global.button.submit{/lang}</button>
+       <div class="commentListAddComment collapsed" data-placeholder="{lang}wcf.comment.add{/lang}">
+               <div class="commentListAddCommentEditorContainer">
+                       <textarea id="text" name="text" class="wysiwygTextarea"
+                                 data-disable-attachments="true"
+                                 data-disable-media="true"
+                                 data-support-mention="true"
+                       ></textarea>
+                       {include file='wysiwyg' userProfileCommentList=$commentListContainerID}
                        
-                       {include file='messageFormPreviewButton' previewMessageObjectType='com.woltlab.wcf.comment' previewMessageObjectID=0}
+                       <div class="formSubmit">
+                               <button class="buttonPrimary" data-type="save" accesskey="s">{lang}wcf.global.button.submit{/lang}</button>
+                               
+                               {include file='messageFormPreviewButton' previewMessageObjectType='com.woltlab.wcf.comment' previewMessageObjectID=0}
+                       </div>
                </div>
        </div>
 </li>

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Comment/Add.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Comment/Add.js
index cf6816df23d5fbbff025d402c20454424b44a6b8..990678b8a1fd156bb0d1469c4b2d13dfd8a2a6aa 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Comment/Add.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Comment/Add.js
@@ -35,6 +35,18 @@ define(['Ajax', 'Core', 'EventHandler', 'Language', 'Dom/ChangeListener', 'Dom/U
                        this._editor = null;
                        this._loadingOverlay = null;
                        
+                       this._content.addEventListener(WCF_CLICK_EVENT, (function (event) {
+                               if (this._content.classList.contains('collapsed')) {
+                                       event.preventDefault();
+                                       
+                                       this._content.classList.remove('collapsed');
+                                       
+                                       UiScroll.element(this._container, (function() {
+                                               window.jQuery(this._textarea).redactor('WoltLabCaret.endOfEditor');
+                                       }).bind(this));
+                               }       
+                       }).bind(this));
+                       
                        // handle submit button
                        var submitButton = elBySel('button[data-type="save"]', this._container);
                        submitButton.addEventListener(WCF_CLICK_EVENT, this._submit.bind(this));
@@ -287,6 +299,10 @@ define(['Ajax', 'Core', 'EventHandler', 'Language', 'Dom/ChangeListener', 'Dom/U
                                this._reset();
                                
                                this._hideLoadingOverlay();
+                               
+                               window.setTimeout((function () {
+                                       UiScroll.element(this._container.nextElementSibling);
+                               }).bind(this), 100);
                        }
                },
                

diff --git a/wcfsetup/install/files/style/ui/comment.scss b/wcfsetup/install/files/style/ui/comment.scss
index 8583bd92ea39322d30192b6b9d1fec62427acf63..8be172dfcb3bcb8461423199465d731d04b3c8f4 100644 (file)
--- a/wcfsetup/install/files/style/ui/comment.scss
+++ b/wcfsetup/install/files/style/ui/comment.scss
@@ -7,6 +7,10 @@
                                opacity: 0;
                        }
                }
+               
+               &.jsCommentAdd {
+                       padding-right: 0;
+               }
        }
        
        .commentContent {
@@ -54,3 +58,58 @@
                margin-top: 2px;
        }
 }
+
+.commentListAddComment {
+       &.collapsed {
+               background-color: $wcfSidebarBackground;
+               cursor: pointer;
+               overflow: hidden;
+               padding: 10px 20px;
+               position: relative;
+               
+               &::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;
+               }
+               
+               &::after {
+                       color: $wcfSidebarText;
+                       content: attr(data-placeholder);
+                       position: relative;
+                       top: 2px;
+                       
+                       @include screen-sm-up {
+                               @include wcfFontSection;
+                       }
+               }
+               
+               > .commentListAddCommentEditorContainer {
+                       left: 200%;
+                       position: absolute;
+                       top: -100%;
+               }
+       }
+       
+       &.loading {
+               height: 150px;
+               position: relative;
+               
+               > .commentListAddCommentEditorContainer {
+                       display: none;
+               }
+               
+               > .commentLoadingOverlay {
+                       left: 50%;
+                       position: absolute;
+                       top: 50%;
+                       transform: translateX(-50%) translateY(-50%);
+               }
+       }
+}