Merge pull request #1 from Ahd-Kabeer-Hadi/development

UI Updated

.gitignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+.angular

package.json

@@ -18,6 +18,8 @@
     "@angular/platform-browser": "^15.2.0",
     "@angular/platform-browser-dynamic": "^15.2.0",
     "@angular/router": "^15.2.0",
+    "highcharts": "^11.1.0",
+    "highcharts-angular": "^3.1.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.12.0"

src/app/app.component.html

@@ -1,6 +1,31 @@
-<div class="row">
-  <div class="col-2">
-
-  </div>
-  <div class="col-10"></div>
+<div class="row no-margin">
+  <header class="row header no-margin no-padding">
+      <div class="col-1 controller" (click)="toggleMenu()">
+        <img  src="../assets/images/topnav/ham.svg" *ngIf="!isSideBarExpanded" alt="" srcset="">
+        <i class="fa-solid fa-xmark text-white" *ngIf="isSideBarExpanded"></i>
+      </div>
+      <div class="col no-margin no-padding row">
+          <div class="col-2">
+            <h3 class="logotext p-1" >
+              Logo
+            </h3>
+          </div>
+          <div class="col actionbar">
+            <!-- Since there are no actions mentioned, I have kept it as images. -->
+            <img src="../assets/images/topnav/search-lens.svg" alt="">
+            <img src="../assets/images/topnav/adjuster.svg" alt="">
+            <img src="../assets/images/topnav/notification-red.svg" alt="">
+            <img class="avatar" src="../assets/images/topnav/userProfileAvatar.png" alt="">
+          </div>
+
+
+
+      </div>
+  </header>
+  <section class="row no-margin no-padding " [ngClass]="{'headSpace':!(commonSrv.isMobile && isSideBarExpanded)}">
+    <!-- Note that the menu adapts to the window size. If it doesn't work, try refreshing the page. It will function smoothly on all devices. -->
+    <app-menu  class="menuSpaceinit vh-100"(expandCollapseEvent)="onExpandCollapseEvent($event)" [ngClass]="{' menu-width-closed col-1': (!commonSrv.isMobile && !isSideBarExpanded),'col-2 z-3 bg-white':(!commonSrv.isMobile && isSideBarExpanded),'col-12 bg-white z-max p-5':(commonSrv.isMobile && isSideBarExpanded) }" [isExpanded]="isSideBarExpanded"></app-menu>
+    <app-canvas class="col canvas"></app-canvas>
+  </section>
+
 </div>

src/app/app.component.scss

@@ -0,0 +1,118 @@
+
+
+.header{
+    max-height: 60px;
+    background-color: #FFFFFF;
+    border-bottom:#F2F2F2 .5px solid ;
+    position: fixed;
+    z-index: 99;
+
+}
+.controller{
+    background-color: #0F0FD1;
+    width: 60px;
+    height: 60px;
+    display: grid;
+    align-items: center;
+    justify-items: center;
+}
+.logotext{
+    color: #0F0FD1;
+    font-weight: bolder !important;
+    text-transform: uppercase;
+    vertical-align: middle;
+}
+.actionbar{
+    display: flex; 
+    justify-content: flex-end;
+    justify-items: center;
+    align-items: center;
+    flex-direction: row;
+    padding: 0rem 2rem 0rem 2rem;
+
+}
+.actionbar .avatar{
+    max-width: 100%;
+    max-height: 35px;
+}
+.actionbar img {
+    margin-left: 1.75rem;
+}
+.headSpace{
+    margin-top: 3rem !important;
+}
+.canvas {
+    margin: 3.25rem 4.25rem 3.25rem 8.25rem;
+    padding: 1.25rem;
+}
+.menuSpaceinit{
+    padding-top: 3rem;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: center;
+    overflow-y: hidden;
+    position: fixed;
+}
+.menu-width-closed{
+    width: 60px;
+    background-color: white;
+}
+
+/* Mobile devices */
+@media (max-width: 767px) {
+    .actionbar{
+        display: flex; 
+        justify-content: flex-end;
+        justify-items: center;
+        align-items: center;
+        flex-direction: row;
+        padding: 0rem 1rem 0rem 1rem;
+
+    }
+    .actionbar .avatar{
+        max-width: 100%;
+        max-height: 27.5px;
+    }
+    .actionbar img {
+        margin-left: .8rem;
+
+    }
+    .menuSpaceinit{
+        margin-top: 0 !important;
+    }
+
+    .headSpace{
+        margin-top: 5rem !important;
+    }
+
+    .canvas {
+        margin: 0rem !important;
+        padding:  1rem !important;;
+    }
+
+}
+
+/* Tablets and larger screens */
+@media (min-width: 768px) {
+    .canvas{
+        margin: auto;
+        padding: auto;
+    }
+
+  }
+
+/* Larger desktop screens */
+@media (min-width: 992px) {
+    .canvas {
+        margin: 3.25rem 4.25rem 3.25rem 8.25rem;
+        padding: 1.25rem;
+    }
+  }
+
+/* Extra-large desktop screens */
+@media (min-width: 1200px) {
+
+  }
+

