diff options
author | Rigel Kent <sendmemail@rigelk.eu> | 2020-01-20 15:12:51 +0100 |
---|---|---|
committer | Rigel Kent <sendmemail@rigelk.eu> | 2020-02-13 16:32:21 +0100 |
commit | f409f0c3b91d85c66b4841d72ea65b5fbe1483d8 (patch) | |
tree | 72c2ab403f6b0708921b64bafae5ef971dfbde3e /client/src/app/header/search-typeahead.component.html | |
parent | 36f2981f7d586cea206e4c143c18cf866a4e3acd (diff) | |
download | PeerTube-f409f0c3b91d85c66b4841d72ea65b5fbe1483d8.tar.gz PeerTube-f409f0c3b91d85c66b4841d72ea65b5fbe1483d8.tar.zst PeerTube-f409f0c3b91d85c66b4841d72ea65b5fbe1483d8.zip |
Search typeahead initial design
Diffstat (limited to 'client/src/app/header/search-typeahead.component.html')
-rw-r--r-- | client/src/app/header/search-typeahead.component.html | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/client/src/app/header/search-typeahead.component.html b/client/src/app/header/search-typeahead.component.html new file mode 100644 index 000000000..fe3f6ff4d --- /dev/null +++ b/client/src/app/header/search-typeahead.component.html | |||
@@ -0,0 +1,69 @@ | |||
1 | <div class="d-inline-flex position-relative" id="typeahead-container" #contentWrapper> | ||
2 | <ng-content></ng-content> | ||
3 | |||
4 | <div class="position-absolute jump-to-suggestions"> | ||
5 | <!-- suggestions --> | ||
6 | <ul id="jump-to-results" role="listbox" class="p-0 m-0" #optionsList> | ||
7 | <li *ngFor="let res of results" class="d-flex flex-justify-start flex-items-center p-0 f5" role="option" aria-selected="true"> | ||
8 | <ng-container *ngTemplateOutlet="result; context: {$implicit: res}"></ng-container> | ||
9 | </li> | ||
10 | </ul> | ||
11 | |||
12 | <!-- search instructions, when search input is empty --> | ||
13 | <div *ngIf="!hasSearch" id="typeahead-instructions" class="overflow-hidden"> | ||
14 | <div class="d-flex justify-content-between"> | ||
15 | <label class="small-title" i18n>Advanced search</label> | ||
16 | <div class="advanced-search-status"> | ||
17 | <span [ngClass]="URIPolicy === 'any' ? 'text-success' : 'text-muted'" [title]="URIPolicyText"> | ||
18 | <span class="mr-1" i18n>{URIPolicy, select, only-followed {only followed instances} other {any instance}} </span> | ||
19 | <i [ngClass]="URIPolicy === 'any' ? 'glyphicon glyphicon-ok-sign' : 'glyphicon glyphicon-exclamation-sign'"></i> | ||
20 | </span> | ||
21 | </div> | ||
22 | </div> | ||
23 | <ul> | ||
24 | <li> | ||
25 | <em>@username@domain</em> <span class="flex-auto text-muted" i18n>account or channel</span> | ||
26 | </li> | ||
27 | <li> | ||
28 | <em>URL</em> <span class="text-muted" i18n>account or channel</span> | ||
29 | </li> | ||
30 | <li> | ||
31 | <em>URL</em> <span class="text-muted" i18n>video</span> | ||
32 | </li> | ||
33 | </ul> | ||
34 | <span class="text-muted" i18n>Any other text will return matching video, channel or account names.</span> | ||
35 | </div> | ||
36 | </div> | ||
37 | |||
38 | </div> | ||
39 | |||
40 | <ng-template #result let-result> | ||
41 | <a tabindex="0" class="d-flex flex-auto flex-items-center p-2" | ||
42 | data-target-type="Repository" | ||
43 | [routerLink]="result.routerLink" | ||
44 | > | ||
45 | <div class="flex-shrink-0 mr-2 text-center"> | ||
46 | <my-global-icon *ngIf="result.type !== 'channel'" iconName="search"></my-global-icon> | ||
47 | <my-global-icon *ngIf="result.type === 'channel'" iconName="folder"></my-global-icon> | ||
48 | </div> | ||
49 | |||
50 | <img class="avatar mr-2 flex-shrink-0 d-none" alt="" aria-label="Team" src="" width="28" height="28"> | ||
51 | |||
52 | <div class="flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target" [attr.aria-label]="result.text" [innerHTML]="result.text | highlight : searchInput.value"></div> | ||
53 | |||
54 | <div *ngIf="result.type !== 'channel' && result.type !== 'suggestion'" class="border rounded flex-shrink-0 px-1 bg-gray text-gray-light ml-1 f6"> | ||
55 | <span *ngIf="result.type === 'search-channel'" [attr.aria-label]="inThisChannelText"> | ||
56 | {{ inThisChannelText }} | ||
57 | </span> | ||
58 | <span *ngIf="result.type === 'search-global'" [attr.aria-label]="inAllText"> | ||
59 | {{ inAllText }} | ||
60 | </span> | ||
61 | <span *ngIf="result.type === 'search-any'" aria-hidden="true" class="d-inline-block ml-1 v-align-middle">↵</span> | ||
62 | </div> | ||
63 | |||
64 | <div *ngIf="result.type === 'channel'" aria-hidden="true" class="border rounded flex-shrink-0 px-1 bg-gray text-gray-light ml-1 f6 d-on-nav-focus" i18n> | ||
65 | Jump to channel | ||
66 | <span class="d-inline-block ml-1 v-align-middle">↵</span> | ||
67 | </div> | ||
68 | </a> | ||
69 | </ng-template> \ No newline at end of file | ||