From 239846a86b081e0e681c2ac79517eabeb8227bfb Mon Sep 17 00:00:00 2001 From: swapnil-verma-gl <92505353+swapnil-verma-gl@users.noreply.github.com> Date: Thu, 13 Jun 2024 16:00:34 +0530 Subject: [PATCH] [ACS-7979] Fixed UI for create tags dialog (#9793) * [ACS-7979] Fixed UI for create tags dialog. Minor UI fixes of create categories dialog as well * [ACS-7979] Fixed unit tests * [ACS-7979] Replaced dependency of CoreModule from tag.module.ts with TranslateModule and DynamicChipListModule --- .../categories-management.component.html | 4 +- .../categories-management.component.scss | 24 ++++---- .../categories-management.component.ts | 5 +- .../src/lib/tag/tag.module.ts | 28 ++++----- .../tags-creator/tags-creator.component.html | 27 +++++---- .../tags-creator/tags-creator.component.scss | 59 ++++++++----------- .../tags-creator.component.spec.ts | 2 +- .../tags-creator/tags-creator.component.ts | 12 ++-- 8 files changed, 76 insertions(+), 85 deletions(-) diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.html b/lib/content-services/src/lib/category/categories-management/categories-management.component.html index 80195fd17d7..5dae3295617 100644 --- a/lib/content-services/src/lib/category/categories-management/categories-management.component.html +++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.html @@ -8,7 +8,7 @@ /> {{ categoryNameErrorMessageKey | translate }} -
+
+ (click)='addCategoryToAssign(category)'> {{ category.name }}

0))) { const selectedCategory: Category = category; this.categories.push(selectedCategory); this._existingCategories.splice(this._existingCategories.indexOf(selectedCategory), 1); diff --git a/lib/content-services/src/lib/tag/tag.module.ts b/lib/content-services/src/lib/tag/tag.module.ts index 03dc48fa708..abdfe8d58fa 100644 --- a/lib/content-services/src/lib/tag/tag.module.ts +++ b/lib/content-services/src/lib/tag/tag.module.ts @@ -15,17 +15,19 @@ * limitations under the License. */ -import { CommonModule } from '@angular/common'; +import { CommonModule, NgForOf } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; - import { MaterialModule } from '../material.module'; import { TagActionsComponent } from './tag-actions.component'; import { TagListComponent } from './tag-list.component'; import { TagNodeListComponent } from './tag-node-list.component'; -import { CoreModule } from '@alfresco/adf-core'; import { TagsCreatorComponent } from './tags-creator/tags-creator.component'; import { ContentDirectiveModule } from '../directives/content-directive.module'; +import { MatChipsModule } from '@angular/material/chips'; +import { MatIconModule } from '@angular/material/icon'; +import { TranslateModule } from '@ngx-translate/core'; +import { DynamicChipListModule } from '@alfresco/adf-core'; @NgModule({ imports: [ @@ -34,19 +36,13 @@ import { ContentDirectiveModule } from '../directives/content-directive.module'; MaterialModule, FormsModule, ReactiveFormsModule, - CoreModule - ], - exports: [ - TagActionsComponent, - TagListComponent, - TagNodeListComponent, - TagsCreatorComponent + TranslateModule, + DynamicChipListModule, + MatChipsModule, + MatIconModule, + NgForOf ], - declarations: [ - TagActionsComponent, - TagListComponent, - TagNodeListComponent, - TagsCreatorComponent - ] + exports: [TagActionsComponent, TagListComponent, TagNodeListComponent, TagsCreatorComponent], + declarations: [TagActionsComponent, TagListComponent, TagNodeListComponent, TagsCreatorComponent] }) export class TagModule {} diff --git a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html index 9e5ff198449..a45fec0dbb9 100644 --- a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html +++ b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html @@ -16,19 +16,20 @@ {{ 'TAG.TAGS_CREATOR.NO_TAGS_CREATED' | translate }}

- - {{ tag }} - - + + + {{ tag }} + + +
diff --git a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss index 741f236b1e0..e08ee32c03c 100644 --- a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss +++ b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss @@ -1,24 +1,8 @@ +@import 'styles/mat-selectors'; + adf-tags-creator { display: block; - .adf-label-with-icon-button { - background: var(--adf-metadata-buttons-background-color); - width: fit-content; - min-height: 32px; - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 16px; - padding: 6px 0; - padding-left: 12px; - - .adf-remove-tag { - line-height: 24px; - height: 24px; - transform: scale(0.7); - } - } - .adf-no-tags-message { margin-top: 28.5px; margin-bottom: 0; @@ -27,15 +11,23 @@ adf-tags-creator { .adf-tag-name-field, .adf-tag-name-field[hidden] { - padding-top: 10px; + display: flex; + flex-direction: column; margin-right: 12px; } .adf-tag-search-field { background: var(--adf-metadata-buttons-background-color); - height: 32px; border-radius: 12px; - padding: 0 6px; + padding: 5px 6px; + border: none; + outline: none; + font: inherit; + color: currentcolor; + margin: 0; + vertical-align: bottom; + text-align: inherit; + box-sizing: content-box; } .adf-create-tag-label { @@ -47,7 +39,6 @@ adf-tags-creator { display: inline-block; padding-right: 12px; overflow: auto; - max-height: 7vh; } .adf-tags-list { @@ -57,19 +48,18 @@ adf-tags-creator { gap: 8px; } - .adf-tag { + .adf-tags-chips-container { margin-top: 8px; - overflow-wrap: anywhere; - & + .adf-tag { - margin-top: 8px; + .adf-tags-chip { + background: var(--adf-metadata-buttons-background-color); + height: unset; } } .adf-existing-tags-panel { border-top-left-radius: 6px; border-top-right-radius: 6px; - padding-top: 12px; width: 100%; .adf-existing-tags-label { @@ -87,16 +77,15 @@ adf-tags-creator { flex-direction: column; .adf-tag { - margin-bottom: 18px; - margin-top: 0; - padding-right: 12px; + margin: 0; + padding: 4px; font-size: 14px; height: auto; width: unset; background-color: inherit; color: inherit; - &:hover { + &:not(#{$mat-list-item-disabled}):hover { cursor: pointer; background: var(--adf-theme-mat-grey-color-a200); } @@ -104,10 +93,6 @@ adf-tags-creator { & span { padding: 0; } - - & + .adf-tag { - margin-top: -10px; - } } .adf-tags-creator-spinner { @@ -115,6 +100,10 @@ adf-tags-creator { overflow: unset; min-height: 62px; } + + #{$mat-list-item-disabled} #{$mat-list-item-primary-text} { + opacity: 1; + } } } diff --git a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.spec.ts b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.spec.ts index 78e70cc7912..a54846c990f 100644 --- a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.spec.ts +++ b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.spec.ts @@ -122,7 +122,7 @@ describe('TagsCreatorComponent', () => { * @returns list of tags */ function getAddedTags(): string[] { - const tagElements = fixture.debugElement.queryAll(By.css(`.adf-tags-creation .adf-tag`)); + const tagElements = fixture.debugElement.queryAll(By.css(`.adf-tags-creation .adf-tags-chip`)); return tagElements.map((el) => el.nativeElement.firstChild.nodeValue.trim()); } diff --git a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.ts b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.ts index ae6a36bfa00..34bf4b3cb9a 100644 --- a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.ts +++ b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.ts @@ -263,11 +263,13 @@ export class TagsCreatorComponent implements OnInit, OnDestroy { * @param selectedTag changes */ addExistingTagToTagsToAssign(selectedTag: TagEntry): void { - this.tags.push(selectedTag.entry.tag); - this.removeTagFromArray(this.existingTags, selectedTag); - this.tagNameControl.updateValueAndValidity(); - this.exactTagSet$.next(); - this.tagsChange.emit(this.tags); + if (!this.isOnlyCreateMode()) { + this.tags.push(selectedTag.entry.tag); + this.removeTagFromArray(this.existingTags, selectedTag); + this.tagNameControl.updateValueAndValidity(); + this.exactTagSet$.next(); + this.tagsChange.emit(this.tags); + } } /**