save

src/app/pages/publications/publications.page.html

@@ -44,7 +44,7 @@
                 <p class="item-content-title my-10">{{viagem.Description}}</p>
                 <p class="item-content-detail my-5">{{viagem.Detail}}</p>
             </div>
-            <div (click)="openOptions(viagem.ProcessId)" class="item-options cursor-pointer" autoHide="false">
+            <div (click)="openOptions(viagem.ProcessId)" class="item-options d-none cursor-pointer" autoHide="false">
               <ion-icon src="assets/images/icons-menu.svg"></ion-icon>
             </div>
         </div>
@@ -60,7 +60,7 @@
               <p class="item-content-title">{{evento.Description}}</p>
             </ion-label>
           </div>
-          <div (click)="openOptions(evento.ProcessId)" class="item-options cursor-pointer" autoHide="false">
+          <div (click)="openOptions(evento.ProcessId)" class="item-options d-none cursor-pointer" autoHide="false">
             <ion-icon src="assets/images/icons-menu.svg"></ion-icon>
           </div>
         </div>

src/app/pages/publications/publications.page.scss

@@ -157,6 +157,7 @@ ion-toolbar{
     }
 
     .item-options{
+
       width: 25px;
       font-size: 20px;
     }
@@ -174,4 +175,7 @@ ion-toolbar{
   .aside-left{
     width: 35%;
   }
+  .item-options{
+    display: block !important;
+  }
 }

src/app/pages/publications/publications.page.ts

@@ -277,20 +277,41 @@ export class PublicationsPage implements OnInit {
     }
   }
 
-  async openOptions(taskAction?: any) {
-    
-    const popover = await this.modalController.create({
+  async openOptions(id?: string) {
+    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' }
+        ]);
+
+      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: ActionsOptionsPage,
-      cssClass: 'model aside-modal',
+      cssClass: 'model profile-modal search-submodal',
       componentProps: {
-        /* task: this.task,
-        fulltask: this.fulltask, */
-        taskAction: taskAction,
-        showEnviarPendentes: false
+        id: id,
       },
       //translucent: true
     });
-    return await popover.present();
+    return await modal.present();
   }
 
 }