diff --git a/mediarepo-ui/src/app/components/core/core.component.html b/mediarepo-ui/src/app/components/core/core.component.html index f2a5fea..5cbb8c5 100644 --- a/mediarepo-ui/src/app/components/core/core.component.html +++ b/mediarepo-ui/src/app/components/core/core.component.html @@ -19,15 +19,11 @@ - - Select the tab type - Files - Import - + - + diff --git a/mediarepo-ui/src/app/components/core/core.component.ts b/mediarepo-ui/src/app/components/core/core.component.ts index 6b07685..b6ade5c 100644 --- a/mediarepo-ui/src/app/components/core/core.component.ts +++ b/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; + } } diff --git a/mediarepo-ui/src/app/components/core/core.module.ts b/mediarepo-ui/src/app/components/core/core.module.ts index dbd097f..a514aba 100644 --- a/mediarepo-ui/src/app/components/core/core.module.ts +++ b/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, diff --git a/mediarepo-ui/src/app/components/core/empty-tab/empty-tab.component.html b/mediarepo-ui/src/app/components/core/empty-tab/empty-tab.component.html new file mode 100644 index 0000000..4e8bfa9 --- /dev/null +++ b/mediarepo-ui/src/app/components/core/empty-tab/empty-tab.component.html @@ -0,0 +1,7 @@ + + What kind of tab do you want to open? + + Files + Import + + diff --git a/mediarepo-ui/src/app/components/core/empty-tab/empty-tab.component.scss b/mediarepo-ui/src/app/components/core/empty-tab/empty-tab.component.scss new file mode 100644 index 0000000..611f3ae --- /dev/null +++ b/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; + } +} diff --git a/mediarepo-ui/src/app/components/core/empty-tab/empty-tab.component.spec.ts b/mediarepo-ui/src/app/components/core/empty-tab/empty-tab.component.spec.ts new file mode 100644 index 0000000..482992e --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [EmptyTabComponent] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(EmptyTabComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it("should create", () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/mediarepo-ui/src/app/components/core/empty-tab/empty-tab.component.ts b/mediarepo-ui/src/app/components/core/empty-tab/empty-tab.component.ts new file mode 100644 index 0000000..831bd11 --- /dev/null +++ b/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(); + + constructor() { + } + + public addTab(category: TabCategoryName) { + switch (category) { + case "files": + this.tabCategorySelect.emit(TabCategory.Files); + break; + case "import": + this.tabCategorySelect.emit(TabCategory.Import); + break; + } + } +} diff --git a/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.scss b/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.scss index adb4fd5..e3939bf 100644 --- a/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.scss +++ b/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; } } diff --git a/mediarepo-ui/src/colors.scss b/mediarepo-ui/src/colors.scss index 61cfb14..7f1a2cd 100644 --- a/mediarepo-ui/src/colors.scss +++ b/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%);