kallithea Changeset - 1f2ba96de73e

Changeset - 1f2ba96de73e

Parent rev.

Child rev.

[Not reviewed]

beta

0 3 0

Marcin Kuzminski - 14 years ago 2011-11-14 21:10:02
marcin@python-works.com

#71 code review
- inline comments are now positioned inlines

3 files changed with 93 insertions and 13 deletions:

rhodecode/public/css/style.css

rhodecode/public/js/rhodecode.js

rhodecode/templates/changeset/changeset.html

0 comments (0 inline, 0 general)

rhodecode/public/css/style.css

➞

Show inline comments

@@ @@ -3190,138 +3190,139 @@ color: black !important; @@
 margin: 1em 0 !important;
 line-height: 1.5em !important;
+}
 div.rst-block  ul {
 list-style: disc !important;
 margin: 1em 0 1em 2em !important;
+}
 div.rst-block  ol {
 list-style: decimal;
 margin: 1em 0 1em 2em !important;
+}
 div.rst-block  pre, code {
 font: 12px "Bitstream Vera Sans Mono","Courier",monospace;
+}
 div.rst-block  code {
     font-size: 12px !important;
     background-color: ghostWhite !important;
     color: #444 !important;
     padding: 0 .2em !important;
     border: 1px solid #dedede !important;
+}
 div.rst-block  pre code {
     padding: 0 !important;
     font-size: 12px !important;
     background-color: #eee !important;
     border: none !important;
+}
 div.rst-block  pre {
     margin: 1em 0;
     font-size: 12px;
     background-color: #eee;
     border: 1px solid #ddd;
     padding: 5px;
     color: #444;
     overflow: auto;
     -webkit-box-shadow: rgba(0,0,0,0.07) 0 1px 2px inset;
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     border-radius: 3px;
+}
+/** comment main **/
 .comments {
     padding:10px 20px;
+}
 .comments .comment {
     border: 1px solid #ddd;
     margin-top: 10px;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     border-radius: 4px;
+}
 .comments .comment .meta {
     background: #f8f8f8;
     padding: 6px;
     border-bottom: 1px solid #ddd;
+}
 .comments .comment .meta img {
     vertical-align: middle;
+}
 .comments .comment .meta .user {
     font-weight: bold;
+}
 .comments .comment .meta .date {
     float: right;
+}
 .comments .comment .text {
     padding: 8px 6px 6px 14px;
     background-color: #FAFAFA;
+}
 .comments .comments-number{
 	padding:0px 0px 10px 0px;
 	font-weight: bold;
 	color: #666;
 	font-size: 16px;
+}
 /** comment form **/
 .comment-form .clearfix{
 	background: #EEE;
     -webkit-border-radius: 4px;
     -moz-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-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;
     color: #666;
+}
@@ @@ -3349,49 +3350,100 @@ form.comment-form { @@
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     border-radius: 4px;
     padding: 5px;
+}
 div.comment-inline-form {
     margin-top: 5px;
     padding:2px 6px 8px 6px;
+}
 .comment-inline-form strong {
     display: block;
     margin-bottom: 15px;
+}
 .comment-inline-form textarea {
     width: 100%;
     height: 100px;
     font-family: 'Monaco', 'Courier', 'Courier New', monospace;
+}
 form.comment-inline-form {
     margin-top: 10px;
     margin-left: 10px;
+}
 .comment-inline-form-submit {
     margin-top: 5px;
     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;
+}
 .comment-inline-form .comment-button{
     padding-top:5px;
+}
@@ \ No newline at end of file @@
+}
 /** comment inline **/
 .inline-comments {
     padding:10px 20px;
+}
 .inline-comments div.rst-block  {
 	clear:both;
 	overflow:hidden;
 	margin:0;
 	padding:0 20px 0px;
+}
 .inline-comments .comment {
     border: 1px solid #ddd;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     border-radius: 4px;
     margin-left: 5px;
     margin-right: 5px;
     margin-bottom: 3px;
+}
 .inline-comments .comment .meta {
     background: #f8f8f8;
     padding: 6px;
     border-bottom: 1px solid #ddd;
+}
 .inline-comments .comment .meta img {
     vertical-align: middle;
+}
 .inline-comments .comment .meta .user {
     font-weight: bold;
+}
 .inline-comments .comment .meta .date {
     float: right;
+}
 .inline-comments .comment .text {
     padding: 8px 6px 6px 14px;
     background-color: #FAFAFA;
+}
 .inline-comments .comments-number{
     padding:0px 0px 10px 0px;
     font-weight: bold;
     color: #666;
     font-size: 16px;
+}

rhodecode/public/js/rhodecode.js

➞

Show inline comments

