🚧 dinglehopper: Use a Bootstrap tooltip for the segment id

4 years ago · 257e4986cc
parent a320d5fd8f
commit 257e4986cc
3 changed files with 12 additions and 21 deletions
--- 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 '<span class="{css_classes}" {html_custom_attrs}>{html_t}</span>'.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 \
        '''
        <div class="row">
-           <div class="col-md-6 gt"><div class="status-box"></div>{}</div>
-           <div class="col-md-6 ocr"><div class="status-box"></div>{}</div>
+           <div class="col-md-6 gt">{}</div>
+           <div class="col-md-6 ocr">{}</div>
        </div>
        '''.format(gtx, ocrx)

--- 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;
-    }
    </style>
 </head>
 <body>
--- 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');
    });
 });