change in info message display

sunbird-cb · Aug 16, 2024 · e526453 · e526453
1 parent 3f70bdc
commit e526453
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 9 deletions.
diff --git a/src/app/component/app-nav-bar/app-nav-bar.component.html b/src/app/component/app-nav-bar/app-nav-bar.component.html
@@ -1,5 +1,15 @@
+<div class="info-block" *ngIf="infoBlockEnable">
+  <div class="flex container-balanced items-center justify-between info-wrapper">
+      <div class="flex  items-center">
+          <span class="material-icons mat-icon text-white margin-right">warning</span>
+          <span class="info-txt text-white">Dear Karmayogi, our portal will be undergoing a technology upgrade from 10 PM today till 18th August, 10 PM to improve your learning experience.</span>
+      </div>
+      <div>
+          <a  (click)="infoBlockActionMethod()" class="ok-btn text-white">OK</a>
+      </div>
+  </div>
+</div>
 <ng-container *ngIf="fullMenuDispaly">
-
   <mat-toolbar *ngIf="sShowAppNavBar && !needToHide && mode == 'top' && isHubEnable"
     [color]="primaryNavbarBackground?.color" [ngStyle]="primaryNavbarBackground?.styles"
     class="mat-elevation-z3 custom mobile-height" [ngClass]="{'mobile': isHubEnable}">
@@ -223,3 +233,4 @@
   </div>
 
 </mat-menu>
+
diff --git a/src/app/component/app-nav-bar/app-nav-bar.component.scss b/src/app/component/app-nav-bar/app-nav-bar.component.scss
@@ -1,5 +1,11 @@
 @import 'ws-mixins';
 @import 'ws-vars';
+@import 'ws-common';
+
+
+.container-balanced {
+  @extend %page-center;
+}
 
 .hideForNav {
   display: none !important;
@@ -428,3 +434,40 @@
     }
   }
 }
