From de4c3d68134b825715426634ffa3d66629d2814c Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Thu, 17 Sep 2020 18:55:15 +0200
Subject: [PATCH] style: redesign start page

---
 src/app/app.module.ts                         |  2 +
 .../header/header.component.html              |  9 ++
 .../header/header.component.scss              | 14 +++
 .../header/header.component.ts                |  8 ++
 .../playlist-uploader.component.html          | 92 ++++++++++---------
 .../playlist-uploader.component.scss          | 35 ++-----
 .../recent-playlists.component.scss           |  2 +-
 src/styles.scss                               |  2 +-
 8 files changed, 88 insertions(+), 76 deletions(-)
 create mode 100644 src/app/playlist-uploader/header/header.component.html
 create mode 100644 src/app/playlist-uploader/header/header.component.scss
 create mode 100644 src/app/playlist-uploader/header/header.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 341cad954..d7ab0f492 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -22,6 +22,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RecentPlaylistsComponent } from './recent-playlists/recent-playlists.component';
 import { ChannelListContainerComponent } from './channel-list-container/channel-list-container.component';
 import { FilterPipeModule } from 'ngx-filter-pipe';
+import { HeaderComponent } from './playlist-uploader/header/header.component';
 
 // AoT requires an exported function for factories
 export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
@@ -32,6 +33,7 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
     declarations: [
         AppComponent,
         ChannelListContainerComponent,
+        HeaderComponent,
         PlaylistUploaderComponent,
         VideoPlayerComponent,
         RecentPlaylistsComponent,
diff --git a/src/app/playlist-uploader/header/header.component.html b/src/app/playlist-uploader/header/header.component.html
new file mode 100644
index 000000000..5957190a2
--- /dev/null
+++ b/src/app/playlist-uploader/header/header.component.html
@@ -0,0 +1,9 @@
+<div fxFlex="100px">
+  <img src="./assets/icons/icon-tv-256.png" height="100" />
+</div>
+<div fxFlex="100" fxLayoutAlign="start center">
+  <div fxLayout="column">
+      <div fxFlex class="title">IPTVnator</div>
+      <div class="subtitle">Please select a playlist from the list or add a new playlist via file upload or via url</div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/playlist-uploader/header/header.component.scss b/src/app/playlist-uploader/header/header.component.scss
new file mode 100644
index 000000000..bd54c4077
--- /dev/null
+++ b/src/app/playlist-uploader/header/header.component.scss
@@ -0,0 +1,14 @@
+:host {
+    background: #000;
+    color: #fff;
+}
+
+.title {
+    font-size: 1.1em
+}
+
+.subtitle {
+    color: #999;
+    font-size: 0.9em;
+    margin-top: 10px
+}
\ No newline at end of file
diff --git a/src/app/playlist-uploader/header/header.component.ts b/src/app/playlist-uploader/header/header.component.ts
new file mode 100644
index 000000000..c699c3ec0
--- /dev/null
+++ b/src/app/playlist-uploader/header/header.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-header',
+    templateUrl: './header.component.html',
+    styleUrls: ['./header.component.scss'],
+})
+export class HeaderComponent {}
diff --git a/src/app/playlist-uploader/playlist-uploader.component.html b/src/app/playlist-uploader/playlist-uploader.component.html
index 14d72d4c3..c4891148d 100644
--- a/src/app/playlist-uploader/playlist-uploader.component.html
+++ b/src/app/playlist-uploader/playlist-uploader.component.html
@@ -1,48 +1,50 @@
-<div style="padding: 15px;">
-    <div class="logo-container">
-        <img src="./assets/icons/icon.png" class="logo" />
-    </div>
-    <mat-card>
-        <div fxLayout="row" fxFlexAlign="start start">
-            <div [fxFlex]="playlists?.length > 0 ? 50 : 100">
-                <mat-tab-group [dynamicHeight]="true">
-                    <mat-tab label="Add via file upload">
-                        <ng-template matTabContent>
-                            <div class="drop-container" ngFileDrop [options]="options"
-                                (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput">
-                                <mat-icon class="upload-icon">save_alt</mat-icon>
-                                <p class="upload-title">
-                                    Drag & drop files here
-                                </p>
-                                <p>or</p>
-                                <input type="file" ngFileSelect [options]="options"
-                                    (uploadOutput)="onUploadOutput($event)" class="input-file" name="file" id="file"
-                                    [uploadInput]="uploadInput" multiple>
-                                <label for="file">
-                                    Choose a playlist
-                                </label>
-                            </div>
-                        </ng-template>
-                    </mat-tab>
-                    <mat-tab label="Add via URL">
-                        <ng-template matTabContent>
-                            <div class="url-form">
-                                <mat-form-field class="full-width">
-                                    <input matInput placeholder="Playlist URL (m3u, m3u8)" [(ngModel)]="playlistUrl">
-                                </mat-form-field>
-                                <button mat-flat-button [disabled]="!playlistUrl" color="primary" (click)="sendPlaylistsUrl()">ADD PLAYLIST</button>
-                            </div>
-                        </ng-template>
-                    </mat-tab>
-                </mat-tab-group>
-            </div>
-            <div *ngIf="playlists?.length > 0" fxFlex="50" id="recent-playlists">
-                <mat-card-subtitle>Added playlists ({{playlists.length}})</mat-card-subtitle>
+<app-header fxLayout="row"></app-header>
+<div fxLayout="row" fxFlexAlign="start start">
+    <div fxFlex="100">
+        <mat-tab-group [dynamicHeight]="true" color="primary" backgroundColor="primary" mat-stretch-tabs>
+            <mat-tab>
+                <ng-template mat-tab-label>
+                    <mat-icon class="tab-icon">list</mat-icon> Recently added playlists
+                </ng-template>
                 <app-recent-playlists [playlists]="playlists" (playlistClicked)="getPlaylist($event)"
                     (removeClicked)="removePlaylist($event)">
                 </app-recent-playlists>
-            </div>
-        </div>
-        <mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
-    </mat-card>
-</div>
\ No newline at end of file
+            </mat-tab>
+            <mat-tab>
+                <ng-template mat-tab-label>
+                    <mat-icon class="tab-icon">attach_file</mat-icon> Add via file upload
+                </ng-template>
+                <ng-template matTabContent>
+                    <div class="drop-container" ngFileDrop [options]="options" (uploadOutput)="onUploadOutput($event)"
+                        [uploadInput]="uploadInput">
+                        <mat-icon class="upload-icon">save_alt</mat-icon>
+                        <p class="upload-title">
+                            Drag & drop files here
+                        </p>
+                        <p>or</p>
+                        <input type="file" ngFileSelect [options]="options" (uploadOutput)="onUploadOutput($event)"
+                            class="input-file" name="file" id="file" [uploadInput]="uploadInput" multiple>
+                        <label for="file">
+                            Choose a playlist
+                        </label>
+                    </div>
+                </ng-template>
+            </mat-tab>
+            <mat-tab>
+                <ng-template mat-tab-label>
+                    <mat-icon class="tab-icon">link</mat-icon> Add via URL
+                </ng-template>
+                <ng-template matTabContent>
+                    <div class="url-form">
+                        <mat-form-field class="full-width">
+                            <input matInput placeholder="Playlist URL (m3u, m3u8)" [(ngModel)]="playlistUrl">
+                        </mat-form-field>
+                        <button mat-flat-button [disabled]="!playlistUrl" color="primary"
+                            (click)="sendPlaylistsUrl()">ADD PLAYLIST</button>
+                    </div>
+                </ng-template>
+            </mat-tab>
+        </mat-tab-group>
+    </div>
+</div>
+<mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
\ No newline at end of file
diff --git a/src/app/playlist-uploader/playlist-uploader.component.scss b/src/app/playlist-uploader/playlist-uploader.component.scss
index 61d25ec33..b6664c514 100644
--- a/src/app/playlist-uploader/playlist-uploader.component.scss
+++ b/src/app/playlist-uploader/playlist-uploader.component.scss
@@ -1,45 +1,22 @@
-mat-card {
-    padding: 0 !important;
-    max-width: 900px;
-    margin: 0 auto;
-}
-
-.logo-container {
-    text-align: center;
-
-    .logo {
-        width: 128px;
-        padding-bottom: 20px;
-    }
-}
-
 
 ::ng-deep {
     .mat-tab-label-content {
         text-transform: uppercase;
     }
-}
 
+    .mat-tab-group.mat-background-primary .mat-tab-header {
+        background: #000 !important;
+    }
 
-#recent-playlists {
-    border-radius: 0 4px 4px 0;
-    background: #eee;
-    padding: 16px 0;
-    border-left: 1px solid #ccc;
-
-    .mat-card-subtitle {
-        padding: 0px 16px;
-        text-transform: uppercase;
-        border-bottom: 1px solid #ccc;
-        height: 32px;
-        margin-bottom: 0 !important;
+    .mat-tab-group.mat-background-primary .mat-tab-header-pagination {
+        display:none;
     }
 }
 
 .drop-container {
     margin: 10px;
     padding: 10px;
-    height: 300px;
+    height: calc(100vh - 230px);
     border: 2px dashed #ccc;
     border-radius: 3px;
     text-align: center;
diff --git a/src/app/recent-playlists/recent-playlists.component.scss b/src/app/recent-playlists/recent-playlists.component.scss
index 676645fa2..3402474e9 100644
--- a/src/app/recent-playlists/recent-playlists.component.scss
+++ b/src/app/recent-playlists/recent-playlists.component.scss
@@ -5,7 +5,7 @@ mat-list-item {
     padding-top: 0 !important;
 }
 mat-nav-list {
-    max-height: 325px;
+    height: calc(100vh - 182px);
     overflow: auto;
 }
 
diff --git a/src/styles.scss b/src/styles.scss
index 29cf02dda..5e33716f6 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -7,7 +7,7 @@ $material-icons-font-path: '~material-icons/iconfont/';
 
 body,
 html {
-    background: #011627;
+    background: #fff;
     font-family: caption;
 }