Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI update from shorlanders comments.

Browse Source
This commit is contained in:
Brendan Dahl 2012-06-07 13:51:29 -07:00
parent 7536f0077f
commit cebee4026d
6 changed files with 82 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
l10n/en-US/viewer.properties
View File

@ -78,8 +78,6 @@ page_scale_auto=Automatic Zoom
page_scale_actual=Actual Size
# Loading indicator messages
# LOCALIZATION NOTE (error_line): "{{percent}}" will be replaced with a percentage
loading=Loading… {{percent}}%
loading_error_indicator=Error
loading_error=An error occurred while loading the PDF.

BIN
web/images/toolbarButton-openFile.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 708 B

After

Width:  |  Height:  |  Size: 417 B

BIN
web/images/toolbarButton-search.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 744 B

After

Width:  |  Height:  |  Size: 503 B

122
web/viewer.css
View File

@ -146,7 +146,7 @@ html[dir='rtl'] #sidebarContent {
#toolbarSidebar {
width: 200px;
height: 32px;
height: 29px;
background-image: url(images/texture.png),
-moz-linear-gradient(hsla(0,0%,30%,.99), hsla(0,0%,25%,.95));
background-image: url(images/texture.png),
@ -242,9 +242,14 @@ html[dir='rtl'] .splitToolbarButton > .toolbarButton {
margin-right:0;
}
.splitToolbarButton.toggled .toolbarButton {
margin: 0;
}
.splitToolbarButton:hover > .toolbarButton,
.splitToolbarButton:focus > .toolbarButton,
.splitToolbarButton.toggled > .toolbarButton {
.splitToolbarButton.toggled > .toolbarButton,
.toolbarButton.textButton {
background-color: hsla(0,0%,0%,.12);
background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
@ -263,7 +268,9 @@ html[dir='rtl'] .splitToolbarButton > .toolbarButton {
}
.splitToolbarButton > .toolbarButton:hover,
.splitToolbarButton > .toolbarButton:focus,
.dropdownToolbarButton:hover {
.dropdownToolbarButton:hover,
.toolbarButton.textButton:hover,
.toolbarButton.textButton:focus {
background-color: hsla(0,0%,0%,.2);
box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
0 0 1px hsla(0,0%,100%,.15) inset,
@ -544,8 +551,6 @@ html[dir='rtl'] .toolbarButton.pageDown::before {
.toolbarField {
min-width: 16px;
width: 32px;
padding: 3px 6px;
margin: 4px 0 4px 0;
border: 1px solid transparent;
@ -560,7 +565,6 @@ html[dir='rtl'] .toolbarButton.pageDown::before {
color: hsl(0,0%,95%);
font-size: 12px;
line-height: 14px;
text-align: right;
outline-style: none;
-moz-transition-property: background-color, border-color, box-shadow;
-moz-transition-duration: 150ms;
@ -568,6 +572,8 @@ html[dir='rtl'] .toolbarButton.pageDown::before {
}
.toolbarField.pageNumber {
min-width: 16px;
text-align: right;
width: 40px;
}
@ -682,9 +688,11 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
margin-left: 20px;
}
.outlineItem > a {
.outlineItem > a,
#searchResults > a {
text-decoration: none;
display: block;
display: inline-block;
min-width: 95%;
height: 20px;
padding: 2px 0 0 10px;
margin-bottom: 1px;
@ -697,7 +705,8 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
white-space: nowrap;
}
.outlineItem > a:hover {
.outlineItem > a:hover,
#searchResults > a:hover {
background-color: hsla(0,0%,100%,.02);
background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
background-clip: padding-box;
@ -707,6 +716,23 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
color: hsla(0,0%,100%,.9);
}
.outlineItem.selected {
background-color: hsla(0,0%,100%,.08);
background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
background-clip: padding-box;
box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
0 0 1px hsla(0,0%,100%,.1) inset,
0 0 1px hsla(0,0%,0%,.2);
color: hsla(0,0%,100%,1);
}
.noOutline,
.noResults {
font-size: 12px;
color: hsla(0,0%,100%,.8);
font-style: italic;
}
#searchScrollView {
position: absolute;
top: 10px;
@ -723,27 +749,26 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
}
#searchToolbar > input {
margin-left: 8px;
width: 130px;
margin-left: 4px;
width: 124px;
}
#searchToolbar button {
width: auto;
margin: 0;
padding: 0 6px;
height: 22px;
}
#searchResults {
overflow: auto;
background-color: #fff;
position: absolute;
top: 30px;
bottom: 0px;
left: 0px;
right: 0;
padding: 4px 4px 0;
font-size: smaller;
opacity: 0.7;
}
#searchResults a {
display: block;
white-space: pre;
text-decoration: none;
color: black;
}
#sidebarControls {
@ -754,24 +779,6 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
bottom: 35px;
}
.outlineItem.selected {
background-color: hsla(0,0%,100%,.08);
background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
background-clip: padding-box;
box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
0 0 1px hsla(0,0%,100%,.1) inset,
0 0 1px hsla(0,0%,0%,.2);
color: hsla(0,0%,100%,1);
}
.noOutline {
font-size: 12px;
color: hsla(0,0%,100%,.8);
font-style: italic;
}
canvas {
margin: auto;
display: block;
@ -814,23 +821,33 @@ canvas {
}
#loadingBox {
margin: 100px 0;
position: absolute;
top: 50%;
margin-top: -25px;
left: 0;
right: 0;
text-align: center;
color: #ddd;
font-size: 14px;
}
#loadingBar {
background-color: #333;
display: inline-block;
border: 1px solid black;
clear: both;
margin: 0px;
margin-top: 5px;
line-height: 0;
border-radius: 4px;
border-radius: 2px;
width: 200px;
height: 25px;
background-color: hsla(0,0%,0%,.3);
background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
border: 1px solid #000;
box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset,
0 0 1px hsla(0,0%,0%,.2) inset,
0 0 1px 1px rgba(255, 255, 255, 0.1);
}
#loadingBar .progress {
@ -838,23 +855,22 @@ canvas {
float: left;
background: #666;
background: -moz-linear-gradient(top, #999 0%, #666 50%, #999 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(50%,#666), color-stop(100%,#999));
background: -webkit-linear-gradient(top, #999 0%,#666 50%,#999 100%);
background: -o-linear-gradient(top, #999 0%,#666 50%,#999 100%);
background: -ms-linear-gradient(top, #999 0%,#666 50%,#999 100%);
background: linear-gradient(top, #999 0%,#666 50%,#999 100%);
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
background: -moz-linear-gradient(top, #b2b2b2 0%, #898989 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2b2b2), color-stop(100%,#898989));
background: -webkit-linear-gradient(top, #b2b2b2 0%,#898989 100%);
background: -o-linear-gradient(top, #b2b2b2 0%,#898989 100%);
background: -ms-linear-gradient(top, #b2b2b2 0%,#898989 100%);
background: linear-gradient(top, #b2b2b2 0%,#898989 100%);
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
width: 0%;
height: 100%;
}
#loadingBar .progress.full {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
.textLayer {

10
web/viewer.html
View File

@ -45,7 +45,7 @@
<div id="outerContainer">
<div id="sidebarContainer">
<div id="toolbarSidebar">
<div id="toolbarSidebar" class="splitToolbarButton toggled">
<button id="viewThumbnail" class="toolbarButton group toggled" title="Show Thumbnails" onclick="PDFView.switchSidebarView('thumbs')" tabindex="1" data-l10n-id="thumbs">
<span data-l10n-id="thumbs_label">Thumbnails</span>
</button>
@ -63,8 +63,8 @@
</div>
<div id="searchView" class="hidden">
<div id="searchToolbar">
<input id="searchTermsInput" onkeydown='if (event.keyCode == 13) PDFView.search()'>
<button id="searchButton" onclick='PDFView.search()' data-l10n-id="search">Find</button>
<input id="searchTermsInput" class="toolbarField" onkeydown='if (event.keyCode == 13) PDFView.search()'>
<button id="searchButton" class="textButton toolbarButton" onclick='PDFView.search()' data-l10n-id="search">Find</button>
</div>
<div id="searchResults"></div>
</div>
@ -150,8 +150,8 @@
</div>
<div id="loadingBox">
<div id="loading" data-l10n-id="loading" data-l10n-args='{"percent": 0}'>Loading... 0%</div>
<div id="loadingBar"><div class="progress"></div></div>
<div id="loading"></div>
<div id="loadingBar"><div class="progress"></div></div>
</div>
<div id="errorWrapper" hidden='true'>

14
web/viewer.js
View File

@ -394,7 +394,7 @@ var PDFView = {
self.loading = false;
},
function getDocumentError(message, exception) {
if (exception.name === 'PasswordException') {
if (exception && exception.name === 'PasswordException') {
if (exception.code === 'needpassword') {
var promptString = mozL10n.get('request_password', null,
'PDF is protected by a password:');
@ -598,10 +598,6 @@ var PDFView = {
progress: function pdfViewProgress(level) {
var percent = Math.round(level * 100);
var loadingIndicator = document.getElementById('loading');
loadingIndicator.textContent = mozL10n.get('loading', {percent: percent},
'Loading... {{percent}}%');
PDFView.loadingBar.percent = percent;
},
@ -621,6 +617,8 @@ var PDFView = {
var loadingBox = document.getElementById('loadingBox');
loadingBox.setAttribute('hidden', 'true');
var loadingIndicator = document.getElementById('loading');
loadingIndicator.textContent = '';
var thumbsView = document.getElementById('thumbnailView');
thumbsView.parentNode.scrollTop = 0;
@ -792,8 +790,12 @@ var PDFView = {
pageFound = true;
}
if (!pageFound) {
searchResults.textContent = mozL10n.get('search_terms_not_found', null,
searchResults.textContent = '';
var noResults = document.createElement('div');
noResults.classList.add('noResults');
noResults.textContent = mozL10n.get('search_terms_not_found', null,
'(Not found)');
searchResults.appendChild(noResults);
}
},