diff --git a/app/assets/javascripts/app/frontend/controllers/notes.js b/app/assets/javascripts/app/frontend/controllers/notes.js index 62277be9c..75cdd3a73 100644 --- a/app/assets/javascripts/app/frontend/controllers/notes.js +++ b/app/assets/javascripts/app/frontend/controllers/notes.js @@ -102,7 +102,10 @@ angular.module('app.frontend') if(filterText.length == 0) { note.visible = true; } else { - note.visible = note.safeTitle().toLowerCase().includes(filterText) || note.safeText().toLowerCase().includes(filterText); + var words = filterText.split(" "); + var matchesTitle = words.every(function(word) { return note.safeTitle().toLowerCase().indexOf(word) >= 0; }); + var matchesBody = words.every(function(word) { return note.safeText().toLowerCase().indexOf(word) >= 0; }); + note.visible = matchesTitle || matchesBody; } return note.visible; }.bind(this) diff --git a/app/assets/stylesheets/app/_notes.scss b/app/assets/stylesheets/app/_notes.scss index 815f9adc0..f0997f265 100644 --- a/app/assets/stylesheets/app/_notes.scss +++ b/app/assets/stylesheets/app/_notes.scss @@ -35,6 +35,7 @@ clear: left; height: 32px; margin-top: 20px; + position: relative; .filter-bar { background-color: $light-bg-color; @@ -48,6 +49,28 @@ border: none; width: 100%; + position: relative; + } + + #search-clear-button { + border-radius: 50%; + width: 17px; + height: 17px; + color: white; + cursor: default; + background-color: gray; + font-size: 10px; + line-height: 17px; + text-align: center; + position: absolute; + top: 8px; + right: 8px; + + transition: background-color 0.15s linear; + + &:hover { + background-color: $blue-color; + } } } diff --git a/app/assets/templates/frontend/notes.html.haml b/app/assets/templates/frontend/notes.html.haml index 5f23c29db..d49b4e3de 100644 --- a/app/assets/templates/frontend/notes.html.haml +++ b/app/assets/templates/frontend/notes.html.haml @@ -6,6 +6,7 @@ %br .filter-section %input.filter-bar{"select-on-click" => "true", "ng-model" => "ctrl.noteFilter.text", "placeholder" => "Search", "ng-change" => "ctrl.filterTextChanged()", "lowercase" => "true"} + #search-clear-button{"ng-if" => "ctrl.noteFilter.text", "ng-click" => "ctrl.noteFilter.text = ''; ctrl.filterTextChanged()"} ✕ %ul.section-menu-bar#tag-menu-bar %li{"ng-class" => "{'selected' : ctrl.showMenu}"} %label{"ng-click" => "ctrl.showMenu = !ctrl.showMenu"} Sort