aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/header
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/header')
-rw-r--r--client/src/app/header/header.component.html2
-rw-r--r--client/src/app/header/search-typeahead.component.scss11
-rw-r--r--client/src/app/header/search-typeahead.component.ts25
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'
10import { Router, NavigationEnd, Params, ActivatedRoute } from '@angular/router' 10import { Router, NavigationEnd, Params, ActivatedRoute } from '@angular/router'
11import { AuthService } from '@app/core' 11import { AuthService, ServerService } from '@app/core'
12import { I18n } from '@ngx-translate/i18n-polyfill' 12import { I18n } from '@ngx-translate/i18n-polyfill'
13import { filter, first, tap, map } from 'rxjs/operators' 13import { filter, first, tap, map } from 'rxjs/operators'
14import { ListKeyManager } from '@angular/cdk/a11y' 14import { ListKeyManager } from '@angular/cdk/a11y'
15import { UP_ARROW, DOWN_ARROW, ENTER, TAB } from '@angular/cdk/keycodes' 15import { UP_ARROW, DOWN_ARROW, ENTER } from '@angular/cdk/keycodes'
16import { SuggestionComponent, Result } from './suggestion.component' 16import { SuggestionComponent, Result } from './suggestion.component'
17import { of } from 'rxjs' 17import { of } from 'rxjs'
18import { getParameterByName } from '@app/shared/misc/utils' 18import { getParameterByName } from '@app/shared/misc/utils'
19import { 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) {