add loader in the search result page

stable
Juanfran 2015-06-25 12:38:31 +02:00
parent d3986bc49d
commit b7874214cb
5 changed files with 29 additions and 5 deletions

View File

@ -98,7 +98,8 @@ configure = ($routeProvider, $locationProvider, $httpProvider, $provide, $tgEven
{ {
templateUrl: "search/search.html", templateUrl: "search/search.html",
reloadOnSearch: false, reloadOnSearch: false,
section: "search" section: "search",
loader: true
} }
) )

View File

@ -36,3 +36,17 @@ class TgLoadingService extends taiga.Service
target.removeClass('loading') target.removeClass('loading')
module.service("$tgLoading", TgLoadingService) module.service("$tgLoading", TgLoadingService)
LoadingDirective = ($loading) ->
link = ($scope, $el, attr) ->
$scope.$watch attr.tgLoading, (showLoading) =>
if showLoading
$loading.start($el)
else
$loading.finish($el)
return {
link:link
}
module.directive("tgLoading", ["$tgLoading", LoadingDirective])

View File

@ -69,7 +69,10 @@ class SearchController extends mixOf(taiga.Controller, taiga.PageMixin)
@scope.$watch "searchTerm", (term) => @scope.$watch "searchTerm", (term) =>
if term if term
loadSearchData(term) @scope.loading = true
@.loadSearchData(term).then () =>
@scope.loading = false
loadFilters: -> loadFilters: ->
defered = @q.defer() defered = @q.defer()

View File

@ -2,4 +2,5 @@ section.search-in
header header
fieldset fieldset
input(type="text", placeholder="{{'SEARCH.PLACEHOLDER_SEARCH' | translate}}", ng-model="searchTerm") input(type="text", placeholder="{{'SEARCH.PLACEHOLDER_SEARCH' | translate}}", ng-model="searchTerm")
.icon-search-wrapper(tg-loading="loading")
a.icon.icon-search(href="", title="{{'SEARCH.TITLE_ACTION_SEARCH' | translate}}") a.icon.icon-search(href="", title="{{'SEARCH.TITLE_ACTION_SEARCH' | translate}}")

View File

@ -6,10 +6,15 @@
color: $gray-light; color: $gray-light;
} }
} }
.icon-search { .icon-search-wrapper {
color: $gray-light;
position: absolute; position: absolute;
right: .7rem; right: .7rem;
top: .7rem; top: .7rem;
} }
.icon-search {
color: $gray-light;
}
.loading-spinner {
margin-top: .1rem;
}
} }