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

diff --git a/src-ui/messages.xlf b/src-ui/messages.xlf
index 7461baf9c9355ae16b78aeeec0cd3b75f132fbf9..46d2e4872fb5319d8837f3c59998828580b275cf 100644 (file)
--- a/src-ui/messages.xlf
+++ b/src-ui/messages.xlf
@@ -2692,18 +2692,14 @@
         <source>Create New Field</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.html</context>
-          <context context-type="linenumber">21</context>
+          <context context-type="linenumber">22</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="3249513483374643425" datatype="html">
-        <source>Add</source>
+      <trans-unit id="601575001006419615" datatype="html">
+        <source>Add to document</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.html</context>
-          <context context-type="linenumber">24</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/components/common/permissions-select/permissions-select.component.html</context>
-          <context context-type="linenumber">7</context>
+          <context context-type="linenumber">25</context>
         </context-group>
       </trans-unit>
       <trans-unit id="7827616268749044116" datatype="html">
@@ -4097,7 +4093,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/input/select/select.component.ts</context>
-          <context context-type="linenumber">155</context>
+          <context context-type="linenumber">158</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6423278459497515329" datatype="html">
@@ -4307,6 +4303,13 @@
           <context context-type="linenumber">45</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="3249513483374643425" datatype="html">
+        <source>Add</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/components/common/permissions-select/permissions-select.component.html</context>
+          <context context-type="linenumber">7</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="1230154438678955604" datatype="html">
         <source>Change</source>
         <context-group purpose="location">

diff --git a/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.html b/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.html
index 90c57dda13d3ce7ba04f416439954f81597fef20..2489c995a763198e8914c669a92fcaad581ca17a 100644 (file)
--- a/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.html
+++ b/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>

diff --git a/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.scss b/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.scss
index f9b9290edf1f49b1a5d3b4c090003dddce8802a8..3240063aaae9a97d45cf23d82af0c912caa1d121 100644 (file)
--- a/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.scss
+++ b/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) {

diff --git a/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.spec.ts b/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.spec.ts
index 7b573ccee0cc5370c593d6d515548d5ba52cccbe..7c24578e67b20612f6c486d5817e26222067c7bc 100644 (file)
--- a/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.spec.ts
+++ b/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'

diff --git a/src-ui/src/app/components/common/input/select/select.component.html b/src-ui/src/app/components/common/input/select/select.component.html
index 5842547c5fa5514a1447c75c3c80e6d844ba1566..ef7be3b6249e416fc5d96fe45b6fdaf1383bddb4 100644 (file)
--- a/src-ui/src/app/components/common/input/select/select.component.html
+++ b/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>

diff --git a/src-ui/src/app/components/common/input/select/select.component.ts b/src-ui/src/app/components/common/input/select/select.component.ts
index 9b8e43329e394288805808023cb81cb808905156..19f6375ad1b60c298cf4f0975c88d3a958f2ac1a 100644 (file)
--- a/src-ui/src/app/components/common/input/select/select.component.ts
+++ b/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>()
 

diff --git a/src-ui/src/app/components/document-detail/document-detail.component.scss b/src-ui/src/app/components/document-detail/document-detail.component.scss
index a7871cc9efedd1003ed702a7205a0c055c635da4..1f672978470ef27a002fdbc0d6aafbefe2239205 100644 (file)
--- a/src-ui/src/app/components/document-detail/document-detail.component.scss
+++ b/src-ui/src/app/components/document-detail/document-detail.component.scss
@@ -17,7 +17,7 @@
   --page-margin: 10px auto;
 }
 
-::ng-deep .ng-select-taggable {
+::ng-deep form .ng-select-taggable {
   max-width: calc(100% - 90px); // fudge factor for (2x) ng-select button width
 }