comments: improved comments form layout.

- changed to be made to support comments types
- cleaner UI

rhodecode/public/css/code-block.less

@@ -911,7 +911,6 b' input.filediff-collapse-state {'
 
     .inline-comments {
         border-radius: @border-radius;
-        background: @grey6;
         .comment {
             margin: 0;
             border-radius: @border-radius;

rhodecode/public/css/comments.less

@@ -194,7 +194,6 b' form.comment-form {'
 .comment-inline-form .comment-block-ta,
 .comment-form .comment-block-ta,
 .comment-form .preview-box {
-    border: @border-thickness solid @grey5;
     .border-radius(@border-radius);
     .box-sizing(border-box);
     background-color: white;
@@ -259,6 +258,7 b' form.comment-form {'
 
     .comment-footer {
         margin-bottom: 110px;
+        margin-top: 10px;
     }
 }
 
@@ -276,11 +276,9 b' form.comment-form {'
 }
 
 .preview-box {
-    padding: 10px;
-    min-height: 100px;
+    min-height: 105px;
     margin-bottom: 15px;
     background-color: white;
-    border: @border-thickness solid #ccc;
     .border-radius(@border-radius);
     .box-sizing(border-box);
 }
@@ -299,7 +297,7 b' form.comment-form {'
 // Inline Comment Form
 .injected_diff .comment-inline-form,
 .comment-inline-form {
-    background-color: @grey6;
+    background-color: white;
     margin-top: 10px;
     margin-bottom: 20px;
 }
@@ -337,9 +335,73 b' form.comment-form {'
     margin: 0px;
 }
 
+.comment-inline-form .comment-footer {
+    margin: 10px 0px 0px 0px;
+}
+
 .hide-inline-form-button {
     margin-left: 5px;
 }
 .comment-button .hide-inline-form {
     background: white;
 }
+
+.comment-area {
+    padding: 8px 12px;
+    border: 1px solid @grey5;
+    .border-radius(@border-radius);
+}
+
+.comment-area-header .nav-links {
+    display: flex;
+    flex-flow: row wrap;
+    -webkit-flex-flow: row wrap;
+    width: 100%;
+}
+
+.comment-area-footer {
+    display: flex;
+}
+
+.comment-footer .toolbar {
+
+}
+
+.nav-links {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    height: auto;
+    border-bottom: 1px solid @grey5;
+}
+.nav-links li {
+    display: inline-block;
+}
+.nav-links li:before {
+    content: "";
+}
+.nav-links li a.disabled {
+    cursor: not-allowed;
+}
+
+.nav-links li.active a {
+    border-bottom: 2px solid @rcblue;
+    color: #000;
+    font-weight: 600;
+}
+.nav-links li a {
+    display: inline-block;
+    padding: 0px 10px 5px 10px;
+    margin-bottom: -1px;
+    font-size: 14px;
+    line-height: 28px;
+    color: #8f8f8f;
+    border-bottom: 2px solid transparent;
+}
+
+.toolbar-text {
+    float: left;
+    margin: -5px 0px 0px 0px;
+    font-size: 12px;
+}
+

rhodecode/public/js/src/rhodecode/comments.js

@@ -216,10 +216,10 b' var CommentForm = (function() {'
             content = content || '';
 
             $(this.editContainer).show();
-            $(this.editButton).hide();
+            $(this.editButton).parent().addClass('active');
 
             $(this.previewContainer).hide();
-            $(this.previewButton).show();
+            $(this.previewButton).parent().removeClass('active');
 
             this.setActionButtonsDisabled(true);
             self.cm.setValue(content);
@@ -292,9 +292,9 b' var CommentForm = (function() {'
             $(self.previewBoxSelector).html(o);
             $(self.previewBoxSelector).removeClass('unloaded');
 
-            // swap buttons
-            $(self.previewButton).hide();
-            $(self.editButton).show();
+            // swap buttons, making preview active
+            $(self.previewButton).parent().addClass('active');
+            $(self.editButton).parent().removeClass('active');
 
             // unlock buttons
             self.setActionButtonsDisabled(false);
@@ -344,9 +344,10 b' var CommentForm = (function() {'
         $(this.editButton).on('click', function(e) {
             e.preventDefault();
 
-            $(self.previewButton).show();
+            $(self.previewButton).parent().removeClass('active');
             $(self.previewContainer).hide();
-            $(self.editButton).hide();
+
+            $(self.editButton).parent().addClass('active');
             $(self.editContainer).show();
 
         });
