Tt 37 show complete descriptions on hover (#846)

* fix: TT-610 Fix pipeline

* fix: TT-610 Fix pipeline - CI Time Tracker ui

* fix: TT-610 Fix pipeline - read from OS env variable in .ts

* feat: TT-37-show-complete-descriptions-on-hover

* Refactoring HTML and CSS Code

* Refactoring...

* feat: delete text-overflow

* Final Refactor

* Width box correction

Co-authored-by: Erick Almeida <[email protected]>
Co-authored-by: JaviMiot <[email protected]>

Author: 3 people

src/app/modules/reports/components/time-entries-table/time-entries-table.component.html

@@ -1,9 +1,5 @@
 <div class="row scroll-table mt-5 ml-0">
-  <table
-    class="table table-striped mb-0"
-    datatable
-    [dtTrigger]="dtTrigger"
-    [dtOptions]="dtOptions"
+  <table class="table table-striped mb-0" datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions"
     *ngIf="(reportDataSource$ | async) as dataSource">
     <thead class="thead-blue">
       <tr class="d-flex">
@@ -25,7 +21,7 @@
     </thead>
     <app-loading-bar *ngIf="dataSource.isLoading"></app-loading-bar>
     <tbody *ngIf="!dataSource.isLoading">
-      <tr class="d-flex" *ngFor="let entry of dataSource.data">
+      <tr class="d-flex col-height" *ngFor="let entry of dataSource.data">
         <td class="hidden-col">{{ entry.id }}</td>
         <td class="col md-col">{{ entry.owner_email }}</td>
         <td class="col sm-col">
@@ -48,14 +44,14 @@
             </a>
           </ng-container>
         </td>
-        <td class="col lg-col">{{ entry.description }}</td>
-        <td class="col lg-col">
+        <td class="col lg-scroll">{{ entry.description }}</td>
+        <td class="col lg-scroll">
           <ng-container *ngIf="entry.technologies.length > 0">
-              <div *ngFor="let technology of entry.technologies" class="badge bg-secondary text-wrap">
-                  {{ technology }}
-              </div>
+            <div *ngFor="let technology of entry.technologies" class="badge bg-secondary text-wrap">
+              {{ technology }}
+            </div>
           </ng-container>
-      </td>
+        </td>
       </tr>
     </tbody>
   </table>

src/app/modules/reports/components/time-entries-table/time-entries-table.component.scss

@@ -1,30 +1,68 @@
 @import '../../../../../styles/colors.scss';
-.col{
+
+.col {
   white-space: nowrap;
   overflow: hidden;
-  text-overflow: ellipsis;
   font-size: small;
 }
-.x-sm-col{
+
+.col-height {
+  min-height: auto;
+  max-height: 8rem;
+}
+
+.x-sm-col {
   width: 5em;
   max-width: 7em;
 }
 
-.sm-col{
+.sm-col {
   width: 6em;
   max-width: 8em;
 }
 
-.md-col{
+.md-col {
   width: 9em;
 }
 
-.lg-col{
+.lg-col {
   width: 12em;
   overflow: hidden;
   white-space: normal;
+  border: none;
+}
+
+@mixin scroll-style {
+  width: 25em;
+  overflow: hidden;
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  margin: 8px 10px 0px 10px;
+  border: none;
+  overflow-y: auto;
+  overflow-wrap: break-word;
+
+  &::-webkit-scrollbar {
+    width: 0.5em;
+  }
+
+  &::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #7a8486;
+    outline: 1px solid #7a8486;
+    border-radius: 0.5em;
+  }
 }
-.hidden-col{
+
+.lg-scroll {
+  @include scroll-style;
+}
+
+.hidden-col {
   display: none;
 }
 
@@ -94,4 +132,4 @@ table.dataTable thead .sorting_desc {
   text-transform: capitalize;
   font-style: italic;
   cursor: pointer;
-}
+}