diff --git a/static/css/oml.css b/static/css/oml.css index aae24a4..6ab6c64 100644 --- a/static/css/oml.css +++ b/static/css/oml.css @@ -1,16 +1,28 @@ +.OMLQuoteBox { + position: relative; +} .OMLQuote { + position: relative; padding: 8px; color: rgb(0, 0, 0); - background-color: rgb(255, 255, 255); font-family: Georgia, Palatino, DejaVu Serif, Book Antiqua, Palatino Linotype, Times New Roman, serif; font-size: 14px; line-height: 21px; } -.OMLAnnotation.selected .OMLQuote { +.OMLAnnotation .OMLQuoteBackground { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: rgb(255, 255, 255); +} +.OMLAnnotation.selected .OMLQuoteBackground { background-color: rgb(128, 192, 255); } + .OMLAnnotation .OxPlaceholder { display: none; } diff --git a/static/js/annotation.js b/static/js/annotation.js index ee77fc3..5fcc4e8 100644 --- a/static/js/annotation.js +++ b/static/js/annotation.js @@ -1,18 +1,24 @@ 'use strict'; oml.ui.annotation = function(annotation, $iframe) { + var $quotetext = Ox.Element() + .addClass('OxSelectable OMLQuote') + .html(Ox.encodeHTMLEntities(annotation.text).replace(/\n/g, '
')) + .on({ + click: function(event) { + that.select() + $iframe.postMessage('selectAnnotation', { + id: annotation.id + }) + } + }) var $quote = Ox.Element() - .addClass('OxSelectable OMLQuote') - .append( - Ox.Element().html(Ox.encodeHTMLEntities(annotation.text).replace(/\n/g, '
')) - ).on({ - click: function(event) { - that.select() - $iframe.postMessage('selectAnnotation', { - id: annotation.id - }) - } - }) + .addClass('OMLQuoteBox') + .append( + Ox.Element().addClass('OMLQuoteBackground') + ).append( + $quotetext + ) var notes = annotation.notes.length ? annotation.notes.map(function(note) { note.editable = !note.user return note