From 071adc8401b23508dbb3335546839a30caa8f89b Mon Sep 17 00:00:00 2001 From: sriram-at-840620226347 Date: Tue, 3 Sep 2019 18:33:18 +0530 Subject: [PATCH 1/2] UI design by suren --- ng8-seed/src/app/app.module.ts | 8 +- ng8-seed/src/app/app.routing.ts | 21 +- .../payment-confirmation.component.html | 44 ++ .../payment-confirmation.component.scss | 0 .../payment-confirmation.component.spec.ts | 25 + .../payment-confirmation.component.ts | 15 + .../components/payment/payment.component.html | 96 ++++ .../components/payment/payment.component.scss | 175 +++++++ .../payment/payment.component.spec.ts | 25 + .../components/payment/payment.component.ts | 47 ++ .../projects/projects.component.html | 448 ++++++++++++++++++ .../projects/projects.component.scss | 175 +++++++ .../projects/projects.component.spec.ts | 25 + .../components/projects/projects.component.ts | 45 ++ .../menu-items/horizontal-menu-items.ts | 32 +- .../src/app/shared/menu-items/menu-items.ts | 8 +- 16 files changed, 1175 insertions(+), 14 deletions(-) create mode 100644 ng8-seed/src/app/components/payment-confirmation/payment-confirmation.component.html create mode 100644 ng8-seed/src/app/components/payment-confirmation/payment-confirmation.component.scss create mode 100644 ng8-seed/src/app/components/payment-confirmation/payment-confirmation.component.spec.ts create mode 100644 ng8-seed/src/app/components/payment-confirmation/payment-confirmation.component.ts create mode 100644 ng8-seed/src/app/components/payment/payment.component.html create mode 100644 ng8-seed/src/app/components/payment/payment.component.scss create mode 100644 ng8-seed/src/app/components/payment/payment.component.spec.ts create mode 100644 ng8-seed/src/app/components/payment/payment.component.ts create mode 100644 ng8-seed/src/app/components/projects/projects.component.html create mode 100644 ng8-seed/src/app/components/projects/projects.component.scss create mode 100644 ng8-seed/src/app/components/projects/projects.component.spec.ts create mode 100644 ng8-seed/src/app/components/projects/projects.component.ts diff --git a/ng8-seed/src/app/app.module.ts b/ng8-seed/src/app/app.module.ts index 0312b4e..6162b6c 100644 --- a/ng8-seed/src/app/app.module.ts +++ b/ng8-seed/src/app/app.module.ts @@ -40,6 +40,9 @@ import { ProjectDetailComponent } from './components/project-detail/project-deta import {SlideshowModule} from 'ng-simple-slideshow'; import { FooterComponent } from './components/footer/footer.component' import { ContributeComponent } from './components/contribute/contribute.component'; +import { ProjectsComponent } from './components/projects/projects.component'; +import { PaymentComponent } from './components/payment/payment.component'; +import { PaymentConfirmationComponent } from './components/payment-confirmation/payment-confirmation.component'; // import { AddEventModule } from './add-event.module'; export function HttpLoaderFactory(http: HttpClient) { @@ -61,7 +64,10 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = { AuthLayoutComponent, // ProjectDetailComponent, FooterComponent, - ContributeComponent + ContributeComponent, + ProjectsComponent, + PaymentComponent, + PaymentConfirmationComponent // ProjectListComponent ], imports: [ diff --git a/ng8-seed/src/app/app.routing.ts b/ng8-seed/src/app/app.routing.ts index ac49bc8..944d8ef 100644 --- a/ng8-seed/src/app/app.routing.ts +++ b/ng8-seed/src/app/app.routing.ts @@ -4,6 +4,9 @@ import { AdminLayoutComponent } from './layouts/admin/admin-layout.component'; import { AuthLayoutComponent } from './layouts/auth/auth-layout.component'; import { ProjectDetailComponent } from './components/project-detail/project-detail.component'; import { ContributeComponent } from './components/contribute/contribute.component'; +import { ProjectsComponent } from './components/projects/projects.component'; +import { PaymentComponent } from './components/payment/payment.component'; +import { PaymentConfirmationComponent } from './components/payment-confirmation/payment-confirmation.component'; export const AppRoutes: Routes = [{ path: '', @@ -18,9 +21,23 @@ export const AppRoutes: Routes = [{ }, {path : 'contribute', // loadChildren :()=>import('./dashboard/dashboard.module').then(m=>m.) - component:ContributeComponent} + component:ContributeComponent +}, +{ + path : 'projects', + component:ProjectsComponent +}, +{ + path : 'payment', + component:PaymentComponent +}, +{ + path : 'paymentconfirmation', + component:PaymentConfirmationComponent +} ] -}, { +}, +{ path: '', component: AuthLayoutComponent, children: [{ diff --git a/ng8-seed/src/app/components/payment-confirmation/payment-confirmation.component.html b/ng8-seed/src/app/components/payment-confirmation/payment-confirmation.component.html new file mode 100644 index 0000000..848d423 --- /dev/null +++ b/ng8-seed/src/app/components/payment-confirmation/payment-confirmation.component.html @@ -0,0 +1,44 @@ + +
Review and Pay
 +

