From 79ed0e71216cee2950041403b6e4592e60da8347 Mon Sep 17 00:00:00 2001 From: Ward Bell Date: Sun, 30 Apr 2017 20:42:08 -0700 Subject: [PATCH] feat(aio): display API icons in search results MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add API symbols for `let` and `var` so don’t have to translate those types into `const` Also replace
in search results HTML with ellipses icon. --- .../search-results.component.html | 14 ++++++--- .../search-results.component.spec.ts | 30 +++++++++---------- aio/src/styles/1-layouts/_layouts-dir.scss | 3 +- aio/src/styles/2-modules/_modules-dir.scss | 1 + .../_search-results.scss | 13 +++++++- aio/src/styles/_constants.scss | 10 ++++++- 6 files changed, 48 insertions(+), 23 deletions(-) rename aio/src/styles/{1-layouts => 2-modules}/_search-results.scss (85%) diff --git a/aio/src/app/search/search-results/search-results.component.html b/aio/src/app/search/search-results/search-results.component.html index db05a09d27..b9edc5c63a 100644 --- a/aio/src/app/search/search-results/search-results.component.html +++ b/aio/src/app/search/search-results/search-results.component.html @@ -2,13 +2,19 @@

{{area.name}} ({{area.pages.length}})

-
diff --git a/aio/src/app/search/search-results/search-results.component.spec.ts b/aio/src/app/search/search-results/search-results.component.spec.ts index f28eb376ff..a677d1b317 100644 --- a/aio/src/app/search/search-results/search-results.component.spec.ts +++ b/aio/src/app/search/search-results/search-results.component.spec.ts @@ -19,10 +19,10 @@ describe('SearchResultsComponent', () => { /** Get a full set of test results. "Take" what you need */ function getTestResults(take?: number) { const results: SearchResult[] = [ - { path: 'guide/a', title: 'Guide A'}, - { path: 'api/d', title: 'API D'}, + { path: 'guide/a', title: 'Guide A' }, + { path: 'api/d', title: 'API D' }, { path: 'guide/b', title: 'Guide B' }, - { path: 'guide/a/c', title: 'Guide A - C'}, + { path: 'guide/a/c', title: 'Guide A - C' }, { path: 'api/c', title: 'API C' } ] // fill it out to exceed 10 guide pages @@ -30,7 +30,7 @@ describe('SearchResultsComponent', () => { return { path: 'guide/' + l, title: 'Guide ' + l}; })) // add these empty fields to satisfy interface - .map(r => ({...r, ...{ keywords: '', titleWords: '', type: '' }})); + .map(r => ({...{ keywords: '', titleWords: '', type: '' }, ...r })); return take === undefined ? results : results.slice(0, take); } @@ -75,13 +75,13 @@ describe('SearchResultsComponent', () => { expect(currentAreas).toEqual([ { name: 'api', pages: [ - {path: 'api/c', title: 'API C', type: '', keywords: '', titleWords: '' }, - {path: 'api/d', title: 'API D', type: '', keywords: '', titleWords: '' }, + { path: 'api/c', title: 'API C', type: '', keywords: '', titleWords: '' }, + { path: 'api/d', title: 'API D', type: '', keywords: '', titleWords: '' }, ], priorityPages: [] }, { name: 'guide', pages: [ - {path: 'guide/a', title: 'Guide A', type: '', keywords: '', titleWords: '' }, - {path: 'guide/a/c', title: 'Guide A - C', type: '', keywords: '', titleWords: '' }, - {path: 'guide/b', title: 'Guide B', type: '', keywords: '', titleWords: '' }, + { path: 'guide/a', title: 'Guide A', type: '', keywords: '', titleWords: '' }, + { path: 'guide/a/c', title: 'Guide A - C', type: '', keywords: '', titleWords: '' }, + { path: 'guide/b', title: 'Guide B', type: '', keywords: '', titleWords: '' }, ], priorityPages: [] } ]); }); @@ -108,7 +108,7 @@ describe('SearchResultsComponent', () => { it('should put search results with no containing folder into the default area (other)', () => { const results = [ - {path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' } + { path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' } ]; searchResults.next({ query: '', results: results }); @@ -121,7 +121,7 @@ describe('SearchResultsComponent', () => { it('should omit search results with no title', () => { const results = [ - {path: 'news', title: undefined, type: 'marketing', keywords: '', titleWords: '' } + { path: 'news', title: undefined, type: 'marketing', keywords: '', titleWords: '' } ]; searchResults.next({ query: '', results: results }); @@ -132,7 +132,7 @@ describe('SearchResultsComponent', () => { let selectedResult: SearchResult; component.resultSelected.subscribe((result: SearchResult) => selectedResult = result); const results = [ - {path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' } + { path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' } ]; searchResults.next({ query: '', results: results }); @@ -140,12 +140,12 @@ describe('SearchResultsComponent', () => { const anchor = fixture.debugElement.query(By.css('a')); anchor.triggerEventHandler('click', {}); - expect(selectedResult).toEqual({path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' }); + expect(selectedResult).toEqual({ path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' }); }); it('should clear the results when a search result is clicked', () => { const results = [ - {path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' } + { path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' } ]; searchResults.next({ query: '', results: results }); @@ -160,7 +160,7 @@ describe('SearchResultsComponent', () => { describe('hideResults', () => { it('should clear the results', () => { const results = [ - {path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' } + { path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' } ]; searchResults.next({ query: '', results: results }); diff --git a/aio/src/styles/1-layouts/_layouts-dir.scss b/aio/src/styles/1-layouts/_layouts-dir.scss index 69359942d0..fb97863de8 100644 --- a/aio/src/styles/1-layouts/_layouts-dir.scss +++ b/aio/src/styles/1-layouts/_layouts-dir.scss @@ -4,11 +4,10 @@ @import 'sidenav'; @import 'content-layout'; -@import 'search-results'; @import 'top-menu'; @import 'marketing-layout'; @import 'footer'; @import 'layout-global'; @import 'not-found'; @import 'api-page'; -@import 'table-of-contents'; \ No newline at end of file +@import 'table-of-contents'; diff --git a/aio/src/styles/2-modules/_modules-dir.scss b/aio/src/styles/2-modules/_modules-dir.scss index bde8be7ece..9b3891dad0 100644 --- a/aio/src/styles/2-modules/_modules-dir.scss +++ b/aio/src/styles/2-modules/_modules-dir.scss @@ -17,6 +17,7 @@ @import 'hero'; @import 'announcement-bar'; @import 'banner'; + @import 'search-results'; @import 'api-list'; @import 'hr'; @import 'live-example'; diff --git a/aio/src/styles/1-layouts/_search-results.scss b/aio/src/styles/2-modules/_search-results.scss similarity index 85% rename from aio/src/styles/1-layouts/_search-results.scss rename to aio/src/styles/2-modules/_search-results.scss index 96d355e716..16adc61012 100644 --- a/aio/src/styles/1-layouts/_search-results.scss +++ b/aio/src/styles/2-modules/_search-results.scss @@ -61,8 +61,19 @@ aio-search-results { color: $white; } &:visited { - text-decoration: none; + text-decoration: none; } + + span.symbol { + margin-right: 8px; + } + } + + .more-items { + content: 'more_horiz'; + font-size: 20px; + color: $mediumgray; + padding: 0; } @include bp(tiny) { diff --git a/aio/src/styles/_constants.scss b/aio/src/styles/_constants.scss index d469f7d272..4a8b6fee25 100755 --- a/aio/src/styles/_constants.scss +++ b/aio/src/styles/_constants.scss @@ -95,8 +95,16 @@ $api-symbols: ( content: 'K', background: $purple-600 ), + let: ( + content: 'K', + background: $purple-600 + ), + var: ( + content: 'K', + background: $purple-600 + ), type-alias: ( content: 'T', background: $light-green-600 ) -); \ No newline at end of file +);