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 135 insertions and 24 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

@@ @@ -491,24 +491,29 @@ def make_map(config): @@
                  revision='tip', conditions=dict(function=check_repo))
     rmap.connect('changeset_download_home',
                  '/{repo_name:.*?}/changeset-download/{revision}',
                  controller='changeset', action='changeset_download',
                  revision='tip', conditions=dict(function=check_repo))
     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}',
                  controller='changeset', action='changeset_info')
     rmap.connect('compare_url',
                  '/{repo_name:.*?}/compare/{org_ref_type}@{org_ref:.*?}...{other_ref_type}@{other_ref:.*?}',
                  controller='compare', action='index',
                  conditions=dict(function=check_repo),

rhodecode/controllers/changeset.py

➞

Show inline comments

@@ @@ -28,25 +28,26 @@ import traceback @@
 from collections import defaultdict
 from webob.exc import HTTPForbidden, HTTPBadRequest, HTTPNotFound
 from pylons import tmpl_context as c, url, request, response
 from pylons.i18n.translation import _
 from pylons.controllers.util import redirect
 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
 from rhodecode.model.changeset_status import ChangesetStatusModel
 from rhodecode.model.meta import Session
 from rhodecode.model.repo import RepoModel
 from rhodecode.lib.diffs import LimitedDiffContainer
 from rhodecode.lib.exceptions import StatusChangeOnClosedPullRequestError
 from rhodecode.lib.vcs.backends.base import EmptyChangeset
@@ @@ -311,24 +312,25 @@ class ChangesetController(BaseRepoContro @@
             else:
                 return render('changeset/changeset_range.html')
     def changeset_raw(self, revision):
         return self.index(revision, method='raw')
     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:
             text = text or (_('Status change -> %s')
                             % ChangesetStatus.get_status_lbl(status))
         c.co = comm = ChangesetCommentsModel().create(
             text=text,
             repo=c.rhodecode_db_repo.repo_id,
@@ @@ -373,24 +375,34 @@ class ChangesetController(BaseRepoContro @@
                                   revision=revision))
         #only ajax below
         data = {
            'target_id': h.safeid(h.safe_unicode(request.POST.get('f_path'))),
+        }
         if comm:
             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)
             Session().commit()
             return True
         else:
             raise HTTPForbidden()
     @jsonify

rhodecode/public/css/style.css

➞

Show inline comments

@@ @@ -209,24 +209,26 @@ div.options a { @@
     color: #999999;
     display: block;
     margin-bottom: 0;
     margin-top: 5px;
+}
 .empty_data {
     color: #B9B9B9;
+}
 a.permalink {
     visibility: hidden;
     position: absolute;
     margin: 3px 4px;
+}
 a.permalink:hover {
     text-decoration: none;
+}
 h1:hover > a.permalink,
 h2:hover > a.permalink,
 h3:hover > a.permalink,
 h4:hover > a.permalink,
 h5:hover > a.permalink,
 h6:hover > a.permalink,
@@ @@ -4288,114 +4290,133 @@ div.rst-block pre { @@
     font-weight: bold;
     color: #666;
     font-size: 16px;
+}
 /** comment form **/
 .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 {
     display: block;
     margin-bottom: 15px;
+}
 .comment-form textarea {
     width: 100%;
     height: 100px;
     font-family: 'Monaco', 'Courier', 'Courier New', monospace;
+}
 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 {
     display: none;
+}
 .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 {
     margin-left: 10px;
     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;
     font-size: 16px;
     opacity: 0.5;
     position: absolute;
     text-align: center;
     vertical-align: top;
+}
 .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;
+}
 .comment-inline-form strong {
     display: block;
     margin-bottom: 15px;
+}
 .comment-inline-form textarea {
@@ @@ -4414,27 +4435,32 @@ form.comment-inline-form { @@
     margin-left: 525px;
+}
 .file-comments {
     display: none;
+}
 .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;
+}
 /** comment inline **/
 .inline-comments {
     padding: 10px 20px;
+}
 .inline-comments div.rst-block {

rhodecode/public/js/rhodecode.js

➞

Show inline comments

@@ @@ -857,47 +857,73 @@ var injectInlineForm = function(tr){ @@
 		  if (YUD.hasClass(overlay,'overlay')){
 			  var w = _form.offsetWidth;
 			  var h = _form.offsetHeight;
 			  YUD.setStyle(overlay,'width',w+'px');
 			  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);
 		  var _e = YUD.get('text_'+lineno);
 		  if(_e){
 			  _e.focus();
+		  }
 	  },10)
 };
 var deleteComment = function(comment_id){
 	var url = AJAX_COMMENT_DELETE_URL.replace('__COMMENT_ID__',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
         // 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){
 	var label = TRANSLATION_MAP['Add another comment'];
 	var html_el = document.createElement('div');
 	YUD.addClass(html_el, 'add-comment');
 	html_el.innerHTML = '<span class="ui-btn">{0}</span>'.format(label);
 	var add = new YAHOO.util.Element(html_el);

rhodecode/templates/base/root.html

➞

Show inline comments

@@ @@ -51,24 +51,28 @@ @@
                 'Open new pull request': "${_('Open new pull request')}",
                 'Open new pull request for selected changesets':  "${_('Open new pull request for selected changesets')}",
                 'Show selected changesets __S -> __E': "${_('Show selected changesets __S -> __E')}",
                 'Show selected changeset __S': "${_('Show selected changeset __S')}",
                 'Selection link': "${_('Selection link')}",
                 'Collapse diff': "${_('Collapse diff')}",
                 '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>
             <script type="text/javascript" src="${h.url('/js/native.history.js', ver=c.rhodecode_version)}"></script>
             <script type="text/javascript" src="${h.url('/js/pyroutes_map.js', ver=c.rhodecode_version)}"></script>
             <script type="text/javascript" src="${h.url('/js/rhodecode.js', ver=c.rhodecode_version)}"></script>
            ## EXTRA FOR JS
            ${self.js_extra()}
             <script type="text/javascript">
@@ @@ -81,24 +85,25 @@ @@
                     return false;
+                }
             })(window);
             YUE.onDOMReady(function(){
               tooltip_activate();
               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>
         ${self.head_extra()}
     </head>
     <body id="body">
      ## IE hacks
       <!--[if IE 7]>
       <script>YUD.addClass(document.body,'ie7')</script>

rhodecode/templates/changeset/changeset_file_comment.html

➞

Show inline comments

@@ @@ -3,79 +3,85 @@ @@
 ## <%namespace name="comment" file="/changeset/changeset_file_comment.html"/>
 ## ${comment.comment_block(co)}
 ##
 <%def name="comment_block(co)">
   <div class="comment" id="comment-${co.comment_id}" line="${co.line_no}">
     <div class="comment-wrapp">
       <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>
   </div>
 </%def>
 <%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')}
       </div>
       ${h.end_form()}
   %else:
       ${h.form('')}
       <div class="clearfix">
           <div class="comment-help">
@@ @@ -125,47 +131,57 @@ @@
         </div>
     %endfor
 </div>
 </%def>
 ## MAIN COMMENT FORM
 <%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>
         ${h.end_form()}
     </div>
     %endif
 </div>
 <script>
 var change_status_show = function(){
@@ @@ -176,16 +192,37 @@ var change_status_show = function(){ @@
 YUE.onDOMReady(function () {
    MentionsAutoComplete('text', 'mentions_container', _USERS_AC_DATA, _GROUPS_AC_DATA);
    YUE.on(YUQ('.status_change_radio'), 'change',function(e){
        var val = e.currentTarget.value;
        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)