diff options
Diffstat (limited to 'client/src/app/header')
-rw-r--r-- | client/src/app/header/header.component.html | 2 | ||||
-rw-r--r-- | client/src/app/header/search-typeahead.component.scss | 11 | ||||
-rw-r--r-- | client/src/app/header/search-typeahead.component.ts | 25 |
3 files changed, 26 insertions, 12 deletions
diff --git a/client/src/app/header/header.component.html b/client/src/app/header/header.component.html index 561ee6c16..8e1d24ea8 100644 --- a/client/src/app/header/header.component.html +++ b/client/src/app/header/header.component.html | |||
@@ -1,7 +1,7 @@ | |||
1 | <my-search-typeahead class="w-100 d-flex justify-content-end"> | 1 | <my-search-typeahead class="w-100 d-flex justify-content-end"> |
2 | <input | 2 | <input |
3 | type="text" id="search-video" name="search-video" [attr.aria-label]="ariaLabelTextForSearch" | 3 | type="text" id="search-video" name="search-video" [attr.aria-label]="ariaLabelTextForSearch" |
4 | i18n-placeholder placeholder="Search videos, channels… known by this instance" [(ngModel)]="searchValue" | 4 | i18n-placeholder placeholder="Search videos, channels…" [(ngModel)]="searchValue" |
5 | > | 5 | > |
6 | <span class="icon icon-search"></span> | 6 | <span class="icon icon-search"></span> |
7 | </my-search-typeahead> | 7 | </my-search-typeahead> |
diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss index c2f5a1828..6d7511c70 100644 --- a/client/src/app/header/search-typeahead.component.scss +++ b/client/src/app/header/search-typeahead.component.scss | |||
@@ -1,4 +1,7 @@ | |||
1 | @import '_mixins'; | 1 | @import '_mixins'; |
2 | @import '_variables'; | ||
3 | @import '_bootstrap-variables'; | ||
4 | @import '~bootstrap/scss/mixins/_breakpoints'; | ||
2 | 5 | ||
3 | .jump-to-suggestions { | 6 | .jump-to-suggestions { |
4 | top: 100%; | 7 | top: 100%; |
@@ -46,11 +49,11 @@ my-suggestions ::ng-deep ul { | |||
46 | transition: box-shadow .3s ease, width .2s ease; | 49 | transition: box-shadow .3s ease, width .2s ease; |
47 | } | 50 | } |
48 | 51 | ||
49 | @media screen and (min-width: 500px) { | 52 | @media screen and (min-width: $mobile-view) { |
50 | margin-left: 10px; | 53 | margin-left: 10px; |
51 | } | 54 | } |
52 | 55 | ||
53 | @media screen and (max-width: 800px) { | 56 | @media screen and (max-width: $small-view) { |
54 | flex: 1; | 57 | flex: 1; |
55 | 58 | ||
56 | ::ng-deep input { | 59 | ::ng-deep input { |
@@ -71,7 +74,7 @@ my-suggestions ::ng-deep ul { | |||
71 | &:focus, | 74 | &:focus, |
72 | ::ng-deep &:focus-within { | 75 | ::ng-deep &:focus-within { |
73 | & > div:last-child { | 76 | & > div:last-child { |
74 | @media screen and (min-width: 500px) { | 77 | @media screen and (min-width: $mobile-view) { |
75 | display: initial !important; | 78 | display: initial !important; |
76 | } | 79 | } |
77 | 80 | ||
@@ -87,7 +90,7 @@ my-suggestions ::ng-deep ul { | |||
87 | border-end-start-radius: 0; | 90 | border-end-start-radius: 0; |
88 | border-end-end-radius: 0; | 91 | border-end-end-radius: 0; |
89 | 92 | ||
90 | @media screen and (min-width: 900px) { | 93 | @include media-breakpoint-up(lg) { |
91 | width: 500px; | 94 | width: 500px; |
92 | } | 95 | } |
93 | } | 96 | } |
diff --git a/client/src/app/header/search-typeahead.component.ts b/client/src/app/header/search-typeahead.component.ts index 514c04704..9b414bc56 100644 --- a/client/src/app/header/search-typeahead.component.ts +++ b/client/src/app/header/search-typeahead.component.ts | |||
@@ -8,14 +8,15 @@ import { | |||
8 | QueryList | 8 | QueryList |
9 | } from '@angular/core' | 9 | } from '@angular/core' |
10 | import { Router, NavigationEnd, Params, ActivatedRoute } from '@angular/router' | 10 | import { Router, NavigationEnd, Params, ActivatedRoute } from '@angular/router' |
11 | import { AuthService } from '@app/core' | 11 | import { AuthService, ServerService } from '@app/core' |
12 | import { I18n } from '@ngx-translate/i18n-polyfill' | 12 | import { I18n } from '@ngx-translate/i18n-polyfill' |
13 | import { filter, first, tap, map } from 'rxjs/operators' | 13 | import { filter, first, tap, map } from 'rxjs/operators' |
14 | import { ListKeyManager } from '@angular/cdk/a11y' | 14 | import { ListKeyManager } from '@angular/cdk/a11y' |
15 | import { UP_ARROW, DOWN_ARROW, ENTER, TAB } from '@angular/cdk/keycodes' | 15 | import { UP_ARROW, DOWN_ARROW, ENTER } from '@angular/cdk/keycodes' |
16 | import { SuggestionComponent, Result } from './suggestion.component' | 16 | import { SuggestionComponent, Result } from './suggestion.component' |
17 | import { of } from 'rxjs' | 17 | import { of } from 'rxjs' |
18 | import { getParameterByName } from '@app/shared/misc/utils' | 18 | import { getParameterByName } from '@app/shared/misc/utils' |
19 | import { ServerConfig } from '@shared/models' | ||
19 | 20 | ||
20 | @Component({ | 21 | @Component({ |
21 | selector: 'my-search-typeahead', | 22 | selector: 'my-search-typeahead', |
@@ -30,7 +31,7 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewIni | |||
30 | newSearch = true | 31 | newSearch = true |
31 | 32 | ||
32 | searchInput: HTMLInputElement | 33 | searchInput: HTMLInputElement |
33 | URIPolicy: 'only-followed' | 'any' = 'any' | 34 | serverConfig: ServerConfig |
34 | 35 | ||
35 | URIPolicyText: string | 36 | URIPolicyText: string |
36 | inAllText: string | 37 | inAllText: string |
@@ -44,6 +45,7 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewIni | |||
44 | private authService: AuthService, | 45 | private authService: AuthService, |
45 | private router: Router, | 46 | private router: Router, |
46 | private route: ActivatedRoute, | 47 | private route: ActivatedRoute, |
48 | private serverService: ServerService, | ||
47 | private i18n: I18n | 49 | private i18n: I18n |
48 | ) { | 50 | ) { |
49 | this.URIPolicyText = this.i18n('Determines whether you can resolve any distant content, or if your instance only allows doing so for instances it follows.') | 51 | this.URIPolicyText = this.i18n('Determines whether you can resolve any distant content, or if your instance only allows doing so for instances it follows.') |
@@ -66,6 +68,9 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewIni | |||
66 | map(() => getParameterByName('search', window.location.href)) | 68 | map(() => getParameterByName('search', window.location.href)) |
67 | ) | 69 | ) |
68 | .subscribe(searchQuery => this.searchInput.value = searchQuery || '') | 70 | .subscribe(searchQuery => this.searchInput.value = searchQuery || '') |
71 | |||
72 | this.serverService.getConfig() | ||
73 | .subscribe(config => this.serverConfig = config) | ||
69 | } | 74 | } |
70 | 75 | ||
71 | ngOnDestroy () { | 76 | ngOnDestroy () { |
@@ -90,6 +95,16 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewIni | |||
90 | return this.hasSearch && this.newSearch && this.activeResult && this.activeResult.type === 'search-global' || false | 95 | return this.hasSearch && this.newSearch && this.activeResult && this.activeResult.type === 'search-global' || false |
91 | } | 96 | } |
92 | 97 | ||
98 | get URIPolicy (): 'only-followed' | 'any' { | ||
99 | return ( | ||
100 | this.authService.isLoggedIn() | ||
101 | ? this.serverConfig.search.remoteUri.users | ||
102 | : this.serverConfig.search.remoteUri.anonymous | ||
103 | ) | ||
104 | ? 'any' | ||
105 | : 'only-followed' | ||
106 | } | ||
107 | |||
93 | computeResults () { | 108 | computeResults () { |
94 | this.newSearch = true | 109 | this.newSearch = true |
95 | let results: Result[] = [] | 110 | let results: Result[] = [] |
@@ -151,10 +166,6 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewIni | |||
151 | ) | 166 | ) |
152 | } | 167 | } |
153 | 168 | ||
154 | isUserLoggedIn () { | ||
155 | return this.authService.isLoggedIn() | ||
156 | } | ||
157 | |||
158 | handleKeyUp (event: KeyboardEvent, indexSelected?: number) { | 169 | handleKeyUp (event: KeyboardEvent, indexSelected?: number) { |
159 | event.stopImmediatePropagation() | 170 | event.stopImmediatePropagation() |
160 | if (this.keyboardEventsManager) { | 171 | if (this.keyboardEventsManager) { |