Merge pull request #8132 from timvandermeij/findbar-responsiveness
Viewer: enable find functionality for small devices
This commit is contained in:
Tim van der Meij
GitHub
commit
6908f1491d
@ -121,7 +121,8 @@ thumb_page_title=Page {{page}}
|
||||
thumb_page_canvas=Thumbnail of Page {{page}}
|
||||
|
||||
# Find panel button title and messages
|
||||
find_label=Find:
|
||||
find_input.title=Find
|
||||
find_input.placeholder=Find in document…
|
||||
find_previous.title=Find the previous occurrence of the phrase
|
||||
find_previous_label=Previous
|
||||
find_next.title=Find the next occurrence of the phrase
|
||||
|
||||
@ -120,7 +120,8 @@ thumb_page_title=Pagina {{page}}
|
||||
thumb_page_canvas=Miniatuur van pagina {{page}}
|
||||
|
||||
# Find panel button title and messages
|
||||
find_label=Zoeken:
|
||||
find_input.title=Zoeken
|
||||
find_input.placeholder=Zoeken in document…
|
||||
find_previous.title=De vorige overeenkomst van de tekst zoeken
|
||||
find_previous_label=Vorige
|
||||
find_next.title=De volgende overeenkomst van de tekst zoeken
|
||||
|
||||
@ -121,7 +121,8 @@ thumb_page_title=Sida {{page}}
|
||||
thumb_page_canvas=Miniatyr av sida {{page}}
|
||||
|
||||
# Find panel button title and messages
|
||||
find_label=Sök:
|
||||
find_input.title=Sök
|
||||
find_input.placeholder=Sök i dokumentet…
|
||||
find_previous.title=Hitta föregående förekomst av frasen
|
||||
find_previous_label=Föregående
|
||||
find_next.title=Hitta nästa förekomst av frasen
|
||||
|
||||
@ -96,6 +96,8 @@ var PDFFindBar = (function PDFFindBarClosure() {
|
||||
this.caseSensitive.addEventListener('click', function() {
|
||||
self.dispatchEvent('casesensitivitychange');
|
||||
});
|
||||
|
||||
this.eventBus.on('resize', this._adjustWidth.bind(this));
|
||||
}
|
||||
|
||||
PDFFindBar.prototype = {
|
||||
@ -155,6 +157,7 @@ var PDFFindBar = (function PDFFindBarClosure() {
|
||||
this.findMsg.textContent = findMsg;
|
||||
|
||||
this.updateResultsCount(matchCount);
|
||||
this._adjustWidth();
|
||||
},
|
||||
|
||||
updateResultsCount: function(matchCount) {
|
||||
@ -183,6 +186,8 @@ var PDFFindBar = (function PDFFindBarClosure() {
|
||||
}
|
||||
this.findField.select();
|
||||
this.findField.focus();
|
||||
|
||||
this._adjustWidth();
|
||||
},
|
||||
|
||||
close: function PDFFindBar_close() {
|
||||
@ -201,7 +206,32 @@ var PDFFindBar = (function PDFFindBarClosure() {
|
||||
} else {
|
||||
this.open();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_adjustWidth: function PDFFindBar_adjustWidth() {
|
||||
if (!this.opened) {
|
||||
return;
|
||||
}
|
||||
|
||||
// The find bar has an absolute position and thus the browser extends
|
||||
// its width to the maximum possible width once the find bar does not fit
|
||||
// entirely within the window anymore (and its elements are automatically
|
||||
// wrapped). Here we detect and fix that.
|
||||
this.bar.classList.remove('wrapContainers');
|
||||
|
||||
var findbarHeight = this.bar.clientHeight;
|
||||
var inputContainerHeight = this.bar.firstElementChild.clientHeight;
|
||||
|
||||
if (findbarHeight > inputContainerHeight) {
|
||||
// The findbar is taller than the input container, which means that
|
||||
// the browser wrapped some of the elements. For a consistent look,
|
||||
// wrap all of them to adjust the width of the find bar.
|
||||
this.bar.classList.add('wrapContainers');
|
||||
}
|
||||
},
|
||||
};
|
||||
return PDFFindBar;
|
||||
})();
|
||||
|
||||
@ -347,8 +347,7 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
|
||||
top: 32px;
|
||||
position: absolute;
|
||||
z-index: 10000;
|
||||
height: 32px;
|
||||
|
||||
height: auto;
|
||||
min-width: 16px;
|
||||
padding: 0px 6px 0px 6px;
|
||||
margin: 4px 2px 4px 2px;
|
||||
@ -359,10 +358,21 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.findbar {
|
||||
min-width: 300px;
|
||||
}
|
||||
.findbar > div {
|
||||
height: 32px;
|
||||
}
|
||||
.findbar.wrapContainers > div {
|
||||
clear: both;
|
||||
}
|
||||
.findbar.wrapContainers > div#findbarMessageContainer {
|
||||
height: auto;
|
||||
}
|
||||
html[dir='ltr'] .findbar {
|
||||
left: 68px;
|
||||
}
|
||||
|
||||
html[dir='rtl'] .findbar {
|
||||
right: 68px;
|
||||
}
|
||||
@ -372,6 +382,21 @@ html[dir='rtl'] .findbar {
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
#findInput {
|
||||
width: 200px;
|
||||
}
|
||||
#findInput::-webkit-input-placeholder {
|
||||
font-style: italic;
|
||||
}
|
||||
#findInput::-moz-placeholder {
|
||||
font-style: italic;
|
||||
}
|
||||
#findInput:-ms-input-placeholder {
|
||||
font-style: italic;
|
||||
}
|
||||
#findInput::placeholder {
|
||||
font-style: italic;
|
||||
}
|
||||
#findInput[data-status="pending"] {
|
||||
background-image: url(images/loading-small.png);
|
||||
background-repeat: no-repeat;
|
||||
@ -463,6 +488,9 @@ html[dir='ltr'] .doorHangerRight:before {
|
||||
font-style: italic;
|
||||
color: #A6B7D0;
|
||||
}
|
||||
#findMsg:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#findInput.notFound {
|
||||
background-color: rgb(255, 102, 102);
|
||||
@ -485,14 +513,14 @@ html[dir='rtl'] #toolbarViewerLeft {
|
||||
html[dir='ltr'] #toolbarViewerLeft > *,
|
||||
html[dir='ltr'] #toolbarViewerMiddle > *,
|
||||
html[dir='ltr'] #toolbarViewerRight > *,
|
||||
html[dir='ltr'] .findbar > * {
|
||||
html[dir='ltr'] .findbar * {
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
html[dir='rtl'] #toolbarViewerLeft > *,
|
||||
html[dir='rtl'] #toolbarViewerMiddle > *,
|
||||
html[dir='rtl'] #toolbarViewerRight > *,
|
||||
html[dir='rtl'] .findbar > * {
|
||||
html[dir='rtl'] .findbar * {
|
||||
position: relative;
|
||||
float: right;
|
||||
}
|
||||
@ -1898,7 +1926,7 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
|
||||
}
|
||||
|
||||
@media all and (max-width: 640px) {
|
||||
.hiddenSmallView {
|
||||
.hiddenSmallView, .hiddenSmallView * {
|
||||
display: none;
|
||||
}
|
||||
.visibleSmallView {
|
||||
@ -1907,6 +1935,12 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
|
||||
.toolbarButtonSpacer {
|
||||
width: 0;
|
||||
}
|
||||
html[dir='ltr'] .findbar {
|
||||
left: 38px;
|
||||
}
|
||||
html[dir='rtl'] .findbar {
|
||||
right: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 535px) {
|
||||
|
||||
@ -97,24 +97,31 @@ See https://github.com/adobe-type-tools/cmap-resources
|
||||
</div> <!-- sidebarContainer -->
|
||||
|
||||
<div id="mainContainer">
|
||||
<div class="findbar hidden doorHanger hiddenSmallView" id="findbar">
|
||||
<label for="findInput" class="toolbarLabel" data-l10n-id="find_label">Find:</label>
|
||||
<input id="findInput" class="toolbarField" tabindex="91">
|
||||
<div class="splitToolbarButton">
|
||||
<button class="toolbarButton findPrevious" title="" id="findPrevious" tabindex="92" data-l10n-id="find_previous">
|
||||
<span data-l10n-id="find_previous_label">Previous</span>
|
||||
</button>
|
||||
<div class="splitToolbarButtonSeparator"></div>
|
||||
<button class="toolbarButton findNext" title="" id="findNext" tabindex="93" data-l10n-id="find_next">
|
||||
<span data-l10n-id="find_next_label">Next</span>
|
||||
</button>
|
||||
<div class="findbar hidden doorHanger" id="findbar">
|
||||
<div id="findbarInputContainer">
|
||||
<input id="findInput" class="toolbarField" title="Find" placeholder="Find in document" tabindex="91" data-l10n-id="find_input">
|
||||
<div class="splitToolbarButton">
|
||||
<button class="toolbarButton findPrevious" title="" id="findPrevious" tabindex="92" data-l10n-id="find_previous">
|
||||
<span data-l10n-id="find_previous_label">Previous</span>
|
||||
</button>
|
||||
<div class="splitToolbarButtonSeparator"></div>
|
||||
<button class="toolbarButton findNext" title="" id="findNext" tabindex="93" data-l10n-id="find_next">
|
||||
<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>
|
||||
<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 id="secondaryToolbar" class="secondaryToolbar hidden doorHangerRight">
|
||||
@ -179,10 +186,10 @@ See https://github.com/adobe-type-tools/cmap-resources
|
||||
<span data-l10n-id="toggle_sidebar_label">Toggle Sidebar</span>
|
||||
</button>
|
||||
<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>
|
||||
</button>
|
||||
<div class="splitToolbarButton">
|
||||
<div class="splitToolbarButton hiddenSmallView">
|
||||
<button class="toolbarButton pageUp" title="Previous Page" id="previous" tabindex="13" data-l10n-id="previous">
|
||||
<span data-l10n-id="previous_label">Previous</span>
|
||||
</button>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user