Improve style of 'new tab'

Signed-off-by: trivernis <trivernis@protonmail.com>

mediarepo-ui/src/app/components/core/core.component.html

@@ -19,15 +19,11 @@
             </ng-template>
         </mat-tab>
         <mat-tab *ngIf="this.newTab" label="New Tab">
-            <div class="new-tab-content">
+            <app-empty-tab (tabCategorySelect)="this.addTab($event)"></app-empty-tab>
-                Select the tab type
-                <button (click)="this.addFilesTab()" color="primary" mat-flat-button>Files</button>
-                <button (click)="this.addImportTab()" color="primary" mat-flat-button>Import</button>
-            </div>
         </mat-tab>
         <mat-tab *ngIf="this.selectedRepository" disabled>
             <ng-template mat-tab-label>
-                <button (click)="this.addTab()" class="new-tab-button" mat-icon-button>
+                <button (click)="this.addEmptyTab()" class="new-tab-button" mat-icon-button>
                     <ng-icon name="mat-plus"></ng-icon>
                 </button>
             </ng-template>

mediarepo-ui/src/app/components/core/core.component.ts

@@ -45,7 +45,7 @@ export class CoreComponent {
         this.stateService.state.subscribe(state => {
             this.appState = state;
             if (this.appState.tabs.value.length === 0) {
-                this.addTab();
+                this.addEmptyTab();
             } else {
                 this.tabGroup.selectedIndex = 1;
             }
@@ -58,7 +58,7 @@ export class CoreComponent {
                 }
 
                 if (this.tabs.length === 0) {
-                    this.addTab();
+                    this.addEmptyTab();
                 }
             });
         });
@@ -76,19 +76,7 @@ export class CoreComponent {
         }
     }
 
-    public addFilesTab(): void {
+    public addEmptyTab(): void {
-        this.appState.addTab(TabCategory.Files);
-        this.tabGroup.selectedIndex = this.tabs.length;
-        this.newTab = false;
-    }
-
-    public addImportTab(): void {
-        this.appState.addTab(TabCategory.Import);
-        this.tabGroup.selectedIndex = this.tabs.length;
-        this.newTab = false;
-    }
-
-    public addTab(): void {
         if (this.tabGroup) {
             this.newTab = true;
             this.tabGroup.selectedIndex = this.tabs.length + 1;
@@ -119,4 +107,10 @@ export class CoreComponent {
     public trackByTabId(index: number, item: TabState) {
         return item.uuid;
     }
+
+    public addTab(category: TabCategory): void {
+        this.appState.addTab(category);
+        this.tabGroup.selectedIndex = this.tabs.length;
+        this.newTab = false;
+    }
 }

mediarepo-ui/src/app/components/core/core.module.ts

@@ -39,6 +39,7 @@ import {MatToolbarModule} from "@angular/material/toolbar";
 import {
     RepositoryDetailsViewComponent
 } from "./repositories-tab/repository-details-view/repository-details-view.component";
+import { EmptyTabComponent } from './empty-tab/empty-tab.component';
 
 
 @NgModule({
@@ -52,6 +53,7 @@ import {
         RepositoryCardComponent,
         DownloadDaemonDialogComponent,
         RepositoryDetailsViewComponent,
+        EmptyTabComponent,
     ],
     exports: [
         CoreComponent,

mediarepo-ui/src/app/components/core/empty-tab/empty-tab.component.html

@@ -0,0 +1,7 @@
+<app-middle-centered>
+    <h1>What kind of tab do you want to open?</h1>
+    <div class="button-container">
+        <button (click)="this.addTab('files')" color="primary" mat-flat-button>Files</button>
+        <button (click)="this.addTab('import')" color="primary" mat-flat-button>Import</button>
+    </div>
+</app-middle-centered>

mediarepo-ui/src/app/components/core/empty-tab/empty-tab.component.scss

@@ -0,0 +1,31 @@
+@import "src/colors";
+
+:host {
+    height: 100%;
+    width: 100%;
+    display: block;
+    background: radial-gradient(circle, $background-darker-05 80%, $primary 200%);
+}
+
+.button-container {
+    height: 6em;
+    display: block;
+    width: 100%;
+    position: relative;
+}
+
+button {
+    padding: 0.5em 1em;
+    font-size: 1.5em;
+    margin: 1em;
+    border-radius: 0.5em;
+    transition-duration: 0.25s;
+
+    &:hover {
+        scale: 1.25;
+    }
+
+    &:active {
+        scale: 1;
+    }
+}

mediarepo-ui/src/app/components/core/empty-tab/empty-tab.component.spec.ts

@@ -0,0 +1,25 @@
+import {ComponentFixture, TestBed} from "@angular/core/testing";
+
+import {EmptyTabComponent} from "./empty-tab.component";
+
+describe("EmptyTabComponent", () => {
+    let component: EmptyTabComponent;
+    let fixture: ComponentFixture<EmptyTabComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [EmptyTabComponent]
+        })
+            .compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(EmptyTabComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it("should create", () => {
+        expect(component).toBeTruthy();
+    });
+});

mediarepo-ui/src/app/components/core/empty-tab/empty-tab.component.ts

@@ -0,0 +1,29 @@
+import {ChangeDetectionStrategy, Component, EventEmitter, Output} from "@angular/core";
+import {TabCategory} from "../../../models/TabCategory";
+
+type TabCategoryName = "files" | "import";
+
+@Component({
+    selector: "app-empty-tab",
+    templateUrl: "./empty-tab.component.html",
+    styleUrls: ["./empty-tab.component.scss"],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class EmptyTabComponent {
+
+    @Output() tabCategorySelect = new EventEmitter<TabCategory>();
+
+    constructor() {
+    }
+
+    public addTab(category: TabCategoryName) {
+        switch (category) {
+            case "files":
+                this.tabCategorySelect.emit(TabCategory.Files);
+                break;
+            case "import":
+                this.tabCategorySelect.emit(TabCategory.Import);
+                break;
+        }
+    }
+}

mediarepo-ui/src/app/components/core/files-tab/files-tab.component.scss

@@ -27,10 +27,9 @@ app-file-multiview {
 }
 
 .import-prompt {
-    text-align: center;
-
     button {
         font-size: 1.5em;
         padding: 0.5em 1em;
+        border-radius: 0.5em;
     }
 }

mediarepo-ui/src/colors.scss

@@ -24,6 +24,7 @@ $text-darker-10: darken($text, 10%);
 
 $background: darken(#424242, 5%);
 $background-darker-05: darken($background, 5%);
+$background-darker-10: darken($background, 10%);
 $background-lighter-05: lighten($background, 5%);
 $background-lighter-10: lighten($background, 10%);