From ceee2c4d04a9ee4bc9597224aeb131a5cca1c885 Mon Sep 17 00:00:00 2001 From: waddlesplash Date: Mon, 22 Oct 2012 17:17:22 -0400 Subject: [PATCH] Make the comments look nicer & fix a linebreak bug. --- web/images/annotation-comment.svg | 16 +++++++++-- web/images/annotation-help.svg | 25 +++++++++++++++++ web/images/annotation-note.svg | 41 +++++++++++++++++++++++++++ web/images/annotation-text.svg | 46 ------------------------------- web/viewer.css | 33 +++++++++++----------- web/viewer.js | 38 ++++++++++++++++--------- 6 files changed, 121 insertions(+), 78 deletions(-) create mode 100644 web/images/annotation-help.svg create mode 100644 web/images/annotation-note.svg delete mode 100644 web/images/annotation-text.svg diff --git a/web/images/annotation-comment.svg b/web/images/annotation-comment.svg index 84feef1c8..b2aee63e5 100644 --- a/web/images/annotation-comment.svg +++ b/web/images/annotation-comment.svg @@ -1,3 +1,15 @@ - - + + + + diff --git a/web/images/annotation-help.svg b/web/images/annotation-help.svg new file mode 100644 index 000000000..349112ef3 --- /dev/null +++ b/web/images/annotation-help.svg @@ -0,0 +1,25 @@ + + + + + + + + + + diff --git a/web/images/annotation-note.svg b/web/images/annotation-note.svg new file mode 100644 index 000000000..ed169439b --- /dev/null +++ b/web/images/annotation-note.svg @@ -0,0 +1,41 @@ + + + + + + + + diff --git a/web/images/annotation-text.svg b/web/images/annotation-text.svg deleted file mode 100644 index 25df8f466..000000000 --- a/web/images/annotation-text.svg +++ /dev/null @@ -1,46 +0,0 @@ - - - - - - - - - diff --git a/web/viewer.css b/web/viewer.css index 994b067b4..8276f0035 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -1195,31 +1195,30 @@ canvas { ::selection { background:rgba(0,0,255,0.3); } ::-moz-selection { background:rgba(0,0,255,0.3); } -.annotComment > div { +.annotText > div { z-index: 200; position: absolute; -} - -.annotComment > img { - position: absolute; -} - -.annotComment > img:hover { - cursor: pointer; - opacity: 0.7; -} - -.annotComment > div { - padding: 0.2em; + padding: 0.6em; max-width: 20em; - background-color: #F1E47B; + background-color: #FFFF99; -webkit-box-shadow: 0px 2px 10px #333; -moz-box-shadow: 0px 2px 10px #333; box-shadow: 0px 2px 10px #333; + border-radius: 7px; + -moz-border-radius: 7px; } -.annotComment > div > h1 { - font-weight: normal; +.annotText > img { + position: absolute; + opacity: 0.6; +} + +.annotText > img:hover { + cursor: pointer; + opacity: 1; +} + +.annotText > div > h1 { font-size: 1.2em; border-bottom: 1px solid #000000; margin: 0px; diff --git a/web/viewer.js b/web/viewer.js index fa885b9f1..249d348db 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -42,6 +42,8 @@ var FindStates = { FIND_PENDING: 3 }; +var ANNOT_MIN_SIZE = 10; + //#if (GENERIC || CHROME) //PDFJS.workerSrc = '../build/pdf.js'; //#endif @@ -1776,9 +1778,11 @@ var PageView = function pageView(container, pdfPage, id, scale, return false; }; } - function createElementWithStyle(tagName, item) { - var rect = viewport.convertToViewportRectangle(item.rect); - rect = PDFJS.Util.normalizeRect(rect); + function createElementWithStyle(tagName, item, rect) { + if (!rect) { + rect = viewport.convertToViewportRectangle(item.rect); + rect = PDFJS.Util.normalizeRect(rect); + } var element = document.createElement(tagName); element.style.left = Math.floor(rect[0]) + 'px'; element.style.top = Math.floor(rect[1]) + 'px'; @@ -1786,16 +1790,24 @@ var PageView = function pageView(container, pdfPage, id, scale, element.style.height = Math.ceil(rect[3] - rect[1]) + 'px'; return element; } - function createCommentAnnotation(type, item) { + function createTextAnnotation(item) { var container = document.createElement('section'); - container.className = 'annotComment'; + container.className = 'annotText'; - var image = createElementWithStyle('img', item); - var type = item.type; var rect = viewport.convertToViewportRectangle(item.rect); rect = PDFJS.Util.normalizeRect(rect); - image.src = kImageDirectory + 'annotation-' + type.toLowerCase() + '.svg'; - image.alt = mozL10n.get('text_annotation_type', {type: type}, + // sanity check because of OOo-generated PDFs + if ((rect[3] - rect[1]) < ANNOT_MIN_SIZE) { + rect[3] = rect[1] + ANNOT_MIN_SIZE; + } + if ((rect[2] - rect[0]) < ANNOT_MIN_SIZE) { + rect[2] = rect[0] + (rect[3] - rect[1]); // make it square + } + var image = createElementWithStyle('img', item, rect); + var iconName = item.name; + image.src = kImageDirectory + 'annotation-' + + iconName.toLowerCase() + '.svg'; + image.alt = mozL10n.get('text_annotation_type', {type: iconName}, '[{{type}} Annotation]'); var content = document.createElement('div'); content.setAttribute('hidden', true); @@ -1809,7 +1821,7 @@ var PageView = function pageView(container, pdfPage, id, scale, content.setAttribute('hidden', true); } else { var e = document.createElement('span'); - var lines = item.content.split('\n'); + var lines = item.content.split(/(?:\r\n?|\n)/); for (var i = 0, ii = lines.length; i < ii; ++i) { var line = lines[i]; e.appendChild(document.createTextNode(line)); @@ -1846,9 +1858,9 @@ var PageView = function pageView(container, pdfPage, id, scale, div.appendChild(link); break; case 'Text': - var comment = createCommentAnnotation(item.name, item); - if (comment) - div.appendChild(comment); + var textAnnotation = createTextAnnotation(item); + if (textAnnotation) + div.appendChild(textAnnotation); break; case 'Widget': // TODO: support forms