Improve message

src/app/modals/add-note/add-note.page.ts

@@ -63,47 +63,23 @@ export class AddNotePage 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)
     
   }

src/app/modals/create-process/create-process.page.ts

@@ -564,48 +564,23 @@ export class CreateProcessPage 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)
     
   }

src/app/modals/dar-parecer/dar-parecer.page.ts

@@ -99,49 +99,24 @@ export class DarParecerPage 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?) {

src/app/modals/delegar/delegar.page.ts

@@ -172,48 +172,23 @@ export class DelegarPage 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)
     
   }

src/app/pages/agenda/agenda.page.ts

@@ -173,6 +173,7 @@ export class AgendaPage implements OnInit {
     if(this.loggeduser.Profile == 'MDGPR') {
       this.mobileComponent.showEventList = true;
     }
+
   
   }
 

src/app/pages/agenda/edit-event/edit-event.page.ts

@@ -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)
     
   }

src/app/pages/agenda/event-actions-popover/event-actions-popover.page.ts

@@ -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)
     
   }

src/app/pages/agenda/new-event/new-event.page.ts

@@ -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)
     
   }

src/app/pages/gabinete-digital/despachos-pr/despacho-pr/despacho-pr.page.ts

@@ -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)
   }
 

src/app/pages/gabinete-digital/despachos/despacho/despacho.page.ts

@@ -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)
     
   }

src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.ts

@@ -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)
+
   }
 
 }

src/global.scss

@@ -812,3 +812,39 @@ background: rgb(92, 92, 92);
 .hide-scroll::-webkit-scrollbar-thumb:hover {
     display: none !important;
 }
+
+
+
+#notification{
+    position: absolute;
+    top: 23px;
+    right: 0px;
+    height: 87px;
+    max-width: 400px;
+    border-radius: 9px;
+    -webkit-border-radius: 9px;
+    -moz-border-radius: 9px;
+    -ms-border-radius: 9px;
+    -o-border-radius: 9px;
+    background-color: white;
+    text-align: center;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    background-image: url("/assets/background/background-circle-negative.svg");
+    background-size: 686px 674px;
+    background-position: center;
+    background-position-y: 0px;
+    background-repeat: no-repeat;
+    min-width: 340px;
+    box-shadow: 0px 2px 10px #0000003d;
+    display: flex;
+    align-items: center;
+    .main-content {
+        display: flex;
+        align-items: center;
+    }
+    .message {
+        font-size: 12pt;
+    }
+}