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

TimMackey created 6 years ago

How can I set the the Notification persistence - the time the notification remains visible to the user? Notification System

21 Answer(s)

0

maliming created 6 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

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)

TimMackey created 6 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 6 years ago
Support Team

Hi,

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

5000 is milliseconds.

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

TimMackey created 6 years ago

Extending the time works beautifully.

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

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

maliming created 6 years ago
Support Team

hi timmackey

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

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

TimMackey created 6 years ago

Thank you!

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0
TimMackey created 6 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.

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0
aaron created 6 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; }

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

TimMackey created 6 years ago

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

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

aaron created 6 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?

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)

TimMackey created 6 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 6 years ago
Support Team

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

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

TimMackey created 6 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?

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

aaron created 6 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.

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

TimMackey created 6 years ago

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

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

aaron created 6 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.

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

TimMackey created 6 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?

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

aaron created 6 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.

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

TimMackey created 6 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'}

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

aaron created 6 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.

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

TimMackey created 6 years ago

Works great! Thanks.

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)

Have an answer to this question? Log in and write your answer.