Fix Label Icon Display for Label Definitions (#804)

There are major css issues with regards to the info buttons for the labels in the CATcher app when creating or editing an issue. Let's fix the CSS layout of the entire label-definition select option by formatting the HTML elements into a grid.
CATcher-org · Oct 10, 2021 · 29bd7c3 · 29bd7c3
1 parent 1fa21f9
commit 29bd7c3
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 26 deletions.
diff --git a/src/app/shared/issue/label/label.component.css b/src/app/shared/issue/label/label.component.css
@@ -10,12 +10,21 @@
 }
 
 .infoPopup {
-  cursor: pointer;
-  background-color: Transparent;
+  background: transparent;
   border: none;
-  outline:none;
+  outline: none;
   text-align: center;
-  position: absolute;
-  right: 0px;
-  top: 30%;
+}
+
+.labelLine {
+  display: grid;
+  grid-template-columns: auto 20%;
+}
+
+.labelInfo {
+  display: grid;
+  grid-template-columns: 20% auto;
+  align-items: center;
+  text-align: left;
+  grid-gap: 20%;
 }
diff --git a/src/app/shared/issue/label/label.component.html b/src/app/shared/issue/label/label.component.html
@@ -4,20 +4,19 @@
 </button>
 
 <mat-menu #labelList>
-  <div mat-menu-item *ngFor="let value of labelValues;" [ngStyle]="{'padding-left': '15px', 'padding-right': '15px'}">
-    <button class="option"
-            (click)="updateLabel(value.labelValue)"
-            [disabled]="value.labelValue === this.issue[attributeName]">
-          <mat-icon [ngStyle]="{'color': '#' + value.labelColor, 'font-size' : '1.8em'}">stop</mat-icon>
-          <span> {{value.labelValue}}</span>
-
-    </button>
+  <div mat-menu-item class="labelLine" *ngFor="let value of labelValues;" [ngStyle]="{'padding-left': '15px', 'padding-right': '15px'}">
+      <button class="labelInfo option"
+          (click)="updateLabel(value.labelValue)"
+          [disabled]="value.labelValue === this.issue[attributeName]">
+        <mat-icon [ngStyle]="{'color': '#' + value.labelColor, 'font-size' : '1.8em'}">stop</mat-icon>
+        <span> {{value.labelValue}}</span>
+      </button>
 
-    <button *ngIf="hasLabelDefinition(value)"
-            class="infoPopup"
-            (click)="openDefinitionPage(value); $event.stopPropagation();">
-      <mat-icon style="font-size: 20px">info</mat-icon>
-    </button>
+      <button *ngIf="hasLabelDefinition(value)"
+              class="infoPopup"
+              (click)="openDefinitionPage(value); $event.stopPropagation();">
+        <mat-icon style="font-size: 20px">info</mat-icon>
+      </button>
 
   </div>
 </mat-menu>

diff --git a/src/app/shared/label-dropdown/label-dropdown.component.css b/src/app/shared/label-dropdown/label-dropdown.component.css
@@ -7,12 +7,13 @@
 }
 
 .infoPopup {
-  background-color: Transparent; 
+  background: transparent;
   border: none;
   outline: none;
-  padding: 2px 2px;
   text-align: center;
-  position: absolute;
-  right: 1px;
-  top: 20%;
+}
+
+.labelLine {
+  display: grid;
+  grid-template-columns: auto 20%;
 }
diff --git a/src/app/shared/label-dropdown/label-dropdown.component.html b/src/app/shared/label-dropdown/label-dropdown.component.html
@@ -5,8 +5,8 @@
       <mat-select-trigger>
         {{dropdownControl.value}}
       </mat-select-trigger>
-      <div mat-menu-item *ngFor="let value of labelList">
-        <mat-option  [value]="value.labelValue" [ngStyle]="{'background': 'transparent'}">
+      <div mat-menu-item class="labelLine" *ngFor="let value of labelList">
+        <mat-option [value]="value.labelValue" [ngStyle]="{'background': 'transparent'}">
           <mat-icon [ngStyle]="{'color': '#' + value.labelColor}">stop</mat-icon>
           <span> {{value.labelValue}}</span>
         </mat-option>