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">
- 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>
+ <app-empty-tab (tabCategorySelect)="this.addTab($event)"></app-empty-tab>
  </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 {
- 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 {
+ public addEmptyTab(): 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%);