Merge pull request Sunbird-cQube#251 from sri-pusuluri/dev

Font size component increase,decrease & client data card overlap issu…
Sharathnaik38 · Jul 26, 2022 · e92e5f4 · e92e5f4
2 parents e9f9f89 + c5b90f7
commit e92e5f4
Show file tree

Hide file tree

Showing 15 changed files with 179 additions and 24 deletions.
diff --git a/development/ui/front-end/package.json b/development/ui/front-end/package.json
@@ -29,7 +29,7 @@
     "@ngneat/transloco": "^4.1.0",
     "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^7.0.0",
-    "@project-sunbird/sb-themes": "^0.0.76",
+    "@project-sunbird/sb-themes": "^0.0.77",
     "color2k": "^2.0.0",
     "cqube-library": "^4.10.24",
     "highcharts": "^10.1.0",

diff --git a/development/ui/front-end/src/app/core/components/layout/layout.component.html b/development/ui/front-end/src/app/core/components/layout/layout.component.html
@@ -1,4 +1,28 @@
 <div>
+    <div class="fontBar">
+        <div class="flagArea"><img title="भारत सरकार | Government of India" src="https://diksha.gov.in/assets/diksha-mission/Flag_of_India.svg"  width="32" alt="भारत सरकार | Government of India">
+            <span data-translate="govofIndia">भारत सरकार | Government of India</span></div>
+
+        <div class="btnGroup">
+        <button type="button" [attr.aria-pressed]="false" tabindex="0" attr.aria-label="A-"
+            class="fontResizeBtn fontResizeBtn_A-" title="Decrease font size" (click)="changeFontSize('decrease');"
+            #decreaseFontSize>A-</button>
+        <button [attr.aria-pressed]="false" type="button" tabindex="0" attr.aria-label="A"
+            class="fontResizeBtn fontResizeBtn_A" title="Default Font size" (click)="changeFontSize('reset');" #resetFontSize>A</button>
+        <button [attr.aria-pressed]="false" type="button" tabindex="0" attr.aria-label="A+"
+            class="fontResizeBtn fontResizeBtn_A+" title="Increase font size" (click)="changeFontSize('increase');"
+            #increaseFontSize>A+</button>
+        <!-- <button id="dark-mode-toggle" class="dark-mode-toggle" tabindex="0"
+             title="{{resourceService?.frmelmnts?.lbl?.accessibilitytheme}}" (click)="changeTheme()"
+             (keydown.enter)="changeTheme();" #darkModeToggle>
+             <svg width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 496">
+               <path fill="var(--white)"
+                 d="M8,256C8,393,119,504,256,504S504,393,504,256,393,8,256,8,8,119,8,256ZM256,440V72a184,184,0,0,1,0,368Z"
+                 transform="translate(-8 -8)" />
+             </svg>
+           </button> -->
+        </div>
+    </div>
     <app-header></app-header>
     <app-side-nav [menu]="menu"></app-side-nav>
     <div class="app-content-wrapper">