@@ @@ -259,80 +259,85 @@ var q_filter = function(target,nodes,dis @@
 	   var obsolete = [];
 	   var req = q_filter_field.value.toLowerCase();
 	   var l = nodes.length;
 	   var i;
 	   var showing = 0;
        for (i=0;i<l;i++ ){
     	   var n = nodes[i];
     	   var target_element = display_element(n)
     	   if(req && n.innerHTML.toLowerCase().indexOf(req) == -1){
     		   hide_node(target_element);
+    	   }
     	   else{
     		   show_node(target_element);
     		   showing+=1;
+    	   }
+       }
 	   // if repo_count is set update the number
 	   var cnt = YUD.get('repo_count');
 	   if(cnt){
 		   YUD.get('repo_count').innerHTML = showing;
+	   }
+	}
+}
 var ajaxPOST = function(url,postData,success) {
     var sUrl = url;
     var callback = {
         success: success,
         failure: function (o) {
             alert("error");
         },
     };
     var postData = postData;
     var request = YAHOO.util.Connect.asyncRequest('POST', sUrl, callback, postData);
 };
 /** comments **/
 var removeInlineForm = function(form) {
 	form.parentNode.removeChild(form);
+}
-var createInlineForm = function(parent_tr, f_path, line) {
+var tableTr = function(cls,body){
 	var form = document.createElement('tr');
 	YUD.addClass(form, 'comment-form-inline');
 	YUD.addClass(form, cls);
 	form.innerHTML = '<td class="lineno new"></td>'+
     				 '<td class="lineno old"></td>'+
                      '<td>{0}</td>'.format(body);
 	return form;
+}
 var createInlineForm = function(parent_tr, f_path, line) {
 	var tmpl = YUD.get('comment-inline-form-template').innerHTML;
 	tmpl = tmpl.format(f_path, line);
 	form.innerHTML = '<td class="lineno new"></td>'+
 		             '<td class="lineno old"></td>'+
 			         '<td>{0}</td>'.format(tmpl);
 	var form = tableTr('comment-form-inline',tmpl)
 	// create event for hide button
 	form = new YAHOO.util.Element(form);
 	var form_hide_button = new YAHOO.util.Element(form.getElementsByClassName('hide-inline-form')[0]);
 	form_hide_button.on('click', function(e) {
 		var newtr = e.currentTarget.parentNode.parentNode.parentNode.parentNode.parentNode;
 		removeInlineForm(newtr);
 		YUD.removeClass(parent_tr, 'form-open');
 	});
 	return form
+}
 var getLineNo = function(tr) {
 	var line;
 	var o = tr.children[0].id.split('_');
 	var n = tr.children[1].id.split('_');
 	if (n.length >= 2) {
 		line = n[n.length-1];
 	} else if (o.length >= 2) {
 		line = o[n.length-1];
+	}
 	return line
+}
@@ \ No newline at end of file @@

rhodecode/templates/changeset/changeset.html

➞

Show inline comments

 ## -*- coding: utf-8 -*-
 <%inherit file="/base/base.html"/>
 <%def name="title()">
     ${c.repo_name} ${_('Changeset')} - r${c.changeset.revision}:${h.short_id(c.changeset.raw_id)} - ${c.rhodecode_name}
 </%def>
 <%def name="breadcrumbs_links()">
     ${h.link_to(u'Home',h.url('/'))}
     &raquo;
     ${h.link_to(c.repo_name,h.url('summary_home',repo_name=c.repo_name))}
     &raquo;
     ${_('Changeset')} - r${c.changeset.revision}:${h.short_id(c.changeset.raw_id)}
 </%def>
 <%def name="page_nav()">
     ${self.menu('changelog')}
 </%def>
 <%def name="fid(raw_id,path)" filter="strip">
   <%
     return 'C-%s-%s' % (h.short_id(raw_id),h.safeid(h.safe_unicode(path)))
   %>
 </%def>
 <%def name="main()">
 <div class="box">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
     </div>
     <div class="table">
 		<div class="diffblock">
 			<div class="code-header">
 				<div>
 				${_('Changeset')} - r${c.changeset.revision}:${h.short_id(c.changeset.raw_id)}
 				 &raquo; <span>${h.link_to(_('raw diff'),
 				h.url('raw_changeset_home',repo_name=c.repo_name,revision=c.changeset.raw_id,diff='show'))}</span>
 				 &raquo; <span>${h.link_to(_('download diff'),
 				h.url('raw_changeset_home',repo_name=c.repo_name,revision=c.changeset.raw_id,diff='download'))}</span>
 				</div>
 			</div>
 		</div>
 	    <div id="changeset_content">
 			<div class="container">
 	             <div class="left">
 	                 <div class="date">${_('commit')} ${c.changeset.revision}: ${h.short_id(c.changeset.raw_id)}@${c.changeset.date}</div>
 	                 <div class="author">
 	                     <div class="gravatar">
 	                         <img alt="gravatar" src="${h.gravatar_url(h.email(c.changeset.author),20)}"/>
 	                     </div>
 	                     <span>${h.person(c.changeset.author)}</span><br/>
 	                     <span><a href="mailto:${h.email_or_none(c.changeset.author)}">${h.email_or_none(c.changeset.author)}</a></span><br/>
 	                 </div>
 	                 <div class="message">${h.link_to(h.wrap_paragraphs(c.changeset.message),h.url('changeset_home',repo_name=c.repo_name,revision=c.changeset.raw_id))}</div>
 	             </div>
 	             <div class="right">
 		             <div class="changes">
                         % if len(c.changeset.affected_files) <= c.affected_files_cut_off:
 		                 <span class="removed" title="${_('removed')}">${len(c.changeset.removed)}</span>
 		                 <span class="changed" title="${_('changed')}">${len(c.changeset.changed)}</span>
 		                 <span class="added" title="${_('added')}">${len(c.changeset.added)}</span>
 	                    % else:
                          <span class="removed" title="${_('affected %s files') % len(c.changeset.affected_files)}">!</span>
                          <span class="changed" title="${_('affected %s files') % len(c.changeset.affected_files)}">!</span>
                          <span class="added"   title="${_('affected %s files') % len(c.changeset.affected_files)}">!</span>
 	                    % endif
 		             </div>
 		                 %if len(c.changeset.parents)>1:
 		                 <div class="merge">
 		                     ${_('merge')}<img alt="merge" src="${h.url('/images/icons/arrow_join.png')}"/>
 		                 </div>
 		                 %endif
 		            %if c.changeset.parents:
 		             %for p_cs in reversed(c.changeset.parents):
 		                 <div class="parent">${_('Parent')} ${p_cs.revision}: ${h.link_to(h.short_id(p_cs.raw_id),
 		                     h.url('changeset_home',repo_name=c.repo_name,revision=p_cs.raw_id),title=p_cs.message)}
 		                 </div>
 		             %endfor
                     %else:
                         <div class="parent">${_('No parents')}</div>
                     %endif
 		         <span class="logtags">
 		             <span class="branchtag" title="${'%s %s' % (_('branch'),c.changeset.branch)}">
 		             ${h.link_to(c.changeset.branch,h.url('files_home',repo_name=c.repo_name,revision=c.changeset.raw_id))}</span>
 		             %for tag in c.changeset.tags:
 		                 <span class="tagtag"  title="${'%s %s' % (_('tag'),tag)}">
 		                 ${h.link_to(tag,h.url('files_home',repo_name=c.repo_name,revision=c.changeset.raw_id))}</span>
 		             %endfor
 		         </span>
 	                </div>
 	        </div>
 	        <span style="font-size:1.1em;font-weight: bold">
 	        ${_('%s files affected with %s additions and %s deletions.') % (len(c.changeset.affected_files),c.lines_added,c.lines_deleted)}
 	        </span>
 	        <div class="cs_files">
 	                %for change,filenode,diff,cs1,cs2,stat in c.changes:
 	                    <div class="cs_${change}">
-		                    <div class="node">${h.link_to(h.safe_unicode(filenode.path),h.url.current(anchor='C-%s-%s' % (h.short_id(filenode.changeset.raw_id),h.safeid(h.safe_unicode(filenode.path)))))}</div>
+		                    <div class="node">${h.link_to(h.safe_unicode(filenode.path),h.url.current(anchor=self.fid(filenode.changeset.raw_id,filenode.path)))}</div>
 		                    <div class="changes">${h.fancy_file_stats(stat)}</div>
 	                    </div>
 	                %endfor
 	                % if c.cut_off:
 	                  ${_('Changeset was too big and was cut off...')}
 	                % endif
 	        </div>
 	    </div>
     </div>
 	%for change,filenode,diff,cs1,cs2,stat in c.changes:
 		%if change !='removed':
 		<div style="clear:both;height:10px"></div>
 		<div class="diffblock  margined">
-			<div id="${'C-%s-%s' % (h.short_id(filenode.changeset.raw_id),h.safeid(h.safe_unicode(filenode.path)))}" class="code-header">
+			<div id="${self.fid(filenode.changeset.raw_id,filenode.path)}" class="code-header">
 				<div class="changeset_header">
 					<span class="changeset_file">
 						${h.link_to_if(change!='removed',h.safe_unicode(filenode.path),h.url('files_home',repo_name=c.repo_name,
 						revision=filenode.changeset.raw_id,f_path=h.safe_unicode(filenode.path)))}
 					</span>
 					&raquo; <span>${h.link_to(_('diff'),
 					h.url('files_diff_home',repo_name=c.repo_name,f_path=h.safe_unicode(filenode.path),diff2=cs2,diff1=cs1,diff='diff'))}</span>
 					&raquo; <span>${h.link_to(_('raw diff'),
 					h.url('files_diff_home',repo_name=c.repo_name,f_path=h.safe_unicode(filenode.path),diff2=cs2,diff1=cs1,diff='raw'))}</span>
 					&raquo; <span>${h.link_to(_('download diff'),
 					h.url('files_diff_home',repo_name=c.repo_name,f_path=h.safe_unicode(filenode.path),diff2=cs2,diff1=cs1,diff='download'))}</span>
 				</div>
 			</div>
 			<div class="code-body">
                 <div class="full_f_path" path="${filenode.path}"></div>
 				%if diff:
 					${diff|n}
 				%else:
 					${_('No changes in this file')}
 				%endif
 			</div>
 		</div>
 		%endif
 	%endfor
     <%namespace name="comment" file="/changeset/changeset_file_comment.html"/>
     ## template for inline comment form
     ${comment.comment_inline_form()}
     <div class="comments">
         <div class="comments-number">${len(c.comments)} comment(s) (${c.inline_cnt} ${_('inline')})</div>
         %for path, lines in c.inline_comments:
             <div class="inline-comment-placeholder" path="${path} ">
+            <div style="display:none" class="inline-comment-placeholder" path="${path}" target_id="${self.fid(c.changeset.raw_id,path)}">
             % for line,comments in lines.iteritems():
                 <div class="inline-comment-placeholder-line" line="${line}">
+                <div class="inline-comment-placeholder-line" line="${line}" target_id="${h.safeid(h.safe_unicode(path))}">
                 %for co in comments:
                     ${comment.comment_block(co)}
                 %endfor
                 </div>
             %endfor
             </div>
         %endfor
         %for co in c.comments:
             ${comment.comment_block(co)}
         %endfor
         %if c.rhodecode_user.username != 'default':
         <div class="comment-form">
             ${h.form(h.url('changeset_comment', repo_name=c.repo_name, revision=c.changeset.raw_id))}
             <strong>${_('Leave a comment')}</strong>
             <div class="clearfix">
                 <div class="comment-help">
                     ${_('Comments parsed using')} <a href="${h.url('rst_help')}">RST</a> ${_('syntax')}
                 </div>
                     ${h.textarea('text')}
             </div>
             <div class="comment-button">
             ${h.submit('save', _('Comment'), class_='ui-button')}
             </div>
             ${h.end_form()}
         </div>
         %endif
     </div>
     <script type="text/javascript">
       var deleteComment = function(comment_id){
           var url = "${url('changeset_comment_delete',repo_name=c.repo_name,comment_id='__COMMENT_ID__')}".replace('__COMMENT_ID__',comment_id);
           var postData = '_method=delete';
           var success = function(o){
               var n = YUD.get('comment-'+comment_id);
               n.parentNode.removeChild(n);
+          }
           ajaxPOST(url,postData,success);
+      }
       YUE.onDOMReady(function(){
     	  YUE.on(YUQ('.line'),'mouseenter',function(e){
     		  var tr = e.currentTarget;
               if(YUD.hasClass(tr,'form-open') || YUD.hasClass(tr,'context')){
                   return
+              }
     		  YUD.addClass(tr,'highlight');
     	  });
           YUE.on(YUQ('.line'),'mouseleave',function(e){
               YUD.removeClass(e.currentTarget,'highlight');
           });
           YUE.on(YUQ('.line'),'click',function(e){
         	  var tr = e.currentTarget;
         	  if(YUD.hasClass(tr,'form-open') || YUD.hasClass(tr,'context')){
         		  return
+        	  }
         	  YUD.addClass(tr,'form-open');
         	  var node = tr.parentNode.parentNode.parentNode.getElementsByClassName('full_f_path')[0];
         	  var f_path = YUD.getAttribute(node,'path');
         	  var lineno = getLineNo(tr);
         	  var form = createInlineForm(tr, f_path, lineno);
         	  YUD.insertAfter(form,tr);
           })
           });
           // inject comments into they proper positions
           var file_comments = YUQ('.inline-comment-placeholder');
           for (f in file_comments){
         	  var box = file_comments[f];
         	  var inlines = box.children;
         	  for(var i=0; i<inlines.length; i++){
         		  var inline = inlines[i];
         		  var lineno = YUD.getAttribute(inlines[i],'line');
         		  var lineid = "a{0}_{1}".format(YUD.getAttribute(inline,'target_id'),lineno);
                   var target_line = YUD.get(lineid);
                   var comments = new YAHOO.util.Element(tableTr('inline-comments',inline.innerHTML))
                   YUD.insertAfter(comments,target_line.parentNode);
+        	  }
+          }
       })
     </script>
   </div>
 </%def>

0 comments (0 inline, 0 general)