Text-overflow postavljen svuda gde treba.

2 files changed, 20 insertions, 11 deletions

diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css
index 810ad05d..fe21e7b1 100644
--- a/frontend/src/app/_elements/folder/folder.component.css
+++ b/frontend/src/app/_elements/folder/folder.component.css
@@ -1,6 +1,5 @@
 #folder {
     width: 100%;
-    
 }
 
 #tabs {
@@ -186,10 +185,10 @@
 .file-bottom-buttons {
     position: relative;
     position: relative;
-    top:-36px
-    
+    top: -36px
 }
-.file-bottom-buttons-helper{
+
+.file-bottom-buttons-helper {
     position: relative;
     display: flex;
     flex-direction: row-reverse;
@@ -226,4 +225,14 @@
 .highlight-exp {
     /*font-size: 16px;*/
     font-weight: 700;
+}
+
+.text-overflow {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.selected-file-tab {
+    max-width: 230px !important;
 }
\ 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 54444e95..bf0bad10 100644
--- a/frontend/src/app/_elements/folder/folder.component.html
+++ b/frontend/src/app/_elements/folder/folder.component.html
@@ -13,8 +13,8 @@
             <a class="m-1 stretched-link tab-link" (click)="selectTab(tab)" (mouseenter)="hoverOverTab(tab)" (mouseleave)="hoverOverTab(TabType.None)">{{tabTitles[tab]}}</a>
         </div>
 
-        <div class="folder-tab p-1 rounded-top" *ngIf="selectedFile" [style]="'z-index:' + (selectedTab == TabType.File ? 11 : (tabsToShow.length)) + ' ;'" [ngClass]="{'selected-tab' : selectedTab == TabType.File, 'hover-tab' : hoverTab == TabType.File}">
-            <a class="m-1 stretched-link tab-link" (click)="selectTab(TabType.File)" (mouseenter)="hoverOverTab(TabType.File)" (mouseleave)="hoverOverTab(TabType.None)">{{selectedFile.name}}</a>
+        <div class="folder-tab p-1 rounded-top selected-file-tab" *ngIf="selectedFile" [style]="'z-index:' + (selectedTab == TabType.File ? 11 : (tabsToShow.length)) + ' ;'" [ngClass]="{'selected-tab' : selectedTab == TabType.File, 'hover-tab' : hoverTab == TabType.File}">
+            <a class="m-1 stretched-link tab-link text-overflow" (click)="selectTab(TabType.File)" (mouseenter)="hoverOverTab(TabType.File)" (mouseleave)="hoverOverTab(TabType.None)">{{selectedFile.name}}</a>
         </div>
     </div>
     <div id="selected-content" class="rounded-bottom text-offwhite">
@@ -105,7 +105,7 @@
                     </div>
 
                 </div>
-                <div class="list-add" [ngSwitch]="type" *ngIf="privacy != Privacy.Public" >
+                <div class="list-add" [ngSwitch]="type" *ngIf="privacy != Privacy.Public">
                     <!-- {{privacy == Privacy.Public ? 'javni ' : ' '}} -->
                     <button mat-raised-button *ngSwitchCase="FolderType.Dataset" (click)="selectNewFile()">Dodaj izvor podataka</button>
                     <button mat-raised-button *ngSwitchCase="FolderType.Model" (click)="selectNewFile()">Dodaj konfiguraciju neuronske mreže</button>
@@ -152,17 +152,17 @@
     <div [ngSwitch]="newFileSelected" *ngIf="!listView">
         <div class="file-bottom-buttons" *ngIf="selectedTab != TabType.NewFile">
             <div class="file-bottom-buttons-helper">
-            <button *ngIf="this.selectedFile && selectedTab == TabType.File && privacy != Privacy.Public" class="btn-clear file-button" (click)="deleteFile(this.selectedFile, $event)">
+                <button *ngIf="this.selectedFile && selectedTab == TabType.File && privacy != Privacy.Public" class="btn-clear file-button" (click)="deleteFile(this.selectedFile, $event)">
                 <mat-icon matTooltip="Obriši" matTooltipPosition="right">delete</mat-icon>
             </button>
-            <button *ngIf="this.selectedFile && selectedTab==TabType.File && FolderType.Dataset==this.type" class="btn-clear file-button" (click)="downloadFile(this.selectedFile,$event)" style="display: inline-block;">
+                <button *ngIf="this.selectedFile && selectedTab==TabType.File && FolderType.Dataset==this.type" class="btn-clear file-button" (click)="downloadFile(this.selectedFile,$event)" style="display: inline-block;">
                 <mat-icon matTooltip="Preuzmi" matTooltipPosition="before">download</mat-icon>
             </button>
-        </div>
+            </div>
             <!-- <button class="btn-clear file-button">
                 <mat-icon>zoom_out_map</mat-icon>
             </button> -->
         </div>
     </div>
-    
+
 </div>
\ No newline at end of file