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 d2d773e..f7983f9 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,43 +1,12 @@ - - - - - diff --git a/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.scss b/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.scss index 7100444..02185a4 100644 --- a/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.scss +++ b/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.scss @@ -1,70 +1,10 @@ -app-file-search { - display: block; - width: 100%; -} - -#file-search-input { - width: 100%; - overflow: hidden; -} - -mat-tab-group, mat-tab, .file-tag-list, app-file-edit { +mat-tab-group, mat-tab, .file-tag-list, app-tag-edit, app-file-search { height: 100%; width: 100%; } -mat-selection-list { - height: 100%; - user-select: none; -} - -.sidebar-inner, .search-tab-inner { +.sidebar-inner { height: 100%; width: 100%; display: block; } - -.selectable-tag { - height: 50px; - display: flex; - font-size: 1.2em; - cursor: pointer; - transition-duration: 0.1s; - user-select: none; - - app-tag-item { - margin: auto auto auto 0.25em; - } -} - -.selectable-tag:hover { - background-color: darken(dimgrey, 10); -} - -.selectable-tag:active { - cursor: pointer; -} - -cdk-virtual-scroll-viewport { - height: 100%; - width: 100%; - overflow-y: auto; - - ::ng-deep .cdk-virtual-scroll-content-wrapper { - width: 100%; - } -} - -mat-divider { - width: 100%; -} - -.tag-list-header { - width: 100%; - display: flex; - flex-direction: column; - - h2 { - margin: auto; - } -} diff --git a/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.ts b/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.ts index a3924f9..c6dfd11 100644 --- a/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.ts +++ b/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.ts @@ -36,7 +36,6 @@ export class FilesTabSidebarComponent implements OnInit, OnChanges { public allTags: Tag[] = []; public files: File[] = []; public tagsOfSelection: Tag[] = []; - public contextMenuTag: Tag | undefined; constructor(private repoService: RepositoryService, private tagService: TagService, private fileService: FileService) { this.fileService.displayedFiles.subscribe(async files => { @@ -69,11 +68,6 @@ export class FilesTabSidebarComponent implements OnInit, OnChanges { this.showAllTagsFallback(); } - async addSearchTag(tag: Tag) { - this.fileSearch.addSearchTag(tag.getNormalizedOutput()); - await this.fileSearch.searchForFiles(); - } - async showFileDetails(files: File[]) { this.tagsOfSelection = await this.tagService.getTagsForFiles( files.map(f => f.hash)) @@ -83,10 +77,6 @@ export class FilesTabSidebarComponent implements OnInit, OnChanges { this.tags = this.tagsOfSelection; } - public async copyToClipboard(text: string) { - await clipboard.writeText(text); - } - private async refreshFileSelection() { const filteredSelection = this.selectedFiles.filter( file => this.files.findIndex(f => f.id === file.id) >= 0); diff --git a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-grid/file-grid.component.html b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-grid/file-grid.component.html index 523ea78..10e598e 100644 --- a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-grid/file-grid.component.html +++ b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-grid/file-grid.component.html @@ -18,3 +18,4 @@ + diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.html b/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.html index e2f8784..de2bb3c 100644 --- a/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.html +++ b/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.html @@ -1,19 +1,58 @@ -
-
-
-
{{filter.getDisplayName()}}
+
+
+ +
+
+
+
{{filter.getDisplayName()}}
+
+
+ +
+ + + + + +
- + + +
+

Tags

