minor fixes

2026-09-09 18:03:21 +00:00 · 2023-10-13 16:19:34 +05:30
parent 367a10c529
commit d1307c3cfc
9 changed files with 64 additions and 19 deletions
@@ -330,10 +330,6 @@ export class MetadataViewPage {
        await BrowserActions.click(this.saveGeneralMetadataButton);
    }

-    async clickResetGeneralMetadata(): Promise<void> {
-        await BrowserActions.click(this.resetGeneralMetadataButton);
-    }
-
    async generalSaveIconDisplayed(): Promise<void> {
        await BrowserVisibility.waitUntilElementIsNotVisible(this.saveGeneralMetadataButton);
    }
@@ -1,7 +1,8 @@
 <div class="adf-categories-management">
    <div *ngIf="((!categoryNameControlVisible && categories.length)) || categoryNameControlVisible"
         class="adf-category-name-field">
-        <input #categoryNameInput
+        <mat-form-field  appearance="fill">
+            <input #categoryNameInput
               matInput 
               autocomplete="off"
               [formControl]="categoryNameControl"
@@ -9,7 +10,8 @@
               aria-labelledby="adf-category-name-input-label"
               placeholder="{{'CATEGORIES_MANAGEMENT.INPUT_PLACEHOLDER' | translate }}"
               adf-auto-focus />
-        <mat-error [hidden]="!categoryNameControl.invalid">{{ categoryNameErrorMessageKey | translate }}</mat-error>
+            <mat-error [hidden]="!categoryNameControl.invalid">{{ categoryNameErrorMessageKey | translate }}</mat-error>
+        </mat-form-field>
    </div>
    <div class="adf-categories-list" [class.adf-categories-list-fixed]="!categoryNameControlVisible">
        <span
@@ -5,7 +5,7 @@
        display: flex;
        justify-content: space-between;
        width: 100%;
-        background: var(--adf-metadata-tags-background-color);
+        background: var(--adf-metadata-buttons-background-color);
        height: 32px;
        border-radius: 12px;
        align-items: center;
@@ -18,6 +18,18 @@
        .adf-btn-padded {
            margin-right: -14px;
        }
