diff options
Diffstat (limited to 'client/src/app/header/search-typeahead.component.html')
-rw-r--r-- | client/src/app/header/search-typeahead.component.html | 41 |
1 files changed, 23 insertions, 18 deletions
diff --git a/client/src/app/header/search-typeahead.component.html b/client/src/app/header/search-typeahead.component.html index bbf3834c5..4355b67af 100644 --- a/client/src/app/header/search-typeahead.component.html +++ b/client/src/app/header/search-typeahead.component.html | |||
@@ -1,38 +1,43 @@ | |||
1 | <div class="d-inline-flex position-relative" id="typeahead-container"> | 1 | <div class="d-inline-flex position-relative" id="typeahead-container"> |
2 | <input | 2 | <input |
3 | type="text" id="search-video" name="search-video" #searchVideo i18n-placeholder placeholder="Search videos, channels…" | 3 | type="text" id="search-video" name="search-video" #searchVideo i18n-placeholder placeholder="Search videos, channels…" |
4 | [(ngModel)]="search" (ngModelChange)="onSearchChange()" (keyup)="handleKey($event)" (keydown.enter)="doSearch()" | 4 | [(ngModel)]="search" (ngModelChange)="onSearchChange()" (keydown)="handleKey($event)" (keydown.enter)="doSearch()" |
5 | aria-label="Search" | 5 | aria-label="Search" autocomplete="off" |
6 | > | 6 | > |
7 | <span class="icon icon-search" (click)="doSearch()"></span> | 7 | <span class="icon icon-search" (click)="doSearch()"></span> |
8 | 8 | ||
9 | <div class="position-absolute jump-to-suggestions"> | 9 | <div class="position-absolute jump-to-suggestions"> |
10 | <!-- suggestions --> | 10 | |
11 | <my-suggestions *ngIf="search && newSearch" [results]="results" [highlight]="search" (init)="initKeyboardEventsManager($event)"></my-suggestions> | 11 | <ul [hidden]="!search || !areSuggestionsOpened" role="listbox" class="p-0 m-0"> |
12 | <li | ||
13 | *ngFor="let result of results; let i = index" class="suggestion d-flex flex-justify-start flex-items-center p-0 f5" | ||
14 | role="option" aria-selected="true" (mouseenter)="onSuggestionHover(i)" (click)="onSuggestionlicked(result)" | ||
15 | > | ||
16 | <my-suggestion [result]="result" [highlight]="search"></my-suggestion> | ||
17 | </li> | ||
18 | </ul> | ||
12 | 19 | ||
13 | <!-- suggestion help, not shown until one of the suggestions is selected and specific to that suggestion --> | 20 | <!-- suggestion help, not shown until one of the suggestions is selected and specific to that suggestion --> |
14 | <div *ngIf="showHelp" id="typeahead-help" class="overflow-hidden"> | 21 | <div *ngIf="showSearchGlobalHelp()" id="typeahead-help" class="overflow-hidden"> |
15 | <ng-container *ngIf="activeResult.type === 'search-global'"> | 22 | <div class="d-flex justify-content-between"> |
16 | <div class="d-flex justify-content-between"> | 23 | <label class="small-title" i18n>GLOBAL SEARCH</label> |
17 | <label class="small-title" i18n>GLOBAL SEARCH</label> | 24 | <div class="advanced-search-status text-muted"> |
18 | <div class="advanced-search-status text-muted"> | 25 | <span *ngIf="serverConfig" class="mr-1" i18n>using {{ serverConfig.search.searchIndex.url }}</span> |
19 | <span *ngIf="serverConfig" class="mr-1" i18n>using {{ serverConfig.followings.instance.autoFollowIndex.indexUrl }}</span> | 26 | <i class="glyphicon glyphicon-globe"></i> |
20 | <i class="glyphicon glyphicon-globe"></i> | ||
21 | </div> | ||
22 | </div> | 27 | </div> |
23 | <div class="text-muted" i18n>Results will be augmented with those of a third-party index. Only data necessary to make the query will be sent.</div> | 28 | </div> |
24 | </ng-container> | 29 | <div class="text-muted" i18n>Results will be augmented with those of a third-party index. Only data necessary to make the query will be sent.</div> |
25 | </div> | 30 | </div> |
26 | 31 | ||
27 | <!-- search instructions, when search input is empty --> | 32 | <!-- search instructions, when search input is empty --> |
28 | <div *ngIf="areInstructionsDisplayed" id="typeahead-instructions" class="overflow-hidden"> | 33 | <div *ngIf="areInstructionsDisplayed()" id="typeahead-instructions" class="overflow-hidden"> |
29 | <div class="d-flex justify-content-between"> | 34 | <div class="d-flex justify-content-between"> |
30 | <label class="small-title" i18n>ADVANCED SEARCH</label> | 35 | <label class="small-title" i18n>ADVANCED SEARCH</label> |
31 | <div class="advanced-search-status c-help"> | 36 | <div class="advanced-search-status c-help"> |
32 | <span [ngClass]="canSearchAnyURI ? 'text-success' : 'text-muted'" i18n-title title="Determines whether you can resolve any distant content, or if this instance only allows doing so for instances it follows."> | 37 | <span [ngClass]="canSearchAnyURI ? 'text-success' : 'text-muted'" i18n-title title="Determines whether you can resolve any distant content, or if this instance only allows doing so for instances it follows."> |
33 | <span *ngIf="canSearchAnyURI" class="mr-1" i18n>any instance</span> | 38 | <span *ngIf="canSearchAnyURI()" class="mr-1" i18n>any instance</span> |
34 | <span *ngIf="!canSearchAnyURI" class="mr-1" i18n>only followed instances</span> | 39 | <span *ngIf="!canSearchAnyURI()" class="mr-1" i18n>only followed instances</span> |
35 | <i [ngClass]="canSearchAnyURI ? 'glyphicon glyphicon-ok-sign' : 'glyphicon glyphicon-exclamation-sign'"></i> | 40 | <i [ngClass]="canSearchAnyURI() ? 'glyphicon glyphicon-ok-sign' : 'glyphicon glyphicon-exclamation-sign'"></i> |
36 | </span> | 41 | </span> |
37 | </div> | 42 | </div> |
38 | </div> | 43 | </div> |