Enhancement: improve layout, button labels for custom fields dropdown (#6362)

src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.html

@@ -6,7 +6,7 @@
     <div ngbDropdownMenu aria-labelledby="customFieldsDropdown" class="shadow custom-fields-dropdown">
         <ul class="list-group list-group-flush">
             <li class="list-group-item">
-                <pngx-input-select class="mb-3"
+                <pngx-input-select
                     [items]="unusedFields"
                     bindLabel="name"
                     [(ngModel)]="field"
@@ -14,14 +14,15 @@
                     [notFoundText]="notFoundText"
                     [disableCreateNew]="!canCreateFields"
                     (createNew)="createField($event)"
+                    [hideAddButton]="true"
                     bindValue="id">
                 </pngx-input-select>
                 <div class="btn-toolbar" role="toolbar">
                     <button class="btn btn-sm btn-outline-secondary me-auto" type="button" (click)="createField()" [disabled]="!canCreateFields">
                         <i-bs width="1em" height="1em" name="asterisk"></i-bs>&nbsp;<ng-container i18n>Create New Field</ng-container>
                     </button>
-                    <button class="btn btn-sm btn-outline-primary me-1" type="button" (click)="addField(); fieldDropdown.close()" [disabled]="field === undefined">
-                        <i-bs width="1.2em" height="1.2em" name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add</ng-container>
+                    <button class="btn btn-sm btn-outline-primary" type="button" (click)="addField(); fieldDropdown.close()" [disabled]="field === undefined">
+                        <i-bs width="1.2em" height="1.2em" name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add to document</ng-container>
                     </button>
                 </div>
             </li>

src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.scss

@@ -1,5 +1,5 @@
 .custom-fields-dropdown {
-    min-width: 350px;
+    min-width: 380px;
 
     // correct position on mobile
     @media (max-width: 575.98px) {

src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.spec.ts

@@ -1,10 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 
 import { CustomFieldsDropdownComponent } from './custom-fields-dropdown.component'
-import {
-  HttpClientTestingModule,
-  HttpTestingController,
-} from '@angular/common/http/testing'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
 import { ToastService } from 'src/app/services/toast.service'
 import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
 import { of } from 'rxjs'

src-ui/src/app/components/common/input/select/select.component.html

@@ -36,7 +36,7 @@
                 <span [title]="item[bindLabel]">{{item[bindLabel]}}</span>
             </ng-template>
           </ng-select>
-          @if (allowCreateNew) {
+          @if (allowCreateNew && !hideAddButton) {
             <button class="btn btn-outline-secondary" type="button" (click)="addItem()" [disabled]="disabled">
               <i-bs width="1.2em" height="1.2em" name="plus"></i-bs>
             </button>

src-ui/src/app/components/common/input/select/select.component.ts

@@ -94,6 +94,9 @@ export class SelectComponent extends AbstractInputComponent<number> {
   @Input()
   disableCreateNew: boolean = false
 
+  @Input()
+  hideAddButton: boolean = false
+
   @Output()
   createNew = new EventEmitter<string>()