grim/hgkeeper-theme

Update the diff and file templates to use css counters for line numbers instead of injecting html elements. Also change the color for added lines to blue to help those with red-green colorblindness.
draft
2020-05-05, Gary Kramlich
b1bad2399322
Parents d10c931f39d1
Children 55ba3bf41b03
Update the diff and file templates to use css counters for line numbers instead of injecting html elements. Also change the color for added lines to blue to help those with red-green colorblindness.
7 files changed, 108 insertions(+), 66 deletions(-)
  • +1 -1
    templates/hgkeeper/diff/block.tmpl
  • +1 -1
    templates/hgkeeper/diff/lineat.tmpl
  • +1 -4
    templates/hgkeeper/diff/lineminus.tmpl
  • +1 -4
    templates/hgkeeper/diff/lineplus.tmpl
  • +2 -2
    templates/hgkeeper/file/revision.tmpl
  • +2 -2
    templates/hgkeeper/map
  • +100 -52
    templates/static/hgk/css/hgkeeper.css
    • --- a/templates/hgkeeper/diff/block.tmpl Tue May 05 00:30:06 2020 -0500
    +++ b/templates/hgkeeper/diff/block.tmpl Tue May 05 00:43:14 2020 -0500
    @@ -1,1 +1,1 @@
    -<div class="card mt-2 diff"><div class="card-header diff-header" data-changetype="{ifeq(changetype, 'added', 'added {fileb}', ifeq(changetype, 'removed', 'removed {filea}', ifeq(changetype, 'renamed', 'renamed {filea} to {fileb}', 'modified {filea}')))}"></div><div class="d-inline-block" style="min-width: 100%">{lines}</div></div>
    \ No newline at end of file
    +<div class="card mt-2 hgk-diff"><div class="card-header diff-header" data-changetype="{ifeq(changetype, 'added', 'added {fileb}', ifeq(changetype, 'removed', 'removed {filea}', ifeq(changetype, 'renamed', 'renamed {filea} to {fileb}', 'modified {filea}')))}"></div>{lines}</div>
    \ No newline at end of file
    --- a/templates/hgkeeper/diff/lineat.tmpl Tue May 05 00:30:06 2020 -0500
    +++ b/templates/hgkeeper/diff/lineat.tmpl Tue May 05 00:43:14 2020 -0500
    @@ -1,1 +1,1 @@
    -<div class="d-flex">{difflineanchors}<div class="offset">{strip(line|escape, '\r\n')}</div></div>
    \ No newline at end of file
    +<div class="offset" style="counter-reset: linea {linea - 1} lineb {lineb - 1}"><span class="hgk-linenumber"></span><span class="hgk-linenumber"></span>{strip(line|escape, '\r\n')}</div>
    \ No newline at end of file
    --- a/templates/hgkeeper/diff/lineminus.tmpl Tue May 05 00:30:06 2020 -0500
    +++ b/templates/hgkeeper/diff/lineminus.tmpl Tue May 05 00:43:14 2020 -0500
    @@ -1,4 +1,1 @@
    -<div class="d-flex">
    - {difflineanchors}
    - <del id="{lineid}">{strip(line|escape, '\r\n')}</del>
    -</div>
    \ No newline at end of file
    +<div class="a">{ifeq(linea, 0, '<span class="hgk-linenumber"></span>', '<a class="a" href="#"></a>')}<span class="hgk-linenumber"></span><del id="{lineid}">{strip(line|escape, '\r\n')}</del></div>
    --- a/templates/hgkeeper/diff/lineplus.tmpl Tue May 05 00:30:06 2020 -0500
    +++ b/templates/hgkeeper/diff/lineplus.tmpl Tue May 05 00:43:14 2020 -0500
    @@ -1,4 +1,1 @@
    -<div class="d-flex">
    - {difflineanchors}
    - <ins id="{lineid}">{strip(line|escape, '\r\n')}</ins>
    -</div>
    \ No newline at end of file
    +<div class="b"><span class="hgk-linenumber"></span>{ifeq(lineb, 0, '<span class="hgk-linenumber"></span>', '<a class="b" href="#"></a>')}<ins id="{lineid}">{strip(line|escape, '\r\n')}</ins></div>
    \ No newline at end of file
    --- a/templates/hgkeeper/file/revision.tmpl Tue May 05 00:30:06 2020 -0500
    +++ b/templates/hgkeeper/file/revision.tmpl Tue May 05 00:43:14 2020 -0500
    @@ -6,8 +6,8 @@
    </div>
    </div>
    -<div class="card mt-2 file">
    - <div class="d-inline-block" style="min-width: 100%">
    +<div class="card mt-2">
    + <div class="hgk-file" style="min-width: 100%">
    {text%fileline}
    </div>
    </div>
    --- a/templates/hgkeeper/map Tue May 05 00:30:06 2020 -0500
    +++ b/templates/hgkeeper/map Tue May 05 00:43:14 2020 -0500
    @@ -48,7 +48,7 @@
    changesetnodeentry = changeset/nodeentry.tmpl
    diffblock = diff/block.tmpl
    -diffline = diff/line.tmpl
    +diffline = '<div class="unchanged"><a class="a" href="#"></a><a class="b" href="#"></a>{strip(line|escape, '\r\n')}</div>'
    difflineanchors = diff/lineanchors.tmpl
    difflineat = diff/lineat.tmpl
    difflineminus = diff/lineminus.tmpl
    @@ -56,6 +56,6 @@
    diffstatlink = diff/stat.tmpl
    diffstatnolink = diff/stat.tmpl
    -fileline = '<div class="d-flex"><a href="#{lineid}" class="line-number" data-line-number="{linenumber}"></a><div id="{lineid}" class="line">{strip(line|escape, '\r\n')}</div></div>'
    +fileline = '<div id="{lineid}"><a href="#{lineid}"></a>{strip(line|escape, '\r\n')}</div>'
    filelog = file/log.tmpl
    filerevision = file/revision.tmpl
    --- a/templates/static/hgk/css/hgkeeper.css Tue May 05 00:30:06 2020 -0500
    +++ b/templates/static/hgk/css/hgkeeper.css Tue May 05 00:43:14 2020 -0500
    @@ -9,29 +9,119 @@
    overflow-x: auto;
    }
    -.diff-header::after {
    - content: attr(data-changetype);
    +/******************************************************************************
    + * File Classes
    + *****************************************************************************/
    +
    +.hgk-file {
    + font-family: monospace;
    + overflow-x: auto;
    + overflow-y: visible;
    +
    + counter-reset: lineno
    +}
    +
    +.hgk-file div {
    + white-space: pre;
    + counter-increment: lineno;
    +}
    +
    +.hgk-file a {
    + display: inline-block;
    + text-align: right;
    + min-width: 6ch;
    + padding-right: 1ch;
    +}
    +
    +.hgk-file a::before {
    + content: counter(lineno);
    +}
    +
    +.hgk-file div:target {
    + background-color: #686860;
    }
    -.diff ins {
    - color: #235d23;
    - background-color: #7dff7d;
    +/******************************************************************************
    + * Diff Classes
    + *****************************************************************************/
    +.hgk-diff {
    + font-family: monospace;
    + overflow-x: auto;
    + overflow-y: visible;
    +
    + counter-reset: linea 0 lineb 0;
    +}
    +
    +.hgk-diff div.unchanged {
    + display: block;
    + text-decoration: none;
    + white-space: pre;
    +
    + counter-increment: linea lineb;
    +}
    +
    +.hgk-diff div.offset {
    + color: #e800e8;
    +}
    +
    +.hgk-diff div.a {
    + counter-increment: linea;
    +}
    +
    +.hgk-diff div.a del {
    + color: #000000;
    + background-color: #ff8d8d;
    + display: inline-block;
    + text-decoration: none;
    + white-space: pre;
    +}
    +
    +.hgk-diff div.b {
    + counter-increment: lineb;
    +}
    +
    +.hgk-diff div.b ins {
    + color: #000000;
    + background-color: #4fc0d1;
    display: inline-block;
    text-decoration: none;
    white-space: pre;
    flex: 1 1 auto; /* bootstrap flex-fill */
    }
    -.line-number {
    +.hgk-diff div a {
    display: inline-block;
    - width: 5ch;
    + text-align: right;
    + min-width: 6ch;
    + padding-right: 1ch;
    +}
    +
    +.hgk-diff div span.hgk-linenumber,
    +.hgk-diff div a {
    + display: inline-block;
    + min-width: 5ch;
    text-align: right;
    margin-right: 1ch;
    - flex-shrink: 0; /* bootstrap flex-shrink */
    +}
    +
    +.hgk-diff div span.hgk-linenumber {
    + content: " ";
    +}
    +
    +.hgk-diff div a.a::before {
    + content: counter(linea);
    }
    -.line-number::before {
    - content: attr(data-line-number);
    +.hgk-diff div a.b::before {
    + content: counter(lineb);
    +}
    +
    +/******************************************************************************
    + * Other Junk
    + *****************************************************************************/
    +
    +.diff-header::after {
    + content: attr(data-changetype);
    }
    .line {
    @@ -40,48 +130,6 @@
    flex: 1 1 auto; /* boostrap flex-fill */
    }
    -.line::target {
    - background-color: #686860;
    -}
    -
    -.color-added {
    - color: #235d23;
    -}
    -
    -.bg-added {
    - background-color: #7dff7d;
    -}
    -
    -.border-added {
    - border-color: #235d23 !important;
    -}
    -
    -.diff del {
    - color: #8d2323;
    - background-color: #ff8d8d;
    - display: inline-block;
    - text-decoration: none;
    - white-space: pre;
    - flex: 1 1 auto; /* bootstrap flex-fill */
    -}
    -
    -.color-removed {
    - color: #8d2323;
    -}
    -
    -.bg-removed {
    - background-color: #ff8d8d;
    -}
    -
    -.border-removed {
    - border-color: #8d2323 !important;
    -}
    -
    -.diff div.unchanged {
    - display: inline-block;
    - white-space: pre;
    - flex: 1 1 auto; /* bootstrap flex-fill */
    -}
    .diff div.offset {
    color: #e800e8;