fix #1657: clear searchbox button

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 };

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,

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 {

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();

app/templates/list-search.hbs

@@ -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>

release-notes.md

@@ -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