view full message

ui/src/app/pages/notifications/notifications.page.html

@@ -68,6 +68,11 @@
             <h2 class="notification-message">
               {{ not.message | truncateTail: 1000 }}
             </h2>
+            <p class="view-message-tag">
+              <a class="view-message-tag" *ngIf="not.message.length > 1000" color="dark" (click)="viewFullMessage(not.title, not.message)">
+                View Full Message
+              </a>
+            </p>
             <p>
               {{ not['created-at'] | date: 'short' }}
             </p>

ui/src/app/pages/notifications/notifications.page.scss

@@ -1,3 +1,9 @@
 .notification-message {
   margin: 6px 0 8px 0;
+}
+
+.view-message-tag {
+  margin-bottom: 8px;
+  font-size: 16px;
+  cursor: pointer;
 }

ui/src/app/pages/notifications/notifications.page.ts

@@ -105,6 +105,24 @@ export class NotificationsPage {
     await modal.present()
   }
 
+  async viewFullMessage (title: string, message: string) {
+    const alert = await this.alertCtrl.create({
+      header: title,
+      message: message,
+      cssClass: 'wider-alert',
+      buttons: [
+        {
+          text: `OK`,
+          handler: () => {
+            alert.dismiss()
+          },
+          cssClass: 'enter-click',
+        },
+      ],
+    })
+    await alert.present()
+  }
+
   private async deleteAll (): Promise<void> {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',

ui/src/global.scss

@@ -248,6 +248,10 @@ ion-button {
   }
 }
 
+.wider-alert .alert-wrapper {
+  min-width: 60% !important;
+}
+
 ion-slides {
   .slider-wrapper {
     height: 100%;