close search button

This commit is contained in:
azivner 2018-06-07 19:50:16 -04:00
parent 385144451b
commit e4d2513451
4 changed files with 21 additions and 6 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 431 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 259 B

View file

@ -10,21 +10,26 @@ const $saveSearchButton = $("#save-search-button");
const $searchBox = $("#search-box");
const $searchResults = $("#search-results");
const $searchResultsInner = $("#search-results-inner");
const $closeSearchButton = $("#close-search-button");
function showSearch() {
$searchBox.show();
$searchInput.focus();
}
function hideSearch() {
resetSearch();
$searchResults.hide();
$searchBox.hide();
}
function toggleSearch() {
if ($searchBox.is(":hidden")) {
showSearch();
}
else {
resetSearch();
$searchResults.hide();
$searchBox.hide();
hideSearch();
}
}
@ -89,6 +94,8 @@ $resetSearchButton.click(resetSearch);
$saveSearchButton.click(saveSearch);
$closeSearchButton.click(hideSearch);
export default {
toggleSearch,
resetSearch,

View file

@ -76,13 +76,21 @@
<div id="search-box" style="display: none; padding: 10px; margin-top: 10px;">
<div style="display: flex; align-items: center;">
<input name="search-text" placeholder="Search text, labels" style="flex-grow: 100; margin-left: 5px; margin-right: 5px;" autocomplete="off">
<button id="do-search-button" class="btn btn-sm" title="Search">Search</button>
<button id="do-search-button" class="btn btn-sm" title="Search (enter)" style="padding: 4px;">
<img src="/images/icons/search-20.png" alt="Search"/>
</button>
&nbsp;
<button id="save-search-button" class="btn btn-sm" title="Save search" style="padding: 4px;">
<img src="/images/icons/save.png" alt="Save search"/>
</button>
&nbsp;
<button id="close-search-button" class="btn btn-sm" title="Close search" style="padding: 4px;">
<img src="/images/icons/x.png" alt="Close search"/>
</button>
</div>
</div>
@ -318,7 +326,7 @@
<div style="display: flex; justify-content: space-between;">
<button id="jump-to-note-button" class="btn btn-sm btn-primary">Jump <kbd>enter</kbd></button>
<button id="show-in-full-text-button" class="btn btn-sm">&lt;&lt; Show results in full text <kbd>ctrl+enter</kbd></button>
<button id="show-in-full-text-button" class="btn btn-sm">Search in full text <kbd>ctrl+enter</kbd></button>
</div>
</form>
</div>