diff --git a/mediarepo-ui/src/app/components/core/core.component.html b/mediarepo-ui/src/app/components/core/core.component.html
index 2312064..171fd1b 100644
--- a/mediarepo-ui/src/app/components/core/core.component.html
+++ b/mediarepo-ui/src/app/components/core/core.component.html
@@ -1,13 +1,33 @@
-
+
-
-
+
+
+
+ {{tab.category}}
+
+
+
+
+
-
-
+
+
+ Select the tab type
+
+
+
+
+
+
+
+
diff --git a/mediarepo-ui/src/app/components/core/core.component.scss b/mediarepo-ui/src/app/components/core/core.component.scss
index 8512ac5..b8a501a 100644
--- a/mediarepo-ui/src/app/components/core/core.component.scss
+++ b/mediarepo-ui/src/app/components/core/core.component.scss
@@ -17,3 +17,43 @@ mat-tab-group {
height: 100%;
width: 100%;
}
+
+::ng-deep .main-tab-group .mat-tab-label.mat-tab-disabled {
+ width: 2em;
+ min-width: 0;
+ color: white;
+}
+
+::ng-deep .main-tab-group .mat-tab-label {
+ ng-icon {
+ margin-top: -0.5em;
+ --ng-icon__size: 1em;
+ }
+
+ .close-tab-button {
+ float: right;
+ position: absolute;
+ right: 0;
+ top: 4px;
+ ng-icon {
+ font-size: 1.5em;
+ margin-top: -1.1em;
+ --ng-icon__size: 0.4em;
+ }
+ }
+}
+
+.new-tab-content {
+ display: block;
+ width: 100%;
+ text-align: center;
+
+ button {
+ display: flex;
+ margin: 1em auto auto;
+ }
+}
+
+.tab-label-div {
+ display: flex;
+}
diff --git a/mediarepo-ui/src/app/components/core/core.component.ts b/mediarepo-ui/src/app/components/core/core.component.ts
index cd5d284..8db3317 100644
--- a/mediarepo-ui/src/app/components/core/core.component.ts
+++ b/mediarepo-ui/src/app/components/core/core.component.ts
@@ -4,6 +4,8 @@ import {RepositoryService} from "../../services/repository/repository.service";
import {MatTabChangeEvent, MatTabGroup} from "@angular/material/tabs";
import {TagService} from "../../services/tag/tag.service";
import {TabService} from "../../services/tab/tab.service";
+import {TabCategory} from "../../models/TabCategory";
+import {TabState} from "../../models/TabState.rs";
@Component({
selector: "app-core",
@@ -13,9 +15,10 @@ import {TabService} from "../../services/tab/tab.service";
export class CoreComponent implements OnInit {
public selectedRepository: Repository | undefined;
+ public tabs: TabState[] = [];
@ViewChild("tabGroup") tabGroup!: MatTabGroup;
-
+ public newTab = false;
constructor(
private tabService: TabService,
@@ -27,20 +30,11 @@ export class CoreComponent implements OnInit {
this.selectedRepository = this.repoService.selectedRepository.getValue();
this.repoService.selectedRepository.subscribe(async (selected) => {
this.selectedRepository = selected;
- this.updateSelectedTab();
await this.loadRepoData();
});
- }
-
- public updateSelectedTab() {
- if (!this.tabGroup) {
- return;
- }
- if (!this.selectedRepository) {
- this.tabGroup.selectedIndex = 0;
- } else if (this.tabGroup.selectedIndex === 0) {
- this.tabGroup.selectedIndex = 1;
- }
+ this.tabService.tabs.subscribe(tabs => {
+ this.tabs = tabs;
+ });
}
async loadRepoData() {
@@ -50,4 +44,39 @@ export class CoreComponent implements OnInit {
public onTabSelectionChange(event: MatTabChangeEvent): void {
this.tabService.setSelectedTab(event.index);
}
+
+ public addFilesTab(): void {
+ this.tabService.addTab(TabCategory.Files);
+ this.tabGroup.selectedIndex = this.tabs.length;
+ this.newTab = false;
+ }
+
+ public addImportTab(): void {
+ this.tabService.addTab(TabCategory.Import);
+ this.tabGroup.selectedIndex = this.tabs.length;
+ this.newTab = false;
+ }
+
+ public addTab(): void {
+ this.newTab = true;
+ this.tabGroup.selectedIndex = this.tabs.length + 1;
+ }
+
+ public closeTab(tab: TabState): void {
+ const previousIndex = this.tabGroup.selectedIndex;
+ this.tabService.closeTab(tab.uuid);
+
+ if (previousIndex) {
+ this.tabGroup.selectedIndex = previousIndex - 1;
+ } else {
+ this.tabGroup.selectedIndex = 0;
+ }
+ }
+
+ public onMouseClickTabLabel(tab: TabState, event: MouseEvent): void {
+ console.log(event);
+ if (event.button === 1) { // middle mouse button
+ this.closeTab(tab);
+ }
+ }
}
diff --git a/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.html b/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.html
index 839f9aa..8c83179 100644
--- a/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.html
+++ b/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.html
@@ -1,9 +1,9 @@