From 4b86f01b15321c8a802d9c0ffaec4cc36be4de7d Mon Sep 17 00:00:00 2001 From: "Gerber, Mike" Date: Fri, 12 Jun 2020 15:56:01 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20dinglehopper:=20Use=20a=20Bootst?= =?UTF-8?q?rap=20tooltip=20for=20the=20segment=20id?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- qurator/dinglehopper/cli.py | 10 ++++++---- qurator/dinglehopper/templates/report.html.j2 | 7 ------- qurator/dinglehopper/templates/report.html.js | 16 ++++++---------- 3 files changed, 12 insertions(+), 21 deletions(-) diff --git a/qurator/dinglehopper/cli.py b/qurator/dinglehopper/cli.py index 13543a5..ea0c9bb 100644 --- a/qurator/dinglehopper/cli.py +++ b/qurator/dinglehopper/cli.py @@ -22,9 +22,11 @@ def gen_diff_report(gt_in, ocr_in, css_prefix, joiner, none): html_t = escape(t) html_custom_attrs = "" - # XXX must sanitize id_ or do we trust the XML? + + # Set Bootstrap tooltip to the segment id if id_: - html_custom_attrs = 'data-segment-id="{}"'.format(id_) + html_custom_attrs += 'data-toggle="tooltip" title="{}"'.format(id_) + # XXX must sanitize id_ or do we trust the XML? if css_classes: return '{html_t}'.format(css_classes=css_classes, html_t=html_t, html_custom_attrs=html_custom_attrs) @@ -70,8 +72,8 @@ def gen_diff_report(gt_in, ocr_in, css_prefix, joiner, none): return \ '''
-
{}
-
{}
+
{}
+
{}
'''.format(gtx, ocrx) diff --git a/qurator/dinglehopper/templates/report.html.j2 b/qurator/dinglehopper/templates/report.html.j2 index f829ef8..0c2f464 100644 --- a/qurator/dinglehopper/templates/report.html.j2 +++ b/qurator/dinglehopper/templates/report.html.j2 @@ -26,13 +26,6 @@ border: 2px solid; border-radius: 5px; } - .status-box { - position: fixed; - background: grey; - color: white; - width: 100%; - height: 2em; - } diff --git a/qurator/dinglehopper/templates/report.html.js b/qurator/dinglehopper/templates/report.html.js index 0baaa30..4c2ba28 100644 --- a/qurator/dinglehopper/templates/report.html.js +++ b/qurator/dinglehopper/templates/report.html.js @@ -1,19 +1,15 @@ function find_diff_class(classes) { - return classes.split(/\s+/).find(x => x.match(/.diff\d.*/)); + return $('.' + classes.split(/\s+/).find(x => x.match(/.diff\d.*/))); } $(document).ready(function() { - $('.diff').mouseover(function() { - let c = find_diff_class($(this).attr('class')); - $('.' + c).addClass('diff-highlight'); + /* Enable Bootstrap tooltips */ + $('[data-toggle="tooltip"]').tooltip(); - segment_id = $(this).attr('data-segment-id'); - $(this).closest('div').find('.status-box').text(segment_id); + $('.diff').mouseover(function() { + find_diff_class($(this).attr('class')).addClass('diff-highlight'); }); $('.diff').mouseout(function() { - let c = find_diff_class($(this).attr('class')); - $('.' + c).removeClass('diff-highlight'); - - $(this).closest('div').find('.status-box').text(''); + find_diff_class($(this).attr('class')).removeClass('diff-highlight'); }); });