Merge pull request #104 from whole-tale/fix-excessive-spacing-on-sele…

…ct-data fix: add a width to first column to prevent whitespace on select-data-dialog
whole-tale · Sep 21, 2020 · e6b24b4 · e6b24b4
2 parents a5e69aa + 40aa139
commit e6b24b4
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/src/app/+run-tale/run-tale/modals/select-data-dialog/select-data-dialog.component.html b/src/app/+run-tale/run-tale/modals/select-data-dialog/select-data-dialog.component.html
@@ -34,7 +34,7 @@ <h1 mat-dialog-title>Select from WT External Data Catalog</h1>
           <tbody *ngIf="selectedDataset">
             <tr *ngFor="let elem of (folders | async).concat(files | async); index as i; trackBy:trackById"
                 [ngClass]="{ 'clickable': elem._modelType === 'folder', 'active': isSelected(elem, datasetsToAdd) }" (click)="toggledCheckbox($event, elem, datasetsToAdd)" (dblclick)="navigateToFolder(elem)">
-              <td><i class="fas fa-fw" [ngClass]="{ 'fa-folder': elem._modelType === 'folder', 'fa-file': elem._modelType === 'item' || elem._modelType === 'file' }"></i></td>
+              <td class="icon-column"><i class="fas fa-fw" [ngClass]="{ 'fa-folder': elem._modelType === 'folder', 'fa-file': elem._modelType === 'item' || elem._modelType === 'file' }"></i></td>
               <td>{{ elem.name | truncate:65 }}</td>
               <!--<td>{{ elem.size | fileSize }}</td>
               <td [title]="elem.updated">{{ elem.updated | date }}</td>-->
@@ -48,7 +48,7 @@ <h1 mat-dialog-title>Select from WT External Data Catalog</h1>
             </tr>
             <tr  *ngFor="let dataset of (datasets | async); index as i; trackBy:trackById"
                 [ngClass]="{ 'clickable': dataset._modelType === 'folder', 'active': isSelected(dataset, datasetsToAdd) }" (click)="toggledCheckbox($event, dataset, datasetsToAdd)" (dblclick)="navigateIntoDataset(dataset)">
-              <td><i class="fas fa-fw" [ngClass]="{ 'fa-folder': dataset._modelType === 'folder', 'fa-file': dataset._modelType === 'item' }"></i></td>
+              <td class="icon-column"><i class="fas fa-fw" [ngClass]="{ 'fa-folder': dataset._modelType === 'folder', 'fa-file': dataset._modelType === 'item' }"></i></td>
               <td>{{ dataset.name | truncate:40 }}</td>
               <!--<td>{{ dataset.size | fileSize }}</td>
               <td [title]="dataset.updated">{{ dataset.updated | date }}</td>-->
@@ -70,7 +70,7 @@ <h1 mat-dialog-title>Select from WT External Data Catalog</h1>
             </tr>
             <tr *ngFor="let dataset of (addedDatasets | async); index as i; trackBy:trackById"
                 [ngClass]="{ 'clickable': dataset._modelType === 'folder', 'active': isSelected(dataset, datasetsToRemove) }" (click)="toggledCheckbox($event, dataset, datasetsToRemove)">
-              <td><i class="fas fa-fw" [ngClass]="{ 'fa-folder': dataset._modelType === 'folder', 'fa-file': dataset._modelType === 'item'}"></i></td>
+              <td class="icon-column"><i class="fas fa-fw" [ngClass]="{ 'fa-folder': dataset._modelType === 'folder', 'fa-file': dataset._modelType === 'item'}"></i></td>
               <td>{{ dataset.name | truncate:40 }}</td>
               <!--<td>{{ dataset.size | fileSize }}</td>
               <td [title]="dataset.updated">{{ dataset.updated | date }}</td>-->

diff --git a/src/app/+run-tale/run-tale/modals/select-data-dialog/select-data-dialog.component.scss b/src/app/+run-tale/run-tale/modals/select-data-dialog/select-data-dialog.component.scss
@@ -24,3 +24,7 @@
 .clickable {
   cursor: pointer !important;
 }
+
+.icon-column {
+  width: 2em;
+}