Vacation Rule Continued

Mohem/src/app/vacation-rule/home/home.component.html

@@ -1,14 +1,8 @@
 <ion-header>
   <ion-toolbar class="header-toolbar">
     <nav-buttons></nav-buttons>
-    <ion-title color="light">{{ 'general,vacation-rule' | translate}}</ion-title>
+    <ion-title color="light">{{ 'vacation-rule, vacation-rule-label' | translate}}</ion-title>
   </ion-toolbar>
-  <!-- <ion-toolbar class="header-toolbar">
-    <ion-buttons slot="start">
-      <ion-back-button color="light" class="btnBack"></ion-back-button>
-    </ion-buttons>
-    <ion-title color="light">{{ 'general,vacation-rule' | translate}}</ion-title>
-  </ion-toolbar> -->
 </ion-header>
 
 <ion-content padding>
@@ -79,6 +73,6 @@
 
 <ion-footer>
   <div class="centerDiv">
-    <ion-button class="footer-button" color="customnavy" ion-button (click)="Vaction_Type()">{{'vacation-rule, create-rule' | translate}}</ion-button>
+    <ion-button class="footer-button" color="customnavy" ion-button (click)="Vacation_Type()">{{'vacation-rule, create-rule' | translate}}</ion-button>
   </div>
 </ion-footer>

Mohem/src/app/vacation-rule/home/home.component.ts

@@ -124,8 +124,8 @@ export class HomeComponent implements OnInit {
     console.log(this.GetVacationRulesList);
   }
 
-  Vaction_Type() {
-    
+  Vacation_Type() {
+    this.cs.navigateForward('/vacation-rule/vacation-type');
   }
 
   getVacationRules() {

Mohem/src/app/vacation-rule/vacation-rule.module.ts

@@ -8,6 +8,7 @@ import { Routes, RouterModule } from '@angular/router';
 import { IonicModule } from '@ionic/angular';
 
 import { VacationRulePage } from './vacation-rule.page';
+import { VacationTypeComponent } from './vacation-type/vacation-type.component';
 
 const routes: Routes = [
   {
@@ -17,6 +18,10 @@ const routes: Routes = [
       {
         path: 'home',
         component: HomeComponent
+      },
+      {
+        path: 'vacation-type',
+        component: VacationTypeComponent
       }
     ]
   }
@@ -32,7 +37,8 @@ const routes: Routes = [
   ],
   declarations: [
     VacationRulePage,
-    HomeComponent
+    HomeComponent,
+    VacationTypeComponent
   ]
 })
 export class VacationRulePageModule { }

Mohem/src/app/vacation-rule/vacation-type/vacation-type.component.html

@@ -0,0 +1,40 @@
+<ion-header>
+  <ion-toolbar class="header-toolbar">
+    <nav-buttons></nav-buttons>
+    <ion-title color="light">{{ 'vacation-rule, vacation-type' | translate}}</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content padding>
+
+  <!-- <div class="progcontainer">
+    <ul class="cusprogressbar">
+      <li class="active">{{'vacation-rule, rule-type' | translate}}</li>
+      <li>{{'vacation-rule, notification-label' | translate}}</li>
+      <li>{{'vacation-rule, create-vacation-rule' | translate}}</li>
+    </ul>
+  </div> -->
+
+  <ion-grid no-padding>
+    <ul class="cusprogressbar">
+      <ion-row nowrap>
+        <ion-col size="4">
+          <!-- <ul class="cusprogressbar"> -->
+          <li class="active">{{'vacation-rule, rule-type' | translate}}</li>
+          <!-- </ul> -->
+        </ion-col>
+        <ion-col size="4">
+          <!-- <ul class="cusprogressbar"> -->
+          <li>{{'vacation-rule, notification-label' | translate}}</li>
+          <!-- </ul> -->
+        </ion-col>
+        <ion-col size="4">
+          <!-- <ul class="cusprogressbar"> -->
+          <li>{{'vacation-rule, create-vacation-rule' | translate}}</li>
+          <!-- </ul> -->
+        </ion-col>
+      </ion-row>
+    </ul>
+  </ion-grid>
+
+</ion-content>

Mohem/src/app/vacation-rule/vacation-type/vacation-type.component.scss

@@ -0,0 +1,83 @@
+li {
+  width: 100%;
+}
+
+.cusprogressbar li:after {
+  width: 100%;
+  height: 2px;
+  content: "";
+  position: absolute;
+  background-color: #d9d9d9;
+  top: 20px;
+}
+
+// .progcontainer {
+//     margin: auto;
+//     text-align: center;
+//     width: 100%;
+//     min-height: 100px;
+// }
+// .cusprogressbar {
+//     counter-reset: step;
+//     padding: 0px;
+// }
+// .cusprogressbar li {
+//     list-style-type: none;
+//     width: 33.333%;
+//     // @include ltr{
+//     //     float: left;
+//     // }
+//     // @include rtl{
+//     //     float: right;
+//     // }
+//     font-size: 12px;
+//     position: relative;
+//     text-align: center;
+//     color: #7F8C8D;
+//     // @include ltr(){
+//     //     font-family: $fontFamilySemiBoldEN;
+//     // }
+//     // @include rtl(){
+//     //     font-family: $fontFamilyIOSAR;
+//     //     font-weight: bold;
+//     // }
+// }
+// .cusprogressbar li:before {
+//     width: 40px;
+//     height: 40px;
+//     content: counter(step);
+//     color: #ffffff;
+//     counter-increment: step;
+//     line-height: 40px;
+//     border: 0px;
+//     background-color: #acacac;
+//     display: block;
+//     text-align: center;
+//     margin: 0 auto 10px auto;
+//     border-radius: 50%;
+// }
+// .cusprogressbar li:after {
+//     width: 100%;
+//     height: 2px;
+//     content: '';
+//     position: absolute;
+//     background-color: #d9d9d9;
+//     top: 20px;
+//     // @include ltr{
+//     //     left: -50%;
+//     // }
+//     // @include rtl{
+//     //     right: -50%;
+//     // }
+
+//     z-index: -1;
+// }
+// .cusprogressbar li:first-child:after {
+//     content: none;
+// }
+// .cusprogressbar li.active {
+//     color: #209a83;
+// }
+// .cusprogressbar li.active:before {
+//     background-color: #209a83;
+// }

Mohem/src/app/vacation-rule/vacation-type/vacation-type.component.spec.ts

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

Mohem/src/app/vacation-rule/vacation-type/vacation-type.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-vacation-type',
+  templateUrl: './vacation-type.component.html',
+  styleUrls: ['./vacation-type.component.scss'],
+})
+export class VacationTypeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

Mohem/src/theme/styles.scss

@@ -28,6 +28,10 @@ body{
   
   }
 
+  .header-toolbar {
+    --background: linear-gradient(45deg, #3ac1f1 0%, #19a163 36%, #19a163 59%, #1a586d 100%);
+  }
+
 ion-label{
     color:var(--labelColor) !important;
 }