Dodao hover za novi element tab u folderu, promenio input za kolicinu tacaka u pozadini da se odmah update-uje.

4 files changed, 16 insertions, 10 deletions

diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html
index 455d43cc..11fccc56 100644
--- a/frontend/src/app/_elements/folder/folder.component.html
+++ b/frontend/src/app/_elements/folder/folder.component.html
@@ -1,8 +1,8 @@
 <div id="folder" style="width: 60rem;">
     <div id="tabs" class="text-offwhite">
-        <div id="new-file-tab" class="folder-tab p-1 rounded-top" [style]="'z-index:' + newFileZIndex() + ' ;'" [ngClass]="{'selected-tab' : newFileSelected}">
+        <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()">
+            <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>
@@ -21,7 +21,7 @@
                 </mat-form-field>
             </div>
             <div id="search-options">
-                <div id="collapseFilters" class="collapse collapse-horizontal show">
+                <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>
@@ -37,7 +37,7 @@
                         </mat-chip>
                     </mat-chip-list>
                 </div>
-                <a class="tab-link p-1" data-bs-toggle="collapse" data-bs-target="#collapseFilters" aria-expanded="true" aria-controls="collapseFilters">
+                <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>
                 </a>
                 <div id="collapseSort" class="collapse collapse-horizontal">
diff --git a/frontend/src/app/_pages/playground/playground.component.html b/frontend/src/app/_pages/playground/playground.component.html
index d3751d5c..1dd7e331 100644
--- a/frontend/src/app/_pages/playground/playground.component.html
+++ b/frontend/src/app/_pages/playground/playground.component.html
@@ -3,14 +3,14 @@
         <h2 class="text-light my-2">
             Broj tačaka:
         </h2>
-        <mat-slider class="mx-3" [(ngModel)]="backgroundFill" min="0" max="1" step="0.01" (change)="updateBGPrefs()">
+        <mat-slider class="mx-3" [(ngModel)]="backgroundFill" min="0" max="1" step="0.01" (input)="updateFillPref($event)">
         </mat-slider>
 
     </div>
     <div class="d-flex flex-row align-items-center justify-content-center mt-5">
         <h2 class="text-light my-2">
             Animacija: </h2>
-        <mat-slide-toggle class="mx-3" [(ngModel)]="animateBackground" (change)="updateBGPrefs()"></mat-slide-toggle>
+        <mat-slide-toggle class="mx-3" [(ngModel)]="animateBackground" (change)="updateAnimPref()"></mat-slide-toggle>
 
     </div>
 </div>
diff --git a/frontend/src/app/_pages/playground/playground.component.ts b/frontend/src/app/_pages/playground/playground.component.ts
index f8ea8bb4..831132a4 100644
--- a/frontend/src/app/_pages/playground/playground.component.ts
+++ b/frontend/src/app/_pages/playground/playground.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { MatSliderChange } from '@angular/material/slider';
 import { CookieService } from 'ngx-cookie-service';
 
 @Component({
@@ -13,10 +14,13 @@ export class PlaygroundComponent implements OnInit {
 
   constructor(private cookie: CookieService) { }
 
-  updateBGPrefs() {
-    this.cookie.set('animateBackground', "" + this.animateBackground);
+  updateFillPref(event: MatSliderChange) {
+    this.backgroundFill = event.value!;
     this.cookie.set('backgroundFill', "" + this.backgroundFill);
-    console.log(this.animateBackground, this.backgroundFill);
+  }
+
+  updateAnimPref() {
+    this.cookie.set('animateBackground', "" + this.animateBackground);
   }
 
   ngOnInit(): void {
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index 93c27eb8..8c3f4e9e 100644
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -6,7 +6,9 @@
 <app-reactive-background [speed]="0.001" [scrollSpeed]="1" [minDistance]="0.14" [maxSize]="5" [cursorDistance]="0.22" lineColor="#00a8e8" pointColor="rgba(0, 188, 252, 1)" cursorLineColor="#00a8e8" [numPoints]="100">
 </app-reactive-background>
 <app-navbar></app-navbar>
-<a class="bg-controls" routerLink="playground">pozadina</a>
+<a class="bg-controls" routerLink="playground">
+    <mat-icon color="accent">settings_suggest</mat-icon>
+</a>
 <div class="h-100">
     <router-outlet></router-outlet>
 </div>