@@ -370,6 +371,7 b' var CommentForm = (function() {'
 
             $(self.previewBoxSelector).addClass('unloaded');
             $(self.previewBoxSelector).html(_gettext('Loading ...'));
+
             $(self.editContainer).hide();
             $(self.previewContainer).show();
 
@@ -378,8 +380,11 b' var CommentForm = (function() {'
                 self.resetCommentFormState(text)
             };
             self.submitAjaxPOST(
-                self.previewUrl, postData, self.previewSuccessCallback, previewFailCallback);
+                self.previewUrl, postData, self.previewSuccessCallback,
+                previewFailCallback);
 
+            $(self.previewButton).parent().addClass('active');
+            $(self.editButton).parent().removeClass('active');
         });
 
         $(this.submitForm).submit(function(e) {
@@ -606,7 +611,9 b' var CommentsController = function() { /*'
           setTimeout(function() {
               // callbacks
               if (cm !== undefined) {
+                  cm.setOption('placeholder', _gettext('Leave a comment on line {0}.').format(lineno));
                   cm.focus();
+                  cm.refresh();
               }
           }, 10);
 

rhodecode/templates/changeset/changeset_file_comment.html

@@ -131,36 +131,50 b''
 </div>
 %endif
 <div class="comments">
-    %if c.rhodecode_user.username != h.DEFAULT_USER:
+    <%
+      if is_pull_request:
+        placeholder = _('Leave a comment on this Pull Request.')
+      elif is_compare:
+        placeholder = _('Leave a comment on all commits in this range.')
+      else:
+        placeholder = _('Leave a comment on this Commit.')
+    %>
+    % if c.rhodecode_user.username != h.DEFAULT_USER:
     <div class="comment-form ac">
         ${h.secure_form(post_url, id_=form_id)}
-        <div id="edit-container" class="clearfix">
-            <div class="comment-title pull-left">
-              %if is_pull_request:
-              ${(_('Create a comment on this Pull Request.'))}
-              %elif is_compare:
-              ${(_('Create comments on this Commit range.'))}
-              %else:
-              ${(_('Create a comment on this Commit.'))}
-              %endif
+        <div class="comment-area">
+            <div class="comment-area-header">
+                <ul class="nav-links clearfix">
+                    <li class="active">
+                        <a href="#edit-btn" tabindex="-1" id="edit-btn">${_('Write')}</a>
+                    </li>
+                    <li class="">
+                        <a href="#preview-btn" tabindex="-1" id="preview-btn">${_('Preview')}</a>
+                    </li>
+                </ul>
             </div>
-            <div class="comment-help pull-right">
-              ${(_('Comments parsed using %s syntax with %s support.') % (
-                     ('<a href="%s">%s</a>' % (h.url('%s_help' % c.visual.default_renderer), c.visual.default_renderer.upper())),
-                       ('<span  class="tooltip" title="%s">@mention</span>' % _('Use @username inside this text to send notification to this RhodeCode user'))
-                   )
-                )|n
-               }
+
+            <div class="comment-area-write" style="display: block;">
+                <div id="edit-container">
+                    <textarea id="text" name="text" class="comment-block-ta ac-input"></textarea>
+                </div>
+                <div id="preview-container" class="clearfix" style="display: none;">
+                    <div id="preview-box" class="preview-box"></div>
+                </div>
             </div>
-             <div style="clear: both"></div>
-             ${h.textarea('text', class_="comment-block-ta")}
-        </div>
 
-        <div id="preview-container" class="clearfix" style="display: none;">
-           <div class="comment-title">
-                ${_('Comment preview')}
+            <div class="comment-area-footer">
+                <div class="toolbar">
+                    <div class="toolbar-text">
+                      ${(_('Comments parsed using %s syntax with %s support.') % (
+                             ('<a href="%s">%s</a>' % (h.url('%s_help' % c.visual.default_renderer), c.visual.default_renderer.upper())),
+                               ('<span  class="tooltip" title="%s">@mention</span>' % _('Use @username inside this text to send notification to this RhodeCode user'))
+                           )
+                        )|n
+                       }
+                    </div>
+                </div>
             </div>
-            <div id="preview-box" class="preview-box"></div>
         </div>
 
         <div id="comment_form_extras">
@@ -185,15 +199,54 b''
           </div>
           %endif
           <div class="action-buttons">
-              <button id="preview-btn" class="btn btn-secondary">${_('Preview')}</button>
-              <button id="edit-btn" class="btn btn-secondary" style="display:none;">${_('Edit')}</button>
               <div class="comment-button">${h.submit('save', _('Comment'), class_="btn btn-success comment-button-input")}</div>
           </div>
         </div>
           ${h.end_form()}
     </div>
-    %endif
+    % else:
+    <div class="comment-form ac">
+
+        <div class="comment-area">
+            <div class="comment-area-header">
+                <ul class="nav-links clearfix">
+                    <li class="active">
+                        <a class="disabled" href="#edit-btn" disabled="disabled" onclick="return false">${_('Write')}</a>
+                    </li>
+                    <li class="">
+                        <a class="disabled" href="#preview-btn" disabled="disabled" onclick="return false">${_('Preview')}</a>
+                    </li>
+                </ul>
+            </div>
+
+            <div class="comment-area-write" style="display: block;">
+                <div id="edit-container">
+                    <div style="padding: 40px 0">
+                      ${_('You need to be logged in to leave comments.')}
+                      <a href="${h.route_path('login', _query={'came_from': h.url.current()})}">${_('Login now')}</a>
+                    </div>
+                </div>
+                <div id="preview-container" class="clearfix" style="display: none;">
+                    <div id="preview-box" class="preview-box"></div>
+                </div>
+            </div>
+
+            <div class="comment-area-footer">
+                <div class="toolbar">
+                    <div class="toolbar-text">
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="comment-footer">
+        </div>
+
+    </div>
+    % endif
+
 </div>
+
 <script>
     // init active elements of commentForm
     var commitId = templateContext.commit_data.commit_id;
@@ -203,6 +256,8 b''
     var mainCommentForm = new CommentForm(
             "#${form_id}", commitId, pullRequestId, lineNo, true);
 
+    mainCommentForm.cm.setOption('placeholder', "${placeholder}");
+
     mainCommentForm.initStatusChangeSelector();
     bindToggleButtons();
 </script>

rhodecode/templates/changeset/changeset_range.html

@@ -89,7 +89,7 b''
 
     </div> <!-- end summary -->
 
-  <div id="changeset_compare_view_content">
+    <div id="changeset_compare_view_content">
     <div class="pull-left">
       <div class="btn-group">
           <a

rhodecode/templates/codeblocks/diffs.html

@@ -52,41 +52,52 b" return h.url('', **new_args)"
 </div>
 <div class="js-template" id="cb-comment-inline-form-template">
     <div class="comment-inline-form ac">
+
     %if c.rhodecode_user.username != h.DEFAULT_USER:
         ${h.form('#', method='get')}
-        <div id="edit-container_{1}" class="clearfix">
-          <div class="comment-title pull-left">
-            ${_('Create a comment on line {1}.')}
-          </div>
-          <div class="comment-help pull-right">
-            ${(_('Comments parsed using %s syntax with %s support.') % (
-                   ('<a href="%s">%s</a>' % (h.url('%s_help' % c.visual.default_renderer), c.visual.default_renderer.upper())),
-                     ('<span  class="tooltip" title="%s">@mention</span>' % _('Use @username inside this text to send notification to this RhodeCode user'))
-                 )
-              )|n
-             }
-          </div>
-              <div style="clear: both"></div>
-              <textarea id="text_{1}" name="text" class="comment-block-ta ac-input"></textarea>
+        <div class="comment-area">
+            <div class="comment-area-header">
+                <ul class="nav-links clearfix">
+                    <li class="active">
+                        <a href="#edit-btn" tabindex="-1" id="edit-btn_{1}">${_('Write')}</a>
+                    </li>
+                    <li class="">
+                        <a href="#preview-btn" tabindex="-1" id="preview-btn_{1}">${_('Preview')}</a>
+                    </li>
+                </ul>
+            </div>
+
+            <div class="comment-area-write" style="display: block;">
+                <div id="edit-container_{1}">
+                    <textarea id="text_{1}" name="text" class="comment-block-ta ac-input"></textarea>
+                </div>
+                <div id="preview-container_{1}" class="clearfix" style="display: none;">
+                    <div id="preview-box_{1}" class="preview-box"></div>
+                </div>
+            </div>
+
+            <div class="comment-area-footer">
+                <div class="toolbar">
+                    <div class="toolbar-text">
+                      ${(_('Comments parsed using %s syntax with %s support.') % (
+                             ('<a href="%s">%s</a>' % (h.url('%s_help' % c.visual.default_renderer), c.visual.default_renderer.upper())),
+                               ('<span  class="tooltip" title="%s">@mention</span>' % _('Use @username inside this text to send notification to this RhodeCode user'))
+                           )
+                        )|n
+                       }
+                    </div>
+                </div>
+            </div>
         </div>
-        <div id="preview-container_{1}" class="clearfix" style="display: none;">
-           <div class="comment-help">
-                ${_('Comment preview')}
-            </div>
-            <div id="preview-box_{1}" class="preview-box"></div>
-        </div>
+
         <div class="comment-footer">
           <div class="action-buttons">
             <input type="hidden" name="f_path" value="{0}">
             <input type="hidden" name="line" value="{1}">
-            <button id="preview-btn_{1}" class="btn btn-secondary">${_('Preview')}</button>
-            <button id="edit-btn_{1}" class="btn btn-secondary" style="display: none;">${_('Edit')}</button>
-            ${h.submit('save', _('Comment'), class_='btn btn-success save-inline-form')}
-          </div>
-          <div class="comment-button">
-           <button type="button" class="cb-comment-cancel" onclick="return Rhodecode.comments.cancelComment(this);">
-            ${_('Cancel')}
-           </button>
+               <button type="button" class="cb-comment-cancel" onclick="return Rhodecode.comments.cancelComment(this);">
+                ${_('Cancel')}
+               </button>
+               ${h.submit('save', _('Comment'), class_='btn btn-success save-inline-form')}
           </div>
         ${h.end_form()}
       </div>
@@ -94,7 +105,7 b" return h.url('', **new_args)"
         ${h.form('', class_='inline-form comment-form-login', method='get')}
         <div class="pull-left">
             <div class="comment-help pull-right">
-              ${_('You need to be logged in to comment.')} <a href="${h.route_path('login', _query={'came_from': h.url.current()})}">${_('Login now')}</a>
+              ${_('You need to be logged in to leave comments.')} <a href="${h.route_path('login', _query={'came_from': h.url.current()})}">${_('Login now')}</a>
             </div>
         </div>
         <div class="comment-button pull-right">
@@ -120,6 +131,7 b' collapse_all = len(diffset.files) > coll'
 }
 </style>
 %endif
+
 %if ruler_at_chars:
 <style>
 .diff table.cb .cb-content:after {
@@ -134,6 +146,7 b' collapse_all = len(diffset.files) > coll'
     left: ${ruler_at_chars + 5}ch;
 </style>
 %endif
+
 <div class="diffset ${disable_new_comments and 'diffset-comments-disabled'}">
     <div class="diffset-heading ${diffset.limited_diff and 'diffset-heading-warning' or ''}">
         %if commit:

rhodecode/templates/compare/compare_diff.html

@@ -26,10 +26,10 b''
 </%def>
 
 <%def name="main()">
-<script type="text/javascript">
-    // set fake commitId on this commit-range page
-    templateContext.commit_data.commit_id = "${h.EmptyCommit().raw_id}";
-</script>
+    <script type="text/javascript">
+        // set fake commitId on this commit-range page
+        templateContext.commit_data.commit_id = "${h.EmptyCommit().raw_id}";
+    </script>
 
     <div class="box">
         <div class="title">
@@ -153,16 +153,78 b''
               </div>
               </%doc>
 
+              ## commit status form
+              <div class="fieldset" id="compare_changeset_status" style="display: none; margin-bottom: -80px;">
+                <div class="left-label">
+                  ${_('Commit status')}:
+                </div>
+                <div class="right-content">
+                    <%namespace name="comment" file="/changeset/changeset_file_comment.html"/>
+                    ## main comment form and it status
+                    <%
+                    def revs(_revs):
+                        form_inputs = []
+                        for cs in _revs:
+                            tmpl = '<input type="hidden" data-commit-id="%(cid)s" name="commit_ids" value="%(cid)s">' % {'cid': cs.raw_id}
+                            form_inputs.append(tmpl)
+                        return form_inputs
+                    %>
+                    <div>
+                        ${comment.comments(h.url('changeset_comment', repo_name=c.repo_name, revision='0'*16), None, is_compare=True, form_extras=revs(c.commit_ranges))}
+                        <script type="text/javascript">
+
+                            mainCommentForm.setHandleFormSubmit(function(o) {
+                                var text = mainCommentForm.cm.getValue();
+                                var status = mainCommentForm.getCommentStatus();
+
+                                if (text === "" && !status) {
+                                    return;
+                                }
+
+                                // we can pick which commits we want to make the comment by
+                                // selecting them via click on preview pane, this will alter the hidden inputs
+                                var cherryPicked = $('#changeset_compare_view_content .compare_select.hl').length > 0;
+
+                                var commitIds = [];
+                                $('#changeset_compare_view_content .compare_select').each(function(el) {
+                                    var commitId = this.id.replace('row-', '');
+                                    if ($(this).hasClass('hl') || !cherryPicked) {
+                                        $("input[data-commit-id='{0}']".format(commitId)).val(commitId)
+                                        commitIds.push(commitId);
+                                    } else {
+                                        $("input[data-commit-id='{0}']".format(commitId)).val('')
+                                    }
+                                });
+
+                                mainCommentForm.setActionButtonsDisabled(true);
+                                mainCommentForm.cm.setOption("readOnly", true);
+                                var postData = {
+                                    'text': text,
+                                    'changeset_status': status,
+                                    'commit_ids': commitIds,
+                                    'csrf_token': CSRF_TOKEN
+                                };
+
+                                var submitSuccessCallback = function(o) {
+                                    location.reload(true);
+                                };
+                                var submitFailCallback = function(){
+                                    mainCommentForm.resetCommentFormState(text)
+                                };
+                                mainCommentForm.submitAjaxPOST(
+                                    mainCommentForm.submitUrl, postData, submitSuccessCallback, submitFailCallback);
+                            });
+                        </script>
+                    </div>
+                </div>
+              </div>
+
             </div> <!-- end summary-detail -->
-
         </div> <!-- end summary -->
 
-
-        <div class="table">
-
-            ## use JS script to load it quickly before potentially large diffs render long time
-            ## this prevents from situation when large diffs block rendering of select2 fields
-            <script type="text/javascript">
+        ## use JS script to load it quickly before potentially large diffs render long time
+        ## this prevents from situation when large diffs block rendering of select2 fields
+        <script type="text/javascript">
 
                 var cache = {};
 
@@ -277,69 +339,13 b''
                     $('#compare_changeset_status').toggle();
                 });
 
