mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2026-09-09 18:03:21 +00:00
MD3 migration fixes (#11919)
* [ACS-10449] Viewer MD3 fixes * [ACS-10449] Autocomplete chip MD3 fix * [ACS-10449] Tabs MD3 fixes * [ACS-10449] Fix badge sizing * [ACS-10449] Login page error fix * [ACS-10449] Fix overlapping options on text next to selectbox * [ACS-10449] ADF style fixes refactoring I * [ACS-10449] Breadcrumb and search filter container fixes * [ACS-10449] User column form field fixes * [ACS-10449] adapt scroll into view to changes in MD3 * [ACS-10449] Properties panel opened by default * [ACS-10449] Tag creator fixes * [ACS-10449] fix metadata property label color * [ACS-10449] Categories panel fixes * [ACS-10449] Current aspect on changes fix * [ACS-10449] Make notification history badge size configurable * [ACS-10449] Make notification history badge size configurable via config file --------- Co-authored-by: Aleksander Sklorz <Aleksander.Sklorz@hyland.com> Co-authored-by: g-jaskowski <grzegorz.jaskowski@hyland.com>
This commit is contained in:
Michal Kinas
co-authored by
Aleksander Sklorz
g-jaskowski
Aleksander Sklorz
g-jaskowski
parent
1314f0751f
commit
cfdd3f9c50
@@ -27,6 +27,21 @@ The main purpose of the [Notification history component](../../core/components/n
|
||||
| maxNotifications | `number` | 5 | Maximum number of notifications to display. The rest will remain hidden until load more is clicked |
|
||||
| menuPositionX | [`MenuPositionX`](https://github.com/angular/components/blob/master/src/material/menu/menu-positions.ts) | "after" | Custom choice for opening the menu at the bottom. Can be `before` or `after`. |
|
||||
| menuPositionY | [`MenuPositionY`](https://github.com/angular/components/blob/master/src/material/menu/menu-positions.ts) | "below" | Custom choice for opening the menu at the bottom. Can be `above` or `below`. |
|
||||
| badgeSize | [`MatBadgeSize`](https://v19.material.angular.dev/components/badge/api#MatBadgeSize) | `small` | Badge size. Can be `small`, `medium` or `large`. |
|
||||
|
||||
### App config
|
||||
|
||||
You can set a default badge size in `app.config.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"notification": {
|
||||
"badgeSize": "medium"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The `notification.badgeSize` value is applied on init when the `badgeSize` input is not set explicitly on the component.
|
||||
|
||||
## See also
|
||||
|
||||
|
||||
@@ -81,7 +81,6 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei
|
||||
.adf-aspect-property-table-column-title,
|
||||
.adf-aspect-property-table-column-data-type {
|
||||
font: var(--mat-sys-body-small);
|
||||
color: var(--mat-sys-on-secondary-container);
|
||||
}
|
||||
|
||||
.adf-aspect-property-table-column {
|
||||
|
||||
@@ -67,12 +67,12 @@
|
||||
padding-right: 2px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font: var(--mat-sys-body-medium);
|
||||
text-align: left;
|
||||
color: var(--mat-sys-on-secondary-container);
|
||||
flex: 0 1 auto;
|
||||
min-width: 35px;
|
||||
margin-top: auto;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&.adf-active {
|
||||
|
||||
@@ -96,5 +96,6 @@ $dropdown-horizontal-offset: 30px;
|
||||
}
|
||||
|
||||
#{ms.$cdk-overlay-pane}:has(> .adf-breadcrumb-dropdown-panel) {
|
||||
margin-top: 12px;
|
||||
min-width: fit-content;
|
||||
}
|
||||
|
||||
+1
@@ -11,6 +11,7 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
word-break: break-word;
|
||||
font: var(--mat-sys-body-medium);
|
||||
}
|
||||
|
||||
.adf-categories-padded {
|
||||
|
||||
+1
-1
@@ -124,7 +124,7 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
|
||||
this._categoryNameControlVisible = categoryNameControlVisible;
|
||||
if (categoryNameControlVisible) {
|
||||
setTimeout(() => {
|
||||
this.categoryNameInputElement.nativeElement.scrollIntoView();
|
||||
this.categoryNameInputElement.nativeElement.scrollIntoView({ block: 'nearest' });
|
||||
});
|
||||
this._existingCategoriesPanelVisible = true;
|
||||
} else {
|
||||
|
||||
+1
-1
@@ -98,7 +98,7 @@
|
||||
</div>
|
||||
</adf-content-metadata-header>
|
||||
</mat-expansion-panel-header>
|
||||
<div *ngIf="currentPanel.panelTitle === DefaultPanels.TAGS && editedPanelTitle !== DefaultPanels.TAGS"
|
||||
<div *ngIf="currentPanel.panelTitle === DefaultPanels.TAGS && editedPanelTitle !== DefaultPanels.TAGS && !showEmptyTagMessage"
|
||||
class="adf-metadata-properties-tags">
|
||||
<adf-dynamic-chip-list [chips]="tagsToDisplay" [showDelete]="false" />
|
||||
</div>
|
||||
|
||||
+5
@@ -18,6 +18,11 @@ $panel-properties-height: 56px !default;
|
||||
height: $panel-properties-height;
|
||||
}
|
||||
|
||||
.adf-metadata-categories-header {
|
||||
display: block;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.adf-edit-icon-buttons {
|
||||
color: var(--mat-sys-on-secondary-container);
|
||||
}
|
||||
|
||||
+2
-2
@@ -208,7 +208,7 @@ export class ContentMetadataComponent implements OnChanges, OnInit {
|
||||
this.loadProperties(this.node);
|
||||
this.verifyAllowableOperations();
|
||||
|
||||
this.currentPanel.panelTitle = this.displayAspect ?? this.DefaultPanels.PROPERTIES;
|
||||
this.currentPanel.panelTitle = this.displayAspect && this.displayAspect !== '' ? this.displayAspect : this.DefaultPanels.PROPERTIES;
|
||||
this.currentPanel.expanded = true;
|
||||
}
|
||||
|
||||
@@ -277,7 +277,7 @@ export class ContentMetadataComponent implements OnChanges, OnInit {
|
||||
this.loadProperties(this.node);
|
||||
}
|
||||
|
||||
if (changes.displayAspect?.currentValue) {
|
||||
if (changes.displayAspect?.currentValue && changes.displayAspect.currentValue !== '') {
|
||||
this.currentPanel.panelTitle = changes.displayAspect.currentValue;
|
||||
this.currentPanel.expanded = true;
|
||||
}
|
||||
|
||||
-4
@@ -18,10 +18,6 @@
|
||||
width: 100%;
|
||||
justify-content: unset;
|
||||
}
|
||||
|
||||
&-add-member-action {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-new-permission-table {
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
$search-result-height: calc(100% - 60px);
|
||||
$search-result-height: calc(100% - 80px);
|
||||
|
||||
.adf {
|
||||
&-permission-result-list {
|
||||
|
||||
+1
-5
@@ -3,9 +3,5 @@
|
||||
.adf-role-selector-field#{ms.$mat-form-field} {
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
height: 40px;
|
||||
|
||||
#{ms.$mat-form-field-infix}:not(:disabled) {
|
||||
padding-top: 8px;
|
||||
}
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
+2
-2
@@ -31,12 +31,12 @@ adf-search-chip-autocomplete-input {
|
||||
}
|
||||
|
||||
.adf-option-chips-delete-button.adf-autocomplete-added-option-chips-delete-button {
|
||||
font: var(--mat-sys-body-small);
|
||||
font-size: var(--mat-sys-body-small-size);
|
||||
height: var(--mat-sys-body-small-size);
|
||||
width: var(--mat-sys-body-small-size);
|
||||
|
||||
.adf-option-chips-delete-icon.adf-autocomplete-added-option-chips-delete-icon {
|
||||
font: var(--mat-sys-body-small);
|
||||
font-size: var(--mat-sys-body-small-size);
|
||||
height: var(--mat-sys-body-small-size);
|
||||
width: var(--mat-sys-body-small-size);
|
||||
}
|
||||
|
||||
+1
@@ -55,6 +55,7 @@
|
||||
|
||||
.adf-search-checklist {
|
||||
margin: 4px 0 0 16px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.adf-filter-actions {
|
||||
|
||||
@@ -14,7 +14,7 @@ adf-tags-creator {
|
||||
}
|
||||
|
||||
.adf-tag-name-field {
|
||||
margin-top: 10px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.adf-create-tag-label {
|
||||
@@ -26,6 +26,7 @@ adf-tags-creator {
|
||||
display: inline-block;
|
||||
padding-right: 12px;
|
||||
overflow: auto;
|
||||
font: var(--mat-sys-body-medium);
|
||||
}
|
||||
|
||||
.adf-tags-list {
|
||||
@@ -42,7 +43,7 @@ adf-tags-creator {
|
||||
width: 100%;
|
||||
|
||||
.adf-existing-tags-label {
|
||||
font-size: 10px;
|
||||
font: var(--mat-sys-body-small);
|
||||
color: var(--mat-sys-on-surface-variant);
|
||||
padding-left: 12px;
|
||||
margin-bottom: 2px;
|
||||
|
||||
@@ -129,7 +129,7 @@ export class TagsCreatorComponent implements OnInit, OnDestroy {
|
||||
if (tagNameControlVisible) {
|
||||
this._existingTagsPanelVisible = true;
|
||||
setTimeout(() => {
|
||||
this.tagNameInputElement?.nativeElement?.scrollIntoView();
|
||||
this.tagNameInputElement?.nativeElement?.scrollIntoView({ block: 'nearest' });
|
||||
});
|
||||
} else {
|
||||
this._existingTagsPanelVisible = false;
|
||||
|
||||
-4
@@ -37,10 +37,6 @@
|
||||
}
|
||||
|
||||
.adf-textitem-chip-list-container {
|
||||
#{ms.$mat-form-field-label} {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.adf-property-value {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@@ -9,7 +9,6 @@
|
||||
display: flex;
|
||||
line-height: 20px;
|
||||
margin-bottom: 4px;
|
||||
color: var(--mat-sys-on-surface);
|
||||
}
|
||||
|
||||
.adf-property-container {
|
||||
|
||||
@@ -23,12 +23,6 @@ $adf-info-drawer-icon-size-half: 24px !default;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#{ms.$mat-tab-label}#{ms.$mat-tab-label-active} {
|
||||
& #{ms.$mat-tab-label-text} {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&-header {
|
||||
padding: 8px 0 0 24px;
|
||||
display: flex;
|
||||
|
||||
@@ -194,7 +194,6 @@
|
||||
color: var(--mat-sys-error);
|
||||
position: absolute;
|
||||
font-size: var(--mat-sys-body-small-size);
|
||||
margin-top: -12px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
id="adf-notification-history-open-button"
|
||||
(menuOpened)="onMenuOpened()"
|
||||
>
|
||||
<mat-icon aria-hidden="false" matBadge="⁠" [matBadgeHidden]="!notifications.length" class="adf-notification-history-menu_button-icon" matBadgeSize="small" adf-icon="notifications" />
|
||||
<mat-icon aria-hidden="false" matBadge="⁠" [matBadgeHidden]="!notifications.length" class="adf-notification-history-menu_button-icon" [matBadgeSize]="badgeSize" adf-icon="notifications" />
|
||||
</button>
|
||||
|
||||
<mat-menu #menu="matMenu"
|
||||
|
||||
@@ -25,6 +25,8 @@ import { UnitTestingUtils } from '../../testing/unit-testing-utils';
|
||||
import { provideCoreAuthTesting } from '../../testing/noop-auth.module';
|
||||
import { MatIconTestingModule } from '@angular/material/icon/testing';
|
||||
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
|
||||
import { MatBadgeHarness } from '@angular/material/badge/testing';
|
||||
import { AppConfigService } from '../../app-config/app-config.service';
|
||||
|
||||
describe('Notification History Component', () => {
|
||||
let fixture: ComponentFixture<NotificationHistoryComponent>;
|
||||
@@ -184,6 +186,36 @@ describe('Notification History Component', () => {
|
||||
});
|
||||
}, 45000);
|
||||
|
||||
it('should apply badge size from app config on init', async () => {
|
||||
const appConfig = TestBed.inject(AppConfigService);
|
||||
spyOn(appConfig, 'get').and.callFake(
|
||||
<T>(key: string, defaultValue?: T): T => (key === 'notification.badgeSize' ? 'large' : defaultValue) as T
|
||||
);
|
||||
|
||||
const configFixture = TestBed.createComponent(NotificationHistoryComponent);
|
||||
const configComponent = configFixture.componentInstance;
|
||||
configComponent.notifications = [];
|
||||
configFixture.detectChanges();
|
||||
|
||||
expect(configComponent.badgeSize).toBe('large');
|
||||
|
||||
notificationService.showInfo('Example Message');
|
||||
configFixture.detectChanges();
|
||||
|
||||
const badgeHarness = await TestbedHarnessEnvironment.loader(configFixture).getHarness(MatBadgeHarness);
|
||||
expect(await badgeHarness.getSize()).toBe('large');
|
||||
});
|
||||
|
||||
it('should use default badge size when app config is not set', () => {
|
||||
const appConfig = TestBed.inject(AppConfigService);
|
||||
spyOn(appConfig, 'get').and.returnValue(null);
|
||||
|
||||
const configFixture = TestBed.createComponent(NotificationHistoryComponent);
|
||||
configFixture.detectChanges();
|
||||
|
||||
expect(configFixture.componentInstance.badgeSize).toBe('small');
|
||||
});
|
||||
|
||||
describe('focus change', () => {
|
||||
let markAllAsReadButton: HTMLButtonElement;
|
||||
let loadMoreButton: HTMLButtonElement;
|
||||
|
||||
@@ -35,7 +35,7 @@ import { StorageService } from '../../common/services/storage.service';
|
||||
import { PaginationModel } from '../../models/pagination.model';
|
||||
import { MatButton, MatButtonModule, MatIconButton } from '@angular/material/button';
|
||||
import { TranslatePipe } from '@ngx-translate/core';
|
||||
import { MatBadgeModule } from '@angular/material/badge';
|
||||
import { MatBadgeModule, MatBadgeSize } from '@angular/material/badge';
|
||||
import { MatListModule } from '@angular/material/list';
|
||||
import { NgForOf, NgIf } from '@angular/common';
|
||||
import { InitialUsernamePipe, TimeAgoPipe } from '../../pipes';
|
||||
@@ -43,6 +43,7 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
|
||||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
||||
import { FocusKeyManager } from '@angular/cdk/a11y';
|
||||
import { IconModule } from '../../icon/icon.module';
|
||||
import { AppConfigService } from '../../app-config/app-config.service';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-notification-history',
|
||||
@@ -67,6 +68,7 @@ export class NotificationHistoryComponent implements OnInit, AfterViewInit {
|
||||
private readonly notificationService = inject(NotificationService);
|
||||
private readonly storageService = inject(StorageService);
|
||||
private readonly cd = inject(ChangeDetectorRef);
|
||||
private readonly appConfig = inject(AppConfigService);
|
||||
|
||||
public static MAX_NOTIFICATION_STACK_LENGTH = 100;
|
||||
public static NOTIFICATION_STORAGE = 'notification-history';
|
||||
@@ -86,6 +88,10 @@ export class NotificationHistoryComponent implements OnInit, AfterViewInit {
|
||||
@Input()
|
||||
maxNotifications: number = 5;
|
||||
|
||||
/** Size of the badge. Can be `small`, `medium` or `large` */
|
||||
@Input()
|
||||
badgeSize: MatBadgeSize = 'small';
|
||||
|
||||
notifications: NotificationModel[] = [];
|
||||
paginatedNotifications: NotificationModel[] = [];
|
||||
pagination: PaginationModel;
|
||||
@@ -105,6 +111,8 @@ export class NotificationHistoryComponent implements OnInit, AfterViewInit {
|
||||
|
||||
ngOnInit() {
|
||||
this.notifications = JSON.parse(this.storageService.getItem(NotificationHistoryComponent.NOTIFICATION_STORAGE)) || [];
|
||||
const configBadgeSize = this.appConfig.get<MatBadgeSize>('notification.badgeSize', null);
|
||||
this.badgeSize = configBadgeSize ?? this.badgeSize;
|
||||
}
|
||||
|
||||
ngAfterViewInit(): void {
|
||||
|
||||
@@ -14,9 +14,7 @@
|
||||
}
|
||||
|
||||
.adf-toolbar-container.adf-toolbar-container-row {
|
||||
height: 64px;
|
||||
white-space: normal;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
&.adf-toolbar--inline {
|
||||
|
||||
Reference in New Issue
Block a user