Trivernis
/
mediarepo
mirror of https://github.com/Trivernis/mediarepo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve busy indicator

Browse Source 
Signed-off-by: trivernis <trivernis@protonmail.com>
pull/4/head
trivernis 2 years ago
parent 66fe9432fd
commit d48cff688f
11 changed files with 43 additions and 17 deletions
Show Stats Download Patch File Download Diff File

2
mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.html
Unescape Escape View File

@ -3,7 +3,7 @@
<mat-tab label="Search">
<app-file-search [state]="this.state" [availableTags]="this.allTags" [contextTags]="this.tags"
(searchStartEvent)="this.searchStartEvent.emit($event)"
(searchEndEvent)="this.onDisplayedFilesChange(); this.searchEndEvent.emit($event);"></app-file-search>
(searchEndEvent)="this.onDisplayedFilesChange(); this.searchEndEvent.emit($event);" [tagsLoading]="this.tagsLoading"></app-file-search>
</mat-tab>
<mat-tab *ngIf="this.selectedFiles.length > 0" label="Edit Tags">
<app-tag-edit #fileedit [files]="this.selectedFiles"></app-tag-edit>

5
mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.ts
Unescape Escape View File

@ -42,6 +42,7 @@ export class FilesTabSidebarComponent implements OnInit, OnChanges {
public allTags: Tag[] = [];
public files: File[] = [];
public tagsOfSelection: Tag[] = [];
public tagsLoading = false;
constructor(private repoService: RepositoryService, private tagService: TagService) {
this.repoService.selectedRepository.subscribe(
@ -75,18 +76,22 @@ export class FilesTabSidebarComponent implements OnInit, OnChanges {
}
async loadTagsForDisplayedFiles() {
this.tagsLoading = true;
this.tagsOfFiles = await this.tagService.getTagsForFiles(
this.files.map(f => f.cd));
this.showAllTagsFallback();
this.tagsLoading = false;
}
async showFileDetails(files: File[]) {
this.tagsLoading = true;
this.tagsOfSelection = await this.tagService.getTagsForFiles(
files.map(f => f.cd));
this.tagsOfSelection = this.tagsOfSelection.sort(
(a, b) => a.getNormalizedOutput()
.localeCompare(b.getNormalizedOutput()));
this.tags = this.tagsOfSelection;
this.tagsLoading = false;
}
private async refreshFileSelection() {

2
mediarepo-ui/src/app/components/core/files-tab/files-tab.component.html
Unescape Escape View File

@ -5,7 +5,7 @@
[selectedFiles]="this.selectedFiles"></app-files-tab-sidebar>
</mat-drawer>
<mat-drawer-content>
<app-busy-indicator [blurBackground]="true" [busy]="contentLoading">
<app-busy-indicator [blurBackground]="true" [busy]="contentLoading" [darkenBackground]="true">
<app-file-multiview [mode]="state.mode.value" (modeChangeEvent)="state.mode.next($event)" (fileSelectEvent)="this.onFileSelect($event)" [files]="this.files" [preselectedFile]="this.getStateSelectedFile()"></app-file-multiview>
</app-busy-indicator>
</mat-drawer-content>

3
mediarepo-ui/src/app/components/shared/app-common/busy-indicator/busy-indicator.component.scss
Unescape Escape View File

@ -15,12 +15,11 @@
}
.busy-indicator-overlay.blur {
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
}
.busy-indicator-overlay.darken {
background-color: rgba(0, 0, 0, 0.2);
background-color: rgba(0, 0, 0, 0.5);
}
::ng-deep app-busy-indicator {

22
mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.html
Unescape Escape View File

@ -3,16 +3,16 @@
<h1>File Metadata</h1>
<mat-divider></mat-divider>
</div>
<div class="file-metadata-entries-scroll-container">
<div class="file-metadata-entries">
<app-editable-metadata-entry *ngIf="fileMetadata" attributeName="Name" [value]="fileMetadata.name ?? ''" (valueChangeEvent)="this.saveFileName($event)"></app-editable-metadata-entry>
<app-metadata-entry attributeName="Content Descriptor (CD)">{{file.cd}}</app-metadata-entry>
<app-metadata-entry attributeName="Mime Type">{{file.mimeType}}</app-metadata-entry>
<app-metadata-entry *ngIf="fileMetadata" attributeName="Imported at">{{fileMetadata.import_time.toLocaleString()}}</app-metadata-entry>
<app-metadata-entry *ngIf="fileMetadata" attributeName="Created at">{{fileMetadata.creation_time.toLocaleString()}}</app-metadata-entry>
<app-metadata-entry *ngIf="fileMetadata" attributeName="Changed at">{{fileMetadata.change_time.toLocaleString()}}</app-metadata-entry>
<app-busy-indicator [blurBackground]="true" [busy]="this.loading" [darkenBackground]="false">
<div class="file-metadata-entries-scroll-container">
<div class="file-metadata-entries">
<app-editable-metadata-entry *ngIf="fileMetadata" attributeName="Name" [value]="fileMetadata.name ?? ''" (valueChangeEvent)="this.saveFileName($event)"></app-editable-metadata-entry>
<app-metadata-entry attributeName="Content Descriptor (CD)">{{file.cd}}</app-metadata-entry>
<app-metadata-entry attributeName="Mime Type">{{file.mimeType}}</app-metadata-entry>
<app-metadata-entry *ngIf="fileMetadata" attributeName="Imported at">{{fileMetadata.import_time.toLocaleString()}}</app-metadata-entry>
<app-metadata-entry *ngIf="fileMetadata" attributeName="Created at">{{fileMetadata.creation_time.toLocaleString()}}</app-metadata-entry>
<app-metadata-entry *ngIf="fileMetadata" attributeName="Changed at">{{fileMetadata.change_time.toLocaleString()}}</app-metadata-entry>
</div>
</div>
</div>
</app-busy-indicator>
</div>

7
mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.ts
Unescape Escape View File

@ -18,24 +18,31 @@ export class FileMetadataComponent implements OnInit, OnChanges {
@Input() file!: File;
public fileMetadata: FileMetadata | undefined;
public loading = false;
constructor(private fileService: FileService) {
}
public async ngOnInit() {
this.loading = true;
this.fileMetadata = await this.fileService.getFileMetadata(this.file.id);
this.loading = false;
}
public async ngOnChanges(changes:SimpleChanges) {
if (changes["file"] && (!this.fileMetadata || this.fileMetadata.file_id != this.file.id)) {
this.loading = true;
this.fileMetadata = await this.fileService.getFileMetadata(this.file.id);
this.loading = false;
}
}
public async saveFileName(name: string) {
this.loading = true;
const newFile = await this.fileService.updateFileName(this.file.id, name);
if (this.fileMetadata) {
this.fileMetadata.name = newFile.name;
}
this.loading = false;
}
}

1
mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.html
Unescape Escape View File

@ -39,6 +39,7 @@
<app-tag-item [tag]="tag"></app-tag-item>
</div>
</cdk-virtual-scroll-viewport>
<app-busy-indicator [busy]="this.tagsLoading" [blurBackground]="true" [darkenBackground]="false"></app-busy-indicator>
</div>
</div>

13
mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.scss
Unescape Escape View File

@ -119,3 +119,16 @@ mat-divider {
margin: auto;
}
}
.file-tag-list {
position: relative;
}
app-busy-indicator {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 99;
}

1
mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.ts
Unescape Escape View File

@ -37,6 +37,7 @@ export class FileSearchComponent implements AfterViewChecked, OnInit {
@Input() availableTags: Tag[] = [];
@Input() contextTags: Tag[] = [];
@Input() state!: TabState;
@Input() tagsLoading = false;
@Output() searchStartEvent = new EventEmitter<void>();
@Output() searchEndEvent = new EventEmitter<void>();

2
mediarepo-ui/src/app/components/shared/sidebar/tag-edit/tag-edit.component.html
Unescape Escape View File

@ -33,5 +33,5 @@
</mat-select>
</mat-form-field>
</div>
<app-busy-indicator *ngIf="this.loading" [busy]="this.loading" [blurBackground]="true" [darkenBackground]="true"></app-busy-indicator>
<app-busy-indicator *ngIf="this.loading" [busy]="this.loading" [blurBackground]="true"></app-busy-indicator>
</div>

2
mediarepo-ui/src/polyfills.ts
Unescape Escape View File

@ -3,7 +3,7 @@
* You can add your own extra polyfills to this file.
*
* This file is divided into 2 sections:
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
* 1. Browser polyfills. These are applied before tagsLoading ZoneJS and are sorted by browsers.
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
* file.
*

Write Preview
Loading…
Cancel
Save