diff options
Diffstat (limited to 'frontend/src/app/_elements/folder')
3 files changed, 75 insertions, 46 deletions
diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css index a1c1124a..3e865576 100644 --- a/frontend/src/app/_elements/folder/folder.component.css +++ b/frontend/src/app/_elements/folder/folder.component.css @@ -1,7 +1,7 @@ #folder { - position: absolute; + /*position: absolute; left: 50%; - transform: translateX(-50%); + transform: translateX(-50%);*/ } #tabs { @@ -22,9 +22,10 @@ align-items: center; position: relative; overflow-x: hidden; - background-color: var(--ns-bg-dark-100); height: 2.5rem; + background-color: var(--ns-bg-dark-100); border-color: var(--ns-primary); + color: var(--ns-primary); border-style: solid; border-width: 1px 1px 0 1px; } @@ -37,6 +38,7 @@ .selected-tab { height: 3rem; background-color: var(--ns-primary); + color: var(--offwhite); } .hover-tab { @@ -91,7 +93,7 @@ background-color: var(--ns-bg-dark-50); width: 100%; height: 36rem; - backdrop-filter: blur(2px); + /*backdrop-filter: blur(2px);*/ border-color: var(--ns-primary); border-style: solid; border-width: 1px 1px 1px 1px; @@ -104,21 +106,18 @@ justify-content: center; } -.folder-bottom-button { +.bottom-button { font-size: large; position: relative; - background-color: var(--ns-bg-dark-50); + background-color: var(--ns-primary); width: 10rem; - height: 2.5rem; - display: flex; - flex-direction: row; - justify-content: space-around; - align-items: center; + height: 2.3rem; border-color: var(--ns-primary); border-style: solid; border-width: 0px 1px 1px 1px; } -.folder-bottom-button:hover { - background-color: var(--ns-primary); +.rounded-bottom { + border-top-right-radius: 0; + border-top-left-radius: 0; }
\ No newline at end of file diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html index 895ac84e..c3da30fc 100644 --- a/frontend/src/app/_elements/folder/folder.component.html +++ b/frontend/src/app/_elements/folder/folder.component.html @@ -1,12 +1,12 @@ <div id="folder" style="width: 60rem;"> - <div id="tabs" class="text-offwhite"> + <div id="tabs"> <div id="new-file-tab" class="folder-tab p-1 rounded-top" [style]="'z-index:' + newFileZIndex() + ' ;'" [ngClass]="{'selected-tab' : newFileSelected, 'hover-tab' : hoveringOverFileIndex == -2}"> <mat-icon class="text-offwhite">add</mat-icon> <a class="stretched-link tab-link" (click)="selectNewFile()" (mouseenter)="hoverOverFile(-2)" (mouseleave)="hoverOverFile(-1)"> <p class="m-1" *ngIf="newFile != undefined">{{newFile.name}}</p> </a> </div> - <div class="folder-tab p-1 rounded-top" *ngFor="let file of files; let i = index" [style]="'z-index:' + calcZIndex(i) + ' ;'" [ngClass]="{'selected-tab' : selectedFileIndex == i, 'hover-tab' : hoveringOverFileIndex == i}"> + <div class="folder-tab p-1 rounded-top" *ngFor="let file of filteredFiles; let i = index" [style]="'z-index:' + calcZIndex(i) + ' ;'" [ngClass]="{'selected-tab' : selectedFileIndex == i, 'hover-tab' : hoveringOverFileIndex == i}"> <a class="m-1 stretched-link tab-link" (click)="selectFile(i)" (mouseenter)="hoverOverFile(i)" (mouseleave)="hoverOverFile(-1)">{{file.name}}</a> </div> </div> @@ -15,27 +15,22 @@ <div id="path" class="ps-2">{{folderName}} </div> <mat-icon>keyboard_arrow_right</mat-icon> - <div id="search"> + <div id="search" class="text-offwhite"> <mat-form-field> - <input matNativeControl> + <button matPrefix class="btn-clear input-icon"><mat-icon>search</mat-icon></button> + <input type="search" matInput name="search" [(ngModel)]="searchTerm" (input)="searchTermsChanged()"> + <button matSuffix class="btn-clear input-icon" (click)="clearSearchTerm()"><mat-icon>clear</mat-icon></button> </mat-form-field> </div> <div id="search-options"> <div id="collapseFilters" class="collapse collapse-horizontal"> - <mat-chip-list aria-label="filter selection"> - <mat-chip class="text-offwhite ns-bg-dark-50"> - <mat-icon class="text-offwhite">timeline</mat-icon> - Regresioni - </mat-chip> - <mat-chip class="text-offwhite ns-bg-dark-50"> - <mat-icon class="text-offwhite">looks_two</mat-icon> - Binarni klasifikacioni - </mat-chip> - <mat-chip class="text-offwhite ns-bg-dark-50"> - <mat-icon class="text-offwhite">auto_awesome_motion</mat-icon> - Multiklasifikacioni - </mat-chip> - </mat-chip-list> + + <mat-icon class="text-offwhite ">timeline</mat-icon> + Regresioni + <mat-icon class="text-offwhite ">looks_two</mat-icon> + Binarni klasifikacioni + <mat-icon class="text-offwhite ">auto_awesome_motion</mat-icon> + Multiklasifikacioni </div> <a class="tab-link p-1" data-bs-toggle="collapse" data-bs-target="#collapseFilters" aria-expanded="false" aria-controls="collapseFilters"> <mat-icon>filter_alt</mat-icon> @@ -50,19 +45,23 @@ </div> {{fileToDisplay ? fileToDisplay.name : 'No file selected.'}} {{selectedFileIndex}} {{hoveringOverFileIndex}} </div> - <div id="footer"> - <div class="folder-bottom-button text-offwhite rounded-bottom bubble" *ngIf="newFileSelected"> - <a class="tab-link stretched-link">Sačuvaj</a> - <div> - <mat-icon>check</mat-icon> + <div id="footer" [ngSwitch]="newFileSelected"> + <button mat-button (click)="saveNewFile()" class="bottom-button text-offwhite rounded-bottom" *ngSwitchCase="true"> + <div class="f-row"> + <div>Sačuvaj</div> + <div class="pt-1"> + <mat-icon>check</mat-icon> + </div> </div> - </div> - <div class="folder-bottom-button text-offwhite rounded-bottom bubble" *ngIf="!newFileSelected"> - <a class="tab-link stretched-link">Ok</a> - <div class="icon-double"> - <mat-icon>check</mat-icon> - <mat-icon>check</mat-icon> + </button> + <button mat-button (click)="ok()" class="bottom-button text-offwhite rounded-bottom" *ngSwitchCase="false"> + <div class="f-row"> + <div>Ok</div> + <div class="icon-double pt-1"> + <mat-icon>check</mat-icon> + <mat-icon>check</mat-icon> + </div> </div> - </div> + </button> </div> </div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts index 485a8dd7..91565f3c 100644 --- a/frontend/src/app/_elements/folder/folder.component.ts +++ b/frontend/src/app/_elements/folder/folder.component.ts @@ -20,11 +20,15 @@ export class FolderComponent implements OnInit { newFileSelected: boolean = true; selectedFileIndex: number = -1; + selectedFile?: (Dataset | Model); hoveringOverFileIndex: number = -1; fileToDisplay?: (Dataset | Model); @Output() selectedFileChanged: EventEmitter<(Dataset | Model)> = new EventEmitter(); + @Output() okPressed: EventEmitter<string> = new EventEmitter(); + + searchTerm: string = ''; constructor() { //PLACEHOLDER @@ -33,6 +37,9 @@ export class FolderComponent implements OnInit { new Dataset('Dijamanti'), new Dataset('Filmovi'), ] + + this.filteredFiles.length = 0; + this.filteredFiles.push(...this.files); } ngOnInit(): void { @@ -60,17 +67,19 @@ export class FolderComponent implements OnInit { if (!this.newFile) { this.createNewFile(); } - this.fileToDisplay = this.newFile; this.selectedFileIndex = -1; + this.fileToDisplay = this.newFile; + this.selectedFile = this.newFile; this.newFileSelected = true; this.selectedFileChanged.emit(this.newFile); } selectFile(index: number) { this.selectedFileIndex = index; - this.fileToDisplay = this.files[index]; + this.selectedFile = this.filteredFiles[index]; + this.fileToDisplay = this.filteredFiles[index]; this.newFileSelected = false; - this.selectedFileChanged.emit(this.files[index]); + this.selectedFileChanged.emit(this.selectedFile); } createNewFile() { @@ -81,6 +90,10 @@ export class FolderComponent implements OnInit { } } + ok() { + this.okPressed.emit(); + } + saveNewFile() { // TODO } @@ -97,6 +110,24 @@ export class FolderComponent implements OnInit { newFileZIndex() { return (this.files.length + 1); } + + clearSearchTerm() { + this.searchTerm = ''; + } + + filteredFiles: (Dataset | Model)[] = []; + + searchTermsChanged() { + this.filteredFiles.length = 0; + this.filteredFiles.push(...this.files.filter((file) => file.name.toLowerCase().includes(this.searchTerm.toLowerCase()))); + if (this.selectedFile) { + if (!this.filteredFiles.includes(this.selectedFile)) { + this.selectFile(-1); + } else { + this.selectedFileIndex = this.filteredFiles.indexOf(this.selectedFile); + } + } + } } export enum FolderType { |