mirror of https://github.com/keeweb/keeweb
fix #1657: clear searchbox button
parent
683b0bc4e6
commit
f184915849
|
@ -24,6 +24,7 @@ class ListSearchView extends View {
|
|||
'click .list__search-btn-sort': 'sortOptionsClick',
|
||||
'click .list__search-icon-search': 'advancedSearchClick',
|
||||
'click .list__search-btn-menu': 'toggleMenu',
|
||||
'click .list__search-icon-clear': 'clickClear',
|
||||
'change .list__search-adv input[type=checkbox]': 'toggleAdvCheck'
|
||||
};
|
||||
|
||||
|
@ -212,7 +213,9 @@ class ListSearchView extends View {
|
|||
}
|
||||
|
||||
inputChange() {
|
||||
Events.emit('add-filter', { text: this.inputEl.val() });
|
||||
const text = this.inputEl.val();
|
||||
this.inputEl[0].parentElement.classList.toggle('list__search-field-wrap--text', text);
|
||||
Events.emit('add-filter', { text });
|
||||
}
|
||||
|
||||
inputFocus(e) {
|
||||
|
@ -428,6 +431,11 @@ class ListSearchView extends View {
|
|||
fileListUpdated() {
|
||||
this.render();
|
||||
}
|
||||
|
||||
clickClear() {
|
||||
this.inputEl.val('');
|
||||
this.inputChange();
|
||||
}
|
||||
}
|
||||
|
||||
export { ListSearchView };
|
||||
|
|
|
@ -55,21 +55,30 @@
|
|||
box-shadow: none !important;
|
||||
border-radius: 0.6em !important;
|
||||
border: none !important;
|
||||
padding-left: 0.4em;
|
||||
background-color: var(--secondary-background-color) !important;
|
||||
}
|
||||
}
|
||||
&-icon-search {
|
||||
&-icon-search,
|
||||
&-icon-clear {
|
||||
color: var(--muted-color);
|
||||
position: absolute;
|
||||
top: 0.5em;
|
||||
right: 0.5em;
|
||||
top: 0.53em;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: var(--medium-color);
|
||||
}
|
||||
@include mobile {
|
||||
top: 0.5em;
|
||||
top: 0.6em;
|
||||
}
|
||||
}
|
||||
&-icon-search {
|
||||
left: 0.6em;
|
||||
}
|
||||
&-icon-clear {
|
||||
right: 0.6em;
|
||||
display: none;
|
||||
.list__search-field-wrap--text & {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&-btn-new,
|
||||
|
|
|
@ -97,8 +97,9 @@ input:not([type]) {
|
|||
}
|
||||
}
|
||||
|
||||
&.input-padding-right {
|
||||
padding-right: 1.7em;
|
||||
&.input-search {
|
||||
padding-left: 2.9em;
|
||||
padding-right: 1.8em;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
|
|
|
@ -58,6 +58,7 @@ $fa-var-unlock: next-fa-glyph();
|
|||
$fa-var-lock: next-fa-glyph();
|
||||
$fa-var-check: next-fa-glyph();
|
||||
$fa-var-times: next-fa-glyph();
|
||||
$fa-var-times-circle: next-fa-glyph();
|
||||
$fa-var-folder: next-fa-glyph();
|
||||
$fa-var-folder-open: next-fa-glyph();
|
||||
$fa-var-ban: next-fa-glyph();
|
||||
|
|
|
@ -4,11 +4,14 @@
|
|||
<i class="fa fa-bars"></i>
|
||||
</div>
|
||||
<div class="list__search-field-wrap">
|
||||
<input type="text" class="list__search-field input-padding-right" autocomplete="off" spellcheck="false">
|
||||
<input type="text" class="list__search-field input-search" autocomplete="off" spellcheck="false">
|
||||
<div class="list__search-icon-search" title="{{res 'searchAdvTitle'}}">
|
||||
<i class="fa fa-search"></i>
|
||||
<i class="fa fa-caret-down"></i>
|
||||
</div>
|
||||
<div class="list__search-icon-clear">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list__search-btn-new {{#unless canCreate}}hide{{/unless}}" title="{{res 'searchAddNew'}}">
|
||||
<i class="fa fa-plus"></i>
|
||||
|
|
|
@ -1,5 +1,8 @@
|
|||
Release notes
|
||||
-------------
|
||||
##### v1.17.0 (TBD)
|
||||
`+` clear searchbox button
|
||||
|
||||
##### v1.16.4 (2020-12-17)
|
||||
`-` fix #1656: false positive report on VirusTotal
|
||||
`+` #1629: possibility to use OneDrive as SPA
|
||||
|
|
Loading…
Reference in New Issue