hyung-hwan/codepot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

enhanced the layout of code diff view

Browse Source
This commit is contained in:
hyung-hwan 2016-01-13 09:47:20 +00:00
parent c9494d78b2
commit 812d52c687
2 changed files with 61 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
codepot/src/codepot/views/code_diff.php
View File

@ -28,12 +28,20 @@ if ($revision1 <= 0)
{ {
$revreq = ''; $revreq = '';
$revreqroot = ''; $revreqroot = '';
$dualrevreq = '';
$dualrevreqroot = '';
$history_path = "/code/history/{$project->id}/{$hex_headpath}"; $history_path = "/code/history/{$project->id}/{$hex_headpath}";
} }
else else
{ {
$revreq = "/{$file['created_rev']}"; $revreq = "/{$file['created_rev']}";
$revreqroot = '/' . $this->converter->AsciiToHex ('.') . $revreq; $revreqroot = '/' . $this->converter->AsciiToHex ('.') . $revreq;
$dualrevreq = "/{$file['created_rev']}/{$file['against']['created_rev']}";
$dualrevreqroot = '/' . $this->converter->AsciiToHex ('.') . $dualrevreq;
if ($hex_headpath == '') $revtrailer = $revreqroot; if ($hex_headpath == '') $revtrailer = $revreqroot;
else $revtrailer = "/{$hex_headpath}{$revreq}"; else $revtrailer = "/{$hex_headpath}{$revreq}";
$history_path = "/code/history/{$project->id}{$revtrailer}"; $history_path = "/code/history/{$project->id}{$revtrailer}";
@ -98,7 +106,7 @@ $(function() {
return false; return false;
}); });
$("#code_diff_diff_button").button().click (function() { $("#code_diff_diff_button").button().click (function() {
$(location).attr ('href', codepot_merge_path("<?php print site_url(); ?>", '<?php print "/code/{$altdiff_view}/{$project->id}/${hex_headpath}{$revreq}"; ?>')); $(location).attr ('href', codepot_merge_path("<?php print site_url(); ?>", '<?php print "/code/{$altdiff_view}/{$project->id}/${hex_headpath}{$dualrevreq}"; ?>'));
return false; return false;
}); });
$("#code_diff_history_button").button().click (function() { $("#code_diff_history_button").button().click (function() {
@ -120,7 +128,7 @@ $(function() {
return false; return false;
}); });
$("#code_diff_diff_against_button").button().click (function() { $("#code_diff_diff_against_button").button().click (function() {
$(location).attr ('href', codepot_merge_path("<?php print site_url(); ?>", '<?php print "/code/{$altdiff_view}/{$project->id}/${hex_headpath}{$revreq}"; ?>')); $(location).attr ('href', codepot_merge_path("<?php print site_url(); ?>", '<?php print "/code/{$altdiff_view}/{$project->id}/${hex_headpath}{$dualrevreq}"; ?>'));
return false; return false;
}); });
$("#code_diff_history_against_button").button().click (function() { $("#code_diff_history_against_button").button().click (function() {
@ -352,12 +360,12 @@ $this->load->view (
stristr($http_user_agent, 'Opera') === FALSE); stristr($http_user_agent, 'Opera') === FALSE);
if (!$is_msie) $is_msie = (preg_match ("/^Mozilla.+\(Windows.+\) like Gecko$/", $http_user_agent) !== FALSE); if (!$is_msie) $is_msie = (preg_match ("/^Mozilla.+\(Windows.+\) like Gecko$/", $http_user_agent) !== FALSE);
print '<div style="width: 100%; overflow: hidden;" id="code_diff_result_fullview">'; print '<div style="width: 100%; overflow: hidden;" id="code_diff_full_code_view">';
// //
// SHOW THE OLD FILE // SHOW THE OLD FILE
// //
print ("<div style='float:left; width: 50%; margin: 0; padding: 0;'>"); print ('<div id="code_diff_old_code_view">');
print '<div class="navigator">'; print '<div class="navigator">';
@ -382,8 +390,7 @@ $this->load->view (
print anchor ($nextanc, '<i class="fa fa-arrow-circle-right"></i>'); print anchor ($nextanc, '<i class="fa fa-arrow-circle-right"></i>');
print "</div>"; // navigator print "</div>"; // navigator
//print "<pre class='prettyprint lang-{$fileext}' style='width: 100%;' id='code_diff_result_fulldiffold'>"; print '<pre id="code_diff_old_code" class="line-numbered">';
print '<pre style="width: 100%;" id="code_diff_result_fulldiffold" class="line-numbered">';
print '<span class="line-number-block">'; print '<span class="line-number-block">';
$actual_line_no = 1; $actual_line_no = 1;
@ -462,7 +469,7 @@ $this->load->view (
// //
// SHOW THE NEW FILE // SHOW THE NEW FILE
// //
print ("<div style='float:left; width: 50%; margin: 0; padding: 0;'>"); print ('<div id="code_diff_new_code_view">');
print '<div class="navigator">'; print '<div class="navigator">';
@ -486,8 +493,7 @@ $this->load->view (
print anchor ($nextanc, '<i class="fa fa-arrow-circle-right"></i>'); print anchor ($nextanc, '<i class="fa fa-arrow-circle-right"></i>');
print "</div>"; // navigator print "</div>"; // navigator
//print "<pre class='prettyprint lang-{$fileext}' style='width: 100%;' id='code_diff_result_fulldiffnew'>"; print '<pre id="code_diff_new_code" class="line-numbered">';
print '<pre style="width: 100%;" id="code_diff_result_fulldiffnew" class="line-numbered">';
print '<span class="line-number-block">'; print '<span class="line-number-block">';
$actual_line_no = 1; $actual_line_no = 1;

129
codepot/src/css/code.css
View File

@ -17,7 +17,7 @@
#code_file_result_code, #code_file_result_code,
#code_blame_result_code_container { #code_blame_result_code_container {
border: none; border: none;
line-height: 1.3em; line-height: 1.2em;
} }
#code_blame_result_code_author { #code_blame_result_code_author {
@ -36,19 +36,6 @@
height: auto; height: auto;
} }
#code_diff_metadata_container {
margin: 0;
padding: 0;
}
#code_diff_metadata,
#code_diff_metadata_against {
width: 50%;
float: left;
margin: 0;
padding: 0;
}
#code_folder_metadata_header, #code_folder_metadata_header,
#code_file_metadata_header, #code_file_metadata_header,
#code_blame_metadata_header, #code_blame_metadata_header,
@ -114,6 +101,11 @@
margin: 0; margin: 0;
} }
#code_diff_metadata_body,
#code_diff_metadata_against_body {
border: none;
}
#code_folder_metadata_body ul, #code_folder_metadata_body ul,
#code_file_metadata_body ul, #code_file_metadata_body ul,
#code_blame_metadata_body ul { #code_blame_metadata_body ul {
@ -204,7 +196,7 @@
-o-tab-size: 5; -o-tab-size: 5;
font-size: 1em; font-size: 1em;
line-height: 1.3em; line-height: 1.2em;
position: absolute !important; position: absolute !important;
/*top: 300; /*top: 300;
@ -251,7 +243,7 @@
* project source revision view * project source revision view
*-----------------------------------------------*/ *-----------------------------------------------*/
#code_revision_metadata_text { #code_revision_metadata_text {
line-height: 1.3em; line-height: 1.2em;
padding: 0 0.2em 0 0.2em; padding: 0 0.2em 0 0.2em;
} }
@ -332,95 +324,66 @@
/*----------------------------------------------- /*-----------------------------------------------
* project source diff view * project source diff view
*-----------------------------------------------*/ *-----------------------------------------------*/
#code_diff_result_table {
border: 0;
}
#code_diff_result_table tr.diff td pre { #code_diff_metadata_container {
background-color: inherit;
border: 0;
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%;
} }
#code_diff_result_table tr.diff td.diff { #code_diff_metadata,
padding: 0; #code_diff_metadata_against {
padding-left:22px; width: 50%;
float: left;
margin: 0; margin: 0;
padding: 0.1em;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
} }
#code_diff_result_table tr.diff td.diffrow { #code_diff_old_code,
font-style: italic; #code_diff_new_code {
font-weight: bold;
}
#code_diff_result_table tr.diff td.diffadded {
border:1px solid #cdf0cd;
background-color:#ddffdd;
background-image:url(images/bullet_add.png);
background-repeat:no-repeat;
background-position: 2px 50%;
padding: 0;
padding-left:22px;
margin: 0;
}
#code_diff_result_table tr.diff td.diffdeleted {
border:1px solid #e8d4bc;
background-color:#f8e4cc;
background-image:url(images/bullet_delete.png);
background-position: 2px 50%;
background-repeat:no-repeat;
padding: 0;
padding-left:22px;
margin: 0;
}
#code_diff_result_table tr.diff td.diffchanged {
border:1px solid #f0f0bc;
background-color:#ffffcc;
background-image:url(images/bullet_yellow.png);
background-repeat:no-repeat;
background-position: 2px 50%;
padding: 0;
padding-left:22px;
margin: 0;
}
#code_diff_result_fulldiffold {
border: none; border: none;
/*padding-left: 10px; float; left;
background: #F8F8FA;*/ margin: 0;
padding-left: 1px; padding: 0;
line-height: 1.3em; line-height: 1.2em;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
} }
#code_diff_result_fulldiffnew { #code_diff_old_code_view,
border: none; #code_diff_new_code_view {
/*padding-left: 10px;*/ width: 50%;
background: #FEF8F8; float: left;
padding-left: 1px; margin: 0;
line-height: 1.3em; padding: 0.1em;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
} }
#code_diff_result_fullview .navigator { #code_diff_full_code_view .navigator {
padding: 0.5em 0.8em 0.5em 0.8em; padding: 0.5em 0.8em 0.5em 0.8em;
font-weight: bold; font-weight: bold;
text-align: left; text-align: left;
color: #1C94C4; color: #1C94C4;
background-color: #E5ECF9; background-color: #E5ECF9;
white-space: nowrap; white-space: nowrap;
font-size: 0.9em;
} }
#code_diff_result_fullview .diff { #code_diff_full_code_view .diff {
background-position: 2px 50%; background-position: 2px 50%;
padding: 0; padding: 0;
padding-left:15px; padding-left:15px;
margin: 0; margin: 0;
} }
#code_diff_full_code_view .diffadded {
#code_diff_result_fullview .diffadded {
border:1px solid #cdf0cd; border:1px solid #cdf0cd;
background-color:#ddffdd; background-color:#ddffdd;
background-image:url(images/bullet_add.png); background-image:url(images/bullet_add.png);
@ -432,7 +395,7 @@
margin: 0; margin: 0;
} }
#code_diff_result_fullview .diffdeleted { #code_diff_full_code_view .diffdeleted {
border:1px solid #e8d4bc; border:1px solid #e8d4bc;
background-color:#f8e4cc; background-color:#f8e4cc;
background-image:url(images/bullet_delete.png); background-image:url(images/bullet_delete.png);
@ -444,7 +407,7 @@
margin: 0; margin: 0;
} }
#code_diff_result_fullview .diffchanged { #code_diff_full_code_view .diffchanged {
border:1px solid #f0f0bc; border:1px solid #f0f0bc;
background-color:#ffffcc; background-color:#ffffcc;
background-image:url(images/bullet_yellow.png); background-image:url(images/bullet_yellow.png);
@ -456,16 +419,16 @@
margin: 0; margin: 0;
} }
#code_diff_result_fullview .diffchangedold { #code_diff_full_code_view .diffchangedold {
text-decoration: line-through; text-decoration: line-through;
} }
#code_diff_result_fullview .diffchangednew { #code_diff_full_code_view .diffchangednew {
/*background-color:#ffff00;*/ /*background-color:#ffff00;*/
text-decoration: underline; text-decoration: underline;
} }
#code_diff_result_fullview .diffrow { #code_diff_full_code_view .diffrow {
font-size: 1.2em; font-size: 1.2em;
padding: 0.2em 0.2em 0.2em 0.2em; padding: 0.2em 0.2em 0.2em 0.2em;
font-weight: bold; font-weight: bold;