+ +
+ +
+ +
+ +
+
+
+
- - + + - - + + diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.scss b/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.scss index 6b62161..fc69ec7 100644 --- a/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.scss +++ b/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.scss @@ -1,32 +1,32 @@ .full-width { - min-width: 100%; width: auto; + min-width: 100%; } .tag-input-list { + width: calc(100% - 64px); height: 2.7em; padding: 0.5em 0; - width: calc(100% - 64px); + box-shadow: 0 0 1em 0.1em rgba(0, 0, 0, 0.05) inset; overflow-x: auto; overflow-y: hidden; - box-shadow: 0 0 1em 0.1em rgba(0, 0, 0, 0.05) inset; } .tag-input-list-and-actions { + position: relative; display: block; - height: calc(3em + 10px); width: 100%; - position: relative; + height: calc(3em + 10px); } #delete-all-tags-button { - font-size: 0.5em; + position: absolute; + top: 0; + right: 0; width: 64px; height: 100%; padding: 0; - position: absolute; - right: 0; - top: 0; + font-size: 0.5em; } #sort-button { @@ -57,6 +57,65 @@ .filter-dialog-button { position: absolute; - right: -13px; top: -17px; + right: -13px; +} + + +#file-search-input { + width: 100%; + overflow: hidden; +} + +.sidebar-inner, .search-tab-inner { + display: block; + width: 100%; + height: 100%; +} + +.selectable-tag { + display: flex; + height: 50px; + cursor: pointer; + user-select: none; + font-size: 1.2em; + transition-duration: 0.1s; + width: 100%; + + app-tag-item { + margin: auto auto auto 0.25em; + } +} + +.selectable-tag:hover { + background-color: darken(dimgrey, 10); +} + +.selectable-tag:active { + cursor: pointer; + background-color: darken(dimgrey, 5); +} + +cdk-virtual-scroll-viewport { + width: 100%; + height: 100%; + overflow-y: auto; + + ::ng-deep .cdk-virtual-scroll-content-wrapper { + width: 100%; + } +} + +mat-divider { + width: 100%; +} + +.tag-list-header { + display: flex; + flex-direction: column; + width: 100%; + + h2 { + margin: auto; + } } diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.ts b/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.ts index 7245669..652aace 100644 --- a/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.ts +++ b/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.ts @@ -3,9 +3,9 @@ import { Component, ElementRef, EventEmitter, - Input, + Input, OnChanges, OnInit, - Output, + Output, SimpleChanges, ViewChild } from "@angular/core"; import {FileService} from "../../../../services/file/file.service"; @@ -20,6 +20,7 @@ import { } from "../../../../models/FilterExpression"; import {FilterDialogComponent} from "./filter-dialog/filter-dialog.component"; import {Tag} from "../../../../models/Tag"; +import {clipboard} from "@tauri-apps/api"; @Component({ @@ -33,12 +34,15 @@ export class FileSearchComponent implements AfterViewChecked, OnInit { public filters: FilterExpression[] = []; @Input() availableTags: Tag[] = []; + @Input() contextTags: Tag[] = []; @Output() searchStartEvent = new EventEmitter(); @Output() searchEndEvent = new EventEmitter(); @ViewChild("tagInput") tagInput!: ElementRef; @ViewChild("tagInputList") inputList!: ElementRef; + public contextMenuTag: Tag | undefined; + constructor( private errorBroker: ErrorBrokerService, private fileService: FileService, @@ -74,6 +78,11 @@ export class FileSearchComponent implements AfterViewChecked, OnInit { } } + public async addSearchTagAndSearch(tag: string) { + this.addSearchTag(tag); + await this.searchForFiles(); + } + public getValidSearchTags(): Tag[] { return this.availableTags.filter(t => this.filters.findIndex( f => f.partiallyEq(t.getNormalizedOutput())) < 0); @@ -130,4 +139,8 @@ export class FileSearchComponent implements AfterViewChecked, OnInit { } }); } + + public async copyToClipboard(text: string) { + await clipboard.writeText(text); + } } diff --git a/mediarepo-ui/src/app/components/shared/sidebar/sidebar.module.ts b/mediarepo-ui/src/app/components/shared/sidebar/sidebar.module.ts index 4c9eff1..0152f0b 100644 --- a/mediarepo-ui/src/app/components/shared/sidebar/sidebar.module.ts +++ b/mediarepo-ui/src/app/components/shared/sidebar/sidebar.module.ts @@ -25,6 +25,7 @@ import { FileImportComponent } from "./file-import/file-import.component"; import {FilesystemImportComponent} from "./file-import/filesystem-import/filesystem-import.component"; import {MatCheckboxModule} from "@angular/material/checkbox"; import {MatProgressBarModule} from "@angular/material/progress-bar"; +import {MatMenuModule} from "@angular/material/menu"; @NgModule({ @@ -68,6 +69,7 @@ import {MatProgressBarModule} from "@angular/material/progress-bar"; TagModule, MatCheckboxModule, MatProgressBarModule, + MatMenuModule, ] }) export class SidebarModule {