Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI update from shorlanders comments. #1808

Merged
merged 2 commits into from
Jun 20, 2012
Merged

UI update from shorlanders comments. #1808

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cebee40
UI update from shorlanders comments.
brendandahl Jun 7, 2012
8b0fd2a
Merge upstream.
brendandahl Jun 19, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions l10n/en-US/viewer.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
Binary file modified web/images/toolbarButton-openFile.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified web/images/toolbarButton-search.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
121 changes: 69 additions & 52 deletions web/viewer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,7 @@ html[dir='rtl'] #sidebarContent {

#toolbarSidebar {
width: 200px;
height: 32px;
height: 29px;
background-image: url(images/texture.png),
-webkit-linear-gradient(hsla(0,0%,30%,.99), hsla(0,0%,25%,.95));
background-image: url(images/texture.png),
Expand Down Expand Up @@ -284,9 +284,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: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
Expand Down Expand Up @@ -318,7 +323,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,
Expand Down Expand Up @@ -646,8 +653,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;
Expand All @@ -662,14 +667,15 @@ 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;
-moz-transition-timing-function: ease;
}

.toolbarField.pageNumber {
min-width: 16px;
text-align: right;
width: 40px;
}

Expand Down Expand Up @@ -784,9 +790,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;
Expand All @@ -799,7 +807,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;
Expand All @@ -809,6 +818,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;
Expand All @@ -825,27 +851,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 {
Expand All @@ -856,24 +881,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;
Expand Down Expand Up @@ -916,47 +923,57 @@ 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 {
display: inline-block;
float: left;

background: #666;
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: -moz-linear-gradient(top, #999 0%, #666 50%, #999 100%);
background: -ms-linear-gradient(top, #999 0%,#666 50%,#999 100%);
background: -o-linear-gradient(top, #999 0%,#666 50%,#999 100%);
background: linear-gradient(top, #999 0%,#666 50%,#999 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: -moz-linear-gradient(top, #b2b2b2 0%,#898989 100%);
background: -ms-linear-gradient(top, #b2b2b2 0%,#898989 100%);
background: -o-linear-gradient(top, #b2b2b2 0%,#898989 100%);
background: linear-gradient(top, #b2b2b2 0%,#898989 100%);

border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
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 {
Expand Down
10 changes: 5 additions & 5 deletions web/viewer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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'>
Expand Down
14 changes: 8 additions & 6 deletions web/viewer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:');
Expand Down Expand Up @@ -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;
},

Expand All @@ -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;
Expand Down Expand Up @@ -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);
}
},

Expand Down