Commit 871262620d61626177eb6f968531b2bfdacc7f5c

Authored by Leandro Santos
2 parents a1375e04 11aaae15

Merge branch 'search-ui' into 'master'

Search ui - Sass variable and PerPage $stateParam

See merge request !52
src/app/environment/environment.component.ts
... ... @@ -32,7 +32,7 @@ import {SearchComponent} from "../search/search.component";
32 32 }
33 33 },
34 34 {
35   - url: '^/search?query',
  35 + url: '^/search?query&per_page',
36 36 component: SearchComponent,
37 37 name: 'main.environment.search',
38 38 views: {
... ...
src/app/search/search.component.spec.ts
... ... @@ -8,7 +8,7 @@ describe("Components", () => {
8 8 describe("Search Component", () => {
9 9  
10 10 let helper: ComponentTestHelper<SearchComponent>;
11   - let stateParams = { query: 'query' };
  11 + let stateParams = { query: 'query', per_page: 20 };
12 12 let articleService = jasmine.createSpyObj("ArticleService", ["search"]);
13 13 let result = Promise.resolve({ data: [{ id: 1 }], headers: (param: string) => { return 1; } });
14 14 articleService.search = jasmine.createSpy("search").and.returnValue(result);
... ... @@ -30,7 +30,7 @@ describe(&quot;Components&quot;, () =&gt; {
30 30 });
31 31  
32 32 it("load first page with search results", () => {
33   - expect(articleService.search).toHaveBeenCalledWith({ query: 'query', per_page: 10, page: 0 });
  33 + expect(articleService.search).toHaveBeenCalledWith({ query: 'query', per_page: 20, page: 0 });
34 34 });
35 35  
36 36 it("display search results", () => {
... ...
src/app/search/search.component.ts
... ... @@ -19,6 +19,7 @@ export class SearchComponent {
19 19  
20 20 constructor(private articleService: ArticleService, private $stateParams: ng.ui.IStateParamsService, private $state: ng.ui.IStateService) {
21 21 this.query = this.$stateParams['query'];
  22 + this.perPage = this.$stateParams['per_page'] || this.perPage;
22 23 this.loadPage();
23 24 }
24 25  
... ...
src/app/search/search.scss
  1 +$green-color: #6e9e7b;
  2 +
1 3 .search-results {
2 4 .summary {
3 5 color: #bbbbbb;
... ... @@ -13,10 +15,10 @@
13 15 }
14 16 .info {
15 17 .profile {
16   - color: #6e9e7b;
  18 + color: $green-color;
17 19 }
18 20 .time {
19   - color: #6e9e7b;
  21 + color: $green-color;
20 22 font-size: 12px;
21 23 }
22 24 .bullet-separator {
... ...