# HG changeset patch # User Marcin Kuzminski # Date 2017-01-04 13:58:06 # Node ID 71c01ca9fec2c50d1674d0e4d6e7617a7f47d762 # Parent 5cbbededc4e2833f9c611825a5127a5659e3cefd comments: improved comments form layout. - changed to be made to support comments types - cleaner UI diff --git a/rhodecode/public/css/code-block.less b/rhodecode/public/css/code-block.less --- a/rhodecode/public/css/code-block.less +++ b/rhodecode/public/css/code-block.less @@ -911,7 +911,6 @@ input.filediff-collapse-state { .inline-comments { border-radius: @border-radius; - background: @grey6; .comment { margin: 0; border-radius: @border-radius; diff --git a/rhodecode/public/css/comments.less b/rhodecode/public/css/comments.less --- a/rhodecode/public/css/comments.less +++ b/rhodecode/public/css/comments.less @@ -194,7 +194,6 @@ 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 @@ form.comment-form { .comment-footer { margin-bottom: 110px; + margin-top: 10px; } } @@ -276,11 +276,9 @@ 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 @@ 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 @@ 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; +} + diff --git a/rhodecode/public/js/src/rhodecode/comments.js b/rhodecode/public/js/src/rhodecode/comments.js --- a/rhodecode/public/js/src/rhodecode/comments.js +++ b/rhodecode/public/js/src/rhodecode/comments.js @@ -216,10 +216,10 @@ 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 @@ 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 @@ 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 @@ var CommentForm = (function() { $(self.previewBoxSelector).addClass('unloaded'); $(self.previewBoxSelector).html(_gettext('Loading ...')); + $(self.editContainer).hide(); $(self.previewContainer).show(); @@ -378,8 +380,11 @@ 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 @@ 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); diff --git a/rhodecode/templates/changeset/changeset_file_comment.html b/rhodecode/templates/changeset/changeset_file_comment.html --- a/rhodecode/templates/changeset/changeset_file_comment.html +++ b/rhodecode/templates/changeset/changeset_file_comment.html @@ -131,36 +131,50 @@ %endif
- %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:
${h.secure_form(post_url, id_=form_id)} -
-
- %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 +
+
+
-
- ${(_('Comments parsed using %s syntax with %s support.') % ( - ('%s' % (h.url('%s_help' % c.visual.default_renderer), c.visual.default_renderer.upper())), - ('@mention' % _('Use @username inside this text to send notification to this RhodeCode user')) - ) - )|n - } + +
+
+ +
+
-
- ${h.textarea('text', class_="comment-block-ta")} -
- ${h.end_form()}
- %endif + % else: +
+ +
+
+ +
+ +
+
+
+ ${_('You need to be logged in to leave comments.')} + ${_('Login now')} +
+
+ +
+ +
+
+
+
+
+
+
+ +
+
+ +
+ % endif +
+ diff --git a/rhodecode/templates/changeset/changeset_range.html b/rhodecode/templates/changeset/changeset_range.html --- a/rhodecode/templates/changeset/changeset_range.html +++ b/rhodecode/templates/changeset/changeset_range.html @@ -89,7 +89,7 @@
-
+
+ %if c.rhodecode_user.username != h.DEFAULT_USER: ${h.form('#', method='get')} -
-
- ${_('Create a comment on line {1}.')} -
-
- ${(_('Comments parsed using %s syntax with %s support.') % ( - ('%s' % (h.url('%s_help' % c.visual.default_renderer), c.visual.default_renderer.upper())), - ('@mention' % _('Use @username inside this text to send notification to this RhodeCode user')) - ) - )|n - } -
-
- +
+
+ +
+ +
+
+ +
+ +
+ +
+
+
+ ${(_('Comments parsed using %s syntax with %s support.') % ( + ('%s' % (h.url('%s_help' % c.visual.default_renderer), c.visual.default_renderer.upper())), + ('@mention' % _('Use @username inside this text to send notification to this RhodeCode user')) + ) + )|n + } +
+
+
- +
- - - ${h.submit('save', _('Comment'), class_='btn btn-success save-inline-form')} -
-
- + + ${h.submit('save', _('Comment'), class_='btn btn-success save-inline-form')}
${h.end_form()}
@@ -94,7 +105,7 @@ return h.url('', **new_args) ${h.form('', class_='inline-form comment-form-login', method='get')}
- ${_('You need to be logged in to comment.')} ${_('Login now')} + ${_('You need to be logged in to leave comments.')} ${_('Login now')}
@@ -120,6 +131,7 @@ collapse_all = len(diffset.files) > coll } %endif + %if ruler_at_chars: %endif +
%if commit: diff --git a/rhodecode/templates/compare/compare_diff.html b/rhodecode/templates/compare/compare_diff.html --- a/rhodecode/templates/compare/compare_diff.html +++ b/rhodecode/templates/compare/compare_diff.html @@ -26,10 +26,10 @@ <%def name="main()"> - +
@@ -153,16 +153,78 @@
+ ## commit status form + +
-
- -
- - ## 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 - - - ## 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 = '' % {'cid': cs.raw_id} - form_inputs.append(tmpl) - return form_inputs - %> - - + + \ No newline at end of file