+
+
+.info-block {
+  width: 100%;
+  // height: 48px;
+  background: linear-gradient(90.15deg, #266EEB 0.87%, #133F8B 161.81%);
+  .info-wrapper {
+      padding: 16px 0;
+      .margin-right {
+          margin-right: 8px;
+      }
+      .info-txt {
+          //styleName: Caption;
+          font-family: Lato;
+          font-size: 13px;
+          font-weight: 400;
+          line-height: 14.4px;
+          text-align: left;
+
+      }
+      .ok-btn {
+          border: 1px solid white;
+          cursor: pointer;
+          padding: 4px 16px;
+          gap: 8px;
+          border-radius: 12px;
+          //styleName: Button;
+          font-family: Lato;
+          font-size: 14px;
+          font-weight: 700;
+          line-height: 16.8px;
+          text-align: center;
+
+
+      }
+  }
+}
diff --git a/src/app/component/app-nav-bar/app-nav-bar.component.ts b/src/app/component/app-nav-bar/app-nav-bar.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser'
 import { Router, NavigationStart, NavigationEnd } from '@angular/router'
 import { TranslateService } from '@ngx-translate/core'
@@ -17,6 +17,8 @@ import { UrlService } from 'src/app/shared/url.service'
 export class AppNavBarComponent implements OnInit, OnChanges {
   @Input() mode: 'top' | 'bottom' = 'top'
   @Input() headerFooterConfigData: any
+	@Output() infoBlockAction = new EventEmitter()
+  infoBlockEnable : boolean = true
   hideKPOnNav = false
   basicBtnAppsConfig: NsWidgetResolver.IRenderConfigWithTypedData<IBtnAppsConfig> = {
     widgetType: 'actionButton',
@@ -376,4 +378,9 @@ export class AppNavBarComponent implements OnInit, OnChanges {
     return { ...item, forPreview: !this.isforPreview, enableLang: this.enableLang }
   }
 
+  infoBlockActionMethod(){
+    this.infoBlockEnable = !this.infoBlockEnable
+    this.infoBlockAction.emit(this.infoBlockEnable)
+  }
+
 }
diff --git a/src/app/component/download-app/download-app.component.html b/src/app/component/download-app/download-app.component.html
@@ -1,5 +1,5 @@
 <div style="width:100%;background-color: #fff;">
-    <div class="dialog-close" *ngIf="!isMobile" (click)="closePopup()"><img alt="" src="assets/icons/home/decline_icon.svg" type="button"></div>
+    <div class="dialog-close" *ngIf="!isMobile && popupClass" (click)="closePopup()"><img alt="" src="assets/icons/home/decline_icon.svg" type="button"></div>
     <div [ngClass]="popupClass === 'download-app-popup' ? 'download-app-popup' : 'download-app'" *ngIf="!isMobile">
         <ng-container>
             <div class="left-side">

diff --git a/src/app/header/header/header.component.html b/src/app/header/header/header.component.html
@@ -1,4 +1,4 @@
-<div [ngClass]="mobileTopHeaderVisibilityStatus ? 'mobile-download-app-top-header' : 'mobile-download-app-without-top-header'" *ngIf="mobileTopHeaderVisibilityStatus">
+<div [ngClass]="mobileTopHeaderVisibilityStatus ? 'mobile-download-app-top-header' : 'mobile-download-app-without-top-header'" *ngIf="mobileTopHeaderVisibilityStatus && !infoBlockEnable">
     <div class="cross-mobile-download-app" (click)="hideMobileTopHeader()">
         <span>X</span>
     </div>
@@ -15,7 +15,7 @@
         </li>
     </div>
 </div>
-<ws-app-nav-bar *ngIf="isNavBarRequired" [ngClass]="mobileTopHeaderVisibilityStatus ? 'top-nav-bar':'top-nav-bar-without-mobile-header'" [mode]="mode" [headerFooterConfigData]="headerFooterConfigData"></ws-app-nav-bar>
-<div *ngIf="showHubs" [ngClass]="mobileTopHeaderVisibilityStatus ? 'height-on-top':'height-on-top-without-mobile-header'">
-    <ws-widget-grid-layout [widgetData]="widgetData"></ws-widget-grid-layout>
+<ws-app-nav-bar *ngIf="isNavBarRequired" (infoBlockAction)="infoBlockAction($event)" [ngClass]="mobileTopHeaderVisibilityStatus ?  'top-nav-bar':'top-nav-bar-without-mobile-header'" [mode]="mode" [headerFooterConfigData]="headerFooterConfigData"></ws-app-nav-bar>
+<div *ngIf="showHubs" [ngClass]="mobileTopHeaderVisibilityStatus ? infoBlockEnable ? 'height-on-top height-top-info' : 'height-on-top':'height-on-top-without-mobile-header'">
+    <ws-widget-grid-layout  [widgetData]="widgetData"></ws-widget-grid-layout>
 </div>
diff --git a/src/app/header/header/header.component.scss b/src/app/header/header/header.component.scss
@@ -1,9 +1,12 @@
 @import 'ws-vars';
 @import 'ws-mixins';
-
+@import 'ws-common';
 ws-app-nav-bar {
   z-index: 1000;
 }
+.container-balanced {
+  @extend %page-center;
+}
 
 .route-change {
   position: fixed;
@@ -322,4 +325,9 @@ ws-app-nav-bar {
     padding: 5px 5px !important;
     list-style: none;
   }
-}
+}
+
+
+.height-top-info {
+  margin-top: 112px !important;
+}
diff --git a/src/app/header/header/header.component.ts b/src/app/header/header/header.component.ts
@@ -15,6 +15,7 @@ export class HeaderComponent implements OnInit {
   isNavBarRequired = true
   showNavbar = true
   widgetData = {}
+  infoBlockEnable: boolean = true
   mobileTopHeaderVisibilityStatus = true
   @Input() mode: any
   @Input() headerFooterConfigData: any
@@ -76,4 +77,8 @@ export class HeaderComponent implements OnInit {
     this.mobileTopHeaderVisibilityStatus = false
     this.mobileAppsService.mobileTopHeaderVisibilityStatus.next(this.mobileTopHeaderVisibilityStatus)
   }
+
+  infoBlockAction(eventData: any) {
+    this.infoBlockEnable = eventData
+  }
 }