Notification persistence - the time the notification remains visible to the user on the client #8272 | Support Center

0

maliming created 5 years ago

Support Team

INotificationStore has been implemented in the Zero project.

https://github.com/aspnetboilerplate/aspnetboilerplate/blob/c0604b9b1347a3b9581bf97b4cae22db5b6bab1b/src/Abp.Zero.Common/Notifications/NotificationStore.cs#L17

https://docs.aspnetzero.com/en/aspnet-core-angular/latest/Features-Angular-Notifications

0

TimMackey created 5 years ago

My mistake. I mean the notification messages on the client that appear in the lower right corner as...

from the service:

export declare class NotifyService {
    info(message: string, title?: string, options?: any): void;
    success(message: string, title?: string, options?: any): void;
    warn(message: string, title?: string, options?: any): void;
    error(message: string, title?: string, options?: any): void;
}

0

ismcagdas created 5 years ago

Support Team

Hi,

abp.notify.info("Message", "Title", {timer: 5000})

5000 is milliseconds.

0

TimMackey created 5 years ago

Extending the time works beautifully.

Is there documenation somewhere that specifies all the options and their formats?

0

maliming created 5 years ago

Support Team

hi timmackey

see https://sweetalert2.github.io/#configuration

0

TimMackey created 5 years ago

Thank you!

0

TimMackey created 5 years ago

The 'timer' and 'position' options work ok. Other options do not work. For example ... this.notify.info(this.l('InvitationSent'), '', {timer: 5000, position: 'center', customClass: {content: 'notify-content-class', container: 'notify-content-class', header: 'notify-content-class', title: 'notify-content-class'} });

.notify-content-class {
    font-size: large;
    font-weight: 900;
}

... has no effect on the font. And 'html' option is not available because 'message' parameter is required, and overrides 'html' settings (per documentation, and verified).

How can I increase the font size of the message.

0

aaron created 5 years ago

Support Team

Metronic already sets font-size:

.swal2-popup.swal2-toast .swal2-content {
    justify-content: flex-start;
    font-size: 1em;
}

To override that, you can specify !important:

.notify-content-class {
    font-size: large !important;
    font-weight: 900;
}

0

TimMackey created 5 years ago

that doesn't work. Font is still the same (small) size.

0

aaron created 5 years ago

Support Team

Is the class added to the element in the DOM?

Which version of ASP.NET Zero (ASP.NET Core + Angular) are you on?

0

TimMackey created 5 years ago

Angular/Core release 8.0.0

Everything in the code below works as expected, EXCEPT the notify.info fonts are default fonts.

invite-modal.component.css:

.modal {
    text-align: center;
    padding: 0!important;
}
  
.modal:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
}
  
.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

.notify-content-class {
    font-size: large !important;
    font-weight: 900 !important;
}

.swal2-popup.swal2-toast .swal2-content {
    font-size: large !important;
}

invite-modal-component.ts:

import { Component, ElementRef, Injector, ViewChild, OnInit } from '@angular/core';
import { AppComponentBase } from '@shared/common/app-component-base';
import { ProfileServiceProxy, InvitationInput, ServiceStatusDto } from '@shared/service-proxies/service-proxies';
import { ModalDirective } from 'ngx-bootstrap';
import { finalize } from 'rxjs/operators';
import { setTimeout } from 'timers';

@Component({
    selector: 'inviteModal',
    templateUrl: './invite-modal.component.html',
    styleUrls: ['./invite-modal.component.css']
})
export class InviteModalComponent extends AppComponentBase implements OnInit {

    @ViewChild('inviteModal', {static: true}) modal: ModalDirective;

    inviteeName: string;
    emailAddress: string;
    saving = false;
    active = false;

    constructor(
        injector: Injector,
        private _profileService: ProfileServiceProxy
    ) {
        super(injector);
    }

    ngOnInit() {
    }

    show(): void {
        this.active = true;
        this.modal.show();
    }

    onShown(): void {
    }

    close(): void {
        this.active = false;
        this.modal.hide();
    }

    save(): void {
        let input = new InvitationInput();
        input.inviteeEmail = this.emailAddress;
        input.inviteeName = this.inviteeName;

        this.saving = true;
        this._profileService.invite(input)
            .pipe(finalize(() => setTimeout(() => { this.saving = false; }, 10000)))
            .subscribe((result: ServiceStatusDto) => {
                if (result.success) {
                    this.notify.info(this.l('InvitationSent'), '', {timer: 3000, position: 'center', customClass: {content: 'notify-content-class', container: 'notify-content-class', header: 'notify-content-class', title: 'notify-content-class'} });
                    setTimeout(() => this.close(), 3000);
                } else {
                    this.notify.error(result.failureReason, '', {timer: 5000, position: 'center'});
                    let savingTimeout = 5000;
                    if (result.failureRecourse) {
                        setTimeout(() => this.notify.info(result.failureRecourse, '', {timer: 5000, position: 'center'}), 5000);
                        savingTimeout = 10000;
                    }
                    setTimeout(() => { this.saving = false; }, savingTimeout);
                }
            });
    }
}

