Viewer: replace find label with placeholder/tooltip

This is common in the rest of the UI and helps us prevent responsiveness
issues for different length strings in different locales.
This commit is contained in:
Jonas Jenwald 2017-03-08 23:53:59 +01:00 committed by Tim van der Meij
parent a544a3b4a4
commit c79e5b3f17
No known key found for this signature in database
GPG Key ID: 8C3FD2925A5F2762
5 changed files with 22 additions and 5 deletions

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -372,6 +372,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;

View File

@ -98,8 +98,7 @@ See https://github.com/adobe-type-tools/cmap-resources
<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">
<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>