kallithea Changeset - 59a38ec5ad8b

Changeset - 59a38ec5ad8b

Parent rev.

Child rev.

[Not reviewed]

default

0 2 0

Mads Kiilerich - 9 years ago 2016-08-12 03:04:48
madski@unity3d.com

diff: tweak mergely side-by-side diff view

Expand diff pane to match view port and avoid extra scroll bars.

2 files changed with 17 insertions and 3 deletions:

kallithea/public/css/style.css

kallithea/templates/files/diff_2way.html

0 comments (0 inline, 0 general)

kallithea/public/css/style.css

➞

Show inline comments

@@ @@ -2764,384 +2764,395 @@ BIN_FILENODE = 6 @@
 .booktag {
     border-color: #46A546;
     color: #46A546;
+}
 .tagtag {
     border-color: #62cffc;
     color: #62cffc;
+}
 .bumpedtag,
 .divergenttag,
 .extincttag,
 .unstabletag {
     background-color: #f00;
     border-color: #600;
     color: #fff;
+}
 .phasetag {
     border-color: #1F14CE;
     color: #1F14CE;
+}
 .logtags .branchtag a:hover,
 .logtags .branchtag a,
 .branchtag a,
 .branchtag a:hover {
     text-decoration: none;
     color: inherit;
+}
 .logtags .tagtag {
     padding: 1px 3px 1px 3px;
     background-color: #62cffc;
     font-size: 10px;
     color: #ffffff;
     white-space: nowrap;
     border-radius: 3px;
+}
 .tagtag a,
 .tagtag a:hover,
 .logtags .tagtag a,
 .logtags .tagtag a:hover {
     text-decoration: none;
     color: inherit;
+}
 .logbooks .booktag,
 .logbooks .booktag,
 .logtags .booktag,
 .logtags .booktag {
     padding: 1px 3px 1px 3px;
     background-color: #46A546;
     font-size: 10px;
     color: #ffffff;
     white-space: nowrap;
     border-radius: 3px;
+}
 .logbooks .booktag,
 .logbooks .booktag a,
 .right .logtags .booktag,
 .logtags .booktag a {
     color: #ffffff;
+}
 .logbooks .booktag,
 .logbooks .booktag a:hover,
 .logtags .booktag,
 .logtags .booktag a:hover,
 .booktag a,
 .booktag a:hover {
     text-decoration: none;
     color: inherit;
+}
 div.browserblock {
     overflow: hidden;
     border: 1px solid #ccc;
     background: #f8f8f8;
     font-size: 100%;
     line-height: 125%;
     padding: 0;
     border-radius: 6px 6px 0px 0px;
+}
 div.browserblock .browser-header {
     background: #FFF;
     padding: 10px 0px 15px 0px;
     width: 100%;
+}
 div.browserblock .browser-nav {
     float: left
+}
 div.browserblock .browser-branch {
     float: left;
+}
 div.browserblock .browser-branch label {
     color: #4A4A4A;
     vertical-align: text-top;
     padding-right: 2px;
+}
 div.browserblock .browser-header span {
     margin-left: 5px;
     font-weight: 700;
+}
 div.browserblock .browser-search {
     clear: both;
     padding: 8px 8px 0px 5px;
     height: 20px;
+}
 div.browserblock #node_filter_box {
