From 3075135fbc9fd859cddaeac00e1f414e7aec9d92 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Wed, 7 Aug 2024 21:33:52 -0400 Subject: [PATCH] ACS-8498] [ACA] Testing Angular 15 - Toolbar buttons layout is broken (#3995) --- .../aca-content/assets/app.extensions.json | 16 ++-------- .../assets/images/adf-move-file-24px.svg | 1 - .../images/baseline-library_books-24px.svg | 2 -- .../assets/images/baseline-lock-24px.svg | 1 - .../assets/images/join-library.svg | 32 ------------------- .../context-menu-item.component.html | 6 ++-- .../context-menu/context-menu.component.html | 4 +-- .../context-menu/context-menu.component.scss | 8 +++++ .../context-menu/context-menu.component.ts | 1 + .../search-results.component.scss | 1 - .../toggle-join-library-button.component.ts | 2 +- .../toggle-join-library-menu.component.ts | 3 +- projects/aca-content/src/lib/ui/theme.scss | 26 +-------------- .../document-base-page.component.ts | 4 +-- .../document-base-page.spec.ts | 4 +-- .../page-layout/page-layout.component.scss | 5 --- .../toolbar-action.component.html | 6 ++-- .../toolbar-action.component.scss | 11 ------- .../toolbar-action.component.ts | 1 - .../toolbar-menu-item.component.html | 2 +- .../toolbar-menu-item.component.scss | 11 +++++-- .../components/toolbar/toolbar.component.scss | 1 + 22 files changed, 38 insertions(+), 110 deletions(-) delete mode 100644 projects/aca-content/assets/images/adf-move-file-24px.svg delete mode 100644 projects/aca-content/assets/images/baseline-library_books-24px.svg delete mode 100644 projects/aca-content/assets/images/baseline-lock-24px.svg delete mode 100644 projects/aca-content/assets/images/join-library.svg create mode 100644 projects/aca-content/src/lib/components/context-menu/context-menu.component.scss delete mode 100644 projects/aca-shared/src/lib/components/toolbar/toolbar-action/toolbar-action.component.scss diff --git a/projects/aca-content/assets/app.extensions.json b/projects/aca-content/assets/app.extensions.json index 06ae6f63c..c81b3e6e8 100644 --- a/projects/aca-content/assets/app.extensions.json +++ b/projects/aca-content/assets/app.extensions.json @@ -128,16 +128,6 @@ } } ], - "icons": [ - { - "id": "adf:join_library", - "value": "./assets/images/join-library.svg" - }, - { - "id": "adf:move_file", - "value": "./assets/images/adf-move-file-24px.svg" - } - ], "create": [ { "id": "app.create.folder", @@ -588,7 +578,7 @@ "id": "app.toolbar.move", "order": 600, "title": "APP.ACTIONS.MOVE", - "icon": "adf:move_file", + "icon": "drive_file_move", "actions": { "click": "MOVE_NODES" }, @@ -817,7 +807,7 @@ "id": "app.context.menu.move", "title": "APP.ACTIONS.MOVE", "order": 1000, - "icon": "adf:move_file", + "icon": "drive_file_move", "actions": { "click": "MOVE_NODES" }, @@ -1100,7 +1090,7 @@ "id": "app.viewer.move", "order": 500, "title": "APP.ACTIONS.MOVE", - "icon": "adf:move_file", + "icon": "drive_file_move", "actions": { "click": "MOVE_NODES" }, diff --git a/projects/aca-content/assets/images/adf-move-file-24px.svg b/projects/aca-content/assets/images/adf-move-file-24px.svg deleted file mode 100644 index bf39e51cc..000000000 --- a/projects/aca-content/assets/images/adf-move-file-24px.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/projects/aca-content/assets/images/baseline-library_books-24px.svg b/projects/aca-content/assets/images/baseline-library_books-24px.svg deleted file mode 100644 index 8898592b7..000000000 --- a/projects/aca-content/assets/images/baseline-library_books-24px.svg +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/projects/aca-content/assets/images/baseline-lock-24px.svg b/projects/aca-content/assets/images/baseline-lock-24px.svg deleted file mode 100644 index 74ee5f04f..000000000 --- a/projects/aca-content/assets/images/baseline-lock-24px.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/projects/aca-content/assets/images/join-library.svg b/projects/aca-content/assets/images/join-library.svg deleted file mode 100644 index 24b798f83..000000000 --- a/projects/aca-content/assets/images/join-library.svg +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/projects/aca-content/src/lib/components/context-menu/context-menu-item.component.html b/projects/aca-content/src/lib/components/context-menu/context-menu-item.component.html index 0f52d90d5..79efb52a1 100644 --- a/projects/aca-content/src/lib/components/context-menu/context-menu-item.component.html +++ b/projects/aca-content/src/lib/components/context-menu/context-menu-item.component.html @@ -2,7 +2,7 @@ @@ -22,8 +22,8 @@ - diff --git a/projects/aca-content/src/lib/components/context-menu/context-menu.component.html b/projects/aca-content/src/lib/components/context-menu/context-menu.component.html index 9f0f5e719..30fc9586d 100644 --- a/projects/aca-content/src/lib/components/context-menu/context-menu.component.html +++ b/projects/aca-content/src/lib/components/context-menu/context-menu.component.html @@ -5,7 +5,7 @@ @@ -16,7 +16,7 @@ diff --git a/projects/aca-content/src/lib/components/context-menu/context-menu.component.scss b/projects/aca-content/src/lib/components/context-menu/context-menu.component.scss new file mode 100644 index 000000000..3aadf1aec --- /dev/null +++ b/projects/aca-content/src/lib/components/context-menu/context-menu.component.scss @@ -0,0 +1,8 @@ +.aca-context-menu { + .app-context-menu-item { + &--icon { + display: inline-flex; + vertical-align: middle; + } + } +} diff --git a/projects/aca-content/src/lib/components/context-menu/context-menu.component.ts b/projects/aca-content/src/lib/components/context-menu/context-menu.component.ts index 01321cd96..5531f167b 100644 --- a/projects/aca-content/src/lib/components/context-menu/context-menu.component.ts +++ b/projects/aca-content/src/lib/components/context-menu/context-menu.component.ts @@ -52,6 +52,7 @@ import { OutsideEventDirective } from './context-menu-outside-event.directive'; ], selector: 'aca-context-menu', templateUrl: './context-menu.component.html', + styleUrls: ['./context-menu.component.scss'], host: { class: 'aca-context-menu-holder' }, diff --git a/projects/aca-content/src/lib/components/search/search-results/search-results.component.scss b/projects/aca-content/src/lib/components/search/search-results/search-results.component.scss index 9a4e8ced5..fe60acc86 100644 --- a/projects/aca-content/src/lib/components/search/search-results/search-results.component.scss +++ b/projects/aca-content/src/lib/components/search/search-results/search-results.component.scss @@ -38,7 +38,6 @@ aca-search-results { /* stylelint-disable-next-line */ .mdc-evolution-chip__text-label { - padding-top: 4px; color: var(--theme-selected-text-color); } diff --git a/projects/aca-content/src/lib/components/toolbar/toggle-join-library/toggle-join-library-button.component.ts b/projects/aca-content/src/lib/components/toolbar/toggle-join-library/toggle-join-library-button.component.ts index f6ba10d17..d83d63f08 100644 --- a/projects/aca-content/src/lib/components/toolbar/toggle-join-library/toggle-join-library-button.component.ts +++ b/projects/aca-content/src/lib/components/toolbar/toggle-join-library/toggle-join-library-button.component.ts @@ -51,7 +51,7 @@ import { NotificationService } from '@alfresco/adf-core'; [attr.title]="(membership.isJoinRequested | async) ? ('APP.ACTIONS.CANCEL_JOIN' | translate) : ('APP.ACTIONS.JOIN' | translate)" > cancel - + library_add `, encapsulation: ViewEncapsulation.None, diff --git a/projects/aca-content/src/lib/components/toolbar/toggle-join-library/toggle-join-library-menu.component.ts b/projects/aca-content/src/lib/components/toolbar/toggle-join-library/toggle-join-library-menu.component.ts index cf20fd5bc..82b73aa8d 100644 --- a/projects/aca-content/src/lib/components/toolbar/toggle-join-library/toggle-join-library-menu.component.ts +++ b/projects/aca-content/src/lib/components/toolbar/toggle-join-library/toggle-join-library-menu.component.ts @@ -44,8 +44,7 @@ import { MatMenuModule } from '@angular/material/menu'; [isAdmin]="(profile$ | async).isAdmin" [attr.title]="(membership.isJoinRequested | async) ? ('APP.ACTIONS.CANCEL_JOIN' | translate) : ('APP.ACTIONS.JOIN' | translate)" > - cancel - + {{ membership.isJoinRequested ? 'cancel' : 'library_add' }} {{ (membership.isJoinRequested | async) ? ('APP.ACTIONS.CANCEL_JOIN' | translate) : ('APP.ACTIONS.JOIN' | translate) }} `, diff --git a/projects/aca-content/src/lib/ui/theme.scss b/projects/aca-content/src/lib/ui/theme.scss index 3eeb23926..34aa31e10 100644 --- a/projects/aca-content/src/lib/ui/theme.scss +++ b/projects/aca-content/src/lib/ui/theme.scss @@ -10,10 +10,6 @@ mat-toolbar { color: var(--adf-theme-foreground-text-color-054); } -mat-icon { - vertical-align: middle; -} - .adf-name-location-cell-location.adf-datatable-cell-value { color: var(--theme-secondary-text); } @@ -23,27 +19,6 @@ mat-icon { padding: 0; } -#{$mat-button} > #{$mat-icon} { - padding: 0; -} - -#{$mat-button} { - #{$mat-button-label} { - -webkit-font-smoothing: subpixel-antialiased; - } - - &#{$mat-primary} { - #{$mat-button-label} { - -webkit-font-smoothing: initial; - font-weight: 500; - } - } -} - -#{$mat-button}:active { - outline: none; -} - #{$mat-form-field-error-wrapper}:is(div) { padding: 0; font-size: 10px; @@ -125,6 +100,7 @@ mat-slide-toggle { #{$mat-evolution-chip-text-label} { white-space: normal; + display: flex; } #{$mat-evolution-chip-action}#{$mat-chip-action} { diff --git a/projects/aca-shared/src/lib/components/document-base-page/document-base-page.component.ts b/projects/aca-shared/src/lib/components/document-base-page/document-base-page.component.ts index dacb45ee7..64b1fe580 100644 --- a/projects/aca-shared/src/lib/components/document-base-page/document-base-page.component.ts +++ b/projects/aca-shared/src/lib/components/document-base-page/document-base-page.component.ts @@ -171,11 +171,11 @@ export abstract class PageComponent implements OnInit, OnDestroy, OnChanges { imageResolver(row: ShareDataRow): string | null { if (row) { if (isLocked(row.node)) { - return 'assets/images/baseline-lock-24px.svg'; + return 'material-icons://lock'; } if (isLibrary(row.node)) { - return 'assets/images/baseline-library_books-24px.svg'; + return 'material-icons://library_books'; } } diff --git a/projects/aca-shared/src/lib/components/document-base-page/document-base-page.spec.ts b/projects/aca-shared/src/lib/components/document-base-page/document-base-page.spec.ts index 20acd996b..f90f5688a 100644 --- a/projects/aca-shared/src/lib/components/document-base-page/document-base-page.spec.ts +++ b/projects/aca-shared/src/lib/components/document-base-page/document-base-page.spec.ts @@ -290,7 +290,7 @@ describe('Info Drawer state', () => { } }; - expect(component.imageResolver(row)).toBe('assets/images/baseline-lock-24px.svg'); + expect(component.imageResolver(row)).toBe('material-icons://lock'); }); it('should resolve custom image for a library', () => { @@ -302,7 +302,7 @@ describe('Info Drawer state', () => { } }; - expect(component.imageResolver(row)).toBe('assets/images/baseline-library_books-24px.svg'); + expect(component.imageResolver(row)).toBe('material-icons://library_books'); }); it('should track elements by action id ', () => { diff --git a/projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss b/projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss index 14753a2fd..4d0680783 100644 --- a/projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss +++ b/projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss @@ -29,12 +29,7 @@ .aca-toolbar-action { button { - display: flex; - justify-content: center; - align-items: center; border-radius: 6px; - height: 32px; - line-height: 32px; } } } diff --git a/projects/aca-shared/src/lib/components/toolbar/toolbar-action/toolbar-action.component.html b/projects/aca-shared/src/lib/components/toolbar/toolbar-action/toolbar-action.component.html index 99414fa84..959f232ea 100644 --- a/projects/aca-shared/src/lib/components/toolbar/toolbar-action/toolbar-action.component.html +++ b/projects/aca-shared/src/lib/components/toolbar/toolbar-action/toolbar-action.component.html @@ -1,9 +1,9 @@ -
+
-
+
@@ -13,7 +13,7 @@ -
+
diff --git a/projects/aca-shared/src/lib/components/toolbar/toolbar-action/toolbar-action.component.scss b/projects/aca-shared/src/lib/components/toolbar/toolbar-action/toolbar-action.component.scss deleted file mode 100644 index 667eabc1e..000000000 --- a/projects/aca-shared/src/lib/components/toolbar/toolbar-action/toolbar-action.component.scss +++ /dev/null @@ -1,11 +0,0 @@ -.aca-toolbar-action { - margin: 0 5px; - - button { - -webkit-font-smoothing: subpixel-antialiased; - } -} - -.aca-toolbar-action-container { - margin-top: 1px; -} diff --git a/projects/aca-shared/src/lib/components/toolbar/toolbar-action/toolbar-action.component.ts b/projects/aca-shared/src/lib/components/toolbar/toolbar-action/toolbar-action.component.ts index 10851d024..dd3a7f850 100644 --- a/projects/aca-shared/src/lib/components/toolbar/toolbar-action/toolbar-action.component.ts +++ b/projects/aca-shared/src/lib/components/toolbar/toolbar-action/toolbar-action.component.ts @@ -34,7 +34,6 @@ import { ToolbarMenuComponent } from '../toolbar-menu/toolbar-menu.component'; imports: [CommonModule, ToolbarButtonComponent, ToolbarMenuComponent, DynamicExtensionComponent], selector: 'aca-toolbar-action', templateUrl: './toolbar-action.component.html', - styleUrls: ['./toolbar-action.component.scss'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'aca-toolbar-action' } diff --git a/projects/aca-shared/src/lib/components/toolbar/toolbar-menu-item/toolbar-menu-item.component.html b/projects/aca-shared/src/lib/components/toolbar/toolbar-menu-item/toolbar-menu-item.component.html index b22c23f85..404ac4f7b 100644 --- a/projects/aca-shared/src/lib/components/toolbar/toolbar-menu-item/toolbar-menu-item.component.html +++ b/projects/aca-shared/src/lib/components/toolbar/toolbar-menu-item/toolbar-menu-item.component.html @@ -31,7 +31,7 @@ [attr.title]="(actionRef.disabled ? actionRef['description-disabled'] : actionRef.description || actionRef.title) | translate" (click)="runAction()" > - + {{ actionRef.title | translate }} diff --git a/projects/aca-shared/src/lib/components/toolbar/toolbar-menu-item/toolbar-menu-item.component.scss b/projects/aca-shared/src/lib/components/toolbar/toolbar-menu-item/toolbar-menu-item.component.scss index c9f7b5534..925baac92 100644 --- a/projects/aca-shared/src/lib/components/toolbar/toolbar-menu-item/toolbar-menu-item.component.scss +++ b/projects/aca-shared/src/lib/components/toolbar/toolbar-menu-item/toolbar-menu-item.component.scss @@ -1,5 +1,12 @@ @import '@alfresco/adf-core/lib/styles/mat-selectors'; -.app-toolbar-menu-item:last-child > #{$mat-divider-horizontal} { - display: none; +.app-toolbar-menu-item { + &:last-child > #{$mat-divider-horizontal} { + display: none; + } + + &--icon { + display: inline-flex; + vertical-align: middle; + } } diff --git a/projects/aca-shared/src/lib/components/toolbar/toolbar.component.scss b/projects/aca-shared/src/lib/components/toolbar/toolbar.component.scss index c2e9eb05e..7679ce48b 100644 --- a/projects/aca-shared/src/lib/components/toolbar/toolbar.component.scss +++ b/projects/aca-shared/src/lib/components/toolbar/toolbar.component.scss @@ -5,6 +5,7 @@ aca-toolbar { background-color: inherit; border: none; padding: 0; + column-gap: 5px; } .aca-toolbar-divider {