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

Viewer: enable find functionality for small devices

Browse Source 
The find functionality is currently not available for small devices
because the find dialog is not responsive. This patch fixes that.

To achieve this goal, the HTML is changed to always show the find
button. To prevent issues because of the addition of an extra button for
small views, the previous/next page buttons are hidden if the view
becomes small. These buttons are not useful anyway because on small
devices navigation is usually done via scrolling. The find functionality
is much more useful to have in this case. Moreover, we wrap the existing
elements into separate `div`s so that the browser can position the
elements itself when the view becomes smaller and logically connected
elements stay together when this happens.

In the CSS, extra rules for the find bar have been added to ensure that
the dialog's doorhanger is always below the find button. All findbar
`div`s are forced to be 32 pixels high to prevent the find message text
being aligned under the checkboxes. Finally, the find message is only
visible when there is actually text to display. This prevents wrapping
issues because, by default, the label has padding and margin even if
there is no text.
This commit is contained in:
Tim van der Meij 2017-03-08 23:54:28 +01:00
parent c79e5b3f17
commit 87a30a7ee1
No known key found for this signature in database
GPG Key ID: 8C3FD2925A5F2762
2 changed files with 45 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
web/viewer.css
View File

@ -347,8 +347,7 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
top: 32px; top: 32px;
position: absolute; position: absolute;
z-index: 10000; z-index: 10000;
height: 32px; height: auto;
min-width: 16px; min-width: 16px;
padding: 0px 6px 0px 6px; padding: 0px 6px 0px 6px;
margin: 4px 2px 4px 2px; margin: 4px 2px 4px 2px;
@ -359,10 +358,15 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
cursor: default; cursor: default;
} }
.findbar {
min-width: 300px;
}
.findbar > div {
height: 32px;
}
html[dir='ltr'] .findbar { html[dir='ltr'] .findbar {
left: 68px; left: 68px;
} }
html[dir='rtl'] .findbar { html[dir='rtl'] .findbar {
right: 68px; right: 68px;
} }
@ -478,6 +482,9 @@ html[dir='ltr'] .doorHangerRight:before {
font-style: italic; font-style: italic;
color: #A6B7D0; color: #A6B7D0;
} }
#findMsg:empty {
display: none;
}
#findInput.notFound { #findInput.notFound {
background-color: rgb(255, 102, 102); background-color: rgb(255, 102, 102);
@ -500,14 +507,14 @@ html[dir='rtl'] #toolbarViewerLeft {
html[dir='ltr'] #toolbarViewerLeft > *, html[dir='ltr'] #toolbarViewerLeft > *,
html[dir='ltr'] #toolbarViewerMiddle > *, html[dir='ltr'] #toolbarViewerMiddle > *,
html[dir='ltr'] #toolbarViewerRight > *, html[dir='ltr'] #toolbarViewerRight > *,
html[dir='ltr'] .findbar > * { html[dir='ltr'] .findbar * {
position: relative; position: relative;
float: left; float: left;
} }
html[dir='rtl'] #toolbarViewerLeft > *, html[dir='rtl'] #toolbarViewerLeft > *,
html[dir='rtl'] #toolbarViewerMiddle > *, html[dir='rtl'] #toolbarViewerMiddle > *,
html[dir='rtl'] #toolbarViewerRight > *, html[dir='rtl'] #toolbarViewerRight > *,
html[dir='rtl'] .findbar > * { html[dir='rtl'] .findbar * {
position: relative; position: relative;
float: right; float: right;
} }
@ -1913,7 +1920,7 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
} }
@media all and (max-width: 640px) { @media all and (max-width: 640px) {
.hiddenSmallView { .hiddenSmallView, .hiddenSmallView * {
display: none; display: none;
} }
.visibleSmallView { .visibleSmallView {
@ -1922,6 +1929,12 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
.toolbarButtonSpacer { .toolbarButtonSpacer {
width: 0; width: 0;
} }
html[dir='ltr'] .findbar {
left: 38px;
}
html[dir='rtl'] .findbar {
right: 38px;
}
} }
@media all and (max-width: 535px) { @media all and (max-width: 535px) {

44
web/viewer.html
View File

@ -97,23 +97,31 @@ See https://github.com/adobe-type-tools/cmap-resources
</div> <!-- sidebarContainer --> </div> <!-- sidebarContainer -->
<div id="mainContainer"> <div id="mainContainer">
<div class="findbar hidden doorHanger hiddenSmallView" id="findbar"> <div class="findbar hidden doorHanger" id="findbar">
<input id="findInput" class="toolbarField" title="Find" placeholder="Find in document" tabindex="91" data-l10n-id="find_input"> <div id="findbarInputContainer">
<div class="splitToolbarButton"> <input id="findInput" class="toolbarField" title="Find" placeholder="Find in document" tabindex="91" data-l10n-id="find_input">
<button class="toolbarButton findPrevious" title="" id="findPrevious" tabindex="92" data-l10n-id="find_previous"> <div class="splitToolbarButton">
<span data-l10n-id="find_previous_label">Previous</span> <button class="toolbarButton findPrevious" title="" id="findPrevious" tabindex="92" data-l10n-id="find_previous">
</button> <span data-l10n-id="find_previous_label">Previous</span>
<div class="splitToolbarButtonSeparator"></div> </button>
<button class="toolbarButton findNext" title="" id="findNext" tabindex="93" data-l10n-id="find_next"> <div class="splitToolbarButtonSeparator"></div>
<span data-l10n-id="find_next_label">Next</span> <button class="toolbarButton findNext" title="" id="findNext" tabindex="93" data-l10n-id="find_next">
</button> <span data-l10n-id="find_next_label">Next</span>
</button>
</div>
</div>
<div id="findbarOptionsContainer">
<input type="checkbox" id="findHighlightAll" class="toolbarField" tabindex="94">
<label for="findHighlightAll" class="toolbarLabel" data-l10n-id="find_highlight">Highlight all</label>
<input type="checkbox" id="findMatchCase" class="toolbarField" tabindex="95">
<label for="findMatchCase" class="toolbarLabel" data-l10n-id="find_match_case_label">Match case</label>
<span id="findResultsCount" class="toolbarLabel hidden"></span>
</div>
<div id="findbarMessageContainer">
<span id="findMsg" class="toolbarLabel"></span>
</div> </div>
<input type="checkbox" id="findHighlightAll" class="toolbarField" tabindex="94">
<label for="findHighlightAll" class="toolbarLabel" data-l10n-id="find_highlight">Highlight all</label>
<input type="checkbox" id="findMatchCase" class="toolbarField" tabindex="95">
<label for="findMatchCase" class="toolbarLabel" data-l10n-id="find_match_case_label">Match case</label>
<span id="findResultsCount" class="toolbarLabel hidden"></span>
<span id="findMsg" class="toolbarLabel"></span>
</div> <!-- findbar --> </div> <!-- findbar -->
<div id="secondaryToolbar" class="secondaryToolbar hidden doorHangerRight"> <div id="secondaryToolbar" class="secondaryToolbar hidden doorHangerRight">
@ -178,10 +186,10 @@ See https://github.com/adobe-type-tools/cmap-resources
<span data-l10n-id="toggle_sidebar_label">Toggle Sidebar</span> <span data-l10n-id="toggle_sidebar_label">Toggle Sidebar</span>
</button> </button>
<div class="toolbarButtonSpacer"></div> <div class="toolbarButtonSpacer"></div>
<button id="viewFind" class="toolbarButton group hiddenSmallView" title="Find in Document" tabindex="12" data-l10n-id="findbar"> <button id="viewFind" class="toolbarButton group" title="Find in Document" tabindex="12" data-l10n-id="findbar">
<span data-l10n-id="findbar_label">Find</span> <span data-l10n-id="findbar_label">Find</span>
</button> </button>
<div class="splitToolbarButton"> <div class="splitToolbarButton hiddenSmallView">
<button class="toolbarButton pageUp" title="Previous Page" id="previous" tabindex="13" data-l10n-id="previous"> <button class="toolbarButton pageUp" title="Previous Page" id="previous" tabindex="13" data-l10n-id="previous">
<span data-l10n-id="previous_label">Previous</span> <span data-l10n-id="previous_label">Previous</span>
</button> </button>