Improve message

This commit is contained in:
Peter Maquiran
2021-06-15 14:30:32 +01:00
parent d232db99cb
commit 365b32e34c
12 changed files with 192 additions and 425 deletions
+1
View File
@@ -173,6 +173,7 @@ export class AgendaPage implements OnInit {
if(this.loggeduser.Profile == 'MDGPR') {
this.mobileComponent.showEventList = true;
}
}
@@ -241,47 +241,23 @@ export class EditEventPage implements OnInit {
async successMessage(message?: any, callback?) {
const enterAnimation = (baseEl: any) => {
const backdropAnimation = this.animationController.create()
.addElement(baseEl.querySelector('ion-backdrop')!)
.fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
var notification = document.createElement('div')
notification.id = 'notification'
notification.innerHTML = `
const wrapperAnimation = this.animationController.create()
.addElement(baseEl.querySelector('.modal-wrapper')!)
.keyframes([
{ offset: 0, opacity: '1', right: '-100%' },
{ offset: 1, opacity: '1', right: '0px' }
]);
<div class="main-content width-100 pa-20">
<p class="message d-flex align-center">
<ion-icon slot="end" class="title-icon pr-10" src="/assets/images/nofitication-success.svg"></ion-icon>
<p class="text">{{ message }}</p>
</p>
</div>
`
return this.animationController.create()
.addElement(baseEl)
.easing('ease-out')
.duration(500)
.addAnimation([backdropAnimation, wrapperAnimation]);
}
const leaveAnimation = (baseEl: any) => {
return enterAnimation(baseEl).direction('reverse');
}
const modal = await this.modalController.create({
enterAnimation,
leaveAnimation,
component: SuccessMessagePage,
componentProps: {
message: message || 'Processo efetuado' ,
},
cssClass: 'notification-modal'
});
modal.present()
document.body.append(notification)
notification.querySelector('.text').innerHTML = 'hello'
setTimeout(()=>{
if (callback) {
callback()
}
modal.dismiss()
notification.remove()
},7000)
}
@@ -93,48 +93,23 @@ export class EventActionsPopoverPage implements OnInit {
async successMessage(message?: any, callback?) {
const enterAnimation = (baseEl: any) => {
const backdropAnimation = this.animationController.create()
.addElement(baseEl.querySelector('ion-backdrop')!)
.fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
var notification = document.createElement('div')
notification.id = 'notification'
notification.innerHTML = `
const wrapperAnimation = this.animationController.create()
.addElement(baseEl.querySelector('.modal-wrapper')!)
.keyframes([
{ offset: 0, opacity: '1', right: '-100%' },
{ offset: 1, opacity: '1', right: '0px' }
]);
<div class="main-content width-100 pa-20">
<p class="message d-flex align-center">
<ion-icon slot="end" class="title-icon pr-10" src="/assets/images/nofitication-success.svg"></ion-icon>
<p class="text">{{ message }}</p>
</p>
</div>
`
return this.animationController.create()
.addElement(baseEl)
.easing('ease-out')
.duration(500)
.addAnimation([backdropAnimation, wrapperAnimation]);
}
const leaveAnimation = (baseEl: any) => {
return enterAnimation(baseEl).direction('reverse');
}
const modal = await this.modalController.create({
enterAnimation,
leaveAnimation,
component: SuccessMessagePage,
componentProps: {
message: message || 'Processo efetuado' ,
},
cssClass: 'notification-modal'
});
modal.present()
document.body.append(notification)
notification.querySelector('.text').innerHTML = 'hello'
setTimeout(()=>{
if (callback) {
callback()
}
modal.dismiss()
notification.remove()
},7000)
}
@@ -170,48 +170,23 @@ export class NewEventPage implements OnInit {
async successMessage(message?: any, callback?) {
const enterAnimation = (baseEl: any) => {
const backdropAnimation = this.animationController.create()
.addElement(baseEl.querySelector('ion-backdrop')!)
.fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
var notification = document.createElement('div')
notification.id = 'notification'
notification.innerHTML = `
const wrapperAnimation = this.animationController.create()
.addElement(baseEl.querySelector('.modal-wrapper')!)
.keyframes([
{ offset: 0, opacity: '1', right: '-100%' },
{ offset: 1, opacity: '1', right: '0px' }
]);
<div class="main-content width-100 pa-20">
<p class="message d-flex align-center">
<ion-icon slot="end" class="title-icon pr-10" src="/assets/images/nofitication-success.svg"></ion-icon>
<p class="text">{{ message }}</p>
</p>
</div>
`
return this.animationController.create()
.addElement(baseEl)
.easing('ease-out')
.duration(500)
.addAnimation([backdropAnimation, wrapperAnimation]);
}
const leaveAnimation = (baseEl: any) => {
return enterAnimation(baseEl).direction('reverse');
}
const modal = await this.modalController.create({
enterAnimation,
leaveAnimation,
component: SuccessMessagePage,
componentProps: {
message: message || 'Processo efetuado' ,
},
cssClass: 'notification-modal'
});
modal.present()
document.body.append(notification)
notification.querySelector('.text').innerHTML = 'hello'
setTimeout(()=>{
if (callback) {
callback()
}
modal.dismiss()
notification.remove()
},7000)
}
@@ -465,48 +465,23 @@ export class DespachoPrPage implements OnInit {
}
async successMessage(message?: any, callback?) {
const enterAnimation = (baseEl: any) => {
const backdropAnimation = this.animationController.create()
.addElement(baseEl.querySelector('ion-backdrop')!)
.fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
var notification = document.createElement('div')
notification.id = 'notification'
notification.innerHTML = `
const wrapperAnimation = this.animationController.create()
.addElement(baseEl.querySelector('.modal-wrapper')!)
.keyframes([
{ offset: 0, opacity: '1', right: '-100%' },
{ offset: 1, opacity: '1', right: '0px' }
]);
<div class="main-content width-100 pa-20">
<p class="message d-flex align-center">
<ion-icon slot="end" class="title-icon pr-10" src="/assets/images/nofitication-success.svg"></ion-icon>
<p class="text">{{ message }}</p>
</p>
</div>
`
return this.animationController.create()
.addElement(baseEl)
.easing('ease-out')
.duration(500)
.addAnimation([backdropAnimation, wrapperAnimation]);
}
const leaveAnimation = (baseEl: any) => {
return enterAnimation(baseEl).direction('reverse');
}
const modal = await this.modalController.create({
enterAnimation,
leaveAnimation,
component: SuccessMessagePage,
componentProps: {
message: message || 'Processo efetuado' ,
},
cssClass: 'notification-modal'
});
modal.present()
document.body.append(notification)
notification.querySelector('.text').innerHTML = 'hello'
setTimeout(()=>{
if (callback) {
callback()
}
modal.dismiss()
notification.remove()
},7000)
}
@@ -445,48 +445,23 @@ export class DespachoPage implements OnInit {
}
async successMessage(message?: any, callback?) {
const enterAnimation = (baseEl: any) => {
const backdropAnimation = this.animationController.create()
.addElement(baseEl.querySelector('ion-backdrop')!)
.fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
var notification = document.createElement('div')
notification.id = 'notification'
notification.innerHTML = `
const wrapperAnimation = this.animationController.create()
.addElement(baseEl.querySelector('.modal-wrapper')!)
.keyframes([
{ offset: 0, opacity: '1', right: '-100%' },
{ offset: 1, opacity: '1', right: '0px' }
]);
<div class="main-content width-100 pa-20">
<p class="message d-flex align-center">
<ion-icon slot="end" class="title-icon pr-10" src="/assets/images/nofitication-success.svg"></ion-icon>
<p class="text">{{ message }}</p>
</p>
</div>
`
return this.animationController.create()
.addElement(baseEl)
.easing('ease-out')
.duration(7000)
.addAnimation([backdropAnimation, wrapperAnimation]);
}
const leaveAnimation = (baseEl: any) => {
return enterAnimation(baseEl).direction('reverse');
}
const modal = await this.modalController.create({
enterAnimation,
leaveAnimation,
component: SuccessMessagePage,
componentProps: {
message: message || 'Processo efetuado' ,
},
cssClass: 'notification-modal'
});
modal.present()
document.body.append(notification)
notification.querySelector('.text').innerHTML = 'hello'
setTimeout(()=>{
if (callback) {
callback()
}
modal.dismiss()
notification.remove()
},7000)
}
@@ -530,94 +530,47 @@ export class ExpedientTaskModalPage implements OnInit {
async successMessage(message?: any, callback?) {
const enterAnimation = (baseEl: any) => {
const backdropAnimation = this.animationController.create()
.addElement(baseEl.querySelector('ion-backdrop')!)
.fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
var notification = document.createElement('div')
notification.id = 'notification'
notification.innerHTML = `
const wrapperAnimation = this.animationController.create()
.addElement(baseEl.querySelector('.modal-wrapper')!)
.keyframes([
{ offset: 0, opacity: '1', right: '-100%' },
{ offset: 1, opacity: '1', right: '0px' }
]);
<div class="main-content width-100 pa-20">
<p class="message d-flex align-center">
<ion-icon slot="end" class="title-icon pr-10" src="/assets/images/nofitication-success.svg"></ion-icon>
<p class="text">{{ message }}</p>
</p>
</div>
`
return this.animationController.create()
.addElement(baseEl)
.easing('ease-out')
.duration(500)
.addAnimation([backdropAnimation, wrapperAnimation]);
}
const leaveAnimation = (baseEl: any) => {
return enterAnimation(baseEl).direction('reverse');
}
const modal = await this.modalController.create({
enterAnimation,
leaveAnimation,
component: SuccessMessagePage,
componentProps: {
message: message || 'Processo efetuado' ,
},
cssClass: 'notification-modal'
});
modal.present()
document.body.append(notification)
notification.querySelector('.text').innerHTML = 'hello'
setTimeout(()=>{
if (callback) {
callback()
}
modal.dismiss()
notification.remove()
},7000)
}
async badRequest(message?: string, callback?) {
const enterAnimation = (baseEl: any) => {
const backdropAnimation = this.animationController.create()
.addElement(baseEl.querySelector('ion-backdrop')!)
.fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
const wrapperAnimation = this.animationController.create()
.addElement(baseEl.querySelector('.modal-wrapper')!)
.keyframes([
{ offset: 0, opacity: '1', right: '-100%' },
{ offset: 1, opacity: '1', right: '0px' }
]);
var notification = document.createElement('div')
notification.id = 'notification'
notification.innerHTML = `
<div class="main-content width-100 pa-20">
<p class="message d-flex align-center">
<ion-icon slot="end" class="title-icon pr-10" src="/assets/images/notification-error.svg"></ion-icon>
<p class="text">{{ message }}</p>
</p>
</div>
`
return this.animationController.create()
.addElement(baseEl)
.easing('ease-out')
.duration(500)
.addAnimation([backdropAnimation, wrapperAnimation]);
}
const leaveAnimation = (baseEl: any) => {
return enterAnimation(baseEl).direction('reverse');
}
const modal = await this.modalController.create({
enterAnimation,
leaveAnimation,
component: BadRequestPage,
componentProps: {
message: message || 'Processo efetuado' ,
},
cssClass: 'notification-modal'
});
modal.present()
document.body.append(notification)
notification.querySelector('.text').innerHTML = 'hello'
setTimeout(()=>{
if (callback) {
callback()
}
modal.dismiss()
notification.remove()
},7000)
}
}