#71 code review

 - inline comments are now positioned inlines

rhodecode/public/css/style.css

@@ -3235,7 +3235,7 div.rst-block pre {
 }
 
 
-
+/** comment main **/
 .comments {
     padding:10px 20px;
 }
@@ -3277,6 +3277,7 div.rst-block pre {
 	color: #666;
 	font-size: 16px;
 }
+
 /** comment form **/
 
 .comment-form .clearfix{
@@ -3394,4 +3395,55 form.comment-inline-form {
 
 .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

@@ -304,15 +304,20 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]);

rhodecode/templates/changeset/changeset.html

@@ -18,6 +18,12
     ${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 -->
@@ -92,7 +98,7
 	        <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
@@ -108,7 +114,7
 		%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,
@@ -142,9 +148,9
         <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
@@ -208,7 +214,24
         	  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>