Viewer: enable find functionality for small devices
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
parent
c79e5b3f17
commit
87a30a7ee1
@ -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,15 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.findbar {
|
||||
min-width: 300px;
|
||||
}
|
||||
.findbar > div {
|
||||
height: 32px;
|
||||
}
|
||||
html[dir='ltr'] .findbar {
|
||||
left: 68px;
|
||||
}
|
||||
|
||||
html[dir='rtl'] .findbar {
|
||||
right: 68px;
|
||||
}
|
||||
@ -478,6 +482,9 @@ html[dir='ltr'] .doorHangerRight:before {
|
||||
font-style: italic;
|
||||
color: #A6B7D0;
|
||||
}
|
||||
#findMsg:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#findInput.notFound {
|
||||
background-color: rgb(255, 102, 102);
|
||||
@ -500,14 +507,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;
|
||||
}
|
||||
@ -1913,7 +1920,7 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
|
||||
}
|
||||
|
||||
@media all and (max-width: 640px) {
|
||||
.hiddenSmallView {
|
||||
.hiddenSmallView, .hiddenSmallView * {
|
||||
display: none;
|
||||
}
|
||||
.visibleSmallView {
|
||||
@ -1922,6 +1929,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,23 +97,31 @@ See https://github.com/adobe-type-tools/cmap-resources
|
||||
</div> <!-- sidebarContainer -->
|
||||
|
||||
<div id="mainContainer">
|
||||
<div class="findbar hidden doorHanger hiddenSmallView" id="findbar">
|
||||
<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 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">
|
||||
@ -178,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…
Reference in New Issue
Block a user