yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

move notifications to its own element

Browse Source
This commit is contained in:
Mads Rasmussen
2022-06-03 14:01:34 +02:00
parent 8b4f54214f
commit 1feb943a06
2 changed files with 83 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts
View File

@@ -1,21 +1,19 @@
import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, html, LitElement } from 'lit';
import { state } from 'lit/decorators.js';
import { repeat } from 'lit/directives/repeat.js';
import { Subscription } from 'rxjs';
import { UmbContextProviderMixin } from '../core/context';
import { UmbNotificationService } from '../core/service/notifications.store';
import { UmbDataTypeStore } from '../core/stores/data-type.store';
import { UmbNodeStore } from '../core/stores/node.store';
import './components/backoffice-header.element';
import './components/backoffice-main.element';
import './components/backoffice-notification-container.element';
import './components/editor-layout.element';
import './components/editor-property-layout.element';
import './components/node-property.element';
import './components/section-sidebar.element';
import './components/backoffice-header.element';
import './components/backoffice-main.element';
@defineElement('umb-backoffice')
export default class UmbBackoffice extends UmbContextProviderMixin(LitElement) {
@@ -31,64 +29,22 @@ export default class UmbBackoffice extends UmbContextProviderMixin(LitElement) {
font-size: 14px;
box-sizing: border-box;
}
#notifications {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 70px;
height: auto;
padding: var(--uui-size-layout-1);
}
`,
];
private _notificationService: UmbNotificationService = new UmbNotificationService();
private _notificationSubscribtion?: Subscription;
@state()
private _notifications: any[] = [];
constructor() {
super();
this.provideContext('umbNodeStore', new UmbNodeStore());
this.provideContext('umbDataTypeStore', new UmbDataTypeStore());
this._notificationService = new UmbNotificationService();
this.provideContext('umbNotificationService', this._notificationService);
}
protected firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): void {
super.firstUpdated(_changedProperties);
this._notificationSubscribtion = this._notificationService.notifications.subscribe((notifications: Array<any>) => {
this._notifications = notifications;
});
// TODO: listen to close event and remove notification from store.
}
disconnectedCallback(): void {
super.disconnectedCallback();
this._notificationSubscribtion?.unsubscribe();
this.provideContext('umbNotificationService', new UmbNotificationService());
}
render() {
return html`
<umb-backoffice-header></umb-backoffice-header>
<umb-backoffice-main></umb-backoffice-main>
<uui-toast-notification-container auto-close="7000" bottom-up id="notifications">
${repeat(
this._notifications,
(notification) => notification.key,
(notification) => html`<uui-toast-notification color="positive">
<uui-toast-notification-layout .headline=${notification.headline}> </uui-toast-notification-layout>
</uui-toast-notification>`
)}
</uui-toast-notification-container>
<umb-backoffice-notification-container></umb-backoffice-notification-container>
`;
}
}

78
src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-notification-container.element.ts Normal file
View File

@@ -0,0 +1,78 @@
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, CSSResultGroup, html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { repeat } from 'lit/directives/repeat.js';
import { Subscription } from 'rxjs';
import { UmbContextConsumerMixin } from '../../core/context';
import { UmbNotificationService } from '../../core/service/notifications.store';
@customElement('umb-backoffice-notification-container')
export class UmbBackofficeNotificationContainer extends UmbContextConsumerMixin(LitElement) {
static styles: CSSResultGroup = [
UUITextStyles,
css`
#notifications {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 70px;
height: auto;
padding: var(--uui-size-layout-1);
}
`
];
@state()
private _notifications: any[] = [];
private _notificationService?: UmbNotificationService;
private _notificationSubscription?: Subscription;
constructor () {
super();
this.consumeContext('umbNotificationService', (notificationService: UmbNotificationService) => {
this._notificationService = notificationService;
this._useNotifications();
});
}
private _useNotifications() {
this._notificationSubscription?.unsubscribe();
this._notificationService?.notifications
.subscribe((notifications: Array<any>) => {
this._notifications = notifications;
});
// TODO: listen to close event and remove notification from store.
}
disconnectedCallback(): void {
super.disconnectedCallback();
this._notificationSubscription?.unsubscribe();
}
render() {
return html`
<uui-toast-notification-container auto-close="7000" bottom-up id="notifications">
${repeat(
this._notifications,
(notification) => notification.key,
(notification) => html`
<uui-toast-notification
color="positive">
<uui-toast-notification-layout .headline=${notification.headline}> </uui-toast-notification-layout>
</uui-toast-notification>`
)}
</uui-toast-notification-container>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'umb-backoffice-notification-container': UmbBackofficeNotificationContainer;
}
}