From f60cf3ed4a5d3a2f540c2e68601a3a650ffcc4c5 Mon Sep 17 00:00:00 2001
From: Maksym Pavlenko <pavlenko.maksym@gmail.com>
Date: Sun, 2 Jun 2019 15:06:19 -0700
Subject: [PATCH] Add URL input field

---
 ui/src/app/app.module.ts                 |  6 +-
 ui/src/app/index/index.component.html    |  2 +-
 ui/src/app/input/input.component.html    | 38 ++++++++++++
 ui/src/app/input/input.component.scss    | 79 ++++++++++++++++++++++++
 ui/src/app/input/input.component.spec.ts | 25 ++++++++
 ui/src/app/input/input.component.ts      | 24 +++++++
 6 files changed, 172 insertions(+), 2 deletions(-)
 create mode 100644 ui/src/app/input/input.component.html
 create mode 100644 ui/src/app/input/input.component.scss
 create mode 100644 ui/src/app/input/input.component.spec.ts
 create mode 100644 ui/src/app/input/input.component.ts

diff --git a/ui/src/app/app.module.ts b/ui/src/app/app.module.ts
index 18d4af5..487a19a 100644
--- a/ui/src/app/app.module.ts
+++ b/ui/src/app/app.module.ts
@@ -4,14 +4,18 @@ import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { IndexComponent } from './index/index.component';
+import { InputComponent } from './input/input.component';
+import {FormsModule} from '@angular/forms';
 
 @NgModule({
   declarations: [
     AppComponent,
-    IndexComponent
+    IndexComponent,
+    InputComponent
   ],
   imports: [
     BrowserModule,
+    FormsModule,
     AppRoutingModule
   ],
   providers: [],
diff --git a/ui/src/app/index/index.component.html b/ui/src/app/index/index.component.html
index 5e685f7..a818b01 100644
--- a/ui/src/app/index/index.component.html
+++ b/ui/src/app/index/index.component.html
@@ -29,7 +29,7 @@
     </div>
   </div>
 
-<!--  <app-input></app-input>-->
+  <app-input></app-input>
 
   <div class="man"></div>
 
diff --git a/ui/src/app/input/input.component.html b/ui/src/app/input/input.component.html
new file mode 100644
index 0000000..86d9f49
--- /dev/null
+++ b/ui/src/app/input/input.component.html
@@ -0,0 +1,38 @@
+<div class="main" [hidden]="popupOpened">
+  <div class="main-border shadow">
+    <div class="input-border">
+      <input type="text"
+             placeholder="paste your link here"
+             spellcheck="false"
+             autofocus
+             [(ngModel)]="link"
+             (keydown.enter)="submit()" />
+
+      <div class="arrow-button" [style.display]="link.length > 3 ? 'block' : 'none'">
+        <a href="#" (click)="submit()">
+          <i class="fa fa-arrow-right" aria-hidden="true"></i>
+        </a>
+      </div>
+    </div>
+
+    <div class="controls">
+      <div class="controls-icon">
+        <ng-container *ngIf="locked">
+          <a href="https://www.patreon.com/bePatron?c=278915" class="black">
+            <i class="fa fa-question-circle master-tooltip"
+               aria-hidden="true"
+               title="This features are available for patrons only. You may support us and unlock this features"></i>
+          </a>
+        </ng-container>
+        <ng-container *ngIf="!locked">
+          <i class="fa fa-wrench" aria-hidden="true"></i>
+        </ng-container>
+      </div>
+
+      <div [class.locked]="locked">
+
+      </div>
+    </div>
+
+  </div>
+</div>
diff --git a/ui/src/app/input/input.component.scss b/ui/src/app/input/input.component.scss
new file mode 100644
index 0000000..9a096dd
--- /dev/null
+++ b/ui/src/app/input/input.component.scss
@@ -0,0 +1,79 @@
+.main {
+  text-align: center;
+  padding: 5em 2em 10em;
+  max-width: 860px;
+  width: 90%;
+  margin: 0 auto;
+  padding: 3em 0;
+  text-align: left;
+
+  @media screen and (max-width: 840px) {
+    padding: 0;
+  }
+
+  @media screen and (max-height: 840px) {
+    padding-top: 0;
+  }
+}
+
+.main-border {
+  border: thin solid #a39c8e;
+  background: #f4ecda;
+
+  input {
+    border: none;
+    padding: 0.5em 0 0.5em 0.5em;
+    width: calc(100% - 2em);
+    font-size: 2em;
+    line-height: 1;
+    color: #616161;
+    background: transparent;
+  }
+}
+
+.input-border {
+  background-color: #e4dac8;
+  border: none;
+  border-bottom: 1px solid #a39c8e;
+}
+
+*:focus {
+  outline: none;
+}
+
+/* Input button (arrow) */
+
+.arrow-button {
+  float: right;
+  font-size: 2em;
+  padding-top: 0.5em;
+  padding-right: 0.3em;
+
+  a {
+    color: rgb(142, 134, 119);
+  }
+
+  a:hover {
+    background: none;
+    color: rgb(105, 98, 86);
+  }
+}
+
+/* Controls under input */
+
+.controls {
+  padding-left: 1em;
+  word-spacing: 0.15em;
+  margin: 12px 0 12px 0;
+  overflow: hidden;
+}
+
+.controls-icon {
+  float: left;
+  padding-right: 6px;
+}
+
+.locked {
+  -ms-opacity: 0.3;
+  opacity: 0.2;
+}
diff --git a/ui/src/app/input/input.component.spec.ts b/ui/src/app/input/input.component.spec.ts
new file mode 100644
index 0000000..0895fab
--- /dev/null
+++ b/ui/src/app/input/input.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InputComponent } from './input.component';
+
+describe('InputComponent', () => {
+  let component: InputComponent;
+  let fixture: ComponentFixture<InputComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ InputComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/ui/src/app/input/input.component.ts b/ui/src/app/input/input.component.ts
new file mode 100644
index 0000000..d284996
--- /dev/null
+++ b/ui/src/app/input/input.component.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-input',
+  templateUrl: './input.component.html',
+  styleUrls: ['./input.component.scss']
+})
+export class InputComponent implements OnInit {
+  popupOpened: boolean;
+  locked = false;
+  format = 'video';
+  quality = 'high';
+  pageSize = 50;
+  link = '';
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  submit() {
+    console.log('input submit');
+  }
+}