invite-modal.component.html:

<div bsModal #inviteModal="bs-modal" (onShown)="onShown()" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" [config]="{backdrop: 'static'}">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form *ngIf="active" #inviteModalForm="ngForm" (ngSubmit)="save()" autocomplete="off">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <span>{{"Invite" | localize}}</span>
                    </h5>
                    <button type="button" class="close" [attr.aria-label]="l('Close')" (click)="close()">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <label>{{"InvitationPrompt" | localize}}</label>
                    <div class="form-group">
                        <label for="Email">{{"EmailAddress" | localize}} *</label>
                        <input id="EmailAddress" #EmailAddress="ngModel" type="email" name="EmailAddress" class="form-control" [(ngModel)]="emailAddress" required maxlength="256" email
                                placeholder="{{'EmailAddress' | localize}} *" 
                                pattern="^\w+([-+.']\w+)*@\w+([-.]\w+)*.edu$"/>
                        <validation-messages [formCtrl]="EmailAddress"></validation-messages>

                        <!-- <div [hidden]="inviteModalForm.form.valid || inviteModalForm.form.pristine">
                            <ul class="help-block text-danger" *ngIf="EmailAddress.errors">
                                <li [hidden]="!EmailAddress">{{"InvalidEmailAddress" | localize}}</li>
                            </ul>
                        </div> -->
                    </div>
                    <div class="form-group">
                        <label for="InviteeName">{{"Name" | localize}}</label>
                        <input required id="InviteeName" type="text" name="InviteeName" class="form-control" [(ngModel)]="inviteeName" #InviteeName="ngModel">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-secondary"
                            (click)="close()"
                            [disabled]="saving"
                    >
                        {{"Cancel" | localize}}
                    </button>

                    &nbsp;
                    <button type="submit"
                            class="btn btn-primary"
                            [buttonBusy]="saving"
                            [disabled]="!inviteModalForm.form.valid || saving"
                    >
                        <i class="fa fa-check"></i>
                        <span>{{"SendInvitation" | localize}}</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

0

aaron created 5 years ago

Support Team

Is the class added to the element in the DOM when you call notify.info?

0

TimMackey created 5 years ago

It appears to be happening automatically. The notify element doesn't have an id, so I don't know how one could get its element ref and add the class in ts. Could you please provide some code (and where to add it) that might solve this issue?

0

aaron created 5 years ago

Support Team

That looks correct. Are you sure the font size is not already large? Try 100px !important. Or it could be that your CSS is not loaded.

0

TimMackey created 5 years ago

CSS is loaded. 100px !important does not change font size.

0

aaron created 5 years ago

Support Team

The [_ngcontent-cim-c14] selector (possibly scoped by invite-modal.component.css) may not be correct since the popup is not nested in the modal element.

0

TimMackey created 5 years ago

notify is defined in app-compoent.base.ts. So, yes, scope may be the issue What I really want to accomplish is increasing the font size for all notifications. How can I control notify style on a global basis?

I seems that NotifyService is defined in abp-ng2-module, which wraps abp.notify. I'm unable to see inside this wrapper. The service is not documented. It does not behave as sweetalert2. Is notify a legacy service? Is Alerts the recommended (and documented) notification service?

0

aaron created 5 years ago

Support Team

How can I control notify style on a global basis?

You can define your .notify-content-class styles in src/styles.css. ASP.NET Zero base solution already has some .swal2-* styles there.

Is notify a legacy service?

No, abp.notify is a JS abstraction from ABP's JavaScript API - Notification. NotifyService is a TS abstraction (for Angular) that wraps the JS abstraction.

Is Alerts the recommended (and documented) notification service?

I suppose you are referring to SweetAlert2, which is used to implement the abp.notify JS abstraction. You can use the abstractions (though options are SweetAlert2-specific) or the SweetAlert2 API directly.

0

TimMackey created 5 years ago

Is Alerts the recommended (and documented) notification service?

I was referring to UI Alerts Upon closer inspection it appears that this is for MVC apps only (please correct me if I misunderstand).

How can I control notify style on a global basis?

In src/styles.css I modified .swal2-popup.swal2-toast .swal2-header, .swal2-popup.swal2-toast .swal2-title, .swal2-popup.swal2-toast .swal2-content class to globally affect all notifiy messages. Thank you for that.

How can I change the position and timer on global basis? I don't want to edit every notify message with {timer: 5000, position: 'center'}

0

aaron created 5 years ago

Support Team

I was referring to UI Alerts Upon closer inspection it appears that this is for MVC apps only (please correct me if I misunderstand).

Yes, for MVC apps only. Anyway, UI Alerts are not meant to replace abp.notify.

How can I change the position and timer on global basis? I don't want to edit every notify message with {timer: 5000, position: 'center'}

You can modify defaultOptions in angular/src/assets/abp-web-resources/abp.notify.js.

0

TimMackey created 5 years ago

Works great! Thanks.

Notification persistence - the time the notification remains visible to the user on the client #8272

21 Answer(s)