Commit 575daccf9b3f39faf9d16df9b9da9bbfd8d29156

Authored by Ábner Oliveira
1 parent 5bc45a30

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