+}
 div.browserblock .search_activate {
     float: left
+}
 div.browserblock .add_node {
     float: left;
     padding-left: 5px;
+}
 div.browserblock .search_activate a:hover,
 div.browserblock .add_node a:hover {
     text-decoration: none !important;
+}
 div.browserblock .browser-body {
     background: #EEE;
     border-top: 1px solid #CCC;
+}
 table.code-browser {
     border-collapse: collapse;
     width: 100%;
+}
 table.code-browser tr {
     margin: 3px;
+}
 table.code-browser thead th {
     background-color: #EEE;
     height: 20px;
     font-size: 1.1em;
     font-weight: 700;
     text-align: left;
     padding-left: 10px;
+}
 table.code-browser tbody td {
     padding-left: 10px;
     height: 20px;
+}
 table.code-browser .browser-file {
     height: 16px;
     padding-left: 5px;
     text-align: left;
+}
 .diffblock .changeset_header {
     height: 16px;
+}
 .diffblock .changeset_file {
     float: left;
+}
 .diffblock .diff-menu-wrapper {
     float: left;
+}
 .diffblock .diff-menu {
     position: absolute;
     background: none repeat scroll 0 0 #FFFFFF;
     border-color: #577632 #666666 #666666;
     border-right: 1px solid #666666;
     border-style: solid solid solid;
     border-width: 1px;
     box-shadow: 2px 8px 4px rgba(0, 0, 0, 0.2);
     margin-top: 5px;
     margin-left: 1px;
+}
 .diffblock .diff-actions {
     padding: 2px 0px 0px 2px;
     float: left;
+}
 .diffblock.twoway {
     overflow: visible;
+}
 .diffblock.twoway .diff-actions {
     padding-top: 0;
+}
 .diffblock.twoway .diff-actions label input {
     margin: -5px 5px 0 10px;
     position: relative;
     top: 3px;
+}
 .diffblock .diff-menu ul li {
     padding: 0px 0px 0px 0px !important;
+}
 .diffblock .diff-menu ul li a {
     display: block;
     padding: 3px 8px 3px 8px !important;
+}
 .diffblock .diff-menu ul li a:hover {
     text-decoration: none;
     background-color: #EEEEEE;
+}
 table.code-browser .browser-dir {
     height: 16px;
     padding-left: 5px;
     text-align: left;
+}
 table.code-browser .submodule-dir {
     height: 16px;
     padding-left: 5px;
     text-align: left;
+}
 /* add some padding to the right of the file, folder, or submodule icon and
 before the text */
 table.code-browser i[class^='icon-'] {
     padding-right: .3em;
+}
 .box .search {
     clear: both;
     overflow: hidden;
     margin: 0;
     padding: 0 20px 10px;
+}
 .box .search div.search_path {
     background: none repeat scroll 0 0 #EEE;
     border: 1px solid #CCC;
     color: blue;
     margin-bottom: 10px;
     padding: 10px 0;
+}
 .box .search div.search_path div.link {
     font-weight: 700;
     margin-left: 25px;
+}
 .box .search div.search_path div.link a {
     color: #577632;
     cursor: pointer;
     text-decoration: none;
+}
 #path_unlock {
     color: red;
     font-size: 1.2em;
     padding-left: 4px;
+}
 .info_box span {
     margin-left: 3px;
     margin-right: 3px;
+}
 .info_box .rev {
     color: #577632;
     font-size: 1.6em;
     font-weight: bold;
     vertical-align: sub;
+}
 .info_box input#at_rev,
 .info_box input#size {
     background: #FFF;
     border-top: 1px solid #b3b3b3;
     border-left: 1px solid #b3b3b3;
     border-right: 1px solid #eaeaea;
     border-bottom: 1px solid #eaeaea;
     color: #000;
     font-size: 12px;
     margin: 0;
     padding: 1px 5px 1px;
+}
 .info_box input#view {
     text-align: center;
     padding: 4px 3px 2px 2px;
+}
 .info_box_elem {
     display: inline-block;
     padding: 0 2px;
+}
 .yui-overlay, .yui-panel-container {
     visibility: hidden;
     position: absolute;
     z-index: 2;
+}
 #tip-box {
     position: absolute;
     background-color: #FFF;
     border: 2px solid #577632;
     font: 100% sans-serif;
     width: auto;
     opacity: 1;
     padding: 8px;
     white-space: pre-wrap;
     border-radius: 8px 8px 8px 8px;
     box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
     z-index: 100000;