diff --git a/development/ui/front-end/src/app/core/components/layout/layout.component.scss b/development/ui/front-end/src/app/core/components/layout/layout.component.scss
@@ -1,3 +1,54 @@
+.fontBar {
+    min-height: 3rem;
+   background: var(--cQ-primary);
+   z-index: 999;
+   display: flex;
+   align-items: center;
+   justify-content: space-between;
+   gap: 0.5rem;
+   padding:0 0.5rem 0 0.5rem;
+       position: fixed;
+    top: 0;
+   color: var(--white);
+   width: 100%;
+   .flagArea {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    img {
+        margin-right: 0.5rem;
+    }
+   }
+
+   .btnGroup {
+    display: flex;
+    align-items: center;
+    justify-content: center; 
+    gap:0.5rem;
+    button {
+        background:var(--cQ-primary);
+        border: 0.0625rem solid rgb(255 255 255 / 25%);
+        border-radius: 100%;
+        padding:0.5rem;
+        width: 2rem;
+        height: 2rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &:hover {
+            background: var(--cQ-secondary);
+        }
+        &:disabled {
+            opacity: 0.5;
+            &:hover {
+                background: none;
+            }
+        }
+       }
+}
+
+}
+
 ::ng-deep{
     .mat-tab-nav-bar, .mat-tab-header{
         border-bottom: none !important;

diff --git a/development/ui/front-end/src/app/core/components/layout/layout.component.ts b/development/ui/front-end/src/app/core/components/layout/layout.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ElementRef, Renderer2, ViewChild } from '@angular/core';
 
 import { ConfigService } from 'src/app/core/services/config/config.service';
 import { IDashboardMenu } from '../../models/IDashboardCard';
@@ -11,8 +11,17 @@ import { IMenuItem } from '../../models/IMenuItem';
 })
 export class LayoutComponent implements OnInit {
   menu: IMenuItem[] | undefined;
-
-  constructor(private readonly _configService: ConfigService) {
+// Font Increase Decrease Variables
+fontSize: any;
+defaultFontSize = 16;
+@ViewChild('increaseFontSize')
+increaseFontSize!: ElementRef;
+@ViewChild('decreaseFontSize')
+decreaseFontSize!: ElementRef;
+@ViewChild('resetFontSize')
+resetFontSize!: ElementRef;
+// @ViewChild('darkModeToggle') darkModeToggle: ElementRef;
+  constructor(private readonly _configService: ConfigService, private renderer: Renderer2) {
     this._configService.getDashboardMetrics(true).subscribe(menuResult => {
       this.menu = [];
       let menuToDisplay: IMenuItem | any = {};
@@ -37,4 +46,74 @@ export class LayoutComponent implements OnInit {
   ngOnInit(): void {
   }
 
+
+    // Change Font Size (Increase & Decrease)
+    getLocalFontSize() {
+      const localFontSize = localStorage.getItem('fontSize');
+      if (localFontSize) {
+        document.documentElement.style.setProperty('font-size', localFontSize + 'px');
+        this.fontSize = localFontSize;
+        this.isDisableFontSize(localFontSize);
+      }
+    }
+    changeFontSize(value: string) {
+
+      const elFontSize = window.getComputedStyle(document.documentElement).getPropertyValue('font-size');
+
+      const localFontSize = localStorage.getItem('fontSize');
+      const currentFontSize = localFontSize ? localFontSize : elFontSize;
+      this.fontSize = parseInt(currentFontSize);
+
+      if (value === 'increase') {
+        this.renderer.setAttribute(this.increaseFontSize.nativeElement, 'aria-pressed', 'true');
+        this.renderer.removeAttribute(this.decreaseFontSize.nativeElement, 'aria-pressed');
+        this.renderer.removeAttribute(this.resetFontSize.nativeElement, 'aria-pressed');
+        this.fontSize = this.fontSize + 2;
+        if (this.fontSize <= 24) {
+          this.setLocalFontSize(this.fontSize);
+        }
+      } else if (value === 'decrease') {
+        this.renderer.setAttribute(this.decreaseFontSize.nativeElement, 'aria-pressed', 'true');
+        this.renderer.removeAttribute(this.increaseFontSize.nativeElement, 'aria-pressed');
+        this.renderer.removeAttribute(this.resetFontSize.nativeElement, 'aria-pressed');
+        this.fontSize = this.fontSize - 2;
+        if (this.fontSize >= 12) {
+          this.setLocalFontSize(this.fontSize);
+        }
+      } else {
+        this.renderer.setAttribute(this.resetFontSize.nativeElement, 'aria-pressed', 'true');
+        this.renderer.removeAttribute(this.increaseFontSize.nativeElement, 'aria-pressed');
+        this.renderer.removeAttribute(this.decreaseFontSize.nativeElement, 'aria-pressed');
+        this.setLocalFontSize(this.defaultFontSize);
+      }
+
+    }
+
+    setLocalFontSize(value: any) {
+      document.documentElement.style.setProperty('font-size', value + 'px');
+      localStorage.setItem('fontSize', value);
+      this.isDisableFontSize(value);
+    }
+
+    isDisableFontSize(value: any) {
+      value = parseInt(value);
+      if (value === 24) {
+        this.renderer.setAttribute(this.increaseFontSize.nativeElement, 'disabled', 'true');
+        this.renderer.removeAttribute(this.decreaseFontSize.nativeElement, 'disabled');
+        this.renderer.removeAttribute(this.resetFontSize.nativeElement, 'disabled');
+      } else if (value === 12) {
+        this.renderer.setAttribute(this.decreaseFontSize.nativeElement, 'disabled', 'true');
+        this.renderer.removeAttribute(this.increaseFontSize.nativeElement, 'disabled');
+        this.renderer.removeAttribute(this.resetFontSize.nativeElement, 'disabled');
+      } else if (value === 16) {
+        this.renderer.setAttribute(this.resetFontSize.nativeElement, 'disabled', 'true');
+        this.renderer.removeAttribute(this.increaseFontSize.nativeElement, 'disabled');
+        this.renderer.removeAttribute(this.decreaseFontSize.nativeElement, 'disabled');
+      } else {
+        this.renderer.removeAttribute(this.increaseFontSize.nativeElement, 'disabled');
+        this.renderer.removeAttribute(this.decreaseFontSize.nativeElement, 'disabled');
+        this.renderer.removeAttribute(this.resetFontSize.nativeElement, 'disabled');
+      }
+    }
+
 }
diff --git a/development/ui/front-end/src/app/views/digital-learning/digital-learning.component.html b/development/ui/front-end/src/app/views/digital-learning/digital-learning.component.html
@@ -1,12 +1,12 @@
 <div class="metric-card-wrapper">
     <p class="h3"><b>DIKSHA- ETB and eContent</b> <em>(ETB : Energized Textbook)</em></p>
-    <div class="grid gap-4 xs:grid-cols-2 xmd:grid-cols-4 md:grid-cols-5 lg:grid-cols-6">
+    <div class="grid gap-4 cQ-Grid">
         <!-- <div class="col-span-full">
             <img src="../../../../../assets/images/etbimage.jpeg" class="xs:w-full md:w-8/12 mx-auto" alt="etb image ">
         </div> -->
         <!-- <button class="bg-blue-500">Access to ETB Program</button> -->
         <ng-container *ngIf="ETBMetrics">
-            <div class="col-span-1 xs:py-2 md:py-4" *ngFor="let metric of ETBMetrics">
+            <div class="" *ngFor="let metric of ETBMetrics">
                 <sb-cqube-info-card [name]="metric?.name" [value]="metric?.value" [tooltip]="metric?.tooltip"></sb-cqube-info-card>
             </div>
         </ng-container>

diff --git a/...rc/app/views/foundational-literacy-numeracy/foundational-literacy-numeracy.component.html b/...rc/app/views/foundational-literacy-numeracy/foundational-literacy-numeracy.component.html
@@ -1,8 +1,8 @@
 <div class="metric-card-wrapper">
     <p class="h4">NIPUN BHARAT</p>
-    <div class="grid gap-4 xs:grid-cols-2 xmd:grid-cols-4 md:grid-cols-5 lg:grid-cols-6">
+    <div class="grid gap-4 cQ-Grid">
         <ng-container>
-            <div class="col-span-1 xs:py-2 md:py-4" *ngFor="let metric of nipunBharathMetrics">
+            <div class="" *ngFor="let metric of nipunBharathMetrics">
                 <sb-cqube-info-card [name]="metric?.name" [value]="metric?.value" [tooltip]="metric?.tooltip"></sb-cqube-info-card>
             </div>
         </ng-container>

diff --git a/...lopment/ui/front-end/src/app/views/improvement-program/improvement-program.component.html b/...lopment/ui/front-end/src/app/views/improvement-program/improvement-program.component.html
@@ -1,8 +1,8 @@
 <div class="metric-card-wrapper">
     <p class="h4">Micro-Improvement Program</p>
-    <div class="grid gap-4 xs:grid-cols-2 xmd:grid-cols-4 md:grid-cols-5 lg:grid-cols-6">
+    <div class="grid gap-4 cQ-Grid">
         <ng-container>
-            <div class="col-span-1 xs:py-2 md:py-4" *ngFor="let metric of microImprovementMetricsData">
+            <div class="" *ngFor="let metric of microImprovementMetricsData">
                 <sb-cqube-info-card [name]="metric?.name" [value]="metric?.value" [tooltip]="metric?.tooltip"></sb-cqube-info-card>
             </div>
         </ng-container>

diff --git a/development/ui/front-end/src/app/views/nishtha/nishtha.component.html b/development/ui/front-end/src/app/views/nishtha/nishtha.component.html
@@ -2,9 +2,9 @@
 
 <div class="metric-card-wrapper">
     <p class="h4">NISHTHA</p>
-    <div class="grid gap-4 xs:grid-cols-2 xmd:grid-cols-4 md:grid-cols-5 lg:grid-cols-6">
+    <div class="grid gap-4 cQ-Grid">
         <ng-container>
-            <div class="col-span-1 xs:py-2 md:py-2" *ngFor="let metric of nisithaMetrics">
+            <div class="" *ngFor="let metric of nisithaMetrics">
                 <sb-cqube-info-card [name]="metric?.name" [value]="metric?.value" [tooltip]="metric?.tooltip"></sb-cqube-info-card>
             </div>
         </ng-container>

diff --git a/development/ui/front-end/src/app/views/nishtha/pages/dashboard/dashboard.component.html b/development/ui/front-end/src/app/views/nishtha/pages/dashboard/dashboard.component.html
@@ -1,6 +1,7 @@
 <!-- <div class="flex justify-center mb-8">
     <img src="/assets/images/nishtha.jpg" alt="Nishtha Image" />
 </div> -->
+
 <div class="grid gap-4 sm:grid-cols-2 md:grid-cols-3 xs:gap-y-6 md:gap-y-16" *ngIf="nishthaMenu">
     <div *ngFor="let menuInfo of nishthaMenu">
         <!--<app-dashboard-card [cardInfo]="menuInfo" (onClick)="onClickOfDashboardItem($event)"></app-dashboard-card>-->

diff --git a/development/ui/front-end/src/app/views/nutrition-health/nutrition-health.component.html b/development/ui/front-end/src/app/views/nutrition-health/nutrition-health.component.html
@@ -1,8 +1,8 @@
 <div class="metric-card-wrapper">
     <p class="h4">PM Poshan</p>
-    <div class="grid gap-4 xs:grid-cols-2 xmd:grid-cols-4 md:grid-cols-5 lg:grid-cols-6">
+    <div class="grid gap-4 cQ-Grid">
         <ng-container *ngIf="pmposhanMetricsData">
-            <div class="col-span-1 xs:py-2 md:py-4" *ngFor="let metric of pmposhanMetricsData">
+            <div class="" *ngFor="let metric of pmposhanMetricsData">
                 <!-- <app-metric-card [name]="metric?.name" [value]="metric?.value" [tooltip]="metric?.tooltip">
                 </app-metric-card> -->
                 <sb-cqube-info-card [name]="metric?.name" [value]="metric?.value" [tooltip]="metric?.tooltip">

diff --git a/development/ui/front-end/src/app/views/quiz/quiz.component.html b/development/ui/front-end/src/app/views/quiz/quiz.component.html
@@ -1,8 +1,8 @@
 <div class="metric-card-wrapper">
     <p class="h4">Quizzes</p>
-    <div class="grid gap-4 xs:grid-cols-2 xmd:grid-cols-4 md:grid-cols-5 lg:grid-cols-6">
+    <div class="grid gap-4 cQ-Grid">
         <ng-container *ngIf="quizzesMetricsData">
-            <div class="col-span-1 xs:py-2 md:py-4" *ngFor="let metric of quizzesMetricsData">
+            <div class="" *ngFor="let metric of quizzesMetricsData">
                 <!--<app-metric-card [name]="metric?.name" [value]="metric?.value" [tooltip]="metric?.tooltip">
                 </app-metric-card>-->
                 <sb-cqube-info-card [name]="metric?.name" [value]="metric?.value" [tooltip]="metric?.tooltip"></sb-cqube-info-card>

diff --git a/development/ui/front-end/src/app/views/school-education/school-education.component.html b/development/ui/front-end/src/app/views/school-education/school-education.component.html
@@ -1,8 +1,8 @@
 <div class="metric-card-wrapper">
     <p class="h4">PGI</p>
-    <div class="grid gap-4 xs:grid-cols-2 xmd:grid-cols-4 md:grid-cols-5 lg:grid-cols-6">
+    <div class="grid gap-4 cQ-Grid">
         <ng-container *ngIf="pgiMetricsData">
-            <div class="col-span-1 xs:py-2 md:py-4" *ngFor="let metric of pgiMetricsData">
+            <div class="" *ngFor="let metric of pgiMetricsData">
                 <!-- <app-metric-card [name]="metric?.name" [value]="metric?.value" [tooltip]="metric?.tooltip">
                 </app-metric-card> -->
                 <sb-cqube-info-card [name]="metric?.name" [value]="metric?.value" [tooltip]="metric?.tooltip"></sb-cqube-info-card>

diff --git a/development/ui/front-end/src/app/views/school-registry/school-registry.component.html b/development/ui/front-end/src/app/views/school-registry/school-registry.component.html
@@ -1,8 +1,8 @@
 <div class="metric-card-wrapper">
     <p class="h4">UDISE+</p>
-    <div class="grid gap-4 xs:grid-cols-2 xmd:grid-cols-4 md:grid-cols-5 lg:grid-cols-6">
+    <div class="grid gap-4 cQ-Grid">
         <ng-container *ngIf="udiseMetricsData">
-            <div class="col-span-1 xs:py-2 md:py-4" *ngFor="let metric of udiseMetricsData">
+            <div class="" *ngFor="let metric of udiseMetricsData">
                 <!--<app-metric-card [name]="metric?.name" [value]="metric?.value" [tooltip]="metric?.tooltip">
                 </app-metric-card>-->
                 <sb-cqube-info-card [name]="metric?.name" [value]="metric?.value" [tooltip]="metric?.tooltip"></sb-cqube-info-card>

diff --git a/...ui/front-end/src/app/views/student-learning-survey/student-learning-survey.component.html b/...ui/front-end/src/app/views/student-learning-survey/student-learning-survey.component.html
@@ -1,8 +1,8 @@
 <div class="metric-card-wrapper">
     <p class="h4">NAS</p>
-    <div class="grid gap-4 xs:grid-cols-2 xmd:grid-cols-4 md:grid-cols-5 lg:grid-cols-6">
+    <div class="grid gap-4 cQ-Grid">
         <ng-container *ngIf="NASMetrics">
-            <div class="col-span-1 xs:py-2 md:py-4" *ngFor="let metric of NASMetrics">
+            <div class="" *ngFor="let metric of NASMetrics">
                 <!--<app-metric-card [name]="metric?.name" [value]="metric?.value" [tooltip]="metric?.tooltip">
                 </app-metric-card>-->
                 <sb-cqube-info-card [name]="metric?.name" [value]="metric?.value" [tooltip]="metric?.tooltip"></sb-cqube-info-card>

diff --git a/development/ui/front-end/src/app/views/vidyanjali/vidyanjali.component.html b/development/ui/front-end/src/app/views/vidyanjali/vidyanjali.component.html
@@ -1,8 +1,8 @@
 <div class="metric-card-wrapper">
     <p class="h4">Vidyanjali</p>
-    <div class="grid gap-4 xs:grid-cols-2 xmd:grid-cols-4 md:grid-cols-5 lg:grid-cols-6">
+    <div class="grid gap-4 cQ-Grid">
         <ng-container *ngIf="vidyanjaliMetricsData">
-            <div class="col-span-1 xs:py-2 md:py-4" *ngFor="let metric of vidyanjaliMetricsData">
+            <div class="" *ngFor="let metric of vidyanjaliMetricsData">
                 <sb-cqube-info-card [name]="metric?.name" [value]="metric?.value" [tooltip]="metric?.tooltip"></sb-cqube-info-card>
             </div>
         </ng-container>