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