+}
 .hl-tip-box {
     z-index: 1;
     position: absolute;
     color: #666;
     background-color: #FFF;
     border: 2px solid #577632;
     font: 100% sans-serif;
     width: auto;
     opacity: 1;
     padding: 8px;
     white-space: pre-wrap;
     border-radius: 8px 8px 8px 8px;
     box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
+}
 .mentions-container {
     width: 90% !important;
+}
 .mentions-container .yui-ac-content {
     width: 100% !important;
+}
 .ac {
     vertical-align: top;
+}
 .ac .yui-ac {
     position: inherit;
     font-size: 100%;
+}
 .ac .perm_ac {
     width: 20em;
+}
 .ac .yui-ac-input {
     width: 100%;
+}
 .ac .yui-ac-container {
     position: absolute;
     top: 1.6em;
     width: auto;
+}
 .ac .yui-ac-content {
     position: absolute;
     border: 1px solid gray;
     background: #fff;
     z-index: 9050;
+}
 .ac .yui-ac-shadow {
     position: absolute;
     width: 100%;
     background: #000;
     opacity: .10;
     z-index: 9049;
     margin: .3em;
+}
 .ac .yui-ac-content ul {
     width: 100%;
     margin: 0;
     padding: 0;
     z-index: 9050;
+}
 .ac .yui-ac-content li {
     cursor: default;
     white-space: nowrap;
     margin: 0;
     padding: 2px 5px;

kallithea/templates/files/diff_2way.html

➞

Show inline comments

 ## -*- coding: utf-8 -*-
 <%inherit file="/base/base.html"/>
 <%block name="js_extra">
   <script type="text/javascript" src="${h.url('/codemirror/lib/codemirror.js')}"></script>
   <script type="text/javascript" src="${h.url('/js/mergely.js')}"></script>
 </%block>
 <%block name="css_extra">
   <link rel="stylesheet" type="text/css" href="${h.url('/codemirror/lib/codemirror.css')}"/>
   <link rel="stylesheet" type="text/css" href="${h.url('/css/mergely.css')}"/>
 </%block>
 <%block name="title">
     ${_('%s File side-by-side diff') % c.repo_name}
 </%block>
 <%def name="breadcrumbs_links()">
     ${_('File diff')} ${h.show_id(c.changeset_1)} &rarr; ${h.show_id(c.changeset_2)}
 </%def>
 <%block name="header_menu">
     ${self.menu('repositories')}
 </%block>
 <%def name="main()">
 ${self.repo_context_bar('changelog')}
 <div class="box">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
     </div>
     <div class="diff-container" style="overflow-x: hidden">
         <div class="diffblock comm" style="margin:3px; padding:1px">
     <div class="diff-container">
         <div class="diffblock comm twoway">
             <div class="code-header">
                 <div class="changeset_header">
                     <div class="changeset_file">
                         ${h.link_to(h.safe_unicode(c.node1.path),h.url('files_home',repo_name=c.repo_name,
                         revision=c.cs2.raw_id,f_path=h.safe_unicode(c.node1.path)))}
                     </div>
                     <div class="diff-actions">
                       <a href="${h.url('files_diff_home',repo_name=c.repo_name,f_path=h.safe_unicode(c.node1.path),diff2=c.cs2.raw_id,diff1=c.cs1.raw_id,diff='diff',fulldiff=1)}" class="tooltip" title="${_('Show full diff for this file')}">
                           <i class="icon-file-code"></i>
                       </a>
                       <a href="${h.url('files_diff_2way_home',repo_name=c.repo_name,f_path=h.safe_unicode(c.node1.path),diff2=c.cs2.raw_id,diff1=c.cs1.raw_id,diff='diff',fulldiff=1)}" class="tooltip" title="${_('Show full side-by-side diff for this file')}">
                           <i class="icon-docs"></i>
                       </a>
                       <a href="${h.url('files_diff_home',repo_name=c.repo_name,f_path=h.safe_unicode(c.node1.path),diff2=c.cs2.raw_id,diff1=c.cs1.raw_id,diff='raw')}" class="tooltip" title="${_('Raw diff')}">
                           <i class="icon-diff"></i>
                       </a>
                       <a href="${h.url('files_diff_home',repo_name=c.repo_name,f_path=h.safe_unicode(c.node1.path),diff2=c.cs2.raw_id,diff1=c.cs1.raw_id,diff='download')}" class="tooltip" title="${_('Download diff')}">
                           <i class="icon-floppy"></i>
                       </a>
                       ${h.checkbox('ignorews', label=_('Ignore whitespace'))}
                       ${h.checkbox('edit_mode', label=_('Edit'))}
                     </div>
                 </div>
             </div>
             <div id="compare"></div>
         </div>
     </div>
 <script>
 var orig1_url = '${h.url('files_raw_home',repo_name=c.repo_name,f_path=h.safe_unicode(c.node1.path),revision=c.cs1.raw_id)}';
 var orig2_url = '${h.url('files_raw_home',repo_name=c.repo_name,f_path=h.safe_unicode(c.node2.path),revision=c.cs2.raw_id)}';
 $(document).ready(function () {
     $('#compare').mergely({
         width: 'auto',
-        height: '600',
+        height: $(window).height() - $('#compare').offset().top - $('#footer').height() - 35,
         fgcolor: {a:'#ddffdd',c:'#cccccc',d:'#ffdddd'},
         bgcolor: '#fff',
         viewport: true,
         cmsettings: {mode: 'text/plain', readOnly: true, lineWrapping: false, lineNumbers: true},
         lhs: function(setValue) {
             if("${c.node1.is_binary}" == "True"){
                 setValue('Binary file');
+            }
             else{
                 $.ajax(orig1_url, {dataType: 'text', success: setValue});
+            }
         },
         rhs: function(setValue) {
             if("${c.node2.is_binary}" == "True"){
                 setValue('Binary file');
+            }
             else{
                 $.ajax(orig2_url, {dataType: 'text', success: setValue});
+            }
+        }
     });
     // recompute width - avoids overflow and horizontal scrollbar
     $('#compare').mergely('resize');
     $('#ignorews').change(function(e){
         var val = e.currentTarget.checked;
         $('#compare').mergely('options', {ignorews: val});
         $('#compare').mergely('update');
     });
     $('#edit_mode').change(function(e){
         var val = !e.currentTarget.checked;
         $('#compare').mergely('cm', 'lhs').setOption('readOnly', val);
         $('#compare').mergely('cm', 'rhs').setOption('readOnly', val);
         $('#compare').mergely('update');
     });
 });
 </script>
 </div>
 </%def>

0 comments (0 inline, 0 general)