Make the autocompleter aligned on the team planner and the assignee b…

…oard
opf · Oct 11, 2024 · 8e09dfc · 8e09dfc
1 parent 2c1d7de
commit 8e09dfc
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 22 deletions.
diff --git a/frontend/src/app/features/invite-user-modal/principal/principal-search.component.html b/frontend/src/app/features/invite-user-modal/principal/principal-search.component.html
@@ -21,20 +21,16 @@
       class="ng-option-label"
     >
       <!--Selectable option-->
-      <span [ngOptionHighlight]="search">
-        {{ item.principal.name }}
-      </span>
+      <span [ngOptionHighlight]="search">{{ item.principal.name }}</span>
       <span
         class="op-autocompleter__option-principal-email"
         *ngIf="item.principal.email"
-        [ngOptionHighlight]="search"
-      >{{ item.principal.email }}</span>
+        [ngOptionHighlight]="search">{{ item.principal.email }}</span>
 
       <!-- Already a member of the project -->
       <div
         *ngIf="item.disabled"
-        class="ellipsis"
-      >{{ text.alreadyAMember() }}</div>
+        class="ellipsis">{{ text.alreadyAMember() }}</div>
     </div>
   </ng-template>
 

diff --git a/.../src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.html b/.../src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.html
@@ -180,16 +180,18 @@
   </ng-container>
 
   <ng-container *ngSwitchCase="resource ==='users' || resource ==='assignee' || resource === 'principals'">
-    <div class="op-autocompleter--option-principal-wrapper">
-      <op-principal
-        *ngIf="item && item.href"
-        [principal]="item"
-        [hideName]="true"
-        class="op-autocompleter--option-principal-avatar"
-        size="mini"
-      ></op-principal>
-      <span [ngOptionHighlight]="search" class="ellipsis">{{ item.name }}</span>
-    </div>
+    <op-principal
+      *ngIf="item && item.href"
+      [principal]="item"
+      [hideName]="true"
+      class="op-autocompleter--option-principal-avatar"
+      size="mini"
+    ></op-principal>
+    <span [ngOptionHighlight]="search">{{ item.name }}</span>
+    <span
+      class="op-autocompleter__option-principal-email"
+      *ngIf="item.email"
+      [ngOptionHighlight]="search">{{ item.email }}</span>
   </ng-container>
 
   <ng-container

diff --git a/.../src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.sass b/.../src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.sass
@@ -49,11 +49,6 @@
     white-space: nowrap
     text-overflow: ellipsis
 
-  &--option-principal
-    &-wrapper
-      display: flex
-      overflow: hidden
-
   &__option-principal-email
     color: var(--fgColor-muted)
     font-size: var(--font-size-small)
@@ -64,3 +59,5 @@
       display: block
       margin-left: 0
       margin-top: var(--control-xsmall-gap)
+    &--option-principal-avatar + span + &__option-principal-email
+      margin-left: var(--control-small-size)