+ +
+
+

Thank You


+ +
+
+
+
+ +

We have received confirmation of your payment as detailed below

+
+
+
+
+ +
+
+ + + +
+
+
+
+ +
+
+

Building fund for Govt Girls Hr Sec School,
Nellikuppam, Cuddalore

+
+
+
+
+ +
+
+ + + \ No newline at end of file diff --git a/ng8-seed/src/app/components/payment-confirmation/payment-confirmation.component.scss b/ng8-seed/src/app/components/payment-confirmation/payment-confirmation.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/ng8-seed/src/app/components/payment-confirmation/payment-confirmation.component.spec.ts b/ng8-seed/src/app/components/payment-confirmation/payment-confirmation.component.spec.ts new file mode 100644 index 0000000..2c14c92 --- /dev/null +++ b/ng8-seed/src/app/components/payment-confirmation/payment-confirmation.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PaymentConfirmationComponent } from './payment-confirmation.component'; + +describe('PaymentConfirmationComponent', () => { + let component: PaymentConfirmationComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PaymentConfirmationComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PaymentConfirmationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ng8-seed/src/app/components/payment-confirmation/payment-confirmation.component.ts b/ng8-seed/src/app/components/payment-confirmation/payment-confirmation.component.ts new file mode 100644 index 0000000..7a02cc9 --- /dev/null +++ b/ng8-seed/src/app/components/payment-confirmation/payment-confirmation.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-payment-confirmation', + templateUrl: './payment-confirmation.component.html', + styleUrls: ['./payment-confirmation.component.scss'] +}) +export class PaymentConfirmationComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/ng8-seed/src/app/components/payment/payment.component.html b/ng8-seed/src/app/components/payment/payment.component.html new file mode 100644 index 0000000..4cb5928 --- /dev/null +++ b/ng8-seed/src/app/components/payment/payment.component.html @@ -0,0 +1,96 @@ + +
Review and Pay
 +

+ +
+
+ +
+
+ + + +
+
+
+
+ +
+
+

Building fund for Govt Girls Hr Sec School, Nellikuppam, Cuddalore

+
+
+ + + + +
Choose a Payment Option
 +

+ + + Cheque + +
+ +
+ + + + Bank Transfer + +
+ +
+ + + + Credit/Debit Cards + +
+
+ + + + + + + + + + + + + +
+
+ + + + Wallets + +
+ +
+ + + + UPI + +
+ +
+ + + + +
+ +
+ \ No newline at end of file diff --git a/ng8-seed/src/app/components/payment/payment.component.scss b/ng8-seed/src/app/components/payment/payment.component.scss new file mode 100644 index 0000000..1fdd4be --- /dev/null +++ b/ng8-seed/src/app/components/payment/payment.component.scss @@ -0,0 +1,175 @@ +$base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important; +$product-bg-color-hover: rgba(103, 58, 183, 0.7); +.p-list-main { + background: white; + margin: auto; + position: relative; + overflow: hidden !important; + border-radius: 10px 10px 10px 10px; + box-shadow: $base-card-box-shadow; + transform: scale(0.95); + transition: box-shadow 0.5s, transform 0.5s; + &:hover { + transform: scale(1); + box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2); + } + .p-list { + position: relative; + .top { + height: 100%; + width: 100%; + // background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center; + -webkit-background-size: 100%; + -moz-background-size: 100%; + -o-background-size: 100%; + background-size: 100%; + } + .bottom { + width: 200%; + height: 20%; + transition: transform 0.5s; + h1 { + margin: 0; + padding: 0; + } + p { + margin: 0; + padding: 0; + } + .left { + height: 100%; + width: 50%; + background: #f4f4f4; + position: relative; + float: left; + .details { + padding: 20px; + float: left; + width: calc(70% - 40px); + } + .buy { + float: right; + width: calc(30% - 2px); + height: 100%; + transition: background 0.5s; + i { + font-size: 30px; + padding: 30px; + color: #254053; + transition: transform 0.5s; + } + &:hover i { + transform: translateY(5px); + color: #00394B; + } + } + } + .right { + width: 50%; + background: #A6CDDE; + color: white; + float: right; + height: 200%; + overflow: hidden; + .details { + padding: 20px; + float: right; + width: calc(70% - 40px); + } + .done { + width: calc(30% - 2px); + float: left; + transition: transform 0.5s; + border-right: solid thin rgba(255, 255, 255, 0.3); + height: 50%; + i { + font-size: 30px; + padding: 30px; + color: white; + } + } + .remove { + width: calc(30% - 1px); + clear: both; + border-right: solid thin rgba(255, 255, 255, 0.3); + height: 50%; + background: #BC3B59; + transition: transform 0.5s, background 0.5s; + &:hover { + background: #9B2847; + } + &:hover i { + transform: translateY(5px); + } + i { + transition: transform 0.5s; + font-size: 30px; + padding: 30px; + color: white; + } + } + &:hover { + .remove, + .done { + transform: translateY(-100%); + } + } + } + } + } + .inside { + z-index: 9; + background: $product-bg-color-hover; + width: 140px; + height: 140px; + position: absolute; + top: -70px; + right: -70px; + border-radius: 0px 0px 200px 200px; + transition: all 0.5s, border-radius 2s, top 1s; + overflow: hidden; + .icon { + position: absolute; + right: 85px; + top: 85px; + color: white; + opacity: 1; + } + &:hover { + width: 100%; + right: 0; + top: 0; + border-radius: 0; + height: 100%; + .icon { + opacity: 0; + right: 15px; + top: 15px; + } + .contents { + opacity: 1; + transform: scale(1); + transform: translateY(0); + } + } + .contents { + padding: 5%; + opacity: 0; + transform: scale(0.5); + transform: translateY(-200%); + transition: opacity 0.2s, transform 0.8s; + table { + text-align: left; + width: 100%; + } + h1, + p, + table { + color: white; + } + p { + font-size: 13px; + } + } + } +} diff --git a/ng8-seed/src/app/components/payment/payment.component.spec.ts b/ng8-seed/src/app/components/payment/payment.component.spec.ts new file mode 100644 index 0000000..4b19cd1 --- /dev/null +++ b/ng8-seed/src/app/components/payment/payment.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PaymentComponent } from './payment.component'; + +describe('PaymentComponent', () => { + let component: PaymentComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PaymentComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PaymentComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ng8-seed/src/app/components/payment/payment.component.ts b/ng8-seed/src/app/components/payment/payment.component.ts new file mode 100644 index 0000000..f397a7b --- /dev/null +++ b/ng8-seed/src/app/components/payment/payment.component.ts @@ -0,0 +1,47 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-payment', + templateUrl: './payment.component.html', + styleUrls: ['./payment.component.scss'] +}) +export class PaymentComponent implements OnInit { + + isRequired = false; + isDisabled = false; + currentDrink: string; + + drinks = [{ + value: 'coke-0', + viewValue: 'Coke' + }, { + value: 'sprite-1', + viewValue: 'Sprite' + }, { + value: 'water-2', + viewValue: 'Water' + }, { + value: 'pepper-3', + viewValue: 'Dr. Pepper' + }, { + value: 'coffee-4', + viewValue: 'Coffee' + }, { + value: 'tea-5', + viewValue: 'Tea' + }, { + value: 'juice-6', + viewValue: 'Orange juice' + }, { + value: 'wine-7', + viewValue: 'Wine' + }, { + value: 'milk-8', + viewValue: 'Milk' + }]; + constructor() { } + + ngOnInit() { + } + +} diff --git a/ng8-seed/src/app/components/projects/projects.component.html b/ng8-seed/src/app/components/projects/projects.component.html new file mode 100644 index 0000000..62878ee --- /dev/null +++ b/ng8-seed/src/app/components/projects/projects.component.html @@ -0,0 +1,448 @@ + +
+ + +
Projects
 +
+
+
+ + + + {{ drink.viewValue }} + + + + + + + {{ drink.viewValue }} + + + + + + + {{ drink.viewValue }} + + + + + + + {{ drink.viewValue }} + + + +
+ +
+
+
+
+
+
+
+
+
Govt Higher Secondary school
+

Thiruvannamalai

+
+ +
+
+
+
info_outline
+
+ + + + + + + + + + + + + + + + + +
PurposeNeed
Building FundUrgent
EstimationCollected
1.50L50,000
+
+
+
+
+
+
+
+
+
+
+
+
+
Govt Higher Secondary school
+

Vellore

+
+ +
+
+
+
info_outline
+
+ + + + + + + + + + + + + + + + + +
PurposeNeed
Building FundUrgent
EstimationCollected
1.50L50,000
+
+
+
+
+
+
+
+
+
+
+
+
+
Govt Higher Secondary school
+

Salem

+
+ +
+
+
+
info_outline
+
+ + + + + + + + + + + + + + + + + +
PurposeNeed
Building FundUrgent
EstimationCollected
1.50L50,000
+
+
+
+
+
+
+
+
+
+
+
+
+
Govt Higher Secondary school
+

Pallavaram,Chennai

+
+ +
+
+
+
info_outline
+
+ + + + + + + + + + + + + + + + + +
PurposeNeed
Building FundUrgent
EstimationCollected
1.50L50,000
+
+
+
+
+
+
+
+
+
+
+
+
+
Govt Higher Secondary school
+

Ramanathapuram

+
+ +
+
+
+
info_outline
+
+ + + + + + + + + + + + + + + + + +
PurposeNeed
Building FundUrgent
EstimationCollected
1.50L50,000
+
+
+
+
+
+
+
+
+
+
+
+
+
Govt Higher Secondary school
+

Nagapattinam

+
+ +
+
+
+
info_outline
+
+ + + + + + + + + + + + + + + + + +
PurposeNeed
Building FundUrgent
EstimationCollected
1.50L50,000
+
+
+
+
+
+
+
+
+
+
+
+
+
Govt Higher Secondary school
+

+
+ +
+
+
+
info_outline
+
+ + + + + + + + + + + + + + + + + +
PurposeNeed
Building FundUrgent
EstimationCollected
1.50L50,000
+
+
+
+
+
+
+
+
+
+
+
+
+
Govt Higher Secondary school
+

+
+ +
+
+
+
info_outline
+
+ + + + + + + + + + + + + + + + + +
WidthHeight
3000mm4000mm
Custuertcutaeyw
4529901
+
+
+
+
+
+ + + + +
+
+ + + + + + + + +
Make a contribute now
+ + + +
+ +
+
+ + + +
+
+ State Fund + District Fund + School Common Fund + Specfic Purpose + + + + +
+ + + + +
+
+
Ⓒ TN Schools, All rights reserved
+
diff --git a/ng8-seed/src/app/components/projects/projects.component.scss b/ng8-seed/src/app/components/projects/projects.component.scss new file mode 100644 index 0000000..1fdd4be --- /dev/null +++ b/ng8-seed/src/app/components/projects/projects.component.scss @@ -0,0 +1,175 @@ +$base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important; +$product-bg-color-hover: rgba(103, 58, 183, 0.7); +.p-list-main { + background: white; + margin: auto; + position: relative; + overflow: hidden !important; + border-radius: 10px 10px 10px 10px; + box-shadow: $base-card-box-shadow; + transform: scale(0.95); + transition: box-shadow 0.5s, transform 0.5s; + &:hover { + transform: scale(1); + box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2); + } + .p-list { + position: relative; + .top { + height: 100%; + width: 100%; + // background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center; + -webkit-background-size: 100%; + -moz-background-size: 100%; + -o-background-size: 100%; + background-size: 100%; + } + .bottom { + width: 200%; + height: 20%; + transition: transform 0.5s; + h1 { + margin: 0; + padding: 0; + } + p { + margin: 0; + padding: 0; + } + .left { + height: 100%; + width: 50%; + background: #f4f4f4; + position: relative; + float: left; + .details { + padding: 20px; + float: left; + width: calc(70% - 40px); + } + .buy { + float: right; + width: calc(30% - 2px); + height: 100%; + transition: background 0.5s; + i { + font-size: 30px; + padding: 30px; + color: #254053; + transition: transform 0.5s; + } + &:hover i { + transform: translateY(5px); + color: #00394B; + } + } + } + .right { + width: 50%; + background: #A6CDDE; + color: white; + float: right; + height: 200%; + overflow: hidden; + .details { + padding: 20px; + float: right; + width: calc(70% - 40px); + } + .done { + width: calc(30% - 2px); + float: left; + transition: transform 0.5s; + border-right: solid thin rgba(255, 255, 255, 0.3); + height: 50%; + i { + font-size: 30px; + padding: 30px; + color: white; + } + } + .remove { + width: calc(30% - 1px); + clear: both; + border-right: solid thin rgba(255, 255, 255, 0.3); + height: 50%; + background: #BC3B59; + transition: transform 0.5s, background 0.5s; + &:hover { + background: #9B2847; + } + &:hover i { + transform: translateY(5px); + } + i { + transition: transform 0.5s; + font-size: 30px; + padding: 30px; + color: white; + } + } + &:hover { + .remove, + .done { + transform: translateY(-100%); + } + } + } + } + } + .inside { + z-index: 9; + background: $product-bg-color-hover; + width: 140px; + height: 140px; + position: absolute; + top: -70px; + right: -70px; + border-radius: 0px 0px 200px 200px; + transition: all 0.5s, border-radius 2s, top 1s; + overflow: hidden; + .icon { + position: absolute; + right: 85px; + top: 85px; + color: white; + opacity: 1; + } + &:hover { + width: 100%; + right: 0; + top: 0; + border-radius: 0; + height: 100%; + .icon { + opacity: 0; + right: 15px; + top: 15px; + } + .contents { + opacity: 1; + transform: scale(1); + transform: translateY(0); + } + } + .contents { + padding: 5%; + opacity: 0; + transform: scale(0.5); + transform: translateY(-200%); + transition: opacity 0.2s, transform 0.8s; + table { + text-align: left; + width: 100%; + } + h1, + p, + table { + color: white; + } + p { + font-size: 13px; + } + } + } +} diff --git a/ng8-seed/src/app/components/projects/projects.component.spec.ts b/ng8-seed/src/app/components/projects/projects.component.spec.ts new file mode 100644 index 0000000..1086592 --- /dev/null +++ b/ng8-seed/src/app/components/projects/projects.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ProjectsComponent } from './projects.component'; + +describe('ProjectsComponent', () => { + let component: ProjectsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ProjectsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ProjectsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ng8-seed/src/app/components/projects/projects.component.ts b/ng8-seed/src/app/components/projects/projects.component.ts new file mode 100644 index 0000000..203880f --- /dev/null +++ b/ng8-seed/src/app/components/projects/projects.component.ts @@ -0,0 +1,45 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-projects', + templateUrl: './projects.component.html', + styleUrls: ['./projects.component.scss'] +}) +export class ProjectsComponent implements OnInit { + isRequired = false; + isDisabled = false; + currentDrink: string; + + drinks = [{ + value: 'coke-0', + viewValue: 'Coke' + }, { + value: 'sprite-1', + viewValue: 'Sprite' + }, { + value: 'water-2', + viewValue: 'Water' + }, { + value: 'pepper-3', + viewValue: 'Dr. Pepper' + }, { + value: 'coffee-4', + viewValue: 'Coffee' + }, { + value: 'tea-5', + viewValue: 'Tea' + }, { + value: 'juice-6', + viewValue: 'Orange juice' + }, { + value: 'wine-7', + viewValue: 'Wine' + }, { + value: 'milk-8', + viewValue: 'Milk' + }]; + constructor() { } + + ngOnInit() { + } +} diff --git a/ng8-seed/src/app/shared/menu-items/horizontal-menu-items.ts b/ng8-seed/src/app/shared/menu-items/horizontal-menu-items.ts index 2f8ef97..04fecbf 100644 --- a/ng8-seed/src/app/shared/menu-items/horizontal-menu-items.ts +++ b/ng8-seed/src/app/shared/menu-items/horizontal-menu-items.ts @@ -29,17 +29,29 @@ const HORIZONTALMENUITEMS = [ icon: 'home' }, { - state: 'home', - name: 'Projects', - type: 'link', - icon: 'bookmark' - }, - { - state: 'contribute', - name: 'Contribute', - type: 'link', - icon: 'error_outline' + state: 'apps', + name: 'Components', + type: 'sub', + icon: 'apps', + children: [ + {state: 'contribute', name: 'Contribute',}, + {state: 'projects', name: 'Projects',}, + {state: 'payment', name: 'Payment'}, + {state: 'paymentconfirmation', name: 'PaymentConfirmation'} + ] }, + // { + // state: 'projects', + // name: 'Projects', + // type: 'link', + // icon: 'bookmark' + // }, + // { + // state: 'contribute', + // name: 'Contribute', + // type: 'link', + // icon: 'error_outline' + // }, { state: 'authentication', name: 'Login', diff --git a/ng8-seed/src/app/shared/menu-items/menu-items.ts b/ng8-seed/src/app/shared/menu-items/menu-items.ts index ef32d16..49e7d2d 100644 --- a/ng8-seed/src/app/shared/menu-items/menu-items.ts +++ b/ng8-seed/src/app/shared/menu-items/menu-items.ts @@ -50,7 +50,7 @@ const MENUITEMS : Menu[] = [ // ] // }, { - state: 'home', + state: 'projects', name: 'Projects', type: 'link', icon: 'bookmark' @@ -61,6 +61,12 @@ const MENUITEMS : Menu[] = [ type: 'link', icon: 'error_outline' }, + { + state: 'payment', + name: 'Payment', + type: 'link', + icon: 'error_outline' + }, { state: 'authentication', name: 'Login', From b062cc24f7e5e8b033e0185a9674e455f69d38f1 Mon Sep 17 00:00:00 2001 From: sriram-at-840620226347 Date: Wed, 4 Sep 2019 13:45:57 +0530 Subject: [PATCH 2/2] UI New Design --- ng8-seed/src/app/app.module.ts | 6 +- ng8-seed/src/app/app.routing.ts | 6 +- .../my-account/my-account.component.html | 70 +++++++++++++++++++ .../my-account/my-account.component.scss | 0 .../my-account/my-account.component.spec.ts | 25 +++++++ .../my-account/my-account.component.ts | 51 ++++++++++++++ .../menu-items/horizontal-menu-items.ts | 12 ++-- 7 files changed, 162 insertions(+), 8 deletions(-) create mode 100644 ng8-seed/src/app/components/my-account/my-account.component.html create mode 100644 ng8-seed/src/app/components/my-account/my-account.component.scss create mode 100644 ng8-seed/src/app/components/my-account/my-account.component.spec.ts create mode 100644 ng8-seed/src/app/components/my-account/my-account.component.ts diff --git a/ng8-seed/src/app/app.module.ts b/ng8-seed/src/app/app.module.ts index 6162b6c..8cadf7d 100644 --- a/ng8-seed/src/app/app.module.ts +++ b/ng8-seed/src/app/app.module.ts @@ -28,6 +28,7 @@ import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatProgressBarModule} from '@angular/material/progress-bar'; import {MatSelectModule} from '@angular/material/select'; import {MatCardModule} from '@angular/material/card'; +import {NgxDatatableModule} from '@swimlane/ngx-datatable'; import { AppRoutes } from './app.routing'; import { AppComponent } from './app.component'; @@ -43,6 +44,7 @@ import { ContributeComponent } from './components/contribute/contribute.componen import { ProjectsComponent } from './components/projects/projects.component'; import { PaymentComponent } from './components/payment/payment.component'; import { PaymentConfirmationComponent } from './components/payment-confirmation/payment-confirmation.component'; +import { MyAccountComponent } from './components/my-account/my-account.component'; // import { AddEventModule } from './add-event.module'; export function HttpLoaderFactory(http: HttpClient) { @@ -67,7 +69,8 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = { ContributeComponent, ProjectsComponent, PaymentComponent, - PaymentConfirmationComponent + PaymentConfirmationComponent, + MyAccountComponent // ProjectListComponent ], imports: [ @@ -83,6 +86,7 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = { MatMenuModule, MatToolbarModule, MatTabsModule, + NgxDatatableModule, MatCheckboxModule, MatProgressBarModule, MatSelectModule, diff --git a/ng8-seed/src/app/app.routing.ts b/ng8-seed/src/app/app.routing.ts index 944d8ef..0876caa 100644 --- a/ng8-seed/src/app/app.routing.ts +++ b/ng8-seed/src/app/app.routing.ts @@ -7,7 +7,7 @@ import { ContributeComponent } from './components/contribute/contribute.componen import { ProjectsComponent } from './components/projects/projects.component'; import { PaymentComponent } from './components/payment/payment.component'; import { PaymentConfirmationComponent } from './components/payment-confirmation/payment-confirmation.component'; - +import { MyAccountComponent } from './components/my-account/my-account.component'; export const AppRoutes: Routes = [{ path: '', redirectTo: 'home', @@ -34,6 +34,10 @@ export const AppRoutes: Routes = [{ { path : 'paymentconfirmation', component:PaymentConfirmationComponent +}, +{ + path : 'my-account', + component:MyAccountComponent } ] }, diff --git a/ng8-seed/src/app/components/my-account/my-account.component.html b/ng8-seed/src/app/components/my-account/my-account.component.html new file mode 100644 index 0000000..c93a7b3 --- /dev/null +++ b/ng8-seed/src/app/components/my-account/my-account.component.html @@ -0,0 +1,70 @@ + + + + My Profile + +
+
+ + + + + Registered as Organistation + +
+
+ + + + + + +
+
+ + + +
+
+ + + +
+
+ + + +
+ +
+ + + + My Contributions + +
+ + +
+ + + + FAQ / Support + + + + + + \ No newline at end of file diff --git a/ng8-seed/src/app/components/my-account/my-account.component.scss b/ng8-seed/src/app/components/my-account/my-account.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/ng8-seed/src/app/components/my-account/my-account.component.spec.ts b/ng8-seed/src/app/components/my-account/my-account.component.spec.ts new file mode 100644 index 0000000..9a4cdd2 --- /dev/null +++ b/ng8-seed/src/app/components/my-account/my-account.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MyAccountComponent } from './my-account.component'; + +describe('MyAccountComponent', () => { + let component: MyAccountComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MyAccountComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MyAccountComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ng8-seed/src/app/components/my-account/my-account.component.ts b/ng8-seed/src/app/components/my-account/my-account.component.ts new file mode 100644 index 0000000..3ad04a2 --- /dev/null +++ b/ng8-seed/src/app/components/my-account/my-account.component.ts @@ -0,0 +1,51 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-my-account', + templateUrl: './my-account.component.html', + styleUrls: ['./my-account.component.scss'] +}) +export class MyAccountComponent implements OnInit { +firstToggle: boolean; +rows = []; +count = 0; +offset = 0; +limit = 10; + +ngOnInit() { + this.page(this.offset, this.limit); +} + +page(offset, limit) { + this.fetch((results) => { + this.count = results.length; + + const start = offset * limit; + const end = start + limit; + const rows = [...this.rows]; + + for (let i = start; i < end; i++) { + rows[i] = results[i]; + } + + this.rows = rows; + console.log('Page Results', start, end, rows); + }); +} + +fetch(cb) { + const req = new XMLHttpRequest(); + req.open('GET', `assets/data/company.json`); + + req.onload = () => { + cb(JSON.parse(req.response)); + }; + + req.send(); +} + +onPage(event) { + console.log('Page Event', event); + this.page(event.offset, event.limit); +} +} diff --git a/ng8-seed/src/app/shared/menu-items/horizontal-menu-items.ts b/ng8-seed/src/app/shared/menu-items/horizontal-menu-items.ts index 04fecbf..0053e24 100644 --- a/ng8-seed/src/app/shared/menu-items/horizontal-menu-items.ts +++ b/ng8-seed/src/app/shared/menu-items/horizontal-menu-items.ts @@ -40,12 +40,12 @@ const HORIZONTALMENUITEMS = [ {state: 'paymentconfirmation', name: 'PaymentConfirmation'} ] }, - // { - // state: 'projects', - // name: 'Projects', - // type: 'link', - // icon: 'bookmark' - // }, + { + state: 'my-account', + name: 'My-Account', + type: 'link', + icon: 'person' + }, // { // state: 'contribute', // name: 'Contribute',