Make the comments look nicer & fix a linebreak bug.
This commit is contained in:
waddlesplash
parent
7dea4a6faf
commit
ceee2c4d04
@ -1,3 +1,15 @@
|
||||
<svg height="40" width="40" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16,5.333c-7.732,0-14,4.701-14,10.5c0,1.982,0.741,3.833,2.016,5.414L2,25.667l5.613-1.441c2.339,1.317,5.237,2.107,8.387,2.107c7.732,0,14-4.701,14-10.5C30,10.034,23.732,5.333,16,5.333z" fill="#333333"></path>
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="40"
|
||||
width="40">
|
||||
<rect
|
||||
style="fill:#ffff00;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
|
||||
width="33.76017"
|
||||
height="33.76017"
|
||||
x="3.119915"
|
||||
y="3.119915" />
|
||||
<path
|
||||
d="m 20.677967,8.54499 c -7.342801,0 -13.295293,4.954293 -13.295293,11.065751 0,2.088793 0.3647173,3.484376 1.575539,5.150563 L 6.0267418,31.45501 13.560595,29.011117 c 2.221262,1.387962 4.125932,1.665377 7.117372,1.665377 7.3428,0 13.295291,-4.954295 13.295291,-11.065753 0,-6.111458 -5.952491,-11.065751 -13.295291,-11.065751 z"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.93031836;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 289 B After Width: | Height: | Size: 860 B |
25
web/images/annotation-help.svg
Normal file
25
web/images/annotation-help.svg
Normal file
@ -0,0 +1,25 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="40"
|
||||
height="40">
|
||||
<g
|
||||
transform="translate(0,-60)"
|
||||
id="layer1">
|
||||
<rect
|
||||
width="36.460953"
|
||||
height="34.805603"
|
||||
x="1.7695236"
|
||||
y="62.597198"
|
||||
style="fill:#ffff00;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.30826771;stroke-opacity:1" />
|
||||
<g
|
||||
transform="matrix(0.88763677,0,0,0.88763677,2.2472646,8.9890584)">
|
||||
<path
|
||||
d="M 20,64.526342 C 11.454135,64.526342 4.5263421,71.454135 4.5263421,80 4.5263421,88.545865 11.454135,95.473658 20,95.473658 28.545865,95.473658 35.473658,88.545865 35.473658,80 35.473658,71.454135 28.545865,64.526342 20,64.526342 z m -0.408738,9.488564 c 3.527079,0 6.393832,2.84061 6.393832,6.335441 0,3.494831 -2.866753,6.335441 -6.393832,6.335441 -3.527079,0 -6.393832,-2.84061 -6.393832,-6.335441 0,-3.494831 2.866753,-6.335441 6.393832,-6.335441 z"
|
||||
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1.02768445;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
|
||||
<path
|
||||
d="m 7.2335209,71.819938 4.9702591,4.161823 c -1.679956,2.581606 -1.443939,6.069592 0.159325,8.677725 l -5.1263071,3.424463 c 0.67516,1.231452 3.0166401,3.547686 4.2331971,4.194757 l 3.907728,-4.567277 c 2.541952,1.45975 5.730694,1.392161 8.438683,-0.12614 l 3.469517,6.108336 c 1.129779,-0.44367 4.742234,-3.449633 5.416358,-5.003859 l -5.46204,-4.415541 c 1.44319,-2.424098 1.651175,-5.267515 0.557303,-7.748623 l 5.903195,-3.833951 C 33.14257,71.704996 30.616217,69.018606 29.02952,67.99296 l -4.118813,4.981678 C 22.411934,71.205099 18.900853,70.937534 16.041319,72.32916 l -3.595408,-5.322091 c -1.345962,0.579488 -4.1293881,2.921233 -5.2123901,4.812869 z m 8.1010311,3.426672 c 2.75284,-2.446266 6.769149,-2.144694 9.048998,0.420874 2.279848,2.56557 2.113919,6.596919 -0.638924,9.043185 -2.752841,2.446267 -6.775754,2.13726 -9.055604,-0.428308 -2.279851,-2.565568 -2.107313,-6.589485 0.64553,-9.035751 z"
|
||||
style="fill:#000000;fill-opacity:1;stroke:none" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
41
web/images/annotation-note.svg
Normal file
41
web/images/annotation-note.svg
Normal file
@ -0,0 +1,41 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="40"
|
||||
height="40">
|
||||
<rect
|
||||
width="36.075428"
|
||||
height="31.096582"
|
||||
x="1.962286"
|
||||
y="4.4517088"
|
||||
id="rect4"
|
||||
style="fill:#ffff00;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.23004246;stroke-opacity:1" />
|
||||
<rect
|
||||
width="27.96859"
|
||||
height="1.5012145"
|
||||
x="6.0157046"
|
||||
y="10.285"
|
||||
id="rect6"
|
||||
style="fill:#000000;fill-opacity:1;stroke:none" />
|
||||
<rect
|
||||
width="27.96859"
|
||||
height="0.85783684"
|
||||
x="6.0157056"
|
||||
y="23.21689"
|
||||
id="rect8"
|
||||
style="fill:#000000;fill-opacity:1;stroke:none" />
|
||||
<rect
|
||||
width="27.96859"
|
||||
height="0.85783684"
|
||||
x="5.8130345"
|
||||
y="28.964394"
|
||||
id="rect10"
|
||||
style="fill:#000000;fill-opacity:1;stroke:none" />
|
||||
<rect
|
||||
width="27.96859"
|
||||
height="0.85783684"
|
||||
x="6.0157046"
|
||||
y="17.426493"
|
||||
id="rect12"
|
||||
style="fill:#000000;fill-opacity:1;stroke:none" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1018 B |
@ -1,46 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="40"
|
||||
width="40"
|
||||
id="svg2995"
|
||||
version="1.1">
|
||||
|
||||
<rect
|
||||
style="fill:#f1e47b;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-opacity:1"
|
||||
id="rect3009"
|
||||
width="30.169491"
|
||||
height="24.576269"
|
||||
x="4.237288"
|
||||
y="6.7796612" />
|
||||
<rect
|
||||
style="fill:#000000;fill-opacity:1;stroke:none"
|
||||
id="rect3781"
|
||||
width="23.38983"
|
||||
height="1.1864407"
|
||||
x="7.6271186"
|
||||
y="11.389831" />
|
||||
<rect
|
||||
style="fill:#000000;fill-opacity:1;stroke:none"
|
||||
id="rect3781-1"
|
||||
width="23.38983"
|
||||
height="0.67796612"
|
||||
x="7.6271191"
|
||||
y="21.61017" />
|
||||
<rect
|
||||
style="fill:#000000;fill-opacity:1;stroke:none"
|
||||
id="rect3781-7"
|
||||
width="23.38983"
|
||||
height="0.67796612"
|
||||
x="7.4576273"
|
||||
y="26.152542" />
|
||||
<rect
|
||||
style="fill:#000000;fill-opacity:1;stroke:none"
|
||||
id="rect3781-1-4"
|
||||
width="23.38983"
|
||||
height="0.67796612"
|
||||
x="7.6271186"
|
||||
y="17.033899" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@ -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;
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user