Change table to grid layout

MaibornWolff · May 29, 2024 · c9baf98 · c9baf98
1 parent dce305d
commit c9baf98
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 37 deletions.
diff --git a/.../app/codeCharta/ui/ribbonBar/artificialIntelligence/artificialIntelligence.component.scss b/.../app/codeCharta/ui/ribbonBar/artificialIntelligence/artificialIntelligence.component.scss
@@ -38,9 +38,8 @@ cc-artificial-intelligence {
         margin-bottom: 8px;
     }
 
-    .subtitle {
+    .sub-title {
         font-size: 16px;
-        font-weight: bold;
     }
 
     .text-content {

diff --git a/...ta/ui/ribbonBar/artificialIntelligence/suspiciousMetrics/suspiciousMetrics.component.scss b/...ta/ui/ribbonBar/artificialIntelligence/suspiciousMetrics/suspiciousMetrics.component.scss
@@ -6,6 +6,17 @@
         font-size: 16px;
     }
 
+    .grid-container-suspicious {
+        display: inline-grid;
+        column-gap: 4px;
+        row-gap: 8px;
+        grid-template-columns: auto auto auto;
+
+        #spacer {
+            width: 14px;
+        }
+    }
+
     ul.text-content {
         margin: 0;
         padding-left: 26px;
@@ -20,7 +31,6 @@
     .sub-sub-title {
         font-size: 11;
         color: #999;
-        font-size: 11px;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;

diff --git a/...sMetrics/suspiciousMetricsMenu/susoiciousMetricsList/suspiciousMetricsList.component.html b/...sMetrics/suspiciousMetricsMenu/susoiciousMetricsList/suspiciousMetricsList.component.html
@@ -4,40 +4,38 @@
     </div>
 }
 
-<table class="text-content" cellspacing="4px">
+<div class="text-content grid-container-suspicious">
     @for (item of data.suspiciousMetricSuggestionLinks; track item) {
-        <tr>
-            <td></td>
-            <td title="{{ getNameAndDescriptionOfMetric(item.metric) }}">
-                <b>{{ item.metric | truncateText: 40 }}</b
-                ><br />
-                <span class="sub-sub-title">{{ getDescriptionOfMetric(item.metric) }}</span>
-            </td>
-            <td>
-                <mat-button-toggle-group>
+        <div id="spacer"></div>
+        <div title="{{ getNameAndDescriptionOfMetric(item.metric) }}">
+            <b>{{ item.metric | truncateText: 40 }}</b
+            ><br />
+            <span class="sub-sub-title">{{ getDescriptionOfMetric(item.metric) }}</span>
+        </div>
+        <div>
+            <mat-button-toggle-group>
+                <mat-button-toggle
+                    (click)="applySuspiciousMetric(item, false)"
+                    title="Apply Map Configuration to show files with suspicious metric {{
+                        item.metric
+                    }} and high risk or very high risk depending on selection"
+                >
+                    Apply preset&nbsp;<i class="fa fa-arrows-v"></i>&nbsp;<i class="fa fa-paint-brush"></i>
+                </mat-button-toggle>
+                @if (item.isOutlier) {
                     <mat-button-toggle
-                        (click)="applySuspiciousMetric(item, false)"
-                        title="Apply Map Configuration to show files with suspicious metric {{
-                            item.metric
-                        }} and high risk or very high risk depending on selection"
+                        class="risk-button-outliers"
+                        (click)="applySuspiciousMetric(item, true)"
+                        title="Show very high risk files (90th percentile)"
                     >
-                        Apply preset&nbsp;<i class="fa fa-arrows-v"></i>&nbsp;<i class="fa fa-paint-brush"></i>
+                        High-Risk&nbsp;<i class="fa fa-exclamation-triangle"></i>
                     </mat-button-toggle>
-                    @if (item.isOutlier) {
-                        <mat-button-toggle
-                            class="risk-button-outliers"
-                            (click)="applySuspiciousMetric(item, true)"
-                            title="Show very high risk files (90th percentile)"
-                        >
-                            High-Risk&nbsp;<i class="fa fa-exclamation-triangle"></i>
-                        </mat-button-toggle>
-                    } @else {
-                        <mat-button-toggle title="No high risk profile detected" disabled>
-                            High-Risk&nbsp;<i class="fa fa-exclamation-triangle"></i>
-                        </mat-button-toggle>
-                    }
-                </mat-button-toggle-group>
-            </td>
-        </tr>
+                } @else {
+                    <mat-button-toggle title="No high risk profile detected" disabled>
+                        High-Risk&nbsp;<i class="fa fa-exclamation-triangle"></i>
+                    </mat-button-toggle>
+                }
+            </mat-button-toggle-group>
+        </div>
     }
-</table>
+</div>
diff --git a/...rics/suspiciousMetricsMenu/unsuspiciousMetricsList/unsuspiciousMetricsList.component.html b/...rics/suspiciousMetricsMenu/unsuspiciousMetricsList/unsuspiciousMetricsList.component.html
@@ -1,6 +1,6 @@
 @if (data.unsuspiciousMetrics.length) {
     @if (data.analyzedProgrammingLanguage.length) {
-        <div class="subtitle">
+        <div class="sub-title">
             <button data-testid="Unsuspicious Metrics" class="untracked-metrics-button" (click)="toggleUnsuspiciousMetricsVisibility()">
                 <span class="untracked-unsus-icon-span">
                     <i

diff --git a/...ousMetrics/suspiciousMetricsMenu/untrackedMetricsList/untrackedMetricsList.component.html b/...ousMetrics/suspiciousMetricsMenu/untrackedMetricsList/untrackedMetricsList.component.html
@@ -1,6 +1,6 @@
 @if (data.untrackedMetrics.length) {
     @if (data.analyzedProgrammingLanguage.length) {
-        <div class="subtitle">
+        <div class="sub-title">
             <button data-testid="Untracked Metrics" class="untracked-metrics-button" (click)="toggleUntrackedMetricsVisibility()">
                 <span class="untracked-unsus-icon-span">
                     <i