Commit 575daccf9b3f39faf9d16df9b9da9bbfd8d29156
1 parent
5bc45a30
Exists in
master
and in
10 other branches
changed search.component and the search-form.component to fill the query field w…
…ith the query value in the current query param. changed the search.component to have a search text box to show then current query and allow the user query for new terms.
Showing
7 changed files
with
51 additions
and
11 deletions
Show diff stats
src/app/search/search-form/search-form.component.ts
... | ... | @@ -9,9 +9,18 @@ export class SearchFormComponent { |
9 | 9 | |
10 | 10 | query: string; |
11 | 11 | |
12 | - constructor(private $state: ng.ui.IStateService) { } | |
12 | + constructor(private $state: ng.ui.IStateService) { | |
13 | + } | |
14 | + | |
15 | + ngOnInit() { | |
16 | + this.query = this.$state.params['query']; | |
17 | + } | |
13 | 18 | |
14 | 19 | search() { |
15 | 20 | this.$state.go('main.environment.search', { query: this.query }); |
16 | 21 | } |
22 | + | |
23 | + isSearchPage() { | |
24 | + return "main.environment.search" === this.$state.current.name; | |
25 | + } | |
17 | 26 | } | ... | ... |
src/app/search/search-form/search-form.html
1 | -<form class="navbar-form search-form" role="search"> | |
1 | +<form class="navbar-form search-form" role="search" ng-if="!ctrl.isSearchPage()"> | |
2 | 2 | <div class="input-group"> |
3 | 3 | <input type="text" class="search-input form-control" placeholder="Search" name="q" ng-model="ctrl.query"> |
4 | 4 | <div class="input-group-btn"> | ... | ... |
src/app/search/search.component.ts
1 | 1 | import {Component, Inject} from "ng-forward"; |
2 | 2 | import {ArticleService} from "./../../lib/ng-noosfero-api/http/article.service"; |
3 | 3 | |
4 | +import {SearchFormComponent} from "./search-form/search-form.component"; | |
5 | + | |
4 | 6 | @Component({ |
5 | 7 | selector: 'search', |
6 | - templateUrl: 'app/search/search.html' | |
8 | + templateUrl: 'app/search/search.html', | |
9 | + directives: [SearchFormComponent] | |
7 | 10 | }) |
8 | -@Inject(ArticleService, "$stateParams") | |
11 | +@Inject(ArticleService, "$stateParams", "$state") | |
9 | 12 | export class SearchComponent { |
10 | 13 | |
11 | 14 | articles: noosfero.Article[]; |
... | ... | @@ -14,11 +17,15 @@ export class SearchComponent { |
14 | 17 | perPage = 10; |
15 | 18 | currentPage: number = 0; |
16 | 19 | |
17 | - constructor(private articleService: ArticleService, private $stateParams: ng.ui.IStateParamsService) { | |
20 | + constructor(private articleService: ArticleService, private $stateParams: ng.ui.IStateParamsService, private $state: ng.ui.IStateService) { | |
18 | 21 | this.query = this.$stateParams['query']; |
19 | 22 | this.loadPage(); |
20 | 23 | } |
21 | 24 | |
25 | + search() { | |
26 | + this.$state.go('main.environment.search', { query: this.query }); | |
27 | + } | |
28 | + | |
22 | 29 | loadPage() { |
23 | 30 | let filters = { |
24 | 31 | query: this.query, | ... | ... |
src/app/search/search.html
1 | -<h2>Search</h2> | |
2 | - | |
1 | +<form ng-submit="ctrl.search()"> | |
2 | +<label for="query" ng-bind-html="'search.results.query.label' | translate"></label> | |
3 | +<input id="query" placeholder="{{'search.results.query.placeholder' | translate}}" type="search" class="search-box-title" ng-model="ctrl.query"> | |
4 | +</form> | |
3 | 5 | <div class="search-results"> |
4 | 6 | <div class="summary"> |
5 | 7 | {{"search.results.summary" | translate:{results: ctrl.totalResults}:"messageformat"}} | ... | ... |
src/app/search/search.scss
... | ... | @@ -6,7 +6,7 @@ |
6 | 6 | } |
7 | 7 | .result { |
8 | 8 | margin: 25px 0; |
9 | - | |
9 | + | |
10 | 10 | .title { |
11 | 11 | h4 { |
12 | 12 | margin: 0; |
... | ... | @@ -25,6 +25,24 @@ |
25 | 25 | font-size: 10px; |
26 | 26 | color: #afd6ba; |
27 | 27 | } |
28 | - } | |
28 | + } | |
29 | 29 | } |
30 | 30 | } |
31 | + | |
32 | +.search-box-title { | |
33 | + border: 0; | |
34 | + border-bottom: 1px solid rgba(0,0,0,.15); | |
35 | + border-radius: 0; | |
36 | + font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif; | |
37 | + letter-spacing: 0; | |
38 | + font-weight: 300; | |
39 | + font-style: normal; | |
40 | + font-size: 50px; | |
41 | + height: 80px; | |
42 | + padding: 0; | |
43 | + width: 100%; | |
44 | +} | |
45 | + | |
46 | +.search-box-title:focus { | |
47 | + outline: none; | |
48 | +} | |
31 | 49 | \ No newline at end of file | ... | ... |
src/languages/en.json
... | ... | @@ -75,5 +75,7 @@ |
75 | 75 | "custom_content.title": "Edit content", |
76 | 76 | "profile.custom_header.label": "Header", |
77 | 77 | "profile.custom_footer.label": "Footer", |
78 | - "search.results.summary": "{results, plural, one{result} other{# results}}" | |
78 | + "search.results.summary": "{results, plural, one{result} other{# results}}", | |
79 | + "search.results.query.label": "Search for:", | |
80 | + "search.results.query.placeholder": "Search" | |
79 | 81 | } | ... | ... |
src/languages/pt.json
... | ... | @@ -75,5 +75,7 @@ |
75 | 75 | "custom_content.title": "Editar conteúdo", |
76 | 76 | "profile.custom_header.label": "Cabeçalho", |
77 | 77 | "profile.custom_footer.label": "Rodapé", |
78 | - "search.results.summary": "{results, plural, one{resultado} other{# resultados}}" | |
78 | + "search.results.summary": "{results, plural, one{# resultado} other{# resultados}}", | |
79 | + "search.results.query.label": "Buscar:", | |
80 | + "search.results.query.placeholder": "Informe aqui sua busca" | |
79 | 81 | } | ... | ... |