diff --git a/app/scripts/views/list-search-view.js b/app/scripts/views/list-search-view.js index 2ceedb78..d9ba896c 100644 --- a/app/scripts/views/list-search-view.js +++ b/app/scripts/views/list-search-view.js @@ -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 }; diff --git a/app/styles/areas/_list.scss b/app/styles/areas/_list.scss index ad305a6f..834317a3 100644 --- a/app/styles/areas/_list.scss +++ b/app/styles/areas/_list.scss @@ -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, diff --git a/app/styles/base/_forms.scss b/app/styles/base/_forms.scss index 09d94bbf..b31c30df 100644 --- a/app/styles/base/_forms.scss +++ b/app/styles/base/_forms.scss @@ -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 { diff --git a/app/styles/base/_icon-font.scss b/app/styles/base/_icon-font.scss index 821f4c11..d8d7fc62 100644 --- a/app/styles/base/_icon-font.scss +++ b/app/styles/base/_icon-font.scss @@ -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(); diff --git a/app/templates/list-search.hbs b/app/templates/list-search.hbs index d412f9da..eba332af 100644 --- a/app/templates/list-search.hbs +++ b/app/templates/list-search.hbs @@ -4,11 +4,14 @@