src/app/app.component.ts

@@ -1,10 +1,22 @@
-import { Component } from '@angular/core';
+import { Component} from '@angular/core';
+import { CommonUtilsService } from './services/common-utils.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
+  constructor(
+    public commonSrv: CommonUtilsService
+  ){}
+  isSideBarExpanded = false
+
   title = 'dashboard';
+  public toggleMenu(){
+    this.isSideBarExpanded = !this.isSideBarExpanded
+  }
+  onExpandCollapseEvent(isExpanded: boolean) {
+    this.isSideBarExpanded = isExpanded;
+  }
 }

src/app/app.module.ts

@@ -3,14 +3,22 @@ import { BrowserModule } from '@angular/platform-browser';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { MenuComponent } from './components/main/menu/menu.component';
+import { CanvasComponent } from './components/main/canvas/canvas.component';
+import { DepartmentsComponent } from './components/departments/departments.component';
+import { HighchartsChartModule } from 'highcharts-angular';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    MenuComponent,
+    CanvasComponent,
+    DepartmentsComponent,
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    HighchartsChartModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/components/departments/departments.component.html

@@ -0,0 +1,17 @@
+<section class="mt-5 row">
+    <div class="col-lg-3 col-md-4 col-sm-4 " *ngFor="let dept of commonSrv.departments">
+        <a href="#" target="_blank" rel="noopener noreferrer">
+            <div class="card bg-white border-radius p-4 mb-3"  (touchstart)="addHoverClass($event)" (touchend)="removeHoverClass($event)">
+                <div class="card-img card-img-top">
+                    <img [src]="dept['icon']" alt="" srcset="">
+                </div>
+                <h3>{{dept['department']}}</h3>
+                <p class="text-grey-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                <a href="#" target="_blank" rel="noopener noreferrer">
+                    <i class="fa-solid fa-arrow-right card-icon p-2"></i>
+                </a>
+            </div>
+        </a>
+
+    </div>
+</section>

src/app/components/departments/departments.component.scss

@@ -0,0 +1,33 @@
+.card-img,
+.card-img-top,
+.card-img-bottom {
+  width: 100%;
+}
+
+.card-img,
+.card-img-top {
+  border-top-left-radius: calc(0.25rem - 1px);
+  border-top-right-radius: calc(0.25rem - 1px);
+}
+
+.card-img,
+.card-img-bottom {
+  border-bottom-right-radius: calc(0.25rem - 1px);
+  border-bottom-left-radius: calc(0.25rem - 1px);
+}
+.card-icon{
+  color: #05B184;
+  color: #05B184;
+  transition: background-color 0.3s, color 0.3s;
+  border-radius: 50%;
+
+}
+.card:hover{
+  box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.14);
+}
+.card:hover .card-icon {
+  background-color: #05B184;
+  color: white;
+  border-color: white; 
+}
+

src/app/components/departments/departments.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DepartmentsComponent } from './departments.component';
+
+describe('DepartmentsComponent', () => {
+  let component: DepartmentsComponent;
+  let fixture: ComponentFixture<DepartmentsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DepartmentsComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DepartmentsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/departments/departments.component.ts

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { CommonUtilsService } from 'src/app/services/common-utils.service';
+
+@Component({
+  selector: 'app-departments',
+  templateUrl: './departments.component.html',
+  styleUrls: ['./departments.component.scss']
+})
+export class DepartmentsComponent {
+  constructor(
+    public commonSrv : CommonUtilsService
+  ){}
+
+  addHoverClass(event: Event) {
+    const target = event.target as HTMLElement;
+    target.classList.add('hovered');
+  }
+
+  removeHoverClass(event: Event) {
+    const target = event.target as HTMLElement;
+    target.classList.remove('hovered');
+  }
+
+
+
+}