-            </script>
-
-            ## changeset status form
-            <%namespace name="comment" file="/changeset/changeset_file_comment.html"/>
-            ## main comment form and it status
-            <%
-            def revs(_revs):
-                form_inputs = []
-                for cs in _revs:
-                    tmpl = '<input type="hidden" data-commit-id="%(cid)s" name="commit_ids" value="%(cid)s">' % {'cid': cs.raw_id}
-                    form_inputs.append(tmpl)
-                return form_inputs
-            %>
-            <div id="compare_changeset_status" style="display: none;">
-                ${comment.comments(h.url('changeset_comment', repo_name=c.repo_name, revision='0'*16), None, is_compare=True, form_extras=revs(c.commit_ranges))}
-                <script type="text/javascript">
-
-                    mainCommentForm.setHandleFormSubmit(function(o) {
-                        var text = mainCommentForm.cm.getValue();
-                        var status = mainCommentForm.getCommentStatus();
-
-                        if (text === "" && !status) {
-                            return;
-                        }
-
-                        // we can pick which commits we want to make the comment by
-                        // selecting them via click on preview pane, this will alter the hidden inputs
-                        var cherryPicked = $('#changeset_compare_view_content .compare_select.hl').length > 0;
+        </script>
 
-                        var commitIds = [];
-                        $('#changeset_compare_view_content .compare_select').each(function(el) {
-                            var commitId = this.id.replace('row-', '');
-                            if ($(this).hasClass('hl') || !cherryPicked) {
-                                $("input[data-commit-id='{0}']".format(commitId)).val(commitId)
-                                commitIds.push(commitId);
-                            } else {
-                                $("input[data-commit-id='{0}']".format(commitId)).val('')
-                            }
-                        });
+        ## table diff data
+        <div class="table">
 
-                        mainCommentForm.setActionButtonsDisabled(true);
-                        mainCommentForm.cm.setOption("readOnly", true);
-                        var postData = {
-                            'text': text,
-                            'changeset_status': status,
-                            'commit_ids': commitIds,
-                            'csrf_token': CSRF_TOKEN
-                        };
 
-                        var submitSuccessCallback = function(o) {
-                            location.reload(true);
-                        };
-                        var submitFailCallback = function(){
-                            mainCommentForm.resetCommentFormState(text)
-                        };
-                        mainCommentForm.submitAjaxPOST(
-                            mainCommentForm.submitUrl, postData, submitSuccessCallback, submitFailCallback);
-                    });
-                </script>
-
-            </div>
-
-            %if not c.compare_home:
+            % if not c.compare_home:
                 <div id="changeset_compare_view_content">
                     <div class="pull-left">
                       <div class="btn-group">
@@ -363,8 +369,9 b''
                     ${cbdiffs.render_diffset_menu()}
                     ${cbdiffs.render_diffset(c.diffset)}
                  </div>
-            %endif
+            % endif
+
         </div>
     </div>
-</div>
-</%def>
+
+</%def>
  No newline at end of file