Merge branch 'feature/design' into develop

4 files changed, 97 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..c853d2b1b
--- /dev/null
+++ b/client/src/app/header/header.component.html
@@ -0,0 +1,10 @@
+<input
+    type="text" id="search-video" name="search-video" placeholder="Search..."
+    [(ngModel)]="searchValue" (keyup.enter)="doSearch()"
+>
+<span (click)="doSearch()" class="icon icon-search"></span>
+
+<a class="upload-button" routerLink="/videos/upload">
+  <span class="icon icon-upload"></span>
+  <span class="upload-button-label">Upload</span>
+</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..fba70dd2f
--- /dev/null
+++ b/client/src/app/header/header.component.scss
@@ -0,0 +1,58 @@
+#search-video {
+  @include peertube-input-text($search-input-width);
+  margin-right: 15px;
+  padding-right: 25px; // For the search icon
+
+  &::placeholder {
+    color: #000;
+  }
+
+  @media screen and (max-width: 600px) {
+    width: calc(100% - 150px);
+  }
+
+  @media screen and (max-width: 400px) {
+    width: calc(100% - 70px);
+  }
+}
+
+.icon.icon-search {
+  @include icon(25px);
+  height: 21px;
+
+  background-image: url('../../assets/images/header/search.svg');
+
+  // yolo
+  position: absolute;
+  margin-left: -50px;
+  margin-top: 5px;
+}
+
+.upload-button {
+  @include peertube-button-link;
+  @include orange-button;
+
+  margin-right: 25px;
+
+  .icon.icon-upload {
+    @include icon(22px);
+
+    background-image: url('../../assets/images/header/upload.svg');
+    height: 24px;
+    vertical-align: middle;
+    margin-right: 6px;
+  }
+
+  @media screen and (max-width: 400px) {
+    margin-right: 10px;
+    padding: 0 10px;
+
+    .icon.icon-upload {
+      margin-right: 0;
+    }
+
+    .upload-button-label {
+      display: none;
+    }
+  }
+}
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 @@
+import { Component, OnInit } from '@angular/core'
+import { Router } from '@angular/router'
+import { getParameterByName } from '../shared/misc/utils'
+
+@Component({
+  selector: 'my-header',
+  templateUrl: './header.component.html',
+  styleUrls: [ './header.component.scss' ]
+})
+
+export class HeaderComponent implements OnInit {
+  searchValue = ''
+
+  constructor (private router: Router) {}
+
+  ngOnInit () {
+    const searchQuery = getParameterByName('search', window.location.href)
+    if (searchQuery) this.searchValue = searchQuery
+  }
+
+  doSearch () {
+    if (!this.searchValue) return
+
+    this.router.navigate([ '/videos', 'search' ], {
+      queryParams: { search: this.searchValue }
+    })
+  }
+}
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'