kallithea Changeset - 3a139a5500dd

Changeset - 3a139a5500dd

Parent rev.

Child rev.

[Not reviewed]

stable

0 2 0

Andrew Shadura - 11 years ago 2015-05-05 18:13:00
andrew@shadura.me

diff view: improve appearance of line numbers

* display the ellipsis just once and centered
instead of showing in twice in both - and + columns
* expand column width as needed to accomodate longer numbers
(previously, the column width was fixed)
* enable box-sizing: border-box for the number links to
make it easier to set paddings

2 files changed with 13 insertions and 5 deletions:

kallithea/lib/diffs.py

kallithea/public/css/style.css

0 comments (0 inline, 0 general)

kallithea/lib/diffs.py

➞

Show inline comments

@@ @@ -621,48 +621,49 @@ class DiffProcessor(object): @@
         idstring = re.sub(r'\s', "_", '%s' % idstring)
         # Remove everything that is not a hyphen or a member of \w
         idstring = re.sub(r'(?!-)\W', "", idstring).lower()
         return idstring
     def prepare(self, inline_diff=True):
         """
         Prepare the passed udiff for HTML rendering. It'l return a list
         of dicts with diff information
         """
         parsed = self._parser(inline_diff=inline_diff)
         self.parsed = True
         self.parsed_diff = parsed
         return parsed
     def as_raw(self, diff_lines=None):
         """
         Returns raw string diff
         """
         return self._diff
         #return u''.join(imap(self._line_counter, self._diff.splitlines(1)))
     def as_html(self, table_class='code-difftable', line_class='line',
                 old_lineno_class='lineno old', new_lineno_class='lineno new',
                 no_lineno_class='lineno',
                 code_class='code', enable_comments=False, parsed_lines=None):
         """
         Return given diff as html table with customized css classes
         """
         def _link_to_if(condition, label, url):
             """
             Generates a link if condition is meet or just the label if not.
             """
             if condition:
                 return '''<a href="%(url)s">%(label)s</a>''' % {
                     'url': url,
                     'label': label
+                }
             else:
                 return label
         if not self.parsed:
             self.prepare()
         diff_lines = self.parsed_diff
         if parsed_lines:
             diff_lines = parsed_lines
         _html_empty = True
@@ @@ -672,69 +673,73 @@ class DiffProcessor(object): @@
         })
         for diff in diff_lines:
             for line in diff['chunks']:
                 _html_empty = False
                 for change in line:
                     _html.append('''<tr class="%(lc)s %(action)s">\n''' % {
                         'lc': line_class,
                         'action': change['action']
                     })
                     anchor_old_id = ''
                     anchor_new_id = ''
                     anchor_old = "%(filename)s_o%(oldline_no)s" % {
                         'filename': self._safe_id(diff['filename']),
                         'oldline_no': change['old_lineno']
+                    }
                     anchor_new = "%(filename)s_n%(oldline_no)s" % {
                         'filename': self._safe_id(diff['filename']),
                         'oldline_no': change['new_lineno']
+                    }
                     cond_old = (change['old_lineno'] != '...' and
                                 change['old_lineno'])
                     cond_new = (change['new_lineno'] != '...' and
                                 change['new_lineno'])
                     no_lineno = (change['old_lineno'] == '...' and
                                  change['new_lineno'] == '...')
                     if cond_old:
                         anchor_old_id = 'id="%s"' % anchor_old
                     if cond_new:
                         anchor_new_id = 'id="%s"' % anchor_new
                     ###########################################################
                     # OLD LINE NUMBER
                     ###########################################################
                     _html.append('''\t<td %(a_id)s class="%(olc)s">''' % {
+                    _html.append('''\t<td %(a_id)s class="%(olc)s" %(colspan)s>''' % {
                         'a_id': anchor_old_id,
                         'olc': old_lineno_class
                         'olc': no_lineno_class if no_lineno else old_lineno_class,
                         'colspan': 'colspan="2"' if no_lineno else ''
                     })
                     _html.append('''%(link)s''' % {
                         'link': _link_to_if(True, change['old_lineno'],
                                             '#%s' % anchor_old)
                     })
                     _html.append('''</td>\n''')
                     ###########################################################
                     # NEW LINE NUMBER
                     ###########################################################
                     if not no_lineno:
                     _html.append('''\t<td %(a_id)s class="%(nlc)s">''' % {
                         'a_id': anchor_new_id,
                         'nlc': new_lineno_class
                     })
                     _html.append('''%(link)s''' % {
                         'link': _link_to_if(True, change['new_lineno'],
                                             '#%s' % anchor_new)
                     })
                     _html.append('''</td>\n''')
                     ###########################################################
                     # CODE
                     ###########################################################
                     comments = '' if enable_comments else 'no-comment'
                     _html.append('''\t<td class="%(cc)s %(inc)s">''' % {
                         'cc': code_class,
                         'inc': comments
                     })
                     _html.append('''\n\t\t<div class="add-bubble"><div>&nbsp;</div></div><pre>%(code)s</pre>\n''' % {
                         'code': change['line']
                     })
                     _html.append('''\t</td>''')
                     _html.append('''\n</tr>\n''')

kallithea/public/css/style.css

➞

Show inline comments

@@ @@ -4880,71 +4880,74 @@ table.code-difftable td.code pre u:befor @@
     display: inline-block;
     width: 0;
+}
 table.code-highlighttable div.code-highlight pre u.cr:before,
 table.code-difftable td.code pre u.cr:before {
     content: "\21a4";
     display: inline-block;
     color: rgba(0,0,0,0.5);
+}
 table.code-highlighttable div.code-highlight pre u,
 table.code-difftable td.code pre u {
     color: rgba(0,0,0,0.15);
+}
 table.code-highlighttable div.code-highlight pre i,
 table.code-difftable td.code pre i {
     border-style: solid;
     border-left-width: 1px;
     color: rgba(0,0,0,0.5);
+}
 /** LINE NUMBERS **/
 table.code-difftable .lineno {
     padding-left: 2px;
     padding-right: 2px !important;
     text-align: right;
     width: 30px;
     -moz-user-select: none;
     -webkit-user-select: none;
     border-right: 1px solid #CCC !important;
     border-left: 0px solid #CCC !important;
     border-top: 0px solid #CCC !important;
     border-bottom: none !important;
     vertical-align: middle !important;
     text-align: center;
+}
 table.code-difftable .lineno.new {
     text-align: right;
+}
 table.code-difftable .lineno.old {
     text-align: right;
+}
 table.code-difftable .lineno a {
     color: #aaa !important;
     font: 11px Consolas, Monaco, Inconsolata, Liberation Mono, monospace !important;
     letter-spacing: -1px;
-    text-align: right;
+    padding-left: 10px;
     padding-right: 8px;
     box-sizing: border-box;
     cursor: pointer;
     display: block;
-    width: 30px;
+    width: 100%;
+}
 table.code-difftable .lineno-inline {
     background: none repeat scroll 0 0 #FFF !important;
     padding-left: 2px;
     padding-right: 2px;
     text-align: right;
     width: 30px;
     -moz-user-select: none;
     -webkit-user-select: none;
+}
 /** CODE **/
 table.code-difftable .code {
     display: block;
     width: 100%;
+}
 table.code-difftable .code td {
     margin: 0;
     padding: 0;
+}
 table.code-difftable .code pre {
     margin: 0 0 0 12px;
     padding: 0;

0 comments (0 inline, 0 general)