fix: improve list-active layout

onecx · Oct 26, 2024 · 9483704 · 9483704
1 parent 0fcaa9c
commit 9483704
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 8 deletions.
diff --git a/src/app/remotes/announcement-list-active/announcement-list-active.component.html b/src/app/remotes/announcement-list-active/announcement-list-active.component.html
@@ -14,6 +14,9 @@
             [class.pi-info-circle]="announcement.type === 'INFO'"
             [class.pi-calendar]="announcement.type === 'EVENT'"
             [class.pi-wrench]="announcement.type === 'SYSTEM_MAINTENANCE'"
+            [class.text-red-800]="announcement.priority === 'IMPORTANT'"
+            [class.text-yellow-800]="announcement.priority === 'NORMAL'"
+            [class.text-blue-800]="announcement.priority === 'LOW'"
           ></div>
         </div>
         <div class="mb-2 w-11 flex flex-column row-gap-1">
@@ -39,22 +42,32 @@
           [showCloseIcon]="false"
           styleClass="sm:m-0 w-11 sm:max-w-28rem md:max-w-30rem lg:max-w-40rem announcement-overlay-position"
         >
-          <div class="flex flex-column row-gap-2 px-1">
-            <div class="flex flex-row column-gap-3 align-items-center">
+          <div class="flex flex-column">
+            <div
+              class="p-2 sm:p-3 border-round-top border-noround-bottom flex flex-row column-gap-3 align-items-center"
+              [class.bg-red-200]="announcement.priority === 'IMPORTANT'"
+              [class.bg-yellow-200]="announcement.priority === 'NORMAL'"
+              [class.bg-blue-200]="announcement.priority === 'LOW'"
+            >
               <div
                 [id]="'am_list_active_data_row_' + i + '_detail_icon'"
                 class="pi text-base sm:text-lg md:text-xl"
                 [class.pi-info-circle]="announcement.type === 'INFO'"
                 [class.pi-calendar]="announcement.type === 'EVENT'"
                 [class.pi-wrench]="announcement.type === 'SYSTEM_MAINTENANCE'"
+                [class.bg-red-200]="announcement.priority === 'IMPORTANT'"
+                [class.bg-yellow-200]="announcement.priority === 'NORMAL'"
+                [class.bg-blue-200]="announcement.priority === 'LOW'"
               ></div>
               <div [id]="'am_list_active_data_row_' + i + '_detail_title'" class="text-sm sm:text-base font-bold">
                 {{ announcement.title }}
               </div>
             </div>
-            <div [id]="'am_list_active_data_row_' + i + '_detail_content'" class="text-xs sm:text-sm md:text-base">
-              {{ announcement.content }}
-            </div>
+            <div
+              [id]="'am_list_active_data_row_' + i + '_detail_content'"
+              class="py-2 px-3 text-xs sm:text-sm md:text-base"
+              [innerHTML]="convertLineBreaks(announcement.content)"
+            ></div>
           </div>
         </p-overlayPanel>
       </a>

diff --git a/src/app/remotes/announcement-list-active/announcement-list-active.component.scss b/src/app/remotes/announcement-list-active/announcement-list-active.component.scss
@@ -4,7 +4,8 @@
 
 :host ::ng-deep {
   &.p-overlaypanel .p-overlaypanel-content {
-    padding: var(--panel-content-padding);
+    //padding: var(--panel-content-padding);
+    padding: 0;
   }
 
   @media screen and (min-width: 992px) {

diff --git a/src/app/remotes/announcement-list-active/announcement-list-active.component.ts b/src/app/remotes/announcement-list-active/announcement-list-active.component.ts
@@ -1,8 +1,9 @@
 import { Component, Inject, Input } from '@angular/core'
-import { Location } from '@angular/common'
+import { CommonModule, Location } from '@angular/common'
 import { HttpClient } from '@angular/common/http'
 import { TranslateLoader, TranslateService } from '@ngx-translate/core'
 import { BehaviorSubject, Observable, ReplaySubject, catchError, map, mergeMap, of } from 'rxjs'
+import { OverlayPanelModule } from 'primeng/overlaypanel'
 
 import { AppStateService } from '@onecx/angular-integration-interface'
 import {
@@ -30,7 +31,7 @@ import { environment } from 'src/environments/environment'
   templateUrl: './announcement-list-active.component.html',
   styleUrls: ['./announcement-list-active.component.scss'],
   standalone: true,
-  imports: [AngularRemoteComponentsModule, PortalCoreModule, SharedModule],
+  imports: [AngularRemoteComponentsModule, CommonModule, PortalCoreModule, SharedModule, OverlayPanelModule],
   providers: [
     { provide: BASE_URL, useValue: new ReplaySubject<string>(1) },
     provideTranslateServiceForRoot({
@@ -106,4 +107,8 @@ export class OneCXAnnouncementListActiveComponent implements ocxRemoteComponent,
       })
     )
   }
+  // display simple formatted text
+  public convertLineBreaks(text?: string) {
+    return text?.replace(/(?:\r\n|\r|\n)/g, '<br/>') ?? ''
+  }
 }