diff --git a/l10n/en-US/viewer.properties b/l10n/en-US/viewer.properties index da5442c68..27939c13b 100644 --- a/l10n/en-US/viewer.properties +++ b/l10n/en-US/viewer.properties @@ -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 diff --git a/l10n/nl/viewer.properties b/l10n/nl/viewer.properties index fedc5fa59..ad254db04 100644 --- a/l10n/nl/viewer.properties +++ b/l10n/nl/viewer.properties @@ -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 diff --git a/l10n/sv-SE/viewer.properties b/l10n/sv-SE/viewer.properties index c1ff607c0..229c4a358 100644 --- a/l10n/sv-SE/viewer.properties +++ b/l10n/sv-SE/viewer.properties @@ -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 diff --git a/web/pdf_find_bar.js b/web/pdf_find_bar.js index c01ec4761..3c2e93562 100644 --- a/web/pdf_find_bar.js +++ b/web/pdf_find_bar.js @@ -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; })(); diff --git a/web/viewer.css b/web/viewer.css index 612172e0c..90ea3b07c 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -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) { diff --git a/web/viewer.html b/web/viewer.html index 26af8f447..0d6469949 100644 --- a/web/viewer.html +++ b/web/viewer.html @@ -97,24 +97,31 @@ See https://github.com/adobe-type-tools/cmap-resources
-