kallithea Changeset - 48a96c4059df

Changeset - 48a96c4059df

Parent rev.

Child rev.

[Not reviewed]

default

0 6 0

domruf - 9 years ago 2016-09-21 21:29:23
dominikruf@gmail.com

js: set canvas width dynamically based on parent width

6 files changed with 13 insertions and 11 deletions:

kallithea/public/css/style.css

kallithea/public/js/graph.js

kallithea/templates/changelog/changelog.html

kallithea/templates/compare/compare_cs.html

kallithea/templates/pullrequests/pullrequest.html

kallithea/templates/pullrequests/pullrequest_show.html

0 comments (0 inline, 0 general)

kallithea/public/css/style.css

➞

Show inline comments

@@ @@ -2055,24 +2055,25 @@ BIN_FILENODE = 6 @@
 .table {
     position: relative;
+}
 #graph {
     position: relative;
     overflow: hidden;
+}
 #graph_nodes {
     position: absolute;
     width: 100px;
+}
 #graph_content,
 #graph .info_box,
 #graph .container_header {
     margin-left: 100px;
+}
 #graph_content {
     position: relative;
+}

kallithea/public/js/graph.js

➞

Show inline comments

@@ @@ -23,25 +23,25 @@ var colors = [ @@
 ];
 function BranchRenderer(canvas_id, content_id, row_id_prefix) {
 	// canvas_id is canvas to render into
 	// content_id's height is applied to canvas
 	// row_id_prefix is prefix that is applied to get row id's
 	this.canvas = document.getElementById(canvas_id);
 	var content = document.getElementById(content_id);
 	if (!document.createElement("canvas").getContext)
 		this.canvas = window.G_vmlCanvasManager.initElement(this.canvas);
 	if (!this.canvas) { // canvas creation did for some reason fail - fail silently
-		this.render = function(data,canvasWidth) {};
 		this.render = function(data) {};
 		return;
+	}
 	this.ctx = this.canvas.getContext('2d');
 	this.ctx.strokeStyle = 'rgb(0, 0, 0)';
 	this.ctx.fillStyle = 'rgb(0, 0, 0)';
 	this.cur = [0, 0];
 	this.line_width = 2.0;
 	this.dot_radius = 3.5;
 	this.close_x = 1.5 * this.dot_radius;
 	this.close_y = 0.5 * this.dot_radius;
 	this.calcColor = function(color, bg, fg) {
@@ @@ -53,26 +53,27 @@ function BranchRenderer(canvas_id, conte @@
 		green = Math.round(green * 255);
 		blue = Math.round(blue * 255);
 		var s = 'rgb(' + red + ', ' + green + ', ' + blue + ')';
 		return s;
+	}
 	this.setColor = function(color, bg, fg) {
 		var s = this.calcColor(color, bg, fg);
 		this.ctx.strokeStyle = s;
 		this.ctx.fillStyle = s;
+	}
-	this.render = function(data,canvasWidth) {
 	this.render = function(data) {
 		var idx = 1;
 		var canvasWidth = $(this.canvas).parent().width();
 		this.canvas.setAttribute('width',canvasWidth);
 		this.canvas.setAttribute('height',content.clientHeight);
 		// HiDPI version needs to be scaled by 2x then halved via css
 		// Note: Firefox on OS X fails scaling if the canvas height is more than 32k
 		if (window.devicePixelRatio && content.clientHeight * window.devicePixelRatio < 32768) {
 			this.canvas.setAttribute('width', canvasWidth * window.devicePixelRatio);
 			this.canvas.setAttribute('height', content.clientHeight * window.devicePixelRatio);
 			this.canvas.style.width = canvasWidth + "px";
 			this.canvas.style.height = content.clientHeight + "px";
 			this.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);

kallithea/templates/changelog/changelog.html

➞

Show inline comments

@@ @@ -263,75 +263,75 @@ ${self.repo_context_bar('changelog', c.f @@
                             $('#open_new_pr').prop('href', pyroutes.url('pullrequest_home',
                                                                         {'repo_name': '${c.repo_name}',
                                                                         'branch':'${c.first_revision.branch}'}));
                             $('#open_new_pr').html(_TM['Open New Pull Request from {0}'].format('${c.first_revision.branch}'));
                         %endif
                         $('#compare_fork').show();
                         $checkboxes.closest('tr').removeClass('out-of-range');
+                    }
                 };
                 checkbox_checker();
                 $checkboxes.click(function() {
                     checkbox_checker();
-                    r.render(jsdata,100);
                     r.render(jsdata);
                 });
                 $('#singlerange').click(checkbox_checker);
                 $('#rev_range_clear').click(function(e){
                     $checkboxes.prop('checked', false);
                     checkbox_checker();
-                    r.render(jsdata,100);
                     r.render(jsdata);
                 });
                 var $msgs = $('.message');
                 // get first element height
                 var el = $('#graph_content .container')[0];
                 var row_h = el.clientHeight;
                 $msgs.each(function() {
                     var m = this;
                     var h = m.clientHeight;
                     if(h > row_h){
                         var offset = row_h - (h+12);
                         $(m.nextElementSibling).css('display', 'block');
                         $(m.nextElementSibling).css('margin-top', offset+'px');
+                    }
                 });
                 $('.expand_commit').on('click',function(e){
                     var cid = $(this).attr('commit_id');
                     $('#C-'+cid).toggleClass('expanded');
                     //redraw the graph, r and jsdata are bound outside function
-                    r.render(jsdata,100);
                     r.render(jsdata);
                 });
                 // change branch filter
                 $("#branch_filter").select2({
                     dropdownAutoWidth: true,
                     maxResults: 50,
                     sortResults: branchSort
                     });
                 $("#branch_filter").change(function(e){
                     var selected_branch = e.currentTarget.options[e.currentTarget.selectedIndex].value;
                     if(selected_branch != ''){
                         window.location = pyroutes.url('changelog_home', {'repo_name': '${c.repo_name}',
                                                                           'branch': selected_branch});
                     }else{
                         window.location = pyroutes.url('changelog_home', {'repo_name': '${c.repo_name}'});
+                    }
                     $("#changelog").hide();
                 });
                 var jsdata = ${c.jsdata|n};
                 var r = new BranchRenderer('graph_canvas', 'graph_content', 'chg_');
-                r.render(jsdata,100);
                 r.render(jsdata);
             });
         </script>
         %else:
             ${_('There are no changes yet')}
         %endif
     </div>
 </div>
 </%def>

kallithea/templates/compare/compare_cs.html

➞

Show inline comments

@@ @@ -118,28 +118,28 @@ @@
 %if c.as_form:
 <div id="jsdata" style="display:none">${c.jsdata|n}</div>
 %else:
 <script type="text/javascript" src="${h.url('/js/graph.js', ver=c.kallithea_version)}"></script>
 %endif
 <script type="text/javascript">
     $(document).ready(function(){
 %if not c.as_form:
         var jsdata = ${c.jsdata|n};
         var r = new BranchRenderer('graph_canvas', 'graph_content_pr', 'chg_');
-        r.render(jsdata,100);
         r.render(jsdata);
 %endif
         $('.expand_commit').click(function(e){
             var cid = $(this).attr('commit_id');
             $('#C-'+cid).toggleClass('expanded');
-            r.render(jsdata,100);
             r.render(jsdata);
         });
         $('.gravatar').click(function(e){
             var cid = $(this).attr('commit_id');
             $('#row-'+cid).toggleClass('hl', !$('#row-'+cid).hasClass('hl'));
         });
     });
 </script>

kallithea/templates/pullrequests/pullrequest.html

➞

Show inline comments

@@ @@ -175,25 +175,25 @@ ${self.repo_context_bar('showpullrequest @@
       for (k in rev_data){
           url = url.replace(k,rev_data[k]);
+      }
       if (pendingajax) {
           pendingajax.abort();
           pendingajax = undefined;
+      }
       pendingajax = asynchtml(url, $('#pull_request_overview'), function(o){
           pendingajax = undefined;
           var jsdata = eval('('+$('#jsdata').html()+')'); // TODO: just get json
           var r = new BranchRenderer('graph_canvas', 'graph_content_pr', 'chg_');
-          r.render(jsdata,100);
           r.render(jsdata);
       });
+  }
   $(document).ready(function(){
       $("#org_repo").select2({
           dropdownAutoWidth: true
       });
       ## (org_repo can't change)
       $("#org_ref").select2({
           dropdownAutoWidth: true,
           maxResults: 50,

kallithea/templates/pullrequests/pullrequest_show.html

➞

Show inline comments

@@ @@ -145,25 +145,25 @@ ${self.repo_context_bar('showpullrequest @@
           <div class="input pr-do-edit ac" style="display:none">
                ${h.text('owner', class_="large", value=c.pull_request.owner.username, placeholder=_('Username'))}
                <div id="owner_completion_container"></div>
           </div>
         </div>
         <div class="field">
           <label>${_('Next iteration')}:</label>
             <div class="input">
               <div class="msg-div">${c.update_msg}</div>
               %if c.avail_revs:
               <div id="updaterevs" style="max-height:200px; overflow-y:auto; overflow-x:hidden; margin-bottom: 10px; padding: 1px 0">
                 <div style="height:0">
+                <div style="height:0;width:40px">
                   <canvas id="avail_graph_canvas" style="width:0"></canvas>
                 </div>
                 <table id="updaterevs-table" class="noborder" style="padding-left:50px">
                   %for cnt, cs in enumerate(c.avail_cs):
                     <tr id="chg_available_${cnt+1}" class="${'mergerow' if len(cs.parents) > 1 and not (editable and cs.revision in c.avail_revs) else ''}">
                       %if c.cs_ranges and cs.revision == c.cs_ranges[-1].revision:
                         <td>
                           %if editable:
                             ${h.radio(name='updaterev', value='', checked=True)}
                           %endif
                         </td>
                         <td colspan="4">${_("Current revision - no change")}</td>
@@ @@ -364,25 +364,25 @@ ${self.repo_context_bar('showpullrequest @@
     <script type="text/javascript">
       $(document).ready(function(){
           PullRequestAutoComplete($('#user'), $('#reviewers_container'), _USERS_AC_DATA);
           SimpleUserAutoComplete($('#owner'), $('#owner_completion_container'), _USERS_AC_DATA);
           $('.code-difftable').on('click', '.add-bubble', function(e){
               show_comment_form($(this));
           });
           var avail_jsdata = ${c.avail_jsdata|n};
           var avail_r = new BranchRenderer('avail_graph_canvas', 'updaterevs-table', 'chg_available_');
-          avail_r.render(avail_jsdata,40);
           avail_r.render(avail_jsdata);
           move_comments($(".comments .comments-list-chunk"));
           $('#updaterevs input').change(function(e){
               var update = !!e.target.value;
               $('#pr-form-save').prop('disabled',update);
               $('#pr-form-clone').prop('disabled',!update);
           });
           var $org_review_members = $('#review_members').clone();
           $('#pr-form-reset').click(function(e){
               $('.pr-do-edit').hide();
               $('.pr-not-edit').show();

0 comments (0 inline, 0 general)