Merge pull request #13136 from vvlladd28/improvement/file-input/truncate

Add to file input truncate text with tooltip

ui-ngx/src/app/shared/components/file-input.component.html

@@ -51,9 +51,9 @@
     </div>
   </ng-container>
   <div class="tb-file-info-container">
-    <tb-error *ngIf="!fileName && required && requiredAsError" class="tb-file-name" error="{{ noFileText | translate }}"></tb-error>
-    <div *ngIf="!fileName && !requiredAsError" class="tb-file-name" translate>{{ noFileText }}</div>
-    <div *ngIf="fileName" class="tb-file-name" [title]="fileName">{{ fileName }}</div>
-    <div *ngIf="maxSizeByte && !disabled" class="tb-file-hint" translate [translateParams]="{ size: maxSizeByte | fileSize }">dashboard.maximum-upload-file-size</div>
+    <tb-error *ngIf="!fileName && required && requiredAsError" class="font-medium" error="{{ noFileText | translate }}"></tb-error>
+    <div *ngIf="!fileName && !requiredAsError" class="tb-file-name" tbTruncateWithTooltip translate>{{ noFileText }}</div>
+    <div *ngIf="fileName" class="tb-file-name" tbTruncateWithTooltip>{{ fileName }}</div>
+    <div *ngIf="maxSizeByte && !disabled" class="tb-file-hint" tbTruncateWithTooltip translate [translateParams]="{ size: maxSizeByte | fileSize }">dashboard.maximum-upload-file-size</div>
   </div>
 </div>

ui-ngx/src/app/shared/components/file-input.component.scss

@@ -131,15 +131,11 @@ $previewSize: 100px !default;
   .tb-file-name {
     color: rgba(0, 0, 0, 0.54);
     font-weight: 500;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
 
   .tb-file-hint {
     color: rgba(0, 0, 0, 0.38);
     font-weight: 400;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
 }