aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/header
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-12-05 17:46:33 +0100
committerChocobozzz <florian.bigard@gmail.com>2017-12-05 18:25:29 +0100
commitf3aaa9a95cc2b61f1f255472d7014d08faa66561 (patch)
tree95e70c8d0ed5b6f1c71c32a77cb7d6cf8478c9d4 /client/src/app/header
parentd235f6b0d1054a2a3451dacade927caefce8f30c (diff)
downloadPeerTube-f3aaa9a95cc2b61f1f255472d7014d08faa66561.tar.gz
PeerTube-f3aaa9a95cc2b61f1f255472d7014d08faa66561.tar.zst
PeerTube-f3aaa9a95cc2b61f1f255472d7014d08faa66561.zip
Fix client search
Diffstat (limited to 'client/src/app/header')
-rw-r--r--client/src/app/header/header.component.html10
-rw-r--r--client/src/app/header/header.component.scss39
-rw-r--r--client/src/app/header/header.component.ts28
-rw-r--r--client/src/app/header/index.ts1
4 files changed, 78 insertions, 0 deletions
diff --git a/client/src/app/header/header.component.html b/client/src/app/header/header.component.html
new file mode 100644
index 000000000..aa72fb68a
--- /dev/null
+++ b/client/src/app/header/header.component.html
@@ -0,0 +1,10 @@
1<input
2 type="text" id="search-video" name="search-video" placeholder="Search..."
3 [(ngModel)]="searchValue" (keyup.enter)="doSearch()"
4>
5<span (click)="doSearch()" class="icon icon-search"></span>
6
7<a class="upload-button" routerLink="/videos/upload">
8 <span class="icon icon-upload"></span>
9 Upload
10</a>
diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss
new file mode 100644
index 000000000..7ba8ef26c
--- /dev/null
+++ b/client/src/app/header/header.component.scss
@@ -0,0 +1,39 @@
1#search-video {
2 @include peertube-input-text($search-input-width);
3 margin-right: 15px;
4 padding-right: 25px; // For the search icon
5
6 &::placeholder {
7 color: #000;
8 }
9}
10
11.icon.icon-search {
12 display: inline-block;
13 background: url('../../../assets/images/header/search.svg') no-repeat;
14 background-size: contain;
15 width: 25px;
16 height: 21px;
17 vertical-align: middle;
18 cursor: pointer;
19 // yolo
20 position: absolute;
21 margin-left: -50px;
22 margin-top: 5px;
23}
24
25.upload-button {
26 @include peertube-button-link;
27
28 margin-right: 25px;
29
30 .icon.icon-upload {
31 display: inline-block;
32 background: url('../../../assets/images/header/upload.svg') no-repeat;
33 background-size: contain;
34 width: 22px;
35 height: 24px;
36 vertical-align: middle;
37 margin-right: 6px;
38 }
39}
diff --git a/client/src/app/header/header.component.ts b/client/src/app/header/header.component.ts
new file mode 100644
index 000000000..a903048f2
--- /dev/null
+++ b/client/src/app/header/header.component.ts
@@ -0,0 +1,28 @@
1import { Component, OnInit } from '@angular/core'
2import { Router } from '@angular/router'
3import { getParameterByName } from '../shared/misc/utils'
4
5@Component({
6 selector: 'my-header',
7 templateUrl: './header.component.html',
8 styleUrls: [ './header.component.scss' ]
9})
10
11export class HeaderComponent implements OnInit {
12 searchValue = ''
13
14 constructor (private router: Router) {}
15
16 ngOnInit () {
17 const searchQuery = getParameterByName('search', window.location.href)
18 if (searchQuery) this.searchValue = searchQuery
19 }
20
21 doSearch () {
22 if (!this.searchValue) return
23
24 this.router.navigate([ '/videos', 'search' ], {
25 queryParams: { search: this.searchValue }
26 })
27 }
28}
diff --git a/client/src/app/header/index.ts b/client/src/app/header/index.ts
new file mode 100644
index 000000000..d98d2d00a
--- /dev/null
+++ b/client/src/app/header/index.ts
@@ -0,0 +1 @@
export * from './header.component'