kallithea Changeset - 45df84d36b44

Changeset - 45df84d36b44

Parent rev.

Child rev.

[Not reviewed]

beta

0 6 0

Marcin Kuzminski - 13 years ago 2013-04-06 02:49:42
marcin@python-works.com

Implemented preview for comments

6 files changed with 136 insertions and 25 deletions:

rhodecode/config/routing.py

rhodecode/controllers/changeset.py

rhodecode/public/css/style.css

rhodecode/public/js/rhodecode.js

rhodecode/templates/base/root.html

rhodecode/templates/changeset/changeset_file_comment.html

0 comments (0 inline, 0 general)

rhodecode/config/routing.py

➞

Show inline comments

@@ @@ -497,12 +497,17 @@ def make_map(config): @@
     rmap.connect('changeset_comment',
                  '/{repo_name:.*?}/changeset/{revision}/comment',
                 controller='changeset', revision='tip', action='comment',
                 conditions=dict(function=check_repo))
     rmap.connect('changeset_comment_preview',
                  '/{repo_name:.*?}/changeset/comment/preview',
                 controller='changeset', action='preview_comment',
                 conditions=dict(function=check_repo, method=["POST"]))
     rmap.connect('changeset_comment_delete',
                  '/{repo_name:.*?}/changeset/comment/{comment_id}/delete',
                 controller='changeset', action='delete_comment',
                 conditions=dict(function=check_repo, method=["DELETE"]))
     rmap.connect('changeset_info', '/changeset_info/{repo_name:.*?}/{revision}',

rhodecode/controllers/changeset.py

➞

Show inline comments

@@ @@ -34,13 +34,14 @@ from pylons.controllers.util import redi @@
 from rhodecode.lib.utils import jsonify
 from rhodecode.lib.vcs.exceptions import RepositoryError, \
     ChangesetDoesNotExistError
 import rhodecode.lib.helpers as h
 from rhodecode.lib.auth import LoginRequired, HasRepoPermissionAnyDecorator
 from rhodecode.lib.auth import LoginRequired, HasRepoPermissionAnyDecorator,\
     NotAnonymous
 from rhodecode.lib.base import BaseRepoController, render
 from rhodecode.lib.utils import action_logger
 from rhodecode.lib.compat import OrderedDict
 from rhodecode.lib import diffs
 from rhodecode.model.db import ChangesetComment, ChangesetStatus
 from rhodecode.model.comment import ChangesetCommentsModel
@@ @@ -317,12 +318,13 @@ class ChangesetController(BaseRepoContro @@
     def changeset_patch(self, revision):
         return self.index(revision, method='patch')
     def changeset_download(self, revision):
         return self.index(revision, method='download')
     @NotAnonymous()
     @jsonify
     def comment(self, repo_name, revision):
         status = request.POST.get('changeset_status')
         change_status = request.POST.get('change_changeset_status')
         text = request.POST.get('text')
         if status and change_status:
@@ @@ -379,12 +381,22 @@ class ChangesetController(BaseRepoContro @@
             data.update(comm.get_dict())
             data.update({'rendered_text':
                          render('changeset/changeset_comment_block.html')})
         return data
     @NotAnonymous()
     def preview_comment(self):
         if not request.environ.get('HTTP_X_PARTIAL_XHR'):
             raise HTTPBadRequest()
         text = request.POST.get('text')
         if text:
             return h.rst_w_mentions(text)
         return ''
     @NotAnonymous()
     @jsonify
     def delete_comment(self, repo_name, comment_id):
         co = ChangesetComment.get(comment_id)
         owner = co.author.user_id == c.rhodecode_user.user_id
         if h.HasPermissionAny('hg.admin', 'repository.admin')() or owner:
             ChangesetCommentsModel().delete(comment=co)

rhodecode/public/css/style.css

➞

Show inline comments

@@ @@ -215,12 +215,14 @@ div.options a { @@
 .empty_data {
     color: #B9B9B9;
+}
 a.permalink {
     visibility: hidden;
     position: absolute;
     margin: 3px 4px;
+}
 a.permalink:hover {
     text-decoration: none;
+}
@@ @@ -4294,18 +4296,12 @@ div.rst-block pre { @@
 .status-block {
     min-height: 80px;
     clear: both
+}
 .comment-form .clearfix {
     background: #EEE;
     -webkit-border-radius: 4px;
     border-radius: 4px;
     padding: 10px;
+}
 div.comment-form {
     margin-top: 20px;
+}
 .comment-form strong {
@@ @@ -4321,12 +4317,19 @@ div.comment-form { @@
 form.comment-form {
     margin-top: 10px;
     margin-left: 10px;
+}
 .comment-inline-form .comment-block-ta,
 .comment-form .comment-block-ta {
     border: 1px solid #ccc;
     border-radius: 3px;
     box-sizing: border-box;
+}
 .comment-form-submit {
     margin-top: 5px;
     margin-left: 525px;
+}
 .file-comments {
@@ @@ -4335,15 +4338,28 @@ form.comment-form { @@
 .comment-form .comment {
     margin-left: 10px;
+}
 .comment-form .comment-help {
-    padding: 0px 0px 5px 0px;
+    padding: 5px 5px 5px 5px;
     color: #666;
+}
 .comment-form .comment-help .preview-btn,
 .comment-form .comment-help .edit-btn {
     float: right;
     margin: -6px 0px 0px 0px;
+}
 .comment-form .preview-box.unloaded,
 .comment-inline-form .preview-box.unloaded {
     height: 50px;
     text-align: center;
     padding: 20px;
     background-color: #fafafa;
+}
 .comment-form .comment-button {
     padding-top: 5px;
+}
 .add-another-button {
@@ @@ -4351,22 +4367,25 @@ form.comment-form { @@
     margin-top: 10px;
     margin-bottom: 10px;
+}
 .comment .buttons {
     float: right;
-    padding: 2px 2px 0px 0px;
+    margin: -1px 0px 0px 0px;
+}
 .show-inline-comments {
     position: relative;
     top: 1px
+}
 /** comment inline form **/
 .comment-inline-form {
     margin: 4px;
+}
 .comment-inline-form .overlay {
     display: none;
+}
 .comment-inline-form .overlay.submitting {
     display: block;
     background: none repeat scroll 0 0 white;
@@ @@ -4379,17 +4398,19 @@ form.comment-form { @@
+}
 .comment-inline-form .overlay.submitting .overlay-text {
     width: 100%;
     margin-top: 5%;
+}
 .comment-inline-form .clearfix {
 .comment-inline-form .clearfix,
 .comment-form .clearfix {
     background: #EEE;
     -webkit-border-radius: 4px;
     border-radius: 4px;
     padding: 5px;
     margin: 0px;
+}
 div.comment-inline-form {
     padding: 4px 0px 6px 0px;
+}
@@ @@ -4420,15 +4441,20 @@ form.comment-inline-form { @@
 .comment-inline-form .comment {
     margin-left: 10px;
+}
 .comment-inline-form .comment-help {
     padding: 0px 0px 2px 0px;
     color: #666666;
     font-size: 10px;
     padding: 5px 5px 5px 5px;
     color: #666;
+}
 .comment-inline-form .comment-help .preview-btn,
 .comment-inline-form .comment-help .edit-btn {
     float: right;
     margin: -6px 0px 0px 0px;
+}
 .comment-inline-form .comment-button {
     padding-top: 5px;
+}

rhodecode/public/js/rhodecode.js

➞

Show inline comments

@@ @@ -862,12 +862,35 @@ var injectInlineForm = function(tr){ @@
 			  YUD.setStyle(overlay,'height',h+'px');
+		  }
 		  YUD.addClass(overlay, 'submitting');
 		  ajaxPOST(submit_url, postData, success);
 	  });
 	  YUE.on('preview-btn_'+lineno, 'click', function(e){
 	       var _text = YUD.get('text_'+lineno).value;
 	       if(!_text){
 	           return
+	       }
 	       var post_data = {'text': _text};
 	       YUD.addClass('preview-box_'+lineno, 'unloaded');
 	       YUD.get('preview-box_'+lineno).innerHTML = _TM['Loading ...'];
 	       YUD.setStyle('edit-container_'+lineno, 'display', 'none');
 	       YUD.setStyle('preview-container_'+lineno, 'display', '');
 	       var url = pyroutes.url('changeset_comment_preview', {'repo_name': REPO_NAME});
 	       ajaxPOST(url,post_data,function(o){
 	           YUD.get('preview-box_'+lineno).innerHTML = o.responseText;
 	           YUD.removeClass('preview-box_'+lineno, 'unloaded');
 	       })
 	   })
 	   YUE.on('edit-btn_'+lineno, 'click', function(e){
 	       YUD.setStyle('edit-container_'+lineno, 'display', '');
 	       YUD.setStyle('preview-container_'+lineno, 'display', 'none');
 	   })
 	  setTimeout(function(){
 		  // callbacks
 		  tooltip_activate();
 		  MentionsAutoComplete('text_'+lineno, 'mentions_container_'+lineno,
 	                         _USERS_AC_DATA, _GROUPS_AC_DATA);
@@ @@ -883,14 +906,17 @@ var deleteComment = function(comment_id) @@
     var postData = {'_method':'delete'};
     var success = function(o){
         var n = YUD.get('comment-tr-'+comment_id);
         var root = prevElementSibling(prevElementSibling(n));
         n.parentNode.removeChild(n);
         // scann nodes, and attach add button to last one
         placeAddButton(root);
         // scann nodes, and attach add button to last one only for TR
         // which are the inline comments
         if(root && root.tagName == 'TR'){
         	placeAddButton(root);
+        }
+    }
     ajaxPOST(url,postData,success);
+}
 var createInlineAddButton = function(tr){

rhodecode/templates/base/root.html

➞

Show inline comments

@@ @@ -57,12 +57,16 @@ @@
                 'Expand diff': "${_('Expand diff')}"
             };
             var _TM = TRANSLATION_MAP;
             var TOGGLE_FOLLOW_URL  = "${h.url('toggle_following')}";
             var REPO_NAME = "";
             %if hasattr(c, 'repo_name'):
                 var REPO_NAME = "${c.repo_name}";
             %endif
             </script>
             <script type="text/javascript" src="${h.url('/js/yui.2.9.js', ver=c.rhodecode_version)}"></script>
             <!--[if lt IE 9]>
                <script language="javascript" type="text/javascript" src="${h.url('/js/excanvas.min.js')}"></script>
             <![endif]-->
             <script type="text/javascript" src="${h.url('/js/yui.flot.js', ver=c.rhodecode_version)}"></script>
@@ @@ -87,12 +91,13 @@ @@
               show_more_event();
               show_changeset_tooltip();
               // routes registration
               pyroutes.register('toggle_following', "${h.url('toggle_following')}");
               pyroutes.register('changeset_info', "${h.url('changeset_info', repo_name='%(repo_name)s', revision='%(revision)s')}", ['repo_name', 'revision']);
               pyroutes.register('repo_size', "${h.url('repo_size', repo_name='%(repo_name)s')}", ['repo_name']);
               pyroutes.register('changeset_comment_preview', "${h.url('changeset_comment_preview', repo_name='%(repo_name)s')}", ['repo_name']);
            })
             </script>
         </%def>
         <%def name="js_extra()"></%def>
         ${self.js()}
         <%def name="head_extra()"></%def>

rhodecode/templates/changeset/changeset_file_comment.html

➞

Show inline comments

@@ @@ -9,40 +9,38 @@ @@
       <div class="meta">
         <div style="float:left"> <img src="${h.gravatar_url(co.author.email, 20)}" /> </div>
           <div class="user">
               ${co.author.username}
           </div>
           <div class="date">
-              ${h.age(co.modified_at)} <a class="permalink" href="#comment-${co.comment_id}">&para;</a>
               ${h.age(co.modified_at)}
           </div>
         %if co.status_change:
            <div  style="float:left" class="changeset-status-container">
              <div style="float:left;padding:0px 2px 0px 2px"><span style="font-size: 18px;">&rsaquo;</span></div>
              <div title="${_('Changeset status')}" class="changeset-status-lbl"> ${co.status_change[0].status_lbl}</div>
              <div class="changeset-status-ico"><img src="${h.url(str('/images/icons/flag_status_%s.png' % co.status_change[0].status))}" /></div>
            </div>
         %endif
-       <div style="float:left;padding:3px 0px 0px 5px">
+       <div style="float:left;padding:4px 0px 0px 5px">
         <span class="">
          %if co.pull_request:
             <a href="${h.url('pullrequest_show',repo_name=co.pull_request.other_repo.repo_name,pull_request_id=co.pull_request.pull_request_id)}">
             %if co.status_change:
               ${_('Status change on pull request #%s') % co.pull_request.pull_request_id}
             %else:
               ${_('Comment on pull request #%s') % co.pull_request.pull_request_id}
             %endif
             </a>
          %endif
         </span>
        </div>
+      <a class="permalink" href="#comment-${co.comment_id}">&para;</a>
       %if h.HasPermissionAny('hg.admin', 'repository.admin')() or co.author.user_id == c.rhodecode_user.user_id:
         <div class="buttons">
           <span onClick="deleteComment(${co.comment_id})" class="delete-comment ui-btn">${_('Delete')}</span>
         </div>
           <div onClick="deleteComment(${co.comment_id})" class="buttons delete-comment ui-btn small">${_('Delete')}</div>
       %endif
       </div>
       <div class="text">
           ${h.rst_w_mentions(co.text)|n}
       </div>
     </div>
@@ @@ -53,23 +51,31 @@ @@
 <%def name="comment_inline_form()">
 <div id='comment-inline-form-template' style="display:none">
   <div class="comment-inline-form ac">
   %if c.rhodecode_user.username != 'default':
     <div class="overlay"><div class="overlay-text">${_('Submitting...')}</div></div>
       ${h.form('#', class_='inline-form')}
       <div class="clearfix">
+      <div id="edit-container_{1}" class="clearfix">
           <div class="comment-help">${_('Commenting on line {1}.')}
           ${(_('Comments parsed using %s syntax with %s support.') % (
                  ('<a href="%s">RST</a>' % h.url('rst_help')),
                    ('<span style="color:#003367" class="tooltip" title="%s">@mention</span>' % _('Use @username inside this text to send notification to this RhodeCode user'))
+               )
             )|n
+           }
           <div id="preview-btn_{1}" class="preview-btn ui-btn small">${_('preview')}</div>
           </div>
             <div class="mentions-container" id="mentions_container_{1}"></div>
             <textarea id="text_{1}" name="text" class="yui-ac-input"></textarea>
             <textarea id="text_{1}" name="text" class="comment-block-ta yui-ac-input"></textarea>
       </div>
       <div id="preview-container_{1}" class="clearfix" style="display:none">
          <div class="comment-help">
               ${_('Comment Preview')}
             <div id="edit-btn_{1}" class="edit-btn ui-btn small">${_('edit')}</div>
           </div>
           <div id="preview-box_{1}" class="preview-box"></div>
       </div>
       <div class="comment-button">
       <input type="hidden" name="f_path" value="{0}">
       <input type="hidden" name="line" value="{1}">
       ${h.submit('save', _('Comment'), class_='ui-btn save-inline-form')}
       ${h.reset('hide-inline-form', _('Cancel'), class_='ui-btn hide-inline-form')}
@@ @@ -131,35 +137,45 @@ @@
 <%def name="comments(post_url, cur_status, close_btn=False, change_status=True)">
 <div class="comments">
     %if c.rhodecode_user.username != 'default':
     <div class="comment-form ac">
         ${h.form(post_url)}
         <div class="clearfix">
+        <div id="edit-container" class="clearfix">
             <div class="comment-help">
                 ${(_('Comments parsed using %s syntax with %s support.') % (('<a href="%s">RST</a>' % h.url('rst_help')),
                   '<span style="color:#003367" class="tooltip" title="%s">@mention</span>' %
                   _('Use @username inside this text to send notification to this RhodeCode user')))|n}
               %if change_status:
                 | <a id="show_changeset_link" onClick="change_status_show();"> ${_('Change status')}</a>
                   <input id="show_changeset_status_box" type="checkbox" name="change_changeset_status" style="display: none;" />
               %endif
               <div id="preview-btn" class="preview-btn ui-btn small">${_('preview')}</div>
             </div>
             %if change_status:
             <div id="status_block_container" class="status-block" style="display:none">
                 %for status,lbl in c.changeset_statuses:
                     <div class="">
                         <img src="${h.url('/images/icons/flag_status_%s.png' % status)}" /> <input ${'checked="checked"' if status == cur_status else ''}" type="radio" class="status_change_radio" name="changeset_status" id="${status}" value="${status}">
                         <label for="${status}">${lbl}</label>
                     </div>
                 %endfor
             </div>
             %endif
             <div class="mentions-container" id="mentions_container"></div>
              ${h.textarea('text')}
+             ${h.textarea('text', class_="comment-block-ta")}
         </div>
         <div id="preview-container" class="clearfix" style="display:none">
            <div class="comment-help">
                 ${_('Comment Preview')}
               <div id="edit-btn" class="edit-btn ui-btn small">${_('edit')}</div>
             </div>
             <div id="preview-box" class="preview-box"></div>
         </div>
         <div class="comment-button">
         ${h.submit('save', _('Comment'), class_="ui-btn large")}
         %if close_btn and change_status:
            ${h.submit('save_close', _('Comment and close'), class_='ui-btn blue large %s' % ('hidden' if cur_status in ['not_reviewed','under_review'] else ''))}
         %endif
         </div>
@@ @@ -182,10 +198,31 @@ YUE.onDOMReady(function () { @@
        if (val == 'approved' || val == 'rejected') {
            YUD.removeClass('save_close', 'hidden');
        }else{
            YUD.addClass('save_close', 'hidden');
+       }
    })
    YUE.on('preview-btn', 'click', function(e){
        var _text = YUD.get('text').value;
        if(!_text){
            return
+       }
        var post_data = {'text': _text};
        YUD.addClass('preview-box', 'unloaded');
        YUD.get('preview-box').innerHTML = _TM['Loading ...'];
        YUD.setStyle('edit-container', 'display', 'none');
        YUD.setStyle('preview-container', 'display', '');
        var url = pyroutes.url('changeset_comment_preview', {'repo_name': '${c.repo_name}'});
        ajaxPOST(url,post_data,function(o){
            YUD.get('preview-box').innerHTML = o.responseText;
            YUD.removeClass('preview-box', 'unloaded');
        })
    })
    YUE.on('edit-btn', 'click', function(e){
        YUD.setStyle('edit-container', 'display', '');
        YUD.setStyle('preview-container', 'display', 'none');
    })
 });
 </script>
 </%def>

0 comments (0 inline, 0 general)