Merge pull request #847 from SWEETGOOD-DE/master

Adding a button to clear folder search input field
This commit is contained in:
the-djmaze 2023-01-12 16:43:24 +01:00 committed by GitHub
commit e1aa566ec8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 16 additions and 2 deletions

View file

@ -15,7 +15,7 @@
} }
input { input {
width: calc(100% - 8px); width: calc(100% - 37px);
margin-left: 4px; margin-left: 4px;
} }

View file

@ -79,6 +79,13 @@ html.rl-no-preview-pane {
padding-right: 8px; padding-right: 8px;
} }
.btn.buttonClearFolderSearchInput {
font-size: 14px;
padding-left: 8px;
padding-right: 8px;
margin-bottom: 4px;
}
.second-toolbar { .second-toolbar {
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;

View file

@ -818,6 +818,10 @@ export class MailMessageList extends AbstractViewRight {
showScreenPopup(AdvancedSearchPopupView, [MessagelistUserStore.mainSearch()]); showScreenPopup(AdvancedSearchPopupView, [MessagelistUserStore.mainSearch()]);
} }
clearFolderSearchClick() {
document.getElementById("folderSearchInput").value = "";
}
groupSearch(group) { groupSearch(group) {
group.search && MessagelistUserStore.mainSearch(group.search); group.search && MessagelistUserStore.mainSearch(group.search);
} }

View file

@ -20,7 +20,10 @@
</li> </li>
</ul> </ul>
<hr> <hr>
<input type="search" data-bind="textInput: foldersFilter, visible: foldersFilterVisible" data-i18n="[placeholder]GLOBAL/SEARCH"> <div class="search-input-wrp">
<input type="search" id="folderSearchInput" data-bind="textInput: foldersFilter, visible: foldersFilterVisible" data-i18n="[placeholder]GLOBAL/SEARCH">
<a data-bind="click: clearFolderSearchClick" class="btn buttonClearFolderSearchInput"></a>
</div>
<ul class="b-folders-user" data-bind="template: { name: 'MailFolderListItem', foreach: folderListVisible }"></ul> <ul class="b-folders-user" data-bind="template: { name: 'MailFolderListItem', foreach: folderListVisible }"></ul>
<div class="move-action-content-wrapper" data-bind="visible: moveAction"></div> <div class="move-action-content-wrapper" data-bind="visible: moveAction"></div>
</div> </div>