+
+        .mat-form-field-underline {
+            display: none;
+        }
+
+        .mat-form-field-wrapper {
+            width: 100%;
+        }
+        
+        .mat-form-field-appearance-fill .mat-form-field-flex {
+            background: none;
+        }
    }

    .adf-assigned-categories {
@@ -42,7 +42,7 @@
            align-items: center;
            border-radius: 16px;
            width: fit-content;
-            background: var(--adf-metadata-tags-background-color);
+            background: var(--adf-metadata-buttons-background-color);
            margin-top: 12px;
            padding: 6px 12px;
            justify-content: center;
@@ -1,6 +1,6 @@
 <div class="adf-tags-creation">
    <div class="adf-tag-name-field" *ngIf="(!tagNameControlVisible && tags.length) || tagNameControlVisible">
-        <div class="adf-tag-search-field">
+        <mat-form-field class="adf-tag-search-field" appearance="fill">
            <input #tagNameInput
                    matInput 
                    autocomplete="off"
@@ -10,8 +10,8 @@
                    adf-auto-focus
                    placeholder="{{'TAG.TAGS_CREATOR.INPUT_PLACEHOLDER' | translate}}" 
            />
-    <mat-error [hidden]="!tagNameControl.invalid">{{ tagNameErrorMessageKey | translate }}</mat-error>
-        </div>
+            <mat-error [hidden]="!tagNameControl.invalid">{{ tagNameErrorMessageKey | translate }}</mat-error>
+        </mat-form-field >
    </div>
    <p
       class="adf-no-tags-message"
@@ -30,7 +30,8 @@
                data-automation-id="remove-tag-button"
                mat-icon-button
                (click)="removeTag(tag)"
-                [attr.title]="'TAG.TAGS_CREATOR.TOOLTIPS.DELETE_TAG' | translate" [disabled]="disabledTagsRemoving"
+                [attr.title]="'TAG.TAGS_CREATOR.TOOLTIPS.DELETE_TAG' | translate"
+                [disabled]="disabledTagsRemoving"
                class="adf-remove-tag">
                <mat-icon>close</mat-icon>
            </button>
@@ -2,7 +2,7 @@ adf-tags-creator {
    display: block;

    .adf-label-with-icon-button {
-        background: var(--adf-metadata-tags-background-color);
+        background: var(--adf-metadata-buttons-background-color);
        width: fit-content;
        height: 32px;
        display: inline-flex;
@@ -39,16 +39,31 @@ adf-tags-creator {
            padding-right: 3px;
            font-size: 14px;
        }
+    
+        .mat-form-field-appearance-fill .mat-form-field-flex {
+            background: none;
+        }
+        
+        .mat-form-field-appearance-fill .mat-form-field-infix {
+            padding: 0;
+        }
    }

    .adf-tag-search-field {
-        width: 752px;
-        background: var(--adf-metadata-tags-background-color);
+        background: var(--adf-metadata-buttons-background-color);
        height: 32px;
        border-radius: 12px;
        align-items: center;
        display: flex;
        padding: 0 12px;
+        
+        .mat-form-field-underline {
+            display: none;
+        }
+
+        .mat-form-field-wrapper {
+            width: 100%;
+        }
    }

    .adf-create-tag-label {
@@ -21,7 +21,7 @@ import { NotificationService } from '@alfresco/adf-core';
 import { By } from '@angular/platform-browser';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatIconModule } from '@angular/material/icon';
-import { MatError, MatFormFieldModule } from '@angular/material/form-field';
+import { MatError, MatFormField, MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -300,7 +300,7 @@ describe('TagsCreatorComponent', () => {
            const tagNameField = fixture.debugElement.query(By.css(tagNameFieldSelector));
            expect(tagNameField).toBeTruthy();
            expect(tagNameField.nativeElement.hasAttribute('hidden')).toBeFalsy();
-            expect(tagNameField).toBeTruthy();
+            expect(tagNameField.query(By.directive(MatFormField))).toBeTruthy();
        });

        it('should input be autofocused', fakeAsync(() => {
@@ -310,6 +310,18 @@ describe('TagsCreatorComponent', () => {
            expect(getNameInput()).toBe(document.activeElement as HTMLInputElement);
        }));

+        it('should input be autofocused after showing input second time', fakeAsync(() => {
+            component.tagNameControlVisible = true;
+            fixture.detectChanges();
+            tick(100);
+
+            component.tagNameControlVisible = true;
+            fixture.detectChanges();
+            tick(100);
+
+            expect(getNameInput()).toBe(document.activeElement as HTMLInputElement);
+        }));
+
        describe('Errors', () => {
            /**
             * Get first error
@@ -374,6 +386,13 @@ describe('TagsCreatorComponent', () => {
                expect(getFirstError()).toBe('TAG.TAGS_CREATOR.ERRORS.ALREADY_ADDED_TAG');
            }));

+            it('should not show error for required if tags are changed', fakeAsync(() => {
+                typeTag('');
+                component.tags = ['new tag 1', 'new tag 2'];
+                fixture.detectChanges();
+                expect(getFirstError()).toBeUndefined();
+            }));
+
            it('should show error when duplicated already existing tag', fakeAsync(() => {
                const tag = 'Some tag';

@@ -46,7 +46,7 @@
        --adf-identity-user-info-font-size: var(--theme-adf-picture-1-font-size),
        --adf-user-info-container-margin-right: $adf-ref-margin-right,
        --adf-metadata-property-panel-border-color: $adf-metadata-property-panel-border-color,
-        --adf-metadata-tags-background-color: $adf-metadata-tags-background-color
+        --adf-metadata-buttons-background-color: $adf-metadata-buttons-background-color
    );

    // propagates SCSS variables into the CSS variables scope
@@ -28,4 +28,4 @@ $adf-ref-width: 40px;
 $adf-ref-line-height: 40px;
 $adf-ref-margin-right: 8px;
 $adf-metadata-property-panel-border-color: rgba(0, 0, 0, 0.12);
-$adf-metadata-tags-background-color: rgba(33, 33, 33, 0.05);
+$adf-metadata-buttons-background-color: rgba(33, 33, 33, 0.05);