From d73a0d006d997098557be68e69a6cfc21fda18ee Mon Sep 17 00:00:00 2001 From: Peter Deltchev <peter@deltchev.com> Date: Wed, 20 Jan 2016 22:06:52 -0800 Subject: [PATCH] #1: Improved visual feedback that a search is in progress. --- public/templates/directives/search.html | 9 ++++----- resources/assets/scripts/app/directives/search.coffee | 5 +++++ 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/public/templates/directives/search.html b/public/templates/directives/search.html index 079f023a..84a4e6d3 100644 --- a/public/templates/directives/search.html +++ b/public/templates/directives/search.html @@ -8,15 +8,14 @@ /> <section class="search-results pfm-popup" id="search-results"> - <div ng-hide="searchInProgress"> - <p class="empty-box">Type something to begin searching!</p> - </div> + <p ng-show="!searchInProgress && !searchComplete" class="empty-box">Type something to begin searching!</p> - <div ng-show="searchInProgress"> + <p ng-show="searchInProgress" class="empty-box">Searching…</p> + + <div ng-show="!searchInProgress && searchComplete"> <div class="-column1"> <h3 class="-section-header">Matching tracks</h3> <pfm-tracks-list tracks="tracks"></pfm-tracks-list> - </div> <div class="-column2"> diff --git a/resources/assets/scripts/app/directives/search.coffee b/resources/assets/scripts/app/directives/search.coffee index 673123d0..c08dddc3 100644 --- a/resources/assets/scripts/app/directives/search.coffee +++ b/resources/assets/scripts/app/directives/search.coffee @@ -26,6 +26,7 @@ angular.module('ponyfm').directive 'pfmSearch', () -> ($scope, search) -> $scope.searchQuery = '' $scope.searchInProgress = false + $scope.searchComplete = false $scope.tracks = [] $scope.albums = [] @@ -44,6 +45,7 @@ angular.module('ponyfm').directive 'pfmSearch', () -> if searchQuery.length <3 clearResults() $scope.searchInProgress = false + $scope.searchComplete = false return $scope.searchInProgress = true @@ -51,6 +53,9 @@ angular.module('ponyfm').directive 'pfmSearch', () -> search.searchAllContent(searchQuery) .then (results)-> clearResults() + $scope.searchInProgress = false + $scope.searchComplete = true + for track in results.tracks $scope.tracks.push(track)