From 94fdb373a9e1130656f5d12f15c794cae5f70463 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Tue, 29 Aug 2017 22:28:26 +0530 Subject: [PATCH 001/177] Add material icon css --- src/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.html b/src/index.html index 183b191dd..45592acf7 100644 --- a/src/index.html +++ b/src/index.html @@ -6,6 +6,7 @@ + From c068d7862e271ad2d6b84aa2cb8117b612e066f8 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Tue, 29 Aug 2017 22:30:02 +0530 Subject: [PATCH 002/177] Install Material hammerjs animation flex layouts --- package.json | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index ac8462788..5c1516a98 100644 --- a/package.json +++ b/package.json @@ -28,12 +28,15 @@ }, "private": true, "dependencies": { - "@angular/animations": "^4.3.1", + "@angular/animations": "^4.3.6", + "@angular/cdk": "github:angular/cdk-builds", "@angular/common": "^4.3.1", "@angular/compiler": "^4.3.1", "@angular/core": "^4.3.1", + "@angular/flex-layout": "^2.0.0-beta.9", "@angular/forms": "^4.3.1", "@angular/http": "^4.3.1", + "@angular/material": "github:angular/material2-builds", "@angular/platform-browser": "^4.3.1", "@angular/platform-browser-dynamic": "^4.3.1", "@angular/router": "^4.3.1", @@ -44,6 +47,7 @@ "electron": "^1.6.11", "font-awesome": "^4.7.0", "got": "^7.1.0", + "hammerjs": "^2.0.8", "lodash.get": "^4.4.2", "lodash.isempty": "^4.4.0", "lodash.values": "^4.3.0", From 94f17ef7bd0ba527355a3ffb3a27d3b16de6f6b6 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Tue, 29 Aug 2017 22:31:19 +0530 Subject: [PATCH 003/177] Adds material theme SCSS --- src/assets/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/index.css b/src/assets/index.css index 3d462f001..f307a2e66 100644 --- a/src/assets/index.css +++ b/src/assets/index.css @@ -20,4 +20,4 @@ margin: 0 auto; #quote-author { font-style: italic; color: #9ca09f; -} \ No newline at end of file +} From f67c64b33af97bf5e1f4aa03739edbd2b4e48386 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Tue, 29 Aug 2017 22:31:36 +0530 Subject: [PATCH 004/177] Removes bootstrap --- .angular-cli.json | 1 - 1 file changed, 1 deletion(-) diff --git a/.angular-cli.json b/.angular-cli.json index 68772755e..455626031 100644 --- a/.angular-cli.json +++ b/.angular-cli.json @@ -19,7 +19,6 @@ "testTsconfig": "tsconfig.spec.json", "prefix": "app", "styles": [ - "../node_modules/bootstrap/dist/css/bootstrap.min.css", "../node_modules/font-awesome/css/font-awesome.min.css", "../node_modules/open-sans-all/css/open-sans.min.css", "styles.scss" From 8295a3cc1b3c115579983ad522230817ec03daa5 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Tue, 29 Aug 2017 22:32:11 +0530 Subject: [PATCH 005/177] Adds material module depandacy --- src/app/app.module.ts | 13 ++++++++++--- src/app/wallet/wallet.module.ts | 5 +++-- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 7af833cf9..b464f675b 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,10 +1,12 @@ import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; +import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { RouterModule, Routes } from '@angular/router'; import { NgxElectronModule } from 'ngx-electron'; import { BsDropdownModule, CollapseModule, ModalModule, ModalDirective, PaginationModule, TooltipModule } from 'ngx-bootstrap'; +import { MaterialModule } from '@angular/material'; +import { FlexLayoutModule } from '@angular/flex-layout'; import { SharedModule } from './shared/shared.module'; import { SidebarModule } from './core/sidebar/sidebar.module'; @@ -20,6 +22,8 @@ import { StatusComponent } from './core/status/status.component'; import { OverviewComponent } from './overview/overview.component'; import { SettingsComponent } from './settings/settings.component'; +import 'hammerjs'; + const routes: Routes = [ { path: 'overview', component: OverviewComponent, data: { title: 'Overview' } }, { path: 'settings', component: SettingsComponent, data: { title: 'Settings' } }, @@ -42,13 +46,16 @@ const routes: Routes = [ SidebarModule.forRoot(), WalletModule.forRoot(), RpcModule.forRoot(), - ModalsModule + ModalsModule, + MaterialModule, + FlexLayoutModule ], providers: [ WindowService, BlockStatusService ], - bootstrap: [ AppComponent ] + bootstrap: [ AppComponent ], + schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class AppModule { diff --git a/src/app/wallet/wallet.module.ts b/src/app/wallet/wallet.module.ts index 0612259fc..68d23b8c5 100644 --- a/src/app/wallet/wallet.module.ts +++ b/src/app/wallet/wallet.module.ts @@ -22,6 +22,7 @@ import { HistoryComponent } from './history/history.component'; import { AddressLookupComponent } from './addresslookup/addresslookup.component'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import {MaterialModule} from "@angular/material"; const routes: Routes = [ { @@ -42,8 +43,8 @@ const routes: Routes = [ ModalModule.forRoot(), QRCodeModule, FormsModule, - ReactiveFormsModule - + ReactiveFormsModule, + MaterialModule ], declarations: [ TransactionsTableComponent, From 7b0495ce4c1996ba1e31085cf7cffb0dd7501a11 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Tue, 29 Aug 2017 22:32:54 +0530 Subject: [PATCH 006/177] Add layouts css --- src/styles.scss | 62 ++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 61 insertions(+), 1 deletion(-) diff --git a/src/styles.scss b/src/styles.scss index 40359e494..d6309633c 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,3 +1,4 @@ +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; /* You can add global styles to this file, and also import other style files */ body { @@ -408,4 +409,63 @@ input.verify-sucess { .nc-zoom-bold::before { content: "\ea17"; -} \ No newline at end of file +} + +// Material theme design +.mat-sidenav{ + width: 250px;background-color: #1c2825; color: #fff; + .mat-toolbar{background: transparent;} + .logo-area{ + .mat-toolbar-row{justify-content: center;height: 110px;} + } + .sidemenu{ + a{ + text-decoration: none; + } + .mat-list-item{ + .mat-list-item-content{ + color: #938f8f; + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + border-bottom: 1px solid #222; + .mat-icon{ + margin: 4px 8px 0 0;color: #41ECC2;font-size: 19px; + } + &:hover{ + color: #41ECC2; + } + } + } + } + .sidesubmenu.mat-list { + a{ + text-decoration: none; + } + .mat-list-item{ + .mat-list-item-content{ + color: #fff; + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + border-bottom: none; + .mat-icon{ + margin: 4px 8px 0 0;color: #938f8f;font-size: 19px; + &.fill{color: #41ECC2;} + } + &:hover{ + color: #41ECC2; + } + } + } + } +} +//.submenuarea{display: none;} + +.header-main{border-bottom: 1px solid #ddd;background: #fff;} + +.active > md-list-item > div > md-icon{color: #41ECC2 !important;} + +.containerX{width: 100%;} +.header-icons .material-icons{margin: 0 5px;} + From 56efcb3c05df8f970f04092e0514d0925be660ce Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Tue, 29 Aug 2017 22:33:18 +0530 Subject: [PATCH 007/177] Creates header, footer & sidebar using material --- src/app/app.component.html | 248 ++++++++++++++++++++++++------------- 1 file changed, 164 insertions(+), 84 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index a71bf825d..b72d9c01e 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,91 +1,171 @@ - - - - -
- - + + + -
-
- - - - - Overview - - - - - - Wallet - - - -
- - - Receive - - - - Send + + + + + + + grid_on + Overview + - - - History + + + + + + + Wallet + arrow_forward + - - - Address Book - - - - Add account - - - - - - - + + + + + arrow_forward + Recieve + + + + + arrow_back + Send + + + + + history + History + + + + + people + Addess Book + + + + + library_add + Add Acount + + + + + + + + + - -
- - - {{ title }} +
+
+ lock + lock_open +
-
- -
- - + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + + + From 4a49b6bd0aee36d78deb9512aecdb6b047b6593e Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Tue, 29 Aug 2017 22:35:15 +0530 Subject: [PATCH 008/177] Small changes in blace component --- src/app/wallet/balances/balance.component.css | 1 - src/app/wallet/balances/balance.component.html | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/app/wallet/balances/balance.component.css b/src/app/wallet/balances/balance.component.css index 50a261ef1..fc68d1c95 100644 --- a/src/app/wallet/balances/balance.component.css +++ b/src/app/wallet/balances/balance.component.css @@ -1,7 +1,6 @@ @media screen and (min-width: 1280px) { .balance { line-height: 0.9; - border-right:1.9px solid #EAEAEA; } } diff --git a/src/app/wallet/balances/balance.component.html b/src/app/wallet/balances/balance.component.html index 9c72f2921..b30335a2a 100644 --- a/src/app/wallet/balances/balance.component.html +++ b/src/app/wallet/balances/balance.component.html @@ -1,8 +1,8 @@ -
+ account_balance_wallet {{getBalanceBeforePoint()}} {{getBalancePoint()}} {{getBalanceAfterPoint()}} -
+ {{getTypeOfBalance()}}
From d8cc716b25c2610a04a0a5aff4611838035db291 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Tue, 29 Aug 2017 22:36:02 +0530 Subject: [PATCH 009/177] Add grid view in @overView component --- src/app/overview/overview.component.html | 56 ++++++++++++++++-------- src/app/overview/overview.component.scss | 30 +++++++------ 2 files changed, 54 insertions(+), 32 deletions(-) diff --git a/src/app/overview/overview.component.html b/src/app/overview/overview.component.html index 106921349..206a73a28 100644 --- a/src/app/overview/overview.component.html +++ b/src/app/overview/overview.component.html @@ -1,22 +1,40 @@ -
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
diff --git a/src/app/overview/overview.component.scss b/src/app/overview/overview.component.scss index 41edbc3c0..3ef67def7 100644 --- a/src/app/overview/overview.component.scss +++ b/src/app/overview/overview.component.scss @@ -1,14 +1,18 @@ -.reserved-area { - height: 250px; - border-style: dashed; - border-width: 2px; - border-color: #EBEBEB; - background-color: #F7F7F7; - margin-bottom: 15px; +//.reserved-area { +// height: 250px; +// border-style: dashed; +// border-width: 2px; +// border-color: #EBEBEB; +// background-color: #F7F7F7; +// margin-bottom: 15px; +//} +//.balance-bg { +// background: #fff; +// padding-bottom: 30px; +// padding-top: 20px; +// border-bottom: 1px solid #EAEAEA; +//} + +md-grid-tile { + border: 1px solid #41ECC2; } -.balance-bg { - background: #fff; - padding-bottom: 30px; - padding-top: 20px; - border-bottom: 1px solid #EAEAEA; -} \ No newline at end of file From 5eb7dade46ba69ca5077a612b9dae836da022575 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Thu, 31 Aug 2017 12:58:01 +0530 Subject: [PATCH 010/177] Refacto status component desing --- src/app/core/status/status.component.html | 10 +--------- src/app/core/status/status.component.ts | 9 +++++---- 2 files changed, 6 insertions(+), 13 deletions(-) diff --git a/src/app/core/status/status.component.html b/src/app/core/status/status.component.html index a23a4348c..f6c509ab5 100644 --- a/src/app/core/status/status.component.html +++ b/src/app/core/status/status.component.html @@ -14,12 +14,4 @@ - - - - +{{ getIconEncryption() }} diff --git a/src/app/core/status/status.component.ts b/src/app/core/status/status.component.ts index 0a9f90bdd..fda9d4c97 100644 --- a/src/app/core/status/status.component.ts +++ b/src/app/core/status/status.component.ts @@ -62,15 +62,16 @@ export class StatusComponent implements OnInit { getIconEncryption() { switch (this.encryptionStatus) { - case 'Unencrypted': // TODO: icon? + case 'Unencrypted': + return 'lock_open'; case 'Unlocked': - return '_off'; + return 'lock_open'; case 'Unlocked, staking only': return '_stake'; case 'Locked': - return ''; + return 'lock'; default: - return '_off'; // TODO: icon? + return 'lock_open'; } } From 9481498d0e968ece733155f39dc92bc3aa97e03f Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Sat, 2 Sep 2017 22:36:05 +0530 Subject: [PATCH 011/177] Styling for list design and search input --- src/styles.scss | 39 ++++++++++++++++++++++++++++++++++++++- 1 file changed, 38 insertions(+), 1 deletion(-) diff --git a/src/styles.scss b/src/styles.scss index d6309633c..5cafd2539 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,5 +1,5 @@ @import "~@angular/material/prebuilt-themes/indigo-pink.css"; -/* You can add global styles to this file, and also import other style files */ +@import '~@angular/material/theming'; body { font-family: 'Open Sans', sans-serif; @@ -469,3 +469,40 @@ input.verify-sucess { .containerX{width: 100%;} .header-icons .material-icons{margin: 0 5px;} +.md-expansion-menu > md-expansion-panel{ + color: #ffffff; + background-color: #1c2825; +} + +.mat-expansion-indicator.ng-tns-c7-2.ng-trigger.ng-trigger-indicatorRotate::after{ color: #41ECC2} +.md-expansion-menu span { color: #938f8f; } +.capitalize { + text-transform: capitalize; +} + +/*list*/ +.mat-input-wrapper{ + input.mat-input-element{height: 27px;} + .mat-icon{position: absolute;right: 0;top: 0;cursor: pointer;} + .mat-form-field-underline { + background-color: #ddd; + } + &:after{ + content: ''; + height: 30px; + width: 1px; + position: absolute; + left: -10px; + top: 10px; + background: #ddd; + } + +} + +.list-data{ + .mat-list-item{font-size: 14px;word-wrap: break-word;line-height: 22px;} + .mat-subheader{padding-left:0;padding-right:0; } + .mat-divider{margin: 15px 0;} +} + + From d94aeef1b02172c161e2f777ed426ff4c68eb470 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Sat, 2 Sep 2017 22:37:33 +0530 Subject: [PATCH 012/177] Remove commented html --- src/app/app.component.html | 195 ++++++++++--------------------------- 1 file changed, 52 insertions(+), 143 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index b72d9c01e..63e5d332f 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,5 +1,5 @@ - + @@ -15,157 +15,66 @@ - - - - Wallet - arrow_forward - - - - - - - arrow_forward - Recieve - - - - - arrow_back - Send - - - - - history - History - - - - - people - Addess Book - - - - - library_add - Add Acount - - - - - + + + Wallet + + + + + + arrow_forward + Recieve + + + + + arrow_back + Send + + + + + history + History + + + + + people + Addess Book + + + + + library_add + Add Acount + + + + + + + + {{ title }}
-
- lock - lock_open -
-
+
+ - - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
- + - - - +
+ +
+ From 8b31d6f98a2973fbbf2a04f413266c1e6bff871c Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Sat, 2 Sep 2017 22:39:15 +0530 Subject: [PATCH 013/177] Add Material design and flex module --- src/app/shared/shared.module.ts | 6 +++++- src/app/wallet/wallet.module.ts | 6 ++++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 8fbcf91e8..a5e330e9e 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -11,6 +11,8 @@ import { AccordionModule } from './accordion/accordion.module'; import { HeaderComponent } from './header/header.component'; import { TableComponent } from './table/table.component'; import { GridComponent } from './grid/grid.component'; +import { MaterialModule } from '@angular/material'; +import { FlexLayoutModule } from '@angular/flex-layout'; @NgModule({ imports: [ @@ -20,7 +22,9 @@ import { GridComponent } from './grid/grid.component'; PaginationModule.forRoot(), AccordionModule, ModalModule.forRoot(), - TooltipModule.forRoot() + TooltipModule.forRoot(), + MaterialModule, + FlexLayoutModule ], declarations: [ HeaderComponent, diff --git a/src/app/wallet/wallet.module.ts b/src/app/wallet/wallet.module.ts index 68d23b8c5..c43de3c52 100644 --- a/src/app/wallet/wallet.module.ts +++ b/src/app/wallet/wallet.module.ts @@ -22,7 +22,8 @@ import { HistoryComponent } from './history/history.component'; import { AddressLookupComponent } from './addresslookup/addresslookup.component'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import {MaterialModule} from "@angular/material"; +import { MaterialModule } from '@angular/material'; +import { FlexLayoutModule } from '@angular/flex-layout'; const routes: Routes = [ { @@ -44,7 +45,8 @@ const routes: Routes = [ QRCodeModule, FormsModule, ReactiveFormsModule, - MaterialModule + MaterialModule, + FlexLayoutModule ], declarations: [ TransactionsTableComponent, From 1047eecc9384716ce17b06a88e285d311948de55 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Sat, 2 Sep 2017 22:39:50 +0530 Subject: [PATCH 014/177] Rearrange OverviewComponent --- src/app/overview/overview.component.html | 187 +++++++++++++---------- src/app/overview/overview.component.scss | 30 ++-- src/app/overview/overview.component.ts | 24 +++ 3 files changed, 145 insertions(+), 96 deletions(-) diff --git a/src/app/overview/overview.component.html b/src/app/overview/overview.component.html index 206a73a28..192f0b5d2 100644 --- a/src/app/overview/overview.component.html +++ b/src/app/overview/overview.component.html @@ -1,87 +1,116 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- -
    -
  • Recent Transactions
    • -
-
    - -
- - - + +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
-
-
-
- -
    -
  • Widget Section 2
    • -
-
    - -
- -
+
+ -
-
+ +
+
+
+ +
    +
  • Recent Transactions
    • +
+
    + +
+ + +
-
-
- -
    -
  • Widget Section 3
    • -
-
    - -
- -
+
+ +
    +
  • Widget Section 2
    • +
+
    + +
+ +
+
-
+ +
    +
  • Widget Section 3
    • +
+
    + +
+ +
+
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/overview/overview.component.scss b/src/app/overview/overview.component.scss index 3ef67def7..000306ecf 100644 --- a/src/app/overview/overview.component.scss +++ b/src/app/overview/overview.component.scss @@ -1,18 +1,14 @@ -//.reserved-area { -// height: 250px; -// border-style: dashed; -// border-width: 2px; -// border-color: #EBEBEB; -// background-color: #F7F7F7; -// margin-bottom: 15px; -//} -//.balance-bg { -// background: #fff; -// padding-bottom: 30px; -// padding-top: 20px; -// border-bottom: 1px solid #EAEAEA; -//} - -md-grid-tile { - border: 1px solid #41ECC2; +.reserved-area { + height: 250px; + border-style: dashed; + border-width: 2px; + border-color: #EBEBEB; + background-color: #F7F7F7; + margin-bottom: 15px; +} +.balance-bg { + background: #fff; + padding-bottom: 30px; + padding-top: 20px; + border-bottom: 1px solid #EAEAEA; } diff --git a/src/app/overview/overview.component.ts b/src/app/overview/overview.component.ts index 4ab0355b1..9e23d329e 100644 --- a/src/app/overview/overview.component.ts +++ b/src/app/overview/overview.component.ts @@ -7,9 +7,33 @@ import { Component, OnInit } from '@angular/core'; }) export class OverviewComponent implements OnInit { + public dataSource: any; constructor() { } ngOnInit() { + this.dataSource = [ + {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'}, + {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'}, + {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'}, + {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'}, + {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'}, + {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'}, + {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'}, + {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'}, + {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'}, + {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'}, + {position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'}, + {position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'}, + {position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'}, + {position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'}, + {position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'}, + {position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'}, + {position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'}, + {position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'}, + {position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'}, + {position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'}, + ]; + } } From 354fdbf754fde1ed10cffa3f9893d652ef98bee8 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Sat, 2 Sep 2017 22:40:28 +0530 Subject: [PATCH 015/177] Add tabs design in history component --- src/app/wallet/history/history.component.html | 45 ++++++++++++------- src/app/wallet/history/history.component.ts | 16 ++++--- 2 files changed, 38 insertions(+), 23 deletions(-) diff --git a/src/app/wallet/history/history.component.html b/src/app/wallet/history/history.component.html index 0f3acfb9b..56c501868 100644 --- a/src/app/wallet/history/history.component.html +++ b/src/app/wallet/history/history.component.html @@ -1,22 +1,33 @@ - -
- -
- - -
-
- + + + + +
+
+
+ + + + {{tab}} + + + +
+
+
+ + +
+
+
+
+
+ + diff --git a/src/app/wallet/history/history.component.ts b/src/app/wallet/history/history.component.ts index 75837a132..dfe35adf5 100644 --- a/src/app/wallet/history/history.component.ts +++ b/src/app/wallet/history/history.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; import { TransactionCategory } from '../shared/transaction.model'; @@ -7,18 +7,22 @@ import { TransactionCategory } from '../shared/transaction.model'; templateUrl: './history.component.html', styleUrls: ['./history.component.scss'] }) -export class HistoryComponent implements OnInit { +export class HistoryComponent { category: TransactionCategory = 'all'; + tabsTtitles: Array = ['all', 'send', 'receive', 'stake', 'orphaned Stake']; constructor() { } - ngOnInit() { - } - filterByCategory(category: TransactionCategory) { - console.log(`filter by: ${category}`); this.category = category; } + changeTab(tabIndex: number): void { + if (tabIndex === 4) { + this.filterByCategory(this.tabsTtitles['orphaned_stake']); + } else { + this.filterByCategory(this.tabsTtitles[tabIndex]); + } + } } From 1ba0938b6d065136fa9461bafe768b621a928bb6 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Sat, 2 Sep 2017 22:40:56 +0530 Subject: [PATCH 016/177] Adds tabs design in walletSendComponent --- src/app/wallet/send/send.component.html | 56 +++++++++++++++---------- src/app/wallet/send/send.component.ts | 9 +++- 2 files changed, 41 insertions(+), 24 deletions(-) diff --git a/src/app/wallet/send/send.component.html b/src/app/wallet/send/send.component.html index 9dbb16a74..4dbff2dd5 100644 --- a/src/app/wallet/send/send.component.html +++ b/src/app/wallet/send/send.component.html @@ -1,29 +1,39 @@ + +
- -
-
-
- - - Advanced options - -
+
+
+ + + + Send payment + + + + + Balance transfer + + + +
+
+
+ + + + + + + + + + + + +
@@ -220,3 +230,5 @@
+ + diff --git a/src/app/wallet/send/send.component.ts b/src/app/wallet/send/send.component.ts index 4d6877bec..5411e6771 100644 --- a/src/app/wallet/send/send.component.ts +++ b/src/app/wallet/send/send.component.ts @@ -82,8 +82,13 @@ export class SendComponent implements OnInit, OnDestroy { UI logic */ - sendTab(type: string) { - this.type = type; + sendTab(tabIndex: number) { + if (tabIndex) { + this.type = 'balanceTransfer'; + } else { + this.type = 'sendPayment'; + } + } toggleAdvanced() { From 902e73a3ea605a2bc7dbba155c3223f86702f8e4 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Sat, 2 Sep 2017 22:41:41 +0530 Subject: [PATCH 017/177] Finalize walletReceiveComponent style --- src/app/wallet/receive/receive.component.html | 239 ++++++++++-------- src/app/wallet/receive/receive.component.scss | 34 +++ src/app/wallet/receive/receive.component.ts | 14 +- 3 files changed, 174 insertions(+), 113 deletions(-) diff --git a/src/app/wallet/receive/receive.component.html b/src/app/wallet/receive/receive.component.html index 71aadc470..554df2030 100644 --- a/src/app/wallet/receive/receive.component.html +++ b/src/app/wallet/receive/receive.component.html @@ -1,125 +1,148 @@ - -
- - - -
- - - - -
+ + + +
+
+ + + + Public + + + + + Private + + + +
+ + + search + +
+ -
- +
+
+
-
+ +
Unused address
+ +
+
/{{ getUnusedAddress().id }}
+
{{ getUnusedAddress().label }}
+
+ {{ getUnusedAddress().address }} +
Total received: + +{{ getUnusedAddress().balance }} +
+
+
+
+
+
+
+
+
+ + + -
+ +
Previous addresses
+
+ +
+
/{{ address.id }}
+
{{ address.label }}
+
+ {{ address.address }} +
Total received: + +{{ address.balance }} +
+
+
+
+
+
+
+
+
+ + +
+ - -
Unused address
-
-
- /{{ getUnusedAddress().id }} -
-
- {{ getUnusedAddress().label }} -
-
-
- {{ getUnusedAddress().address }} -
-
- Total received: - +{{ getUnusedAddress().balance }} -
-
-
-
-
-
-
-
-
- + + + + + + + + + + + + + + + + + + + + + + + + -
Previous addresses
-
-
- /{{ address.id }} -
-
- {{ address.label }} -
-
-
- {{ address.address }} -
-
- Total received: - +{{ address.balance }} + +
-
-
-
-
-
-
-
- - -
+
-
+
+ + +
-
- - -
+
+
+ {{ getAddressType() }} address +
+
+ {{ selected.label }} +
+
+
+ {{ word }} +
+
+ +
-
-
- {{ getAddressType() }} address -
-
- {{ selected.label }} -
-
-
- {{ word }}
-
+ + -
-
diff --git a/src/app/wallet/receive/receive.component.scss b/src/app/wallet/receive/receive.component.scss index 7e10a8cbe..85b43e2e5 100644 --- a/src/app/wallet/receive/receive.component.scss +++ b/src/app/wallet/receive/receive.component.scss @@ -254,3 +254,37 @@ app-header { margin-top: 5px; } +.demo-basic { + padding: 0; +} +.demo-basic .mat-card-content { + padding: 16px; +} +.demo-full-width { + width: 100%; +} + +.demo-card { + margin: 16px; +} + +.demo-text-align-end { + text-align: end; +} + +.demo-textarea { + resize: none; + border: none; + overflow: auto; + padding: 0; + background: lightblue; +} + +.mat-form-field-wrapper { + padding-bottom: 1.96em !important; +} + +.mat-form-field-infix { + padding: .8375em 0 !important; + border-top: .84375em solid transparent; +} diff --git a/src/app/wallet/receive/receive.component.ts b/src/app/wallet/receive/receive.component.ts index aa12bda7b..a1934a3f7 100644 --- a/src/app/wallet/receive/receive.component.ts +++ b/src/app/wallet/receive/receive.component.ts @@ -19,7 +19,7 @@ export class ReceiveComponent implements OnInit { public openNewAddressModal: boolean = false; public addLableForm: FormGroup; public label: string; - + // public tabsTitle defaultAddress: Object = { id: 0, label: 'Empty label', @@ -161,6 +161,14 @@ export class ReceiveComponent implements OnInit { this.selectAddress(this.addresses[type][0]); } + changeTab(tab: number) { + if (tab) { + this.setAddressType('private'); + } else { + this.setAddressType('public'); + } + } + getAddressType() { return this.type; } @@ -335,10 +343,6 @@ export class ReceiveComponent implements OnInit { } } - selectInput() { - (document.getElementsByClassName('header-input')[0]).select(); - } - openNewAddress(): void { this.openNewAddressModal = true; } From 9d1855457cfaf67a9f76ea64750f1cedb1e48e93 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Sat, 2 Sep 2017 22:41:58 +0530 Subject: [PATCH 018/177] other html changes --- src/app/shared/header/header.component.scss | 106 ------------------ .../wallet/balances/balance.component.html | 2 +- 2 files changed, 1 insertion(+), 107 deletions(-) diff --git a/src/app/shared/header/header.component.scss b/src/app/shared/header/header.component.scss index c7afe7c25..e69de29bb 100644 --- a/src/app/shared/header/header.component.scss +++ b/src/app/shared/header/header.component.scss @@ -1,106 +0,0 @@ -.center-vertical { - position: relative; - top: 50%; - transform: translateY(-50%); -} - -$header-height: 60px; - -:host { - & { - display: block; - border-top: 1px solid transparent; - border-bottom: 1px solid #EAEAEA; - color: #7A8693; - margin-bottom: 15px; - } - /deep/ { - .color-red { - color: #EE4A52; - } - .color-green { - color: #03E8B0; - } - .icon { - vertical-align: middle; - } - ul.header-nav { - & { - display: inline-block; - list-style-type: none; - padding: 0; - margin: -1px 0; - text-transform: uppercase; - font-size: 12px; - font-weight: bold; - height: $header-height + 2px; - line-height: $header-height + 2px - 8px; - } - & > li { - display: inline-block; - height: inherit; - padding: 0 10px; - border-top: 4px solid transparent; - border-bottom: 4px solid transparent; - } - & > li > a, & > li > .header-link { - display: inline-block; - height: 100%; - text-decoration: none; - color: #7A8693; - cursor: pointer; - } - & > li > a:hover, & > li > .header-link:hover { - color: #000; - } - & > li.active { - border-bottom: 4px solid #41ECC2; - } - & > li.active > a, & > li.active > .header-link { - color: #000; - } - } - form.header-form { - & { - display: inline-block; - height: $header-height; - } - & > * { - @extend .center-vertical; - display: inline-block; - } - & > input[type="text"] { - & { - height: 60%; - background-color: transparent; - border: 0; - outline: none; - padding: 0 10px; - border-left: 1px solid #EAEAEA; - } - &::placeholder { - color: #7A8693; - } - &:focus { - outline: none; - border-left: 1px solid #41ECC2; - } - } - & > button.btn { - & { - text-indent: 0; - height: 60%; - background-color: transparent; - border: 0; - outline: none; - box-shadow: none; - } - &:hover, &:focus { - outline: none; - color: #000; - } - } - } - - } -} diff --git a/src/app/wallet/balances/balance.component.html b/src/app/wallet/balances/balance.component.html index b30335a2a..a4c6e5af6 100644 --- a/src/app/wallet/balances/balance.component.html +++ b/src/app/wallet/balances/balance.component.html @@ -4,5 +4,5 @@ {{getBalancePoint()}} {{getBalanceAfterPoint()}} - {{getTypeOfBalance()}} +

{{getTypeOfBalance()}}

From 1e04a1b5a76fd20e6c544bff06a947005a268cc8 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Mon, 4 Sep 2017 21:57:59 +0530 Subject: [PATCH 019/177] Creates flashNotificationService --- .../services/flash-notification.service.spec.ts | 15 +++++++++++++++ src/app/services/flash-notification.service.ts | 16 ++++++++++++++++ 2 files changed, 31 insertions(+) create mode 100644 src/app/services/flash-notification.service.spec.ts create mode 100644 src/app/services/flash-notification.service.ts diff --git a/src/app/services/flash-notification.service.spec.ts b/src/app/services/flash-notification.service.spec.ts new file mode 100644 index 000000000..fcbb07b7c --- /dev/null +++ b/src/app/services/flash-notification.service.spec.ts @@ -0,0 +1,15 @@ +import { TestBed, inject } from '@angular/core/testing'; + +import { FlashNotificationServiceService } from './flash-notification-service.service'; + +describe('FlashNotificationServiceService', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [FlashNotificationServiceService] + }); + }); + + it('should be created', inject([FlashNotificationServiceService], (service: FlashNotificationServiceService) => { + expect(service).toBeTruthy(); + })); +}); diff --git a/src/app/services/flash-notification.service.ts b/src/app/services/flash-notification.service.ts new file mode 100644 index 000000000..476b679a8 --- /dev/null +++ b/src/app/services/flash-notification.service.ts @@ -0,0 +1,16 @@ +import { Injectable } from '@angular/core'; +import { MdSnackBar, MdSnackBarConfig } from '@angular/material'; + +@Injectable() +export class FlashNotificationService { + + constructor(private snackBar: MdSnackBar) { + } + + open(message: string, action?: string, duration?: number): void { + const config = new MdSnackBarConfig(); + config.duration = duration ? duration : 10000; + this.snackBar.open(message, action ? action : 'Dismiss', config); + } + +} From f07ab43734a4955b501c1ca5d4c73b7377630982 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Mon, 4 Sep 2017 22:16:56 +0530 Subject: [PATCH 020/177] Creates AddAddressLable component --- .../add-address-label.component.html | 13 +++++ .../add-address-label.component.scss | 0 .../add-address-label.component.spec.ts | 25 ++++++++++ .../add-address-label.component.ts | 50 +++++++++++++++++++ 4 files changed, 88 insertions(+) create mode 100644 src/app/wallet/receive/modals/add-address-label/add-address-label.component.html create mode 100644 src/app/wallet/receive/modals/add-address-label/add-address-label.component.scss create mode 100644 src/app/wallet/receive/modals/add-address-label/add-address-label.component.spec.ts create mode 100644 src/app/wallet/receive/modals/add-address-label/add-address-label.component.ts diff --git a/src/app/wallet/receive/modals/add-address-label/add-address-label.component.html b/src/app/wallet/receive/modals/add-address-label/add-address-label.component.html new file mode 100644 index 000000000..2e0f88d8d --- /dev/null +++ b/src/app/wallet/receive/modals/add-address-label/add-address-label.component.html @@ -0,0 +1,13 @@ +

Label for new {{ type }} address

+
+ + + + + + + +
diff --git a/src/app/wallet/receive/modals/add-address-label/add-address-label.component.scss b/src/app/wallet/receive/modals/add-address-label/add-address-label.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/wallet/receive/modals/add-address-label/add-address-label.component.spec.ts b/src/app/wallet/receive/modals/add-address-label/add-address-label.component.spec.ts new file mode 100644 index 000000000..b90b82b81 --- /dev/null +++ b/src/app/wallet/receive/modals/add-address-label/add-address-label.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AddAddressLabelComponent } from './add-address-label.component'; + +describe('AddAddressLabelComponent', () => { + let component: AddAddressLabelComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AddAddressLabelComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AddAddressLabelComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/wallet/receive/modals/add-address-label/add-address-label.component.ts b/src/app/wallet/receive/modals/add-address-label/add-address-label.component.ts new file mode 100644 index 000000000..3ee2af035 --- /dev/null +++ b/src/app/wallet/receive/modals/add-address-label/add-address-label.component.ts @@ -0,0 +1,50 @@ +import { Component, EventEmitter, OnInit, Output } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { RPCService } from '../../../../core/rpc/rpc.service'; +import { MdDialogRef } from '@angular/material'; +import { FlashNotificationService } from '../../../../services/flash-notification.service'; + +@Component({ + selector: 'app-add-address-label', + templateUrl: './add-address-label.component.html', + styleUrls: ['./add-address-label.component.scss'] +}) +export class AddAddressLabelComponent implements OnInit { + + @Output() onAddressAdd = new EventEmitter(); + + public addLableForm: FormGroup; + public type: string; + public label: string; + + constructor( + public dialogRef: MdDialogRef, + private formBuilder: FormBuilder, + private rpc: RPCService, + private flashNotificationService : FlashNotificationService + ) { } + + ngOnInit() { + this.buildForm(); + } + + buildForm(): void { + this.addLableForm = this.formBuilder.group({ + label: this.formBuilder.control(null, [Validators.required]), + }); + } + + onSubmitForm(): void { + const call = this.type === 'public' ? 'getnewaddress' : (this.type === 'private' ? 'getnewstealthaddress' : ''); + + if (!!call) { + this.rpc.call(call, [this.label]) + .subscribe(response => { + this.onAddressAdd.emit(response); + this.dialogRef.close(); + this.flashNotificationService.open(`New ${this.type} address lable added !!`) + }); + } + } + +} From 80a14634c8250b506fe9e69c0e487fe00249e2de Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Mon, 4 Sep 2017 22:19:42 +0530 Subject: [PATCH 021/177] Add component in wallet module --- src/app/wallet/wallet.module.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/app/wallet/wallet.module.ts b/src/app/wallet/wallet.module.ts index c43de3c52..3994b5778 100644 --- a/src/app/wallet/wallet.module.ts +++ b/src/app/wallet/wallet.module.ts @@ -24,6 +24,7 @@ import { AddressLookupComponent } from './addresslookup/addresslookup.component' import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MaterialModule } from '@angular/material'; import { FlexLayoutModule } from '@angular/flex-layout'; +import { AddAddressLabelComponent } from './receive/modals/add-address-label/add-address-label.component'; const routes: Routes = [ { @@ -56,13 +57,17 @@ const routes: Routes = [ HistoryComponent, AddressBookComponent, BalanceComponent, - AddressLookupComponent + AddressLookupComponent, + AddAddressLabelComponent ], exports: [ TransactionsTableComponent, AddressTableComponent, BalanceComponent ], + entryComponents: [ + AddAddressLabelComponent + ], providers: [] }) export class WalletModule { From bf5ef9399e1282122c6f599fb9ff8f485b8448c0 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Mon, 4 Sep 2017 22:24:10 +0530 Subject: [PATCH 022/177] Add flashNotification service --- src/app/app.module.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b464f675b..f05f81cf1 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -23,6 +23,7 @@ import { OverviewComponent } from './overview/overview.component'; import { SettingsComponent } from './settings/settings.component'; import 'hammerjs'; +import { FlashNotificationService } from './services/flash-notification.service'; const routes: Routes = [ { path: 'overview', component: OverviewComponent, data: { title: 'Overview' } }, @@ -52,7 +53,8 @@ const routes: Routes = [ ], providers: [ WindowService, - BlockStatusService + BlockStatusService, + FlashNotificationService ], bootstrap: [ AppComponent ], schemas: [CUSTOM_ELEMENTS_SCHEMA] From 82b2a13b0c92cff21479b2abd4134cb43d044eee Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Mon, 4 Sep 2017 22:24:35 +0530 Subject: [PATCH 023/177] Adds model box in receive component --- src/app/wallet/receive/receive.component.html | 20 ---- src/app/wallet/receive/receive.component.scss | 97 ------------------- src/app/wallet/receive/receive.component.ts | 13 ++- 3 files changed, 11 insertions(+), 119 deletions(-) diff --git a/src/app/wallet/receive/receive.component.html b/src/app/wallet/receive/receive.component.html index 554df2030..6757a3b13 100644 --- a/src/app/wallet/receive/receive.component.html +++ b/src/app/wallet/receive/receive.component.html @@ -142,23 +142,3 @@
- - -
-
- × -
-
Label for new {{ getAddressType() }} address
-
- -
-
- -
-
- -
-
-
diff --git a/src/app/wallet/receive/receive.component.scss b/src/app/wallet/receive/receive.component.scss index 85b43e2e5..c57ab8f71 100644 --- a/src/app/wallet/receive/receive.component.scss +++ b/src/app/wallet/receive/receive.component.scss @@ -191,100 +191,3 @@ button { border-bottom: 1px solid #07B98D; color: #fff; } - -// @TODO: Move this css into component -// Address Model css - -app-header { - li.add-address .icon { - font-size: 28px; - margin-right: 5px; - } -} - -#address-modal { - position: absolute; - z-index: 100000; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - background-color: rgba(0, 0, 0, 0.3); -} - -#address-modal { - &.hide { - width: 0 !important; - height: 0 !important; - display: none; - } - .row { - margin-bottom: 30px; - } -} - -.address-modal-container { - position: absolute; - top: 20%; - left: 50%; - transform: translateX(-50%); - background-color: white; - width: 600px; - padding: 30px; -} - -.close { - position: absolute; - top: 30px; - right: 30px; -} - -.modal-content-header { - font-size: 1.2em; -} - -.modal-label { - text-transform: uppercase; - font-weight: bold; - font-size: 0.7em; - margin-bottom: 10px; -} - -.margin-top-5px { - margin-top: 5px; -} - -.demo-basic { - padding: 0; -} -.demo-basic .mat-card-content { - padding: 16px; -} -.demo-full-width { - width: 100%; -} - -.demo-card { - margin: 16px; -} - -.demo-text-align-end { - text-align: end; -} - -.demo-textarea { - resize: none; - border: none; - overflow: auto; - padding: 0; - background: lightblue; -} - -.mat-form-field-wrapper { - padding-bottom: 1.96em !important; -} - -.mat-form-field-infix { - padding: .8375em 0 !important; - border-top: .84375em solid transparent; -} diff --git a/src/app/wallet/receive/receive.component.ts b/src/app/wallet/receive/receive.component.ts index 18d61f7e7..8e588790f 100644 --- a/src/app/wallet/receive/receive.component.ts +++ b/src/app/wallet/receive/receive.component.ts @@ -3,6 +3,8 @@ import { RPCService } from '../../core/rpc/rpc.service'; import { Log } from 'ng2-logger'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import {MdDialog} from "@angular/material"; +import {AddAddressLabelComponent} from "./modals/add-address-label/add-address-label.component"; @Component({ selector: 'app-receive', @@ -56,7 +58,8 @@ export class ReceiveComponent implements OnInit { log: any = Log.create('receive.component'); constructor(private rpc: RPCService, - private formBuilder: FormBuilder) { + private formBuilder: FormBuilder, + public dialog: MdDialog) { } ngOnInit() { @@ -388,7 +391,13 @@ export class ReceiveComponent implements OnInit { } openNewAddress(): void { - this.openNewAddressModal = true; + const dialogRef = this.dialog.open(AddAddressLabelComponent); + dialogRef.componentInstance.type = this.type; + dialogRef.componentInstance.onAddressAdd.subscribe((result) => { + this.rpc_update(); + this.closeNewAddress(); + this.addLableForm.reset(); + }); } closeNewAddress(): void { From 63407c6467a3f2f10fcbec76d3c6ab057631b78b Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Tue, 5 Sep 2017 15:11:36 +0530 Subject: [PATCH 024/177] Create theme scss file and move all css into theme --- .angular-cli.json | 3 +- src/assets/theme.scss | 138 ++++++++++++++++++++++++++++++++++++++++++ src/styles.scss | 94 ---------------------------- 3 files changed, 140 insertions(+), 95 deletions(-) create mode 100644 src/assets/theme.scss diff --git a/.angular-cli.json b/.angular-cli.json index 455626031..095962975 100644 --- a/.angular-cli.json +++ b/.angular-cli.json @@ -21,7 +21,8 @@ "styles": [ "../node_modules/font-awesome/css/font-awesome.min.css", "../node_modules/open-sans-all/css/open-sans.min.css", - "styles.scss" + "styles.scss", + "assets/theme.scss" ], "scripts": [ ], diff --git a/src/assets/theme.scss b/src/assets/theme.scss new file mode 100644 index 000000000..0d19272fc --- /dev/null +++ b/src/assets/theme.scss @@ -0,0 +1,138 @@ +.mat-sidenav { + width: 250px; + background-color: #1c2825; + color: #fff; + .mat-toolbar { + background: transparent; + } + .logo-area { + .mat-toolbar-row { + justify-content: center; + height: 110px; + } + } + .sidemenu { + a { + text-decoration: none; + } + .mat-list-item { + .mat-list-item-content { + color: #938f8f; + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + border-bottom: 1px solid #222; + .mat-icon { + margin: 4px 8px 0 0; + color: #41ECC2; + font-size: 19px; + } + &:hover { + color: #41ECC2; + } + } + } + } + .sidesubmenu.mat-list { + a { + text-decoration: none; + } + .mat-list-item { + .mat-list-item-content { + color: #fff; + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + border-bottom: none; + .mat-icon { + margin: 4px 8px 0 0; + color: #938f8f; + font-size: 19px; + &.fill { + color: #41ECC2; + } + } + &:hover { + color: #41ECC2; + } + } + } + } +} + +//.submenuarea{display: none;} + +.header-main { + border-bottom: 1px solid #ddd; + background: #fff; +} + +.active > md-list-item > div > md-icon { + color: #41ECC2 !important; +} + +.containerX { + width: 100%; +} + +.header-icons .material-icons { + margin: 0 5px; +} + +.md-expansion-menu > md-expansion-panel { + color: #ffffff; + background-color: #1c2825; +} + +.mat-expansion-indicator.ng-tns-c7-2.ng-trigger.ng-trigger-indicatorRotate::after { + color: #41ECC2 +} + +.md-expansion-menu span { + color: #938f8f; +} + +.capitalize { + text-transform: capitalize; +} + +/*list*/ +.mat-input-wrapper { + input.mat-input-element { + height: 27px; + } + .mat-icon { + position: absolute; + right: 0; + top: 0; + cursor: pointer; + } + .mat-form-field-underline { + background-color: #ddd; + } + &:after { + content: ''; + height: 30px; + width: 1px; + position: absolute; + left: -10px; + top: 10px; + background: #ddd; + } + +} + +.list-data { + .mat-list-item { + font-size: 14px; + word-wrap: break-word; + line-height: 22px; + } + .mat-subheader { + padding-left: 0; + padding-right: 0; + } + .mat-divider { + margin: 15px 0; + } +} diff --git a/src/styles.scss b/src/styles.scss index 5cafd2539..044fd4ec0 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -411,98 +411,4 @@ input.verify-sucess { content: "\ea17"; } -// Material theme design -.mat-sidenav{ - width: 250px;background-color: #1c2825; color: #fff; - .mat-toolbar{background: transparent;} - .logo-area{ - .mat-toolbar-row{justify-content: center;height: 110px;} - } - .sidemenu{ - a{ - text-decoration: none; - } - .mat-list-item{ - .mat-list-item-content{ - color: #938f8f; - font-size: 12px; - text-transform: uppercase; - font-weight: bold; - border-bottom: 1px solid #222; - .mat-icon{ - margin: 4px 8px 0 0;color: #41ECC2;font-size: 19px; - } - &:hover{ - color: #41ECC2; - } - } - } - } - .sidesubmenu.mat-list { - a{ - text-decoration: none; - } - .mat-list-item{ - .mat-list-item-content{ - color: #fff; - font-size: 12px; - text-transform: uppercase; - font-weight: bold; - border-bottom: none; - .mat-icon{ - margin: 4px 8px 0 0;color: #938f8f;font-size: 19px; - &.fill{color: #41ECC2;} - } - &:hover{ - color: #41ECC2; - } - } - } - } -} -//.submenuarea{display: none;} - -.header-main{border-bottom: 1px solid #ddd;background: #fff;} - -.active > md-list-item > div > md-icon{color: #41ECC2 !important;} - -.containerX{width: 100%;} -.header-icons .material-icons{margin: 0 5px;} - -.md-expansion-menu > md-expansion-panel{ - color: #ffffff; - background-color: #1c2825; -} - -.mat-expansion-indicator.ng-tns-c7-2.ng-trigger.ng-trigger-indicatorRotate::after{ color: #41ECC2} -.md-expansion-menu span { color: #938f8f; } -.capitalize { - text-transform: capitalize; -} - -/*list*/ -.mat-input-wrapper{ - input.mat-input-element{height: 27px;} - .mat-icon{position: absolute;right: 0;top: 0;cursor: pointer;} - .mat-form-field-underline { - background-color: #ddd; - } - &:after{ - content: ''; - height: 30px; - width: 1px; - position: absolute; - left: -10px; - top: 10px; - background: #ddd; - } - -} - -.list-data{ - .mat-list-item{font-size: 14px;word-wrap: break-word;line-height: 22px;} - .mat-subheader{padding-left:0;padding-right:0; } - .mat-divider{margin: 15px 0;} -} - From fb501ea132c600d7f315bdab085ef37ab6ee3aa3 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Wed, 6 Sep 2017 23:18:41 +0530 Subject: [PATCH 025/177] Create helper scss file for css helper class --- src/assets/common/helper.scss | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 src/assets/common/helper.scss diff --git a/src/assets/common/helper.scss b/src/assets/common/helper.scss new file mode 100644 index 000000000..70074d600 --- /dev/null +++ b/src/assets/common/helper.scss @@ -0,0 +1,3 @@ +.cursor-pointer { + cursor: pointer; +} From 81b89b40e0a1e240733da55bb25770de2475bb3a Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Wed, 6 Sep 2017 23:19:02 +0530 Subject: [PATCH 026/177] Creates add address book modal --- .../new-address-modal.component.html | 13 +++++ .../new-address-modal.component.scss | 0 .../new-address-modal.component.spec.ts | 25 ++++++++++ .../new-address-modal.component.ts | 48 +++++++++++++++++++ 4 files changed, 86 insertions(+) create mode 100644 src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.html create mode 100644 src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.scss create mode 100644 src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.spec.ts create mode 100644 src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.ts diff --git a/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.html b/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.html new file mode 100644 index 000000000..2e0f88d8d --- /dev/null +++ b/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.html @@ -0,0 +1,13 @@ +

Label for new {{ type }} address

+
+ + + + + + + +
diff --git a/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.scss b/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.spec.ts b/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.spec.ts new file mode 100644 index 000000000..1bbfda20d --- /dev/null +++ b/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NewAddressModalComponent } from './new-address-modal.component'; + +describe('NewAddressModalComponent', () => { + let component: NewAddressModalComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ NewAddressModalComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NewAddressModalComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.ts b/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.ts new file mode 100644 index 000000000..ed96c26d7 --- /dev/null +++ b/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.ts @@ -0,0 +1,48 @@ +import {Component, EventEmitter, OnInit, Output} from '@angular/core'; +import {FormBuilder, FormGroup, Validators} from '@angular/forms'; +import {FlashNotificationService} from '../../../../services/flash-notification.service'; +import {RPCService} from '../../../../core/rpc/rpc.service'; +import {MdDialogRef} from '@angular/material'; + +@Component({ + selector: 'app-new-address-modal', + templateUrl: './new-address-modal.component.html', + styleUrls: ['./new-address-modal.component.scss'] +}) +export class NewAddressModalComponent implements OnInit { + @Output() onAddressAdd = new EventEmitter(); + + public addLableForm: FormGroup; + public type: string; + public label: string; + + constructor(public dialogRef: MdDialogRef, + private formBuilder: FormBuilder, + private rpc: RPCService, + private flashNotificationService: FlashNotificationService) { + } + + ngOnInit() { + this.buildForm(); + } + + buildForm(): void { + this.addLableForm = this.formBuilder.group({ + label: this.formBuilder.control(null, [Validators.required]), + }); + } + + onSubmitForm(): void { + const call = this.type === 'public' ? 'getnewaddress' : (this.type === 'private' ? 'getnewstealthaddress' : ''); + + if (!!call) { + this.rpc.call(call, [this.label]) + .subscribe(response => { + this.onAddressAdd.emit(response); + this.dialogRef.close(); + this.flashNotificationService.open(`New ${this.type} address lable added !!`) + }); + } + } + +} From a45988ab3161934308dea12369c0d04e0f56a7aa Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Wed, 6 Sep 2017 23:19:33 +0530 Subject: [PATCH 027/177] Small change in style and add some style for theme --- src/assets/theme.scss | 26 +++++++++++++++++++++++++- src/styles.scss | 3 +-- 2 files changed, 26 insertions(+), 3 deletions(-) diff --git a/src/assets/theme.scss b/src/assets/theme.scss index 0d19272fc..536e6b0e1 100644 --- a/src/assets/theme.scss +++ b/src/assets/theme.scss @@ -1,3 +1,21 @@ +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; +// Import a pre-built theme +@import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; +@import '~@angular/material/theming'; + +//// Define a mixin that accepts a theme and outputs the color styles for the component. +//@mixin candy-carousel-theme($theme) { +// // Extract whichever individual palettes you need from the theme. +// $primary: map-get($theme, primary); +// $accent: map-get($theme, accent); +// +// // Use mat-color to extract individual colors from a palette as necessary. +// .candy-carousel { +// background-color: mat-color($primary); +// border-color: mat-color($accent, A400); +// } +//} + .mat-sidenav { width: 250px; background-color: #1c2825; @@ -97,7 +115,7 @@ } /*list*/ -.mat-input-wrapper { +.icon-input { input.mat-input-element { height: 27px; } @@ -136,3 +154,9 @@ margin: 15px 0; } } + +/*input css*/ +input[type="text"] { + border: none; +} + diff --git a/src/styles.scss b/src/styles.scss index 044fd4ec0..26122caa4 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,5 +1,4 @@ -@import "~@angular/material/prebuilt-themes/indigo-pink.css"; -@import '~@angular/material/theming'; +@import "assets/common/helper"; body { font-family: 'Open Sans', sans-serif; From c923fcedf9a312755f12a34dc44166c904faf980 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Wed, 6 Sep 2017 23:19:54 +0530 Subject: [PATCH 028/177] Adds some depandancy --- src/app/app.module.ts | 1 - src/app/wallet/wallet.module.ts | 7 +++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f05f81cf1..5894a4987 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -4,7 +4,6 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { RouterModule, Routes } from '@angular/router'; import { NgxElectronModule } from 'ngx-electron'; -import { BsDropdownModule, CollapseModule, ModalModule, ModalDirective, PaginationModule, TooltipModule } from 'ngx-bootstrap'; import { MaterialModule } from '@angular/material'; import { FlexLayoutModule } from '@angular/flex-layout'; diff --git a/src/app/wallet/wallet.module.ts b/src/app/wallet/wallet.module.ts index 3994b5778..4812db9bd 100644 --- a/src/app/wallet/wallet.module.ts +++ b/src/app/wallet/wallet.module.ts @@ -25,6 +25,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MaterialModule } from '@angular/material'; import { FlexLayoutModule } from '@angular/flex-layout'; import { AddAddressLabelComponent } from './receive/modals/add-address-label/add-address-label.component'; +import { NewAddressModalComponent } from './address-book/modal/new-address-modal/new-address-modal.component'; const routes: Routes = [ { @@ -58,7 +59,8 @@ const routes: Routes = [ AddressBookComponent, BalanceComponent, AddressLookupComponent, - AddAddressLabelComponent + AddAddressLabelComponent, + NewAddressModalComponent ], exports: [ TransactionsTableComponent, @@ -66,7 +68,8 @@ const routes: Routes = [ BalanceComponent ], entryComponents: [ - AddAddressLabelComponent + AddAddressLabelComponent, + NewAddressModalComponent ], providers: [] }) From ff435035d4efe707578a32a89b6744e805612346 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Wed, 6 Sep 2017 23:20:48 +0530 Subject: [PATCH 029/177] Re-arrange wallet>receive component style --- src/app/wallet/receive/receive.component.html | 56 +++++++----------- src/app/wallet/receive/receive.component.scss | 6 ++ src/app/wallet/receive/receive.component.ts | 59 +------------------ 3 files changed, 28 insertions(+), 93 deletions(-) diff --git a/src/app/wallet/receive/receive.component.html b/src/app/wallet/receive/receive.component.html index 6757a3b13..30ed0beee 100644 --- a/src/app/wallet/receive/receive.component.html +++ b/src/app/wallet/receive/receive.component.html @@ -16,14 +16,14 @@
- + search
-
+
@@ -40,11 +40,14 @@
-
-
-
-
+ + content_copy + + verified_user + +
@@ -65,10 +68,16 @@
-
-
-
-
+ + content_copy + + + verified_user + +
@@ -76,31 +85,6 @@
- - - - - - - - - - - - - - - - - - - - - - - - - { - if (evt.key.toLowerCase() === 'escape') { - this.closeNewAddress(); - } - } - } - - buildForm(): void { - this.addLableForm = this.formBuilder.group({ - label: this.formBuilder.control(null, [Validators.required]), - }); } - /** * Returns the addresses to display in the UI with regards to both pagination and search/query. * Does _NOT_ return the ununsed address! @@ -361,47 +342,11 @@ export class ReceiveComponent implements OnInit { } } - /** - * Generate a new address with label. - * TODO: Get rid of prompt, use nice modal. - */ - newAddress() { - const call = this.type === 'public' ? 'getnewaddress' : (this.type === 'private' ? 'getnewstealthaddress' : ''); - - if (!!call) { - // this.rpc.oldCall(this, call, [this.label], () => { - // this.log.er('newAddress: successfully retrieved new address'); - // // just call for a complete update, just adding the address isn't possible because - // this.rpc_update(); - // this.closeNewAddress(); - // this.addLableForm.reset(); - // }); - this.rpc.call(call, [this.label]) - .subscribe(response => { - this.log.er('newAddress: successfully retrieved new address'); - // just call for a complete update, just adding the address isn't possible because - this.rpc_update(); - this.closeNewAddress(); - this.addLableForm.reset(); - }, - error => { - this.log.er('error'); - }); - } - } - openNewAddress(): void { const dialogRef = this.dialog.open(AddAddressLabelComponent); dialogRef.componentInstance.type = this.type; dialogRef.componentInstance.onAddressAdd.subscribe((result) => { this.rpc_update(); - this.closeNewAddress(); - this.addLableForm.reset(); }); } - - closeNewAddress(): void { - this.openNewAddressModal = false; - } - } From c1b2cfb65e96dbbfbd155e8e88a2e710107ab91b Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Wed, 6 Sep 2017 23:21:34 +0530 Subject: [PATCH 030/177] adds Tabs desining and other functionality in wallet>send --- .../address-book/address-book.component.html | 107 +++++++++--------- .../address-book/address-book.component.scss | 57 ---------- 2 files changed, 54 insertions(+), 110 deletions(-) diff --git a/src/app/wallet/address-book/address-book.component.html b/src/app/wallet/address-book/address-book.component.html index 68a466249..fd0758031 100644 --- a/src/app/wallet/address-book/address-book.component.html +++ b/src/app/wallet/address-book/address-book.component.html @@ -1,57 +1,58 @@ - -
- -
- - -
-
- -
- - - -
- -
-
- × - -
Add new address to addresbook
-
- -
-
- -
-
- + + + +
+
+ +
+ + + search +
+ + +
+ + +
- + + + + + + + + + + + + + + + + + + + + + + + + + + + -
-
diff --git a/src/app/wallet/address-book/address-book.component.scss b/src/app/wallet/address-book/address-book.component.scss index 3bd1ea4c7..e69de29bb 100644 --- a/src/app/wallet/address-book/address-book.component.scss +++ b/src/app/wallet/address-book/address-book.component.scss @@ -1,57 +0,0 @@ -app-header { - li.add-address .icon { - font-size: 28px; - margin-right: 5px; - } -} - -#address-modal { - position: absolute; - z-index: 100000; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - background-color: rgba(0, 0, 0, 0.3); -} - -#address-modal.hide { - width: 0!important; - height: 0!important; - display: none; -} - -.address-modal-container { - position: absolute; - top: 20%; - left: 50%; - transform: translateX(-50%); - background-color: white; - width: 600px; - padding: 30px; -} - -.close { - position: absolute; - top: 30px; - right: 30px; -} - -.modal-content-header { - font-size: 1.2em; -} - -.modal-label { - text-transform: uppercase; - font-weight: bold; - font-size: 0.7em; - margin-bottom: 10px; -} - -#address-modal .row { - margin-bottom: 30px; -} - -.margin-top-5px { - margin-top: 5px; -} From 3f0279ba5af285ac1a1c685e06c80b352b12b924 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Wed, 6 Sep 2017 23:21:55 +0530 Subject: [PATCH 031/177] Re design send Form --- src/app/wallet/send/send.component.html | 390 ++++++++++-------------- src/app/wallet/send/send.component.scss | 180 +---------- 2 files changed, 178 insertions(+), 392 deletions(-) diff --git a/src/app/wallet/send/send.component.html b/src/app/wallet/send/send.component.html index 4dbff2dd5..da2a8c662 100644 --- a/src/app/wallet/send/send.component.html +++ b/src/app/wallet/send/send.component.html @@ -1,234 +1,178 @@ - -
-
-
- - - - Send payment - - - - - Balance transfer - - - -
-
- -
-
- - - - - - - - - - - - - -
- - -
- -
- -
-
From account
- - - - - - - - - - - Balance: - {{getBalance(send.input)}} PART - -
- -
-
Pay to
- - - - - - -
- -
-
Narration
- -
- -
-
Amount
- -
- -
-
- -
-
Privacy level
-
-
-
+ +
+
+
+ + + + Send payment + + + + + Balance transfer + + + +
+
+
-
-
- Normal - Medium - High
-
- -
- -
- -
-
From account
- - - - - - - - - - - Balance: - {{getBalance(send.input)}} PART - -
- -
-
To account
- - - - - - - - - - - Balance: - {{getBalance(send.output)}} PART - -
- -
-
Pay to
- - - - - - -
- -
-
Amount
- -
- -
-
- -
-
Privacy level
-
-
-
+ + +
+
+
+ + +
+ +
From Account
+ Public + Blind + Private + +
+ Balance: + {{getBalance(send.input)}} PART +
+ +
+ + +
+ + + + + +
+
Pay to:
+ + + + + + +
+ supervisor_account + content_copy + cancel +
+
+ + + + + +
+
Balance:
+ + + + + + + + +
+ supervisor_account + content_copy + cancel +
+
+ + + + + + +
+
Narration
+ + + +
+ + + + + + +
+
Amount
+ + + + + + + Part + + +
+ + + + + + +
+
Privacy level
+ +
+ + +
+ Normal + Medium + High +
+
+
+ + +
+ + + +
+ +
-
-
- Normal - Medium - High -
+
-
- -
- - -
- -
- - - -
-
- × - -
Validate
-
- -
- Do you really want to send {{send.amount}} {{send.currency.toUpperCase()}} - to {{getAddress()}} ? -
- -
- -
- - -
-
-
diff --git a/src/app/wallet/send/send.component.scss b/src/app/wallet/send/send.component.scss index 1f130482b..4c0bcecea 100644 --- a/src/app/wallet/send/send.component.scss +++ b/src/app/wallet/send/send.component.scss @@ -1,177 +1,19 @@ -// TODO vertical-center 50% logic as a class -// TODO global colors -// TODO small-modal as a component (also in wallet/address-book/newAddress) -.balance-label { - text-transform: uppercase; - font-weight: bold; - font-size: 0.9em; +.formTableFullWidth { + width: 100%; } -.balance { - margin: 0; - padding-left:25px; -} -//span { -// padding: 0; -//} + input[type="text"] { - margin-right: 20px; -} -// TODO replace with nomargin class -.row { - margin: 0; -} -.nopadding { - padding: 0; -} -.public-private { - display: flex; - flex-direction: row; - justify-content: space-between; -} -span.icon { - margin-right: 8px; -} -span.icon:hover { - cursor: pointer; -} -.privacy-labels { - display: flex; - flex-direction: row; - justify-content: space-between; - position: absolute; - bottom: 0; - left: 0; - width: 100%; -} -.privacy-label { - text-transform: uppercase; - font-weight: bold; - color: #9aa2ab; - font-size: 0.8em; + border: none !important; } -.privacy-label:hover { - color: black; - cursor: pointer; -} -/* Particl progress bar */ -.progress { - height: 10px; -} -.progress-bar { - background-color: #00e8af; -} -/* Particl Card view */ +.mat-list { + .mat-divider { + margin: 20px 0; + border-color: transparent; + } -.separator { - position: absolute; - top: 50%; - transform: translateY(-50%); - width: 0px; - height: 60%; - border: 1px solid #efefef; -} -.separator + span { - margin-left: 20px; } -.input-info-label { - font-weight: normal; - font-size: 0.9em; - margin: 0 10px 0 10px; - text-transform: uppercase; - color: #9aa2ab; -} -/* Particl Header | Header option */ -// TODO integrate to header component -.header { - position: relative; -} -.header-option { - position: absolute; - right: 0; - top: 0; - height: 100%; -} -.header-option:hover { - color: black; - cursor: pointer; -} -.header-option-icon { - color: #00e8af; - background-color: transparent; - padding: 4px; - border-radius: 5px; - margin: 0 8px 0 15px; -} -.header-option.selected .header-option-icon { - color: white; - background-color: #00e8af; -} -.header-option-text { - position: absolute; - top: 50%; - transform: translateY(-50%); -} -.header-option.selected .header-option-text { - color: black; -} -.header-option-container { - position: absolute; - right: 0; - top: 50%; - transform: translateY(-50%); - height: 60%; - width: 200px; - border-left: 2px solid #efefef; -} - -.small-modal { - position: absolute; - z-index: 100000; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - background-color: rgba(0, 0, 0, 0.3); -} -.small-modal.hide { - width: 0!important; - height: 0!important; - display: none; -} -.address-modal-container { - position: absolute; - top: 20%; - left: 50%; - transform: translateX(-50%); - background-color: white; - padding: 30px; -} -.close { - position: absolute; - top: 30px; - right: 30px; -} -.modal-content-header { - font-size: 1.2em; -} -.small-modal .row { - margin-bottom: 30px; -} -th { - text-transform: uppercase; -} -tr { - cursor: pointer; -} -.validate[disabled] { - background-color: #a1a1a1; - border-bottom-color: #222828; -} -.icon-padding { - padding-top: 7px; -} -.color-red { - color: #EE4A52; +.mat-select-trigger { + padding-top: 21px !important; } From 4b2ee73cfaf438ab891bc17d04f3b4a4b14588b8 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Thu, 7 Sep 2017 22:45:49 +0530 Subject: [PATCH 032/177] Add new address modal component --- .../new-address-modal.component.html | 26 +++- .../new-address-modal.component.ts | 142 +++++++++++++++--- 2 files changed, 142 insertions(+), 26 deletions(-) diff --git a/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.html b/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.html index 2e0f88d8d..191792734 100644 --- a/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.html +++ b/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.html @@ -1,12 +1,22 @@ -

Label for new {{ type }} address

-
- - - - +

Add new address to addresbook

+ + +
+ + + + + + + +
+ - diff --git a/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.ts b/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.ts index ed96c26d7..b0f2f5f88 100644 --- a/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.ts +++ b/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.ts @@ -1,8 +1,9 @@ -import {Component, EventEmitter, OnInit, Output} from '@angular/core'; -import {FormBuilder, FormGroup, Validators} from '@angular/forms'; -import {FlashNotificationService} from '../../../../services/flash-notification.service'; -import {RPCService} from '../../../../core/rpc/rpc.service'; -import {MdDialogRef} from '@angular/material'; +import { Component, OnInit } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { FlashNotificationService } from '../../../../services/flash-notification.service'; +import { RPCService } from '../../../../core/rpc/rpc.service'; +import { MdDialogRef } from '@angular/material'; +import { Log } from 'ng2-logger'; @Component({ selector: 'app-new-address-modal', @@ -10,39 +11,144 @@ import {MdDialogRef} from '@angular/material'; styleUrls: ['./new-address-modal.component.scss'] }) export class NewAddressModalComponent implements OnInit { - @Output() onAddressAdd = new EventEmitter(); - - public addLableForm: FormGroup; - public type: string; + public addAddressBookForm: FormGroup; + public address: string; public label: string; + log: any = Log.create('address-book.component'); + + /* + Validation state + */ + private validAddress: boolean = undefined; + private isMine: boolean = undefined; + constructor(public dialogRef: MdDialogRef, private formBuilder: FormBuilder, - private rpc: RPCService, + private _rpc: RPCService, private flashNotificationService: FlashNotificationService) { } - ngOnInit() { + ngOnInit(): void { this.buildForm(); } buildForm(): void { - this.addLableForm = this.formBuilder.group({ + this.addAddressBookForm = this.formBuilder.group({ + address: this.formBuilder.control(null, [Validators.required]), label: this.formBuilder.control(null, [Validators.required]), }); } + closeModal(): void { + this.addAddressBookForm.reset(); + this.dialogRef.close(); + } + + + /** + * Returns if the entered address is valid or not AND if it is not ours (isMine). + */ + checkAddress(): boolean { + return this.validAddress && !this.isMine; + } + + /* + + RPC Logic + + */ + + + /* + Add address to addressbook + */ + + + /** + * Adds the address to the addressbook if address is valid & has label (in UI textbox) AND is not one of our own addresses. + */ onSubmitForm(): void { - const call = this.type === 'public' ? 'getnewaddress' : (this.type === 'private' ? 'getnewstealthaddress' : ''); + if (!this.validAddress) { + this.flashNotificationService.open('Please enter a valid address!'); + return; + } - if (!!call) { - this.rpc.call(call, [this.label]) + if (this.isMine) { + this.flashNotificationService.open('This is your own address - can not be added to addressbook!'); + return; + } + + if (this.label !== undefined) { + this._rpc.call('manageaddressbook', ['newsend', this.address, this.label]) .subscribe(response => { - this.onAddressAdd.emit(response); - this.dialogRef.close(); - this.flashNotificationService.open(`New ${this.type} address lable added !!`) + this.rpc_addAddressToBook_success(response) + }, + error => { + console.log('error', error); + this.rpc_addAddressToBook_failed(error); + }); + } + } + + /** + * Address was added succesfully to the address book. + */ + rpc_addAddressToBook_success(json: Object): void { + if (json['result'] === 'success') { + this.closeModal(); + this.flashNotificationService.open('Address successfully added to the addressbook!'); + // TODO: remove specialPoll! (updates the address table) + this._rpc.specialPoll(); + } + } + + /** + * Address was not added to the addressbook + * e.g: wallet still locked + */ + rpc_addAddressToBook_failed(json: Object): void { + this.closeModal(); + this.log.er('rpc_addAddressToBook_failed'); + this.log.er(json); + // TODO: remove specialPoll! (updates the address table) + this._rpc.specialPoll(); + } + + /* + Verify address + */ + + /** + * Verify if address is valid through RPC call and set state to validAddress.. + */ + verifyAddress() { + if (this.address === undefined || this.address === '') { + this.validAddress = undefined; + this.isMine = undefined; + return; + } + + this._rpc.call('validateaddress', [this.address]) + .subscribe(response => { + this.rpc_verifyAddress_success(response) + }, + error => { + this.log.er('rpc_validateaddress_failed'); }); + return; + } + + /** + * Callback of verifyAddress, sets state. + */ + rpc_verifyAddress_success(json: Object): void { + this.validAddress = json['isvalid']; + this.isMine = json['ismine']; + if (json['account'] !== undefined) { + this.label = json['account']; } } + } From 0fc16e389b237b1091af7456ab56d48c8cb2aefb Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Thu, 7 Sep 2017 22:47:19 +0530 Subject: [PATCH 033/177] Add modal box in addressBook component --- .../address-book/address-book.component.html | 4 +- .../address-book/address-book.component.ts | 179 +----------------- 2 files changed, 9 insertions(+), 174 deletions(-) diff --git a/src/app/wallet/address-book/address-book.component.html b/src/app/wallet/address-book/address-book.component.html index fd0758031..30f5f680e 100644 --- a/src/app/wallet/address-book/address-book.component.html +++ b/src/app/wallet/address-book/address-book.component.html @@ -3,8 +3,8 @@
-
diff --git a/src/app/wallet/address-book/address-book.component.ts b/src/app/wallet/address-book/address-book.component.ts index eb63f40f5..dd384dbf3 100644 --- a/src/app/wallet/address-book/address-book.component.ts +++ b/src/app/wallet/address-book/address-book.component.ts @@ -1,184 +1,19 @@ -import { Component, OnInit } from '@angular/core'; - -import { RPCService } from '../../core/rpc/rpc.service'; - -import { Log } from 'ng2-logger' +import { Component } from '@angular/core'; +import { MdDialog } from '@angular/material'; +import { NewAddressModalComponent } from './modal/new-address-modal/new-address-modal.component'; @Component({ selector: 'app-address-book', templateUrl: './address-book.component.html', styleUrls: ['./address-book.component.scss'] }) -export class AddressBookComponent implements OnInit { - - log: any = Log.create('address-book.component'); - - /* - UI state - */ - label: string = ''; - address: string; - openNewAddressModal: boolean = false; - - /* - Validation state - */ - private validAddress: boolean = undefined; - private isMine: boolean = undefined; - - constructor(private _rpc: RPCService) { } - - ngOnInit() { - document.onkeydown = evt => { - if (evt.key.toLowerCase() === 'escape') { - this.closeNewAddress(); - } - } - } - - /* - - UI Logic - - */ - - - openNewAddress() { - this.openNewAddressModal = true; - } - - closeNewAddress() { - this.openNewAddressModal = false; - } - - clearAndClose() { - // reset UI state - this.label = ''; - this.address = ''; - - // reset validation - this.validAddress = undefined; - this.isMine = undefined; - - this.closeNewAddress(); - } - - /** - * Returns if the entered address is valid or not AND if it is not ours (isMine). - */ - checkAddress(): boolean { - return this.validAddress && !this.isMine; - } +export class AddressBookComponent { - /* - - RPC Logic - - */ - - - /* - Add address to addressbook - */ - - - /** - * Adds the address to the addressbook if address is valid & has label (in UI textbox) AND is not one of our own addresses. - */ - addAddressToBook() { - if (!this.validAddress) { - alert('Please enter a valid address!'); - return; - } - - if (this.isMine) { - this.clearAndClose(); - alert('This is your own address - can not be added to addressbook!'); - return; - } - - if (this.label !== undefined) { - - // this._rpc.oldCall(this, 'manageaddressbook', ['newsend', this.address, this.label], - // this.rpc_addAddressToBook_success, - // this.rpc_addAddressToBook_failed - // ); - this._rpc.call('manageaddressbook', ['newsend', this.address, this.label]) - .subscribe(response => { - this.rpc_addAddressToBook_success(response) - }, - error => { - this.rpc_addAddressToBook_failed(error); - }); - - this.address = undefined; - this.validAddress = undefined; - this.label = ''; - this.closeNewAddress(); - } - } - - /** - * Address was added succesfully to the address book. - */ - rpc_addAddressToBook_success(json: Object) { - if (json['result'] === 'success') { - alert('Address successfully added to the addressbook!'); - - // TODO: remove specialPoll! (updates the address table) - this._rpc.specialPoll(); - } + constructor(private dialog: MdDialog) { } - /** - * Address was not added to the addressbook - * e.g: wallet still locked - */ - rpc_addAddressToBook_failed(json: Object) { - this.log.er('rpc_addAddressToBook_failed'); - this.log.er(json); - // TODO: remove specialPoll! (updates the address table) - this._rpc.specialPoll(); + openNewAddress(): void { + const dialogRef = this.dialog.open(NewAddressModalComponent); } - - - - /* - Verify address - */ - - - /** - * Verify if address is valid through RPC call and set state to validAddress.. - */ - verifyAddress() { - if (this.address === undefined || this.address === '') { - this.validAddress = undefined; - this.isMine = undefined; - return; - } - - // this._rpc.oldCall(this, 'validateaddress', [this.address], this.rpc_verifyAddress_success); - this._rpc.call('validateaddress', [this.address]) - .subscribe(response => { - this.rpc_verifyAddress_success(response) - }, - error => { - this.log.er('rpc_validateaddress_failed'); - }); - return; - } - - /** - * Callback of verifyAddress, sets state. - */ - rpc_verifyAddress_success(json: Object) { - this.validAddress = json['isvalid']; - this.isMine = json['ismine']; - if (json['account'] !== undefined) { - this.label = json['account']; - } - } - } From 8475e37dcde7e77f5a1f0ef4c89d3d66d0942ca3 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Thu, 7 Sep 2017 22:48:05 +0530 Subject: [PATCH 034/177] Adds receive and send page responsive SCSS --- src/assets/theme.scss | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/assets/theme.scss b/src/assets/theme.scss index 536e6b0e1..1a612bc27 100644 --- a/src/assets/theme.scss +++ b/src/assets/theme.scss @@ -160,3 +160,27 @@ input[type="text"] { border: none; } +.mat-list { + .mat-list-item{ + .mat-list-item-content{ + height: auto !important; + } + + } + +} + + +.address, .address-label { + overflow: hidden; + text-overflow: ellipsis; + background: transparent; + transition: background .3s; + white-space: nowrap; +} + +@media (max-width:960px) { + .mat-form-field { + width: 100%; + } +} From be2ad2acd15fc4515c1055995f6d10c8b32ceedf Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Thu, 7 Sep 2017 22:49:18 +0530 Subject: [PATCH 035/177] Remove example class from template --- .../modals/add-address-label/add-address-label.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/wallet/receive/modals/add-address-label/add-address-label.component.html b/src/app/wallet/receive/modals/add-address-label/add-address-label.component.html index 2e0f88d8d..e57d095cf 100644 --- a/src/app/wallet/receive/modals/add-address-label/add-address-label.component.html +++ b/src/app/wallet/receive/modals/add-address-label/add-address-label.component.html @@ -1,6 +1,6 @@

Label for new {{ type }} address

- + From fe13c7ddb371543fc4640564aa861d48468cf68c Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Thu, 7 Sep 2017 22:50:01 +0530 Subject: [PATCH 036/177] Adds responsive flex design --- src/app/wallet/receive/receive.component.html | 30 +++++++++---------- src/app/wallet/send/send.component.html | 26 ++++++++-------- 2 files changed, 28 insertions(+), 28 deletions(-) diff --git a/src/app/wallet/receive/receive.component.html b/src/app/wallet/receive/receive.component.html index 30ed0beee..d4f3908fb 100644 --- a/src/app/wallet/receive/receive.component.html +++ b/src/app/wallet/receive/receive.component.html @@ -1,7 +1,7 @@ -
+
@@ -16,7 +16,7 @@
- + search @@ -24,13 +24,13 @@
-
-
+
+
Unused address
-
+
/{{ getUnusedAddress().id }}
{{ getUnusedAddress().label }}
@@ -39,14 +39,14 @@ +{{ getUnusedAddress().balance }}
-
- + content_copy - verified_user + verified_user -
@@ -58,7 +58,7 @@
Previous addresses
-
+
/{{ address.id }}
{{ address.label }}
@@ -67,15 +67,15 @@ +{{ address.balance }}
-
- + content_copy - verified_user + verified_user -
@@ -98,7 +98,7 @@
-
+
-
+
@@ -18,7 +18,7 @@
- @@ -32,12 +32,12 @@ -
- -
From Account
- Public - Blind - Private +
+ +
From Account
+ Public + Blind + Private
Balance: @@ -53,7 +53,7 @@
From Account
-
+
Pay to:
Pay to: -
+
Balance:
Balance: -
+
Narration
Narration -
+
Amount
@@ -136,7 +136,7 @@
Amount
-
+
Privacy level
From ffbd47aa0f72c55ed249c0af4126d11b274507b3 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Thu, 7 Sep 2017 22:50:56 +0530 Subject: [PATCH 037/177] Adds address-table page desing --- .../address-table.component.html | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/src/app/wallet/shared/address-table/address-table.component.html b/src/app/wallet/shared/address-table/address-table.component.html index 6cf3e1195..5ed5bbde5 100644 --- a/src/app/wallet/shared/address-table/address-table.component.html +++ b/src/app/wallet/shared/address-table/address-table.component.html @@ -1,3 +1,36 @@ +
+
+ + +
Previous addresses
+
+ +
+
{{ address.label }}
+
+ Address: + {{ address.address }} +
+
+ + content_copy + + + verified_user + + +
+
+ + +
+ + +
+
Label
From e7b68b39333edf78a5795d00764fdc498bc5de8b Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Fri, 8 Sep 2017 23:07:54 +0530 Subject: [PATCH 038/177] Create partgui theme --- src/assets/theme/partgui-theme.css | 1832 ++++++++++++++++++++++++++++ 1 file changed, 1832 insertions(+) create mode 100644 src/assets/theme/partgui-theme.css diff --git a/src/assets/theme/partgui-theme.css b/src/assets/theme/partgui-theme.css new file mode 100644 index 000000000..18142707e --- /dev/null +++ b/src/assets/theme/partgui-theme.css @@ -0,0 +1,1832 @@ +.mat-elevation-z0 { + box-shadow: 0 0 0 0 rgba(0, 0, 0, .2), 0 0 0 0 rgba(0, 0, 0, .14), 0 0 0 0 rgba(0, 0, 0, .12) +} + +.mat-elevation-z1 { + box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12) +} + +.mat-elevation-z2 { + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12) +} + +.mat-elevation-z3 { + box-shadow: 0 3px 3px -2px rgba(0, 0, 0, .2), 0 3px 4px 0 rgba(0, 0, 0, .14), 0 1px 8px 0 rgba(0, 0, 0, .12) +} + +.mat-elevation-z4 { + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12) +} + +.mat-elevation-z5 { + box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 5px 8px 0 rgba(0, 0, 0, .14), 0 1px 14px 0 rgba(0, 0, 0, .12) +} + +.mat-elevation-z6 { + box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12) +} + +.mat-elevation-z7 { + box-shadow: 0 4px 5px -2px rgba(0, 0, 0, .2), 0 7px 10px 1px rgba(0, 0, 0, .14), 0 2px 16px 1px rgba(0, 0, 0, .12) +} + +.mat-elevation-z8 { + box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12) +} + +.mat-elevation-z9 { + box-shadow: 0 5px 6px -3px rgba(0, 0, 0, .2), 0 9px 12px 1px rgba(0, 0, 0, .14), 0 3px 16px 2px rgba(0, 0, 0, .12) +} + +.mat-elevation-z10 { + box-shadow: 0 6px 6px -3px rgba(0, 0, 0, .2), 0 10px 14px 1px rgba(0, 0, 0, .14), 0 4px 18px 3px rgba(0, 0, 0, .12) +} + +.mat-elevation-z11 { + box-shadow: 0 6px 7px -4px rgba(0, 0, 0, .2), 0 11px 15px 1px rgba(0, 0, 0, .14), 0 4px 20px 3px rgba(0, 0, 0, .12) +} + +.mat-elevation-z12 { + box-shadow: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 12px 17px 2px rgba(0, 0, 0, .14), 0 5px 22px 4px rgba(0, 0, 0, .12) +} + +.mat-elevation-z13 { + box-shadow: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 13px 19px 2px rgba(0, 0, 0, .14), 0 5px 24px 4px rgba(0, 0, 0, .12) +} + +.mat-elevation-z14 { + box-shadow: 0 7px 9px -4px rgba(0, 0, 0, .2), 0 14px 21px 2px rgba(0, 0, 0, .14), 0 5px 26px 4px rgba(0, 0, 0, .12) +} + +.mat-elevation-z15 { + box-shadow: 0 8px 9px -5px rgba(0, 0, 0, .2), 0 15px 22px 2px rgba(0, 0, 0, .14), 0 6px 28px 5px rgba(0, 0, 0, .12) +} + +.mat-elevation-z16 { + box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12) +} + +.mat-elevation-z17 { + box-shadow: 0 8px 11px -5px rgba(0, 0, 0, .2), 0 17px 26px 2px rgba(0, 0, 0, .14), 0 6px 32px 5px rgba(0, 0, 0, .12) +} + +.mat-elevation-z18 { + box-shadow: 0 9px 11px -5px rgba(0, 0, 0, .2), 0 18px 28px 2px rgba(0, 0, 0, .14), 0 7px 34px 6px rgba(0, 0, 0, .12) +} + +.mat-elevation-z19 { + box-shadow: 0 9px 12px -6px rgba(0, 0, 0, .2), 0 19px 29px 2px rgba(0, 0, 0, .14), 0 7px 36px 6px rgba(0, 0, 0, .12) +} + +.mat-elevation-z20 { + box-shadow: 0 10px 13px -6px rgba(0, 0, 0, .2), 0 20px 31px 3px rgba(0, 0, 0, .14), 0 8px 38px 7px rgba(0, 0, 0, .12) +} + +.mat-elevation-z21 { + box-shadow: 0 10px 13px -6px rgba(0, 0, 0, .2), 0 21px 33px 3px rgba(0, 0, 0, .14), 0 8px 40px 7px rgba(0, 0, 0, .12) +} + +.mat-elevation-z22 { + box-shadow: 0 10px 14px -6px rgba(0, 0, 0, .2), 0 22px 35px 3px rgba(0, 0, 0, .14), 0 8px 42px 7px rgba(0, 0, 0, .12) +} + +.mat-elevation-z23 { + box-shadow: 0 11px 14px -7px rgba(0, 0, 0, .2), 0 23px 36px 3px rgba(0, 0, 0, .14), 0 9px 44px 8px rgba(0, 0, 0, .12) +} + +.mat-elevation-z24 { + box-shadow: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12) +} + +.mat-h1, .mat-headline, .mat-typography h1 { + font: 400 24px/32px Roboto, "Helvetica Neue", sans-serif; + margin: 0 0 16px +} + +.mat-h2, .mat-title, .mat-typography h2 { + font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif; + margin: 0 0 16px +} + +.mat-h3, .mat-subheading-2, .mat-typography h3 { + font: 400 16px/28px Roboto, "Helvetica Neue", sans-serif; + margin: 0 0 16px +} + +.mat-h4, .mat-subheading-1, .mat-typography h4 { + font: 400 15px/24px Roboto, "Helvetica Neue", sans-serif; + margin: 0 0 16px +} + +.mat-h5, .mat-typography h5 { + font-size: 11.62px; + font-weight: 400; + font-family: Roboto, "Helvetica Neue", sans-serif; + line-height: 20px; + margin: 0 0 12px +} + +.mat-h6, .mat-typography h6 { + font-size: 9.38px; + font-weight: 400; + font-family: Roboto, "Helvetica Neue", sans-serif; + line-height: 20px; + margin: 0 0 12px +} + +.mat-body-2, .mat-body-strong { + font: 500 14px/24px Roboto, "Helvetica Neue", sans-serif +} + +.mat-body, .mat-body-1, .mat-typography { + font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif +} + +.mat-body p, .mat-body-1 p, .mat-typography p { + margin: 0 0 12px +} + +.mat-caption, .mat-small { + font: 400 12px/20px Roboto, "Helvetica Neue", sans-serif +} + +.mat-display-4, .mat-typography .mat-display-4 { + font: 300 112px/112px Roboto, "Helvetica Neue", sans-serif; + margin: 0 0 56px; + letter-spacing: -.05em +} + +.mat-display-3, .mat-typography .mat-display-3 { + font: 400 56px/56px Roboto, "Helvetica Neue", sans-serif; + margin: 0 0 64px; + letter-spacing: -.02em +} + +.mat-display-2, .mat-typography .mat-display-2 { + font: 400 45px/48px Roboto, "Helvetica Neue", sans-serif; + margin: 0 0 64px; + letter-spacing: -.005em +} + +.mat-display-1, .mat-typography .mat-display-1 { + font: 400 34px/40px Roboto, "Helvetica Neue", sans-serif; + margin: 0 0 64px +} + +.mat-button, .mat-fab, .mat-icon-button, .mat-mini-fab, .mat-raised-button { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500 +} + +.mat-button-toggle { + font-family: Roboto, "Helvetica Neue", sans-serif +} + +.mat-card { + font-family: Roboto, "Helvetica Neue", sans-serif +} + +.mat-card-title { + font-size: 24px; + font-weight: 400 +} + +.mat-card-content, .mat-card-header .mat-card-title, .mat-card-subtitle { + font-size: 14px +} + +.mat-checkbox { + font-family: Roboto, "Helvetica Neue", sans-serif +} + +.mat-checkbox-layout .mat-checkbox-label { + line-height: 24px +} + +.mat-chip { + font-size: 13px; + line-height: 18px +} + +.mat-chip .mat-chip-remove.mat-icon { + font-size: 18px +} + +.mat-table { + font-family: Roboto, "Helvetica Neue", sans-serif +} + +.mat-header-cell { + font-size: 12px; + font-weight: 500 +} + +.mat-cell { + font-size: 14px +} + +.mat-calendar { + font-family: Roboto, "Helvetica Neue", sans-serif +} + +.mat-calendar-body { + font-size: 13px +} + +.mat-calendar-body-label, .mat-calendar-period-button { + font-size: 14px; + font-weight: 500 +} + +.mat-calendar-table-header th { + font-size: 11px; + font-weight: 400 +} + +.mat-dialog-title { + font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif +} + +.mat-expansion-panel-header { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 15px; + font-weight: 400 +} + +.mat-expansion-panel-content { + font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif +} + +.mat-form-field { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: inherit; + font-weight: 400; + line-height: 1.125 +} + +.mat-form-field-wrapper { + padding-bottom: 1.25em +} + +.mat-form-field-prefix .mat-icon, .mat-form-field-suffix .mat-icon { + font-size: 150%; + line-height: 1.125 +} + +.mat-form-field-prefix .mat-icon-button, .mat-form-field-suffix .mat-icon-button { + height: 1.5em; + width: 1.5em +} + +.mat-form-field-prefix .mat-icon-button .mat-icon, .mat-form-field-suffix .mat-icon-button .mat-icon { + height: 1.125em; + line-height: 1.125 +} + +.mat-form-field-infix { + padding: .4375em 0; + border-top: .84375em solid transparent +} + +.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { + transform: translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px); + -ms-transform: translateY(-1.28125em) scale(.75); + width: 133.33333% +} + +.mat-form-field-placeholder-wrapper { + top: -.84375em; + padding-top: .84375em +} + +.mat-form-field-placeholder { + top: 1.28125em +} + +.mat-focused .mat-form-field-placeholder.mat-form-field-float, .mat-form-field-placeholder.mat-form-field-float:not(.mat-form-field-empty) { + transform: translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px); + -ms-transform: translateY(-1.28125em) scale(.75); + width: 133.33333% +} + +.mat-form-field-underline { + bottom: 1.25em +} + +.mat-form-field-subscript-wrapper { + font-size: 75%; + margin-top: .54167em; + top: calc(100% - 1.66667em) +} + +.mat-grid-tile-footer, .mat-grid-tile-header { + font-size: 14px +} + +.mat-grid-tile-footer .mat-line, .mat-grid-tile-header .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box +} + +.mat-grid-tile-footer .mat-line:nth-child(n+2), .mat-grid-tile-header .mat-line:nth-child(n+2) { + font-size: 12px +} + +input.mat-input-element { + margin-top: -.0625em +} + +.mat-menu-item { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 16px +} + +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 12px +} + +.mat-radio-button { + font-family: Roboto, "Helvetica Neue", sans-serif +} + +.mat-select { + padding-top: 16px; + font-family: Roboto, "Helvetica Neue", sans-serif +} + +.mat-select-trigger { + font-size: 16px +} + +.mat-slide-toggle-content { + font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif +} + +.mat-slider-thumb-label-text { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500 +} + +.mat-stepper-horizontal, .mat-stepper-vertical { + font-family: Roboto, "Helvetica Neue", sans-serif +} + +.mat-tab-group { + font-family: Roboto, "Helvetica Neue", sans-serif +} + +.mat-tab-label, .mat-tab-link { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500 +} + +.mat-toolbar, .mat-toolbar h1, .mat-toolbar h2, .mat-toolbar h3, .mat-toolbar h4, .mat-toolbar h5, .mat-toolbar h6 { + font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif; + margin: 0 +} + +.mat-tooltip { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 10px; + padding-top: 6px; + padding-bottom: 6px +} + +.mat-list-item { + font-family: Roboto, "Helvetica Neue", sans-serif +} + +.mat-list-option { + font-family: Roboto, "Helvetica Neue", sans-serif +} + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { + font-size: 16px +} + +.mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box +} + +.mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) { + font-size: 14px +} + +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + font-size: 16px +} + +.mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box +} + +.mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) { + font-size: 14px +} + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500 +} + +.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item { + font-size: 12px +} + +.mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box +} + +.mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) { + font-size: 12px +} + +.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option { + font-size: 12px +} + +.mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + box-sizing: border-box +} + +.mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) { + font-size: 12px +} + +.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500 +} + +.mat-option { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 16px +} + +.mat-optgroup-label { + font: 500 14px/24px Roboto, "Helvetica Neue", sans-serif +} + +.mat-simple-snackbar { + font-family: Roboto, "Helvetica Neue", sans-serif; + font-size: 14px +} + +.mat-simple-snackbar-action { + line-height: 1; + font-family: inherit; + font-size: inherit; + font-weight: 500 +} + +.mat-ripple { + overflow: hidden +} + +@media screen and (-ms-high-contrast: active) { + .mat-ripple { + display: none + } +} + +.mat-ripple.mat-ripple-unbounded { + overflow: visible +} + +.mat-ripple-element { + position: absolute; + border-radius: 50%; + pointer-events: none; + transition: opacity, transform 0s cubic-bezier(0, 0, .2, 1); + transform: scale(0) +} + +.mat-option { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + line-height: 48px; + height: 48px; + padding: 0 16px; + text-align: left; + text-decoration: none; + position: relative; + cursor: pointer; + outline: 0 +} + +.mat-option[disabled] { + cursor: default +} + +[dir=rtl] .mat-option { + text-align: right +} + +.mat-option .mat-icon { + margin-right: 16px +} + +[dir=rtl] .mat-option .mat-icon { + margin-left: 16px; + margin-right: 0 +} + +.mat-option[aria-disabled=true] { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: default +} + +.mat-optgroup .mat-option:not(.mat-option-multiple) { + padding-left: 32px +} + +[dir=rtl] .mat-optgroup .mat-option:not(.mat-option-multiple) { + padding-left: 16px; + padding-right: 32px +} + +.mat-option-ripple { + top: 0; + left: 0; + right: 0; + bottom: 0; + position: absolute; + pointer-events: none +} + +@media screen and (-ms-high-contrast: active) { + .mat-option-ripple { + opacity: .5 + } +} + +.mat-option-pseudo-checkbox { + margin-right: 8px +} + +[dir=rtl] .mat-option-pseudo-checkbox { + margin-left: 8px; + margin-right: 0 +} + +.mat-optgroup-label { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + line-height: 48px; + height: 48px; + padding: 0 16px; + text-align: left; + text-decoration: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: default +} + +.mat-optgroup-label[disabled] { + cursor: default +} + +[dir=rtl] .mat-optgroup-label { + text-align: right +} + +.mat-optgroup-label .mat-icon { + margin-right: 16px +} + +[dir=rtl] .mat-optgroup-label .mat-icon { + margin-left: 16px; + margin-right: 0 +} + +.cdk-visually-hidden { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px +} + +.cdk-global-overlay-wrapper, .cdk-overlay-container { + pointer-events: none; + top: 0; + left: 0; + height: 100%; + width: 100% +} + +.cdk-overlay-container { + position: fixed; + z-index: 1000 +} + +.cdk-global-overlay-wrapper { + display: flex; + position: absolute; + z-index: 1000 +} + +.cdk-overlay-pane { + position: absolute; + pointer-events: auto; + box-sizing: border-box; + z-index: 1000 +} + +.cdk-overlay-backdrop { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 1000; + pointer-events: auto; + -webkit-tap-highlight-color: transparent; + transition: opacity .4s cubic-bezier(.25, .8, .25, 1); + opacity: 0 +} + +.cdk-overlay-backdrop.cdk-overlay-backdrop-showing { + opacity: .48 +} + +.cdk-overlay-dark-backdrop { + background: rgba(0, 0, 0, .6) +} + +.cdk-overlay-transparent-backdrop { + background: 0 0 +} + +.cdk-global-scrollblock { + position: fixed; + width: 100%; + overflow-y: scroll +} + +.mat-ripple-element { + background-color: rgba(0, 0, 0, .1) +} + +.mat-option { + color: rgba(0, 0, 0, .87) +} + +.mat-option:focus:not(.mat-option-disabled), .mat-option:hover:not(.mat-option-disabled) { + background: rgba(0, 0, 0, .04) +} + +.mat-primary .mat-option.mat-selected:not(.mat-option-disabled) { + color: #41ECC2 +} + +.mat-accent .mat-option.mat-selected:not(.mat-option-disabled) { + color: #ffd740 +} + +.mat-warn .mat-option.mat-selected:not(.mat-option-disabled) { + color: #f44336 +} + +.mat-option.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) { + background: rgba(0, 0, 0, .04) +} + +.mat-option.mat-active { + background: rgba(0, 0, 0, .04); + color: rgba(0, 0, 0, .87) +} + +.mat-option.mat-option-disabled { + color: rgba(0, 0, 0, .38) +} + +.mat-optgroup-label { + color: rgba(0, 0, 0, .54) +} + +.mat-optgroup-disabled .mat-optgroup-label { + color: rgba(0, 0, 0, .38) +} + +.mat-pseudo-checkbox { + color: rgba(0, 0, 0, .54) +} + +.mat-pseudo-checkbox::after { + color: #fafafa +} + +.mat-accent .mat-pseudo-checkbox-checked, .mat-accent .mat-pseudo-checkbox-indeterminate, .mat-pseudo-checkbox-checked, .mat-pseudo-checkbox-indeterminate { + background: #ffd740 +} + +.mat-primary .mat-pseudo-checkbox-checked, .mat-primary .mat-pseudo-checkbox-indeterminate { + background: #41ECC2 +} + +.mat-warn .mat-pseudo-checkbox-checked, .mat-warn .mat-pseudo-checkbox-indeterminate { + background: #f44336 +} + +.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled { + background: #b0b0b0 +} + +.mat-app-background { + background-color: #fafafa +} + +.mat-theme-loaded-marker { + display: none +} + +.mat-autocomplete-panel { + background: #fff; + color: rgba(0, 0, 0, .87) +} + +.mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover) { + background: #fff +} + +.mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover):not(.mat-option-disabled) { + color: rgba(0, 0, 0, .87) +} + +.mat-button, .mat-icon-button { + background: 0 0 +} + +.mat-button.mat-primary .mat-button-focus-overlay, .mat-icon-button.mat-primary .mat-button-focus-overlay { + background-color: rgba(103, 58, 183, .12) +} + +.mat-button.mat-accent .mat-button-focus-overlay, .mat-icon-button.mat-accent .mat-button-focus-overlay { + background-color: rgba(255, 215, 64, .12) +} + +.mat-button.mat-warn .mat-button-focus-overlay, .mat-icon-button.mat-warn .mat-button-focus-overlay { + background-color: rgba(244, 67, 54, .12) +} + +.mat-button[disabled] .mat-button-focus-overlay, .mat-icon-button[disabled] .mat-button-focus-overlay { + background-color: transparent +} + +.mat-button.mat-primary, .mat-icon-button.mat-primary { + color: #41ECC2 +} + +.mat-button.mat-accent, .mat-icon-button.mat-accent { + color: #ffd740 +} + +.mat-button.mat-warn, .mat-icon-button.mat-warn { + color: #f44336 +} + +.mat-button.mat-accent[disabled], .mat-button.mat-primary[disabled], .mat-button.mat-warn[disabled], .mat-button[disabled][disabled], .mat-icon-button.mat-accent[disabled], .mat-icon-button.mat-primary[disabled], .mat-icon-button.mat-warn[disabled], .mat-icon-button[disabled][disabled] { + color: rgba(0, 0, 0, .38) +} + +.mat-fab, .mat-mini-fab, .mat-raised-button { + color: rgba(0, 0, 0, .87); + background-color: #fff +} + +.mat-fab.mat-primary, .mat-mini-fab.mat-primary, .mat-raised-button.mat-primary { + color: rgba(255, 255, 255, .87) +} + +.mat-fab.mat-accent, .mat-mini-fab.mat-accent, .mat-raised-button.mat-accent { + color: rgba(0, 0, 0, .87) +} + +.mat-fab.mat-warn, .mat-mini-fab.mat-warn, .mat-raised-button.mat-warn { + color: #fff +} + +.mat-fab.mat-accent[disabled], .mat-fab.mat-primary[disabled], .mat-fab.mat-warn[disabled], .mat-fab[disabled][disabled], .mat-mini-fab.mat-accent[disabled], .mat-mini-fab.mat-primary[disabled], .mat-mini-fab.mat-warn[disabled], .mat-mini-fab[disabled][disabled], .mat-raised-button.mat-accent[disabled], .mat-raised-button.mat-primary[disabled], .mat-raised-button.mat-warn[disabled], .mat-raised-button[disabled][disabled] { + color: rgba(0, 0, 0, .38) +} + +.mat-fab.mat-primary, .mat-mini-fab.mat-primary, .mat-raised-button.mat-primary { + background-color: #41ECC2 +} + +.mat-fab.mat-accent, .mat-mini-fab.mat-accent, .mat-raised-button.mat-accent { + background-color: #ffd740 +} + +.mat-fab.mat-warn, .mat-mini-fab.mat-warn, .mat-raised-button.mat-warn { + background-color: #f44336 +} + +.mat-fab.mat-accent[disabled], .mat-fab.mat-primary[disabled], .mat-fab.mat-warn[disabled], .mat-fab[disabled][disabled], .mat-mini-fab.mat-accent[disabled], .mat-mini-fab.mat-primary[disabled], .mat-mini-fab.mat-warn[disabled], .mat-mini-fab[disabled][disabled], .mat-raised-button.mat-accent[disabled], .mat-raised-button.mat-primary[disabled], .mat-raised-button.mat-warn[disabled], .mat-raised-button[disabled][disabled] { + background-color: rgba(0, 0, 0, .12) +} + +.mat-fab.mat-primary .mat-ripple-element, .mat-mini-fab.mat-primary .mat-ripple-element, .mat-raised-button.mat-primary .mat-ripple-element { + background-color: rgba(255, 255, 255, .2) +} + +.mat-fab.mat-accent .mat-ripple-element, .mat-mini-fab.mat-accent .mat-ripple-element, .mat-raised-button.mat-accent .mat-ripple-element { + background-color: rgba(0, 0, 0, .2) +} + +.mat-fab.mat-warn .mat-ripple-element, .mat-mini-fab.mat-warn .mat-ripple-element, .mat-raised-button.mat-warn .mat-ripple-element { + background-color: rgba(255, 255, 255, .2) +} + +.mat-button.mat-primary .mat-ripple-element { + background-color: rgba(103, 58, 183, .1) +} + +.mat-button.mat-accent .mat-ripple-element { + background-color: rgba(255, 215, 64, .1) +} + +.mat-button.mat-warn .mat-ripple-element { + background-color: rgba(244, 67, 54, .1) +} + +.mat-icon-button.mat-primary .mat-ripple-element { + background-color: rgba(103, 58, 183, .2) +} + +.mat-icon-button.mat-accent .mat-ripple-element { + background-color: rgba(255, 215, 64, .2) +} + +.mat-icon-button.mat-warn .mat-ripple-element { + background-color: rgba(244, 67, 54, .2) +} + +.mat-button-toggle { + color: rgba(0, 0, 0, .38) +} + +.mat-button-toggle.cdk-focused .mat-button-toggle-focus-overlay { + background-color: rgba(0, 0, 0, .06) +} + +.mat-button-toggle-checked { + background-color: #e0e0e0; + color: rgba(0, 0, 0, .54) +} + +.mat-button-toggle-disabled { + background-color: #eee; + color: rgba(0, 0, 0, .38) +} + +.mat-button-toggle-disabled.mat-button-toggle-checked { + background-color: #bdbdbd +} + +.mat-card { + background: #fff; + color: rgba(0, 0, 0, .87) +} + +.mat-card-subtitle { + color: rgba(0, 0, 0, .54) +} + +.mat-checkbox-frame { + border-color: rgba(0, 0, 0, .54) +} + +.mat-checkbox-checkmark { + fill: #fafafa +} + +.mat-checkbox-checkmark-path { + stroke: #fafafa !important +} + +.mat-checkbox-mixedmark { + background-color: #fafafa +} + +.mat-checkbox-checked.mat-primary .mat-checkbox-background, .mat-checkbox-indeterminate.mat-primary .mat-checkbox-background { + background-color: #41ECC2 +} + +.mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background { + background-color: #ffd740 +} + +.mat-checkbox-checked.mat-warn .mat-checkbox-background, .mat-checkbox-indeterminate.mat-warn .mat-checkbox-background { + background-color: #f44336 +} + +.mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background { + background-color: #b0b0b0 +} + +.mat-checkbox-disabled:not(.mat-checkbox-checked) .mat-checkbox-frame { + border-color: #b0b0b0 +} + +.mat-checkbox-disabled .mat-checkbox-label { + color: #b0b0b0 +} + +.mat-checkbox:not(.mat-checkbox-disabled).mat-primary .mat-checkbox-ripple .mat-ripple-element { + background-color: rgba(103, 58, 183, .26) +} + +.mat-checkbox:not(.mat-checkbox-disabled).mat-accent .mat-checkbox-ripple .mat-ripple-element { + background-color: rgba(255, 215, 64, .26) +} + +.mat-checkbox:not(.mat-checkbox-disabled).mat-warn .mat-checkbox-ripple .mat-ripple-element { + background-color: rgba(244, 67, 54, .26) +} + +.mat-chip:not(.mat-basic-chip) { + background-color: #e0e0e0; + color: rgba(0, 0, 0, .87) +} + +.mat-chip:not(.mat-basic-chip) .mat-chip-remove { + color: rgba(0, 0, 0, .87); + opacity: .4 +} + +.mat-chip:not(.mat-basic-chip) .mat-chip-remove:hover { + opacity: .54 +} + +.mat-chip.mat-chip-selected.mat-primary { + background-color: #41ECC2; + color: rgba(255, 255, 255, .87) +} + +.mat-chip.mat-chip-selected.mat-primary .mat-chip-remove { + color: rgba(255, 255, 255, .87); + opacity: .4 +} + +.mat-chip.mat-chip-selected.mat-primary .mat-chip-remove:hover { + opacity: .54 +} + +.mat-chip.mat-chip-selected.mat-warn { + background-color: #f44336; + color: #fff +} + +.mat-chip.mat-chip-selected.mat-warn .mat-chip-remove { + color: #fff; + opacity: .4 +} + +.mat-chip.mat-chip-selected.mat-warn .mat-chip-remove:hover { + opacity: .54 +} + +.mat-chip.mat-chip-selected.mat-accent { + background-color: #ffd740; + color: rgba(0, 0, 0, .87) +} + +.mat-chip.mat-chip-selected.mat-accent .mat-chip-remove { + color: rgba(0, 0, 0, .87); + opacity: .4 +} + +.mat-chip.mat-chip-selected.mat-accent .mat-chip-remove:hover { + opacity: .54 +} + +.mat-table { + background: #fff +} + +.mat-header-row, .mat-row { + border-bottom-color: rgba(0, 0, 0, .12) +} + +.mat-header-cell { + color: rgba(0, 0, 0, .54) +} + +.mat-cell { + color: rgba(0, 0, 0, .87) +} + +.mat-datepicker-content { + background-color: #fff; + color: rgba(0, 0, 0, .87) +} + +.mat-calendar-arrow { + border-top-color: rgba(0, 0, 0, .54) +} + +.mat-calendar-next-button, .mat-calendar-previous-button { + color: rgba(0, 0, 0, .54) +} + +.mat-calendar-table-header { + color: rgba(0, 0, 0, .38) +} + +.mat-calendar-table-header-divider::after { + background: rgba(0, 0, 0, .12) +} + +.mat-calendar-body-label { + color: rgba(0, 0, 0, .54) +} + +.mat-calendar-body-cell-content { + color: rgba(0, 0, 0, .87); + border-color: transparent +} + +.mat-calendar-body-disabled > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) { + color: rgba(0, 0, 0, .38) +} + +.cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected), :not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) { + background-color: rgba(0, 0, 0, .04) +} + +.mat-calendar-body-selected { + background-color: #41ECC2; + color: rgba(255, 255, 255, .87) +} + +.mat-calendar-body-disabled > .mat-calendar-body-selected { + background-color: rgba(103, 58, 183, .4) +} + +.mat-calendar-body-today:not(.mat-calendar-body-selected) { + border-color: rgba(0, 0, 0, .38) +} + +.mat-calendar-body-today.mat-calendar-body-selected { + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .87) +} + +.mat-calendar-body-disabled > .mat-calendar-body-today:not(.mat-calendar-body-selected) { + border-color: rgba(0, 0, 0, .18) +} + +.mat-dialog-container { + background: #fff; + color: rgba(0, 0, 0, .87) +} + +.mat-expansion-panel { + background: #fff; + color: rgba(0, 0, 0, .87) +} + +.mat-action-row { + border-top-color: rgba(0, 0, 0, .12) +} + +.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]).cdk-keyboard-focused, .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]).cdk-program-focused, .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover { + background: rgba(0, 0, 0, .04) +} + +.mat-expansion-panel-header-title { + color: rgba(0, 0, 0, .87) +} + +.mat-expansion-indicator::after, .mat-expansion-panel-header-description { + color: rgba(0, 0, 0, .54) +} + +.mat-expansion-panel-header[aria-disabled=true] { + color: rgba(0, 0, 0, .38) +} + +.mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-description, .mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-title { + color: inherit +} + +.mat-form-field { + width: 200px +} + +.mat-form-field-placeholder { + color: rgba(0, 0, 0, .54) +} + +.mat-hint { + color: rgba(0, 0, 0, .54) +} + +.mat-focused .mat-form-field-placeholder { + color: #41ECC2 +} + +.mat-focused .mat-form-field-placeholder.mat-accent { + color: #ffd740 +} + +.mat-focused .mat-form-field-placeholder.mat-warn { + color: #f44336 +} + +.mat-focused .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker, .mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder .mat-form-field-required-marker { + color: #ffd740 +} + +.mat-form-field-underline { + background-color: rgba(0, 0, 0, .42) +} + +.mat-form-field-underline.mat-disabled { + background-image: linear-gradient(to right, rgba(0, 0, 0, .42) 0, rgba(0, 0, 0, .42) 33%, transparent 0); + background-size: 4px 1px; + background-repeat: repeat-x +} + +.mat-form-field-ripple { + background-color: #41ECC2 +} + +.mat-form-field-ripple.mat-accent { + background-color: #ffd740 +} + +.mat-form-field-ripple.mat-warn { + background-color: #f44336 +} + +.mat-form-field-invalid .mat-form-field-placeholder { + color: #f44336 +} + +.mat-form-field-invalid .mat-form-field-placeholder.mat-accent, .mat-form-field-invalid .mat-form-field-placeholder.mat-form-field-float .mat-form-field-required-marker { + color: #f44336 +} + +.mat-form-field-invalid .mat-form-field-ripple { + background-color: #f44336 +} + +.mat-error { + color: #f44336 +} + +.mat-icon.mat-primary { + color: #41ECC2 +} + +.mat-icon.mat-accent { + color: #ffd740 +} + +.mat-icon.mat-warn { + color: #f44336 +} + +.mat-input-element:disabled { + color: rgba(0, 0, 0, .42) +} + +.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { + color: rgba(0, 0, 0, .87) +} + +.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option { + color: rgba(0, 0, 0, .87) +} + +.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader { + color: rgba(0, 0, 0, .54) +} + +.mat-list-item-disabled { + background-color: #eee +} + +.mat-divider { + border-top-color: rgba(0, 0, 0, .12) +} + +.mat-nav-list .mat-list-item { + outline: 0 +} + +.mat-nav-list .mat-list-item.mat-list-item-focus, .mat-nav-list .mat-list-item:hover { + background: rgba(0, 0, 0, .04) +} + +.mat-list-option { + outline: 0 +} + +.mat-list-option.mat-list-item-focus, .mat-list-option:hover { + background: rgba(0, 0, 0, .04) +} + +.mat-menu-panel { + background: #fff +} + +.mat-menu-item { + background: 0 0; + color: rgba(0, 0, 0, .87) +} + +.mat-menu-item[disabled] { + color: rgba(0, 0, 0, .38) +} + +.mat-menu-item .mat-icon, .mat-menu-item-submenu-trigger::after { + color: rgba(0, 0, 0, .54) +} + +.mat-menu-item-highlighted:not([disabled]), .mat-menu-item:focus:not([disabled]), .mat-menu-item:hover:not([disabled]) { + background: rgba(0, 0, 0, .04) +} + +.mat-paginator { + background: #fff +} + +.mat-paginator, .mat-paginator-page-size .mat-select-trigger { + color: rgba(0, 0, 0, .54) +} + +.mat-paginator-decrement, .mat-paginator-increment { + border-top: 2px solid rgba(0, 0, 0, .54); + border-right: 2px solid rgba(0, 0, 0, .54) +} + +.mat-icon-button[disabled] .mat-paginator-decrement, .mat-icon-button[disabled] .mat-paginator-increment { + border-color: rgba(0, 0, 0, .38) +} + +.mat-progress-bar-background { + background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-background%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27%23d1c4e9%27%2F%3E%3C%2Fsvg%3E") +} + +.mat-progress-bar-buffer { + background-color: #d1c4e9 +} + +.mat-progress-bar-fill::after { + background-color: #41ECC2 +} + +.mat-progress-bar.mat-accent .mat-progress-bar-background { + background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-background%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27%23ffe57f%27%2F%3E%3C%2Fsvg%3E") +} + +.mat-progress-bar.mat-accent .mat-progress-bar-buffer { + background-color: #ffe57f +} + +.mat-progress-bar.mat-accent .mat-progress-bar-fill::after { + background-color: #ffd740 +} + +.mat-progress-bar.mat-warn .mat-progress-bar-background { + background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-background%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27%23ffcdd2%27%2F%3E%3C%2Fsvg%3E") +} + +.mat-progress-bar.mat-warn .mat-progress-bar-buffer { + background-color: #ffcdd2 +} + +.mat-progress-bar.mat-warn .mat-progress-bar-fill::after { + background-color: #f44336 +} + +.mat-progress-spinner path, .mat-spinner path { + stroke: #41ECC2 +} + +.mat-progress-spinner.mat-accent path, .mat-spinner.mat-accent path { + stroke: #ffd740 +} + +.mat-progress-spinner.mat-warn path, .mat-spinner.mat-warn path { + stroke: #f44336 +} + +.mat-radio-outer-circle { + border-color: rgba(0, 0, 0, .54) +} + +.mat-radio-disabled .mat-radio-outer-circle { + border-color: rgba(0, 0, 0, .38) +} + +.mat-radio-disabled .mat-radio-inner-circle, .mat-radio-disabled .mat-radio-ripple .mat-ripple-element { + background-color: rgba(0, 0, 0, .38) +} + +.mat-radio-disabled .mat-radio-label-content { + color: rgba(0, 0, 0, .38) +} + +.mat-radio-button.mat-primary.mat-radio-checked .mat-radio-outer-circle { + border-color: #41ECC2 +} + +.mat-radio-button.mat-primary .mat-radio-inner-circle { + background-color: #41ECC2 +} + +.mat-radio-button.mat-primary .mat-radio-ripple .mat-ripple-element { + background-color: rgba(65, 236, 194, .26) +} + +.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle { + border-color: #41ECC2; +} + +.mat-radio-button.mat-accent .mat-radio-inner-circle { + background-color: #41ECC2 +} + +.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element { + background-color: rgba(65, 236, 194, .26) +} + +.mat-radio-button.mat-warn.mat-radio-checked .mat-radio-outer-circle { + border-color: #f44336 +} + +.mat-radio-button.mat-warn .mat-radio-inner-circle { + background-color: #f44336 +} + +.mat-radio-button.mat-warn .mat-radio-ripple .mat-ripple-element { + background-color: rgba(65, 236, 194, .26) +} + +.mat-select-arrow, .mat-select-trigger { + color: rgba(0, 0, 0, .54) +} + +.mat-select-underline { + background-color: rgba(0, 0, 0, .42) +} + +[aria-disabled=true] .mat-select-underline { + background-image: linear-gradient(to right, rgba(0, 0, 0, .42) 0, rgba(0, 0, 0, .42) 33%, transparent 0); + background-size: 4px 1px; + background-repeat: repeat-x +} + +.mat-select-arrow, .mat-select-disabled .mat-select-value, .mat-select-trigger { + color: rgba(0, 0, 0, .54) +} + +.mat-select-content, .mat-select-panel-done-animating { + background: #fff +} + +.mat-select-value { + color: rgba(0, 0, 0, .87) +} + +.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) { + background: rgba(0, 0, 0, .12) +} + +.mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-arrow, .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-trigger { + color: #41ECC2 +} + +.mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-underline { + background-color: #41ECC2 +} + +.mat-select:focus:not(.mat-select-disabled).mat-accent .mat-select-arrow, .mat-select:focus:not(.mat-select-disabled).mat-accent .mat-select-trigger { + color: #41ECC2 +} + +.mat-select:focus:not(.mat-select-disabled).mat-accent .mat-select-underline { + background-color: #41ECC2 +} + +.mat-select:focus:not(.mat-select-disabled).mat-select-required .mat-select-placeholder::after { + color: #f44336 +} + +.mat-select-invalid .mat-select-arrow, .mat-select-invalid .mat-select-trigger, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-arrow, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-trigger { + color: #f44336 +} + +.mat-select-invalid .mat-select-underline, .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline { + background-color: #f44336 +} + +.mat-drawer-container { + background-color: #fafafa; + color: rgba(0, 0, 0, .87) +} + +.mat-drawer { + background-color: #fff; + color: rgba(0, 0, 0, .87) +} + +.mat-drawer.mat-drawer-push { + background-color: #fff +} + +.mat-drawer-backdrop.mat-drawer-shown { + background-color: rgba(0, 0, 0, .6) +} + +.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { + background-color: #ffc107 +} + +.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar { + background-color: rgba(255, 193, 7, .5) +} + +.mat-slide-toggle:not(.mat-checked) .mat-ripple-element { + background-color: rgba(0, 0, 0, .06) +} + +.mat-slide-toggle .mat-ripple-element { + background-color: rgba(255, 193, 7, .12) +} + +.mat-slide-toggle.mat-primary.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { + background-color: #41ECC2 +} + +.mat-slide-toggle.mat-primary.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar { + background-color: rgba(103, 58, 183, .5) +} + +.mat-slide-toggle.mat-primary:not(.mat-checked) .mat-ripple-element { + background-color: rgba(0, 0, 0, .06) +} + +.mat-slide-toggle.mat-primary .mat-ripple-element { + background-color: rgba(103, 58, 183, .12) +} + +.mat-slide-toggle.mat-warn.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { + background-color: #f44336 +} + +.mat-slide-toggle.mat-warn.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar { + background-color: rgba(244, 67, 54, .5) +} + +.mat-slide-toggle.mat-warn:not(.mat-checked) .mat-ripple-element { + background-color: rgba(0, 0, 0, .06) +} + +.mat-slide-toggle.mat-warn .mat-ripple-element { + background-color: rgba(244, 67, 54, .12) +} + +.mat-disabled .mat-slide-toggle-thumb { + background-color: #bdbdbd +} + +.mat-disabled .mat-slide-toggle-bar { + background-color: rgba(0, 0, 0, .1) +} + +.mat-slide-toggle-thumb { + background-color: #fafafa +} + +.mat-slide-toggle-bar { + background-color: rgba(0, 0, 0, .38) +} + +.mat-slider-track-background { + background-color: rgba(0, 0, 0, .26) +} + +.mat-primary .mat-slider-thumb, .mat-primary .mat-slider-thumb-label, .mat-primary .mat-slider-track-fill { + background-color: #41ECC2 +} + +.mat-primary .mat-slider-thumb-label-text { + color: rgba(255, 255, 255, .87) +} + +.mat-accent .mat-slider-thumb, .mat-accent .mat-slider-thumb-label, .mat-accent .mat-slider-track-fill { + background-color: #41ECC2 +} + +.mat-accent .mat-slider-thumb-label-text { + color: rgba(0, 0, 0, .87) +} + +.mat-warn .mat-slider-thumb, .mat-warn .mat-slider-thumb-label, .mat-warn .mat-slider-track-fill { + background-color: #f44336 +} + +.mat-warn .mat-slider-thumb-label-text { + color: #fff +} + +.mat-slider-focus-ring { + background-color: rgba(255, 215, 64, .2) +} + +.cdk-focused .mat-slider-track-background, .mat-slider:hover .mat-slider-track-background { + background-color: rgba(0, 0, 0, .38) +} + +.mat-slider-disabled .mat-slider-thumb, .mat-slider-disabled .mat-slider-track-background, .mat-slider-disabled .mat-slider-track-fill { + background-color: rgba(0, 0, 0, .26) +} + +.mat-slider-disabled:hover .mat-slider-track-background { + background-color: rgba(0, 0, 0, .26) +} + +.mat-slider-min-value .mat-slider-focus-ring { + background-color: rgba(0, 0, 0, .12) +} + +.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb, .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label { + background-color: rgba(0, 0, 0, .87) +} + +.mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb, .mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb-label { + background-color: rgba(0, 0, 0, .26) +} + +.mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb { + border-color: rgba(0, 0, 0, .26); + background-color: transparent +} + +.mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused .mat-slider-thumb, .mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover .mat-slider-thumb { + border-color: rgba(0, 0, 0, .38) +} + +.mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused.mat-slider-disabled .mat-slider-thumb, .mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover.mat-slider-disabled .mat-slider-thumb { + border-color: rgba(0, 0, 0, .26) +} + +.mat-slider-has-ticks .mat-slider-wrapper::after { + border-color: rgba(0, 0, 0, .7) +} + +.mat-slider-horizontal .mat-slider-ticks { + background-image: repeating-linear-gradient(to right, rgba(0, 0, 0, .7), rgba(0, 0, 0, .7) 2px, transparent 0, transparent); + background-image: -moz-repeating-linear-gradient(.0001deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .7) 2px, transparent 0, transparent) +} + +.mat-slider-vertical .mat-slider-ticks { + background-image: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, .7) 2px, transparent 0, transparent) +} + +.mat-step-header:focus, .mat-step-header:hover { + background-color: rgba(0, 0, 0, .04) +} + +.mat-step-header .mat-step-label-active { + color: rgba(0, 0, 0, .87) +} + +.mat-step-header .mat-step-label-inactive, .mat-step-header .mat-step-optional { + color: rgba(0, 0, 0, .38) +} + +.mat-step-header .mat-step-icon { + background-color: #41ECC2; + color: rgba(255, 255, 255, .87) +} + +.mat-step-header .mat-step-icon-not-touched { + background-color: rgba(0, 0, 0, .38); + color: rgba(255, 255, 255, .87) +} + +.mat-stepper-horizontal, .mat-stepper-vertical { + background-color: #fff +} + +.mat-stepper-vertical-line::before { + border-left-color: rgba(0, 0, 0, .12) +} + +.mat-stepper-horizontal-line { + border-top-color: rgba(0, 0, 0, .12) +} + +.mat-tab-header, .mat-tab-nav-bar { + border-bottom: 1px solid rgba(0, 0, 0, .12) +} + +.mat-tab-group-inverted-header .mat-tab-header, .mat-tab-group-inverted-header .mat-tab-nav-bar { + border-top: 1px solid rgba(0, 0, 0, .12); + border-bottom: none +} + +.mat-tab-label, .mat-tab-link { + color: rgba(0, 0, 0, .87) +} + +.mat-tab-label.mat-tab-disabled, .mat-tab-link.mat-tab-disabled { + color: rgba(0, 0, 0, .38) +} + +.mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, .87) +} + +.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, .38) +} + +.mat-tab-group[class*=mat-background-] .mat-tab-header, .mat-tab-nav-bar[class*=mat-background-] { + border-bottom: none; + border-top: none +} + +.mat-tab-group.mat-primary .mat-tab-label:focus, .mat-tab-group.mat-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:focus { + background-color: rgba(209, 196, 233, .3) +} + +.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar { + background-color: #41ECC2 +} + +.mat-tab-group.mat-primary.mat-background-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary.mat-background-primary .mat-ink-bar { + background-color: rgba(255, 255, 255, .87) +} + +.mat-tab-group.mat-accent .mat-tab-label:focus, .mat-tab-group.mat-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-accent .mat-tab-link:focus { + background-color: rgba(255, 229, 127, .3) +} + +.mat-tab-group.mat-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent .mat-ink-bar { + background-color: #41ECC2 +} + +.mat-tab-group.mat-accent.mat-background-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent.mat-background-accent .mat-ink-bar { + background-color: rgba(0, 0, 0, .87) +} + +.mat-tab-group.mat-warn .mat-tab-label:focus, .mat-tab-group.mat-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, .3) +} + +.mat-tab-group.mat-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn .mat-ink-bar { + background-color: #f44336 +} + +.mat-tab-group.mat-warn.mat-background-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn.mat-background-warn .mat-ink-bar { + background-color: #fff +} + +.mat-tab-group.mat-background-primary .mat-tab-label:focus, .mat-tab-group.mat-background-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-link:focus { + background-color: rgba(209, 196, 233, .3) +} + +.mat-tab-group.mat-background-primary .mat-tab-header, .mat-tab-group.mat-background-primary .mat-tab-links, .mat-tab-nav-bar.mat-background-primary .mat-tab-header, .mat-tab-nav-bar.mat-background-primary .mat-tab-links { + background-color: #41ECC2 +} + +.mat-tab-group.mat-background-primary .mat-tab-label, .mat-tab-group.mat-background-primary .mat-tab-link, .mat-tab-nav-bar.mat-background-primary .mat-tab-label, .mat-tab-nav-bar.mat-background-primary .mat-tab-link { + color: rgba(255, 255, 255, .87) +} + +.mat-tab-group.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-primary .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, .4) +} + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, .87) +} + +.mat-tab-group.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, .4) +} + +.mat-tab-group.mat-background-accent .mat-tab-label:focus, .mat-tab-group.mat-background-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-link:focus { + background-color: rgba(255, 229, 127, .3) +} + +.mat-tab-group.mat-background-accent .mat-tab-header, .mat-tab-group.mat-background-accent .mat-tab-links, .mat-tab-nav-bar.mat-background-accent .mat-tab-header, .mat-tab-nav-bar.mat-background-accent .mat-tab-links { + background-color: #41ECC2 +} + +.mat-tab-group.mat-background-accent .mat-tab-label, .mat-tab-group.mat-background-accent .mat-tab-link, .mat-tab-nav-bar.mat-background-accent .mat-tab-label, .mat-tab-nav-bar.mat-background-accent .mat-tab-link { + color: rgba(0, 0, 0, .87) +} + +.mat-tab-group.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-accent .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-link.mat-tab-disabled { + color: rgba(0, 0, 0, .4) +} + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, .87) +} + +.mat-tab-group.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(0, 0, 0, .4) +} + +.mat-tab-group.mat-background-warn .mat-tab-label:focus, .mat-tab-group.mat-background-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-link:focus { + background-color: rgba(255, 205, 210, .3) +} + +.mat-tab-group.mat-background-warn .mat-tab-header, .mat-tab-group.mat-background-warn .mat-tab-links, .mat-tab-nav-bar.mat-background-warn .mat-tab-header, .mat-tab-nav-bar.mat-background-warn .mat-tab-links { + background-color: #f44336 +} + +.mat-tab-group.mat-background-warn .mat-tab-label, .mat-tab-group.mat-background-warn .mat-tab-link, .mat-tab-nav-bar.mat-background-warn .mat-tab-label, .mat-tab-nav-bar.mat-background-warn .mat-tab-link { + color: #fff +} + +.mat-tab-group.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-warn .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-link.mat-tab-disabled { + color: rgba(255, 255, 255, .4) +} + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-chevron { + border-color: #fff +} + +.mat-tab-group.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron { + border-color: rgba(255, 255, 255, .4) +} + +.mat-toolbar { + background: #f5f5f5; + color: rgba(0, 0, 0, .87) +} + +.mat-toolbar.mat-primary { + background: #41ECC2; + color: rgba(255, 255, 255, .87) +} + +.mat-toolbar.mat-accent { + background: #41ECC2; + color: rgba(0, 0, 0, .87) +} + +.mat-toolbar.mat-warn { + background: #f44336; + color: #fff +} + +.mat-tooltip { + background: rgba(97, 97, 97, .9) +} + +.mat-snack-bar-container { + background: #323232; + color: #fff +} + +.mat-simple-snackbar-action { + color: #41ECC2 +} From 08618e85be3a177f40e66121c9012e143c8c12f7 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Fri, 8 Sep 2017 23:08:40 +0530 Subject: [PATCH 039/177] Adds common helper and update theme sccss --- src/assets/common/helper.scss | 3 ++ src/assets/theme.scss | 52 ++++++++++++++++++++++++++++------- 2 files changed, 45 insertions(+), 10 deletions(-) diff --git a/src/assets/common/helper.scss b/src/assets/common/helper.scss index 70074d600..764300c01 100644 --- a/src/assets/common/helper.scss +++ b/src/assets/common/helper.scss @@ -1,3 +1,6 @@ .cursor-pointer { cursor: pointer; } +.text-uppercase { + text-transform: uppercase; +} diff --git a/src/assets/theme.scss b/src/assets/theme.scss index 1a612bc27..601aa4fbf 100644 --- a/src/assets/theme.scss +++ b/src/assets/theme.scss @@ -1,6 +1,6 @@ -@import "~@angular/material/prebuilt-themes/indigo-pink.css"; // Import a pre-built theme -@import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; +@import "theme/partgui-theme.css"; +//@import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; @import '~@angular/material/theming'; //// Define a mixin that accepts a theme and outputs the color styles for the component. @@ -16,6 +16,17 @@ // } //} + +.mat-list { + .mat-list-item{ + .mat-list-item-content{ + height: auto !important; + } + + } + +} + .mat-sidenav { width: 250px; background-color: #1c2825; @@ -61,6 +72,7 @@ font-size: 12px; text-transform: uppercase; font-weight: bold; + min-height: 40px; border-bottom: none; .mat-icon { margin: 4px 8px 0 0; @@ -114,6 +126,10 @@ text-transform: capitalize; } +//.address-word:nth-child(3){word-wrap: break-word;white-space: normal;flex-wrap: wrap;} +.details-address{flex-wrap: wrap;} + + /*list*/ .icon-input { input.mat-input-element { @@ -160,16 +176,12 @@ input[type="text"] { border: none; } -.mat-list { - .mat-list-item{ - .mat-list-item-content{ - height: auto !important; - } - - } - +.md-list-radio{ + .mat-radio-button{margin-bottom: 12px;} + h5{margin-top: 0;} } +.md-reduce-button{margin-bottom: 0 !important;padding-left: 8px !important;} .address, .address-label { overflow: hidden; @@ -179,8 +191,28 @@ input[type="text"] { white-space: nowrap; } +.md-left-border{border-left:1px solid #ddd; } + +@media (max-width:1280px) { + .qrcode{ + text-align: center; + img{width: 300px;height: 300px;} + } + .md-left-border{border-left:none;justify-content: flex-start !important; } +} + @media (max-width:960px) { .mat-form-field { width: 100%; } } + + +@media (max-width:640px) { + .qrcode{ + text-align: center; + img{height: auto;max-width: 100%;} + } +} + + From c7bc8c2ab88f6f61a41d9475274aa3047c3e92e1 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Fri, 8 Sep 2017 23:09:09 +0530 Subject: [PATCH 040/177] Finalize address table component design --- .../address-table.component.html | 143 +++++++++--------- .../address-table.component.scss | 18 +-- 2 files changed, 75 insertions(+), 86 deletions(-) diff --git a/src/app/wallet/shared/address-table/address-table.component.html b/src/app/wallet/shared/address-table/address-table.component.html index 5ed5bbde5..df64a3f38 100644 --- a/src/app/wallet/shared/address-table/address-table.component.html +++ b/src/app/wallet/shared/address-table/address-table.component.html @@ -1,78 +1,79 @@ -
-
- - -
Previous addresses
-
- -
-
{{ address.label }}
-
- Address: - {{ address.address }} + + +
+
+
+ +
+ +
-
- - content_copy - + +
Label
+
Address
+
Public Key
+
Type
+
Purpose
+
Tools
+
QR Code
+
- verified_user + +
+ +
+
{{ address.label }}
+
+ Address: + {{ address.address }} +
- -
-
- - -
- +
+ Public Key + {{ address.publicKey }} +
-
-
- -
-
Label
-
Address
-
Public Key
-
Type
-
Purpose
-
Tools
-
QR Code
-
-
-
- {{ address.label }} -
-
- Address - {{ address.address }} -
-
- Public Key - {{ address.publicKey }} -
-
- Type - {{ address.type }} -
-
-
- - - - - -
-
-
-
- +
+ Type + {{ address.type }} +
+ +
+
+ + content_copy + + + verified_user + + cancel + +
+
+
+
+
+ + +
+
+
+
+ + +
+
-
- - + + + + diff --git a/src/app/wallet/shared/address-table/address-table.component.scss b/src/app/wallet/shared/address-table/address-table.component.scss index 2ebfa6ec5..35476b629 100644 --- a/src/app/wallet/shared/address-table/address-table.component.scss +++ b/src/app/wallet/shared/address-table/address-table.component.scss @@ -1,16 +1,4 @@ -app-grid { - .tools-menu { - font-size: 14px; - } - .qrcode-menu { - font-size: 34px; - } - .cell-label { - flex-basis: 14em; - } - .cell-address { - flex-basis: 100%; - word-break: break-word; - white-space: normal; - } +.title { + text-transform: uppercase; + font-weight: bold; } From 364667d863315444f0a60bf7ad9bb15e30984786 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Fri, 8 Sep 2017 23:09:32 +0530 Subject: [PATCH 041/177] Redesign addressBookComponent --- .../address-book/address-book.component.html | 26 ------------------- 1 file changed, 26 deletions(-) diff --git a/src/app/wallet/address-book/address-book.component.html b/src/app/wallet/address-book/address-book.component.html index 30f5f680e..a446572d1 100644 --- a/src/app/wallet/address-book/address-book.component.html +++ b/src/app/wallet/address-book/address-book.component.html @@ -27,32 +27,6 @@
- - - - - - - - - - - - - - - - - - - - - - - - - - From 1c7d9022be8de5a2c2ae368d19ff791d01aacc2b Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Fri, 8 Sep 2017 23:10:03 +0530 Subject: [PATCH 042/177] Small chagne sin wallete>receive & send --- src/app/wallet/receive/receive.component.html | 35 +++++++++----- src/app/wallet/send/send.component.html | 48 ++++++++++--------- 2 files changed, 47 insertions(+), 36 deletions(-) diff --git a/src/app/wallet/receive/receive.component.html b/src/app/wallet/receive/receive.component.html index d4f3908fb..a9328d9f7 100644 --- a/src/app/wallet/receive/receive.component.html +++ b/src/app/wallet/receive/receive.component.html @@ -1,7 +1,8 @@ -
+
@@ -24,13 +25,15 @@
-
+
Unused address
-
+
/{{ getUnusedAddress().id }}
{{ getUnusedAddress().label }}
@@ -39,14 +42,16 @@ +{{ getUnusedAddress().balance }}
-
- + content_copy verified_user -
@@ -58,7 +63,9 @@
Previous addresses
-
+
/{{ address.id }}
{{ address.label }}
@@ -67,15 +74,17 @@ +{{ address.balance }}
-
- + content_copy verified_user -
@@ -100,7 +109,7 @@
-
+
@@ -113,8 +122,8 @@
{{ selected.label }}
-
-
+
+
{{ word }}
diff --git a/src/app/wallet/send/send.component.html b/src/app/wallet/send/send.component.html index ce0238389..094b288b6 100644 --- a/src/app/wallet/send/send.component.html +++ b/src/app/wallet/send/send.component.html @@ -18,9 +18,9 @@
-
@@ -30,10 +30,10 @@
- +
- +
From Account
Public Blind @@ -51,30 +51,32 @@
From Account
- + -
-
Pay to:
- - - - - - -
- supervisor_account - content_copy - cancel -
+
+ +
TO ACCOUNT
+ Public + Blind + Private + +
+ Balance: + {{getBalance(send.output)}} PART +
+
+ +
+ - + +
-
Balance:
+
Pay to:
Balance:
supervisor_account content_copy - cancel + cancel
From b4c0707a05f4056d77b5f62948bfb2eb4cf91cff Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Fri, 8 Sep 2017 23:10:48 +0530 Subject: [PATCH 043/177] Start working on history component --- src/app/wallet/history/history.component.html | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/wallet/history/history.component.html b/src/app/wallet/history/history.component.html index 56c501868..b7220f746 100644 --- a/src/app/wallet/history/history.component.html +++ b/src/app/wallet/history/history.component.html @@ -1,6 +1,5 @@ -
From f1215a57336eea95c7a1a7328702d0a5649489d3 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Mon, 11 Sep 2017 17:35:14 +0530 Subject: [PATCH 044/177] Change material version and remove theme scss --- package.json | 2 +- src/assets/theme.scss | 16 ---------------- 2 files changed, 1 insertion(+), 17 deletions(-) diff --git a/package.json b/package.json index ba0925a80..17d1a6a50 100644 --- a/package.json +++ b/package.json @@ -84,7 +84,7 @@ "@angular/flex-layout": "^2.0.0-beta.9", "@angular/forms": "^4.3.1", "@angular/http": "^4.3.1", - "@angular/material": "github:angular/material2-builds", + "@angular/material": "^2.0.0-beta.10", "@angular/platform-browser": "^4.3.1", "@angular/platform-browser-dynamic": "^4.3.1", "@angular/router": "^4.3.1", diff --git a/src/assets/theme.scss b/src/assets/theme.scss index 601aa4fbf..d0381eceb 100644 --- a/src/assets/theme.scss +++ b/src/assets/theme.scss @@ -1,21 +1,5 @@ // Import a pre-built theme @import "theme/partgui-theme.css"; -//@import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; -@import '~@angular/material/theming'; - -//// Define a mixin that accepts a theme and outputs the color styles for the component. -//@mixin candy-carousel-theme($theme) { -// // Extract whichever individual palettes you need from the theme. -// $primary: map-get($theme, primary); -// $accent: map-get($theme, accent); -// -// // Use mat-color to extract individual colors from a palette as necessary. -// .candy-carousel { -// background-color: mat-color($primary); -// border-color: mat-color($accent, A400); -// } -//} - .mat-list { .mat-list-item{ From 3b6b27d114863264b672156276ce2855a3ac0866 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Mon, 11 Sep 2017 23:10:30 +0530 Subject: [PATCH 045/177] Redesign transaction table component --- .../transaction-table.component.html | 257 ++++++++++-------- .../transaction-table.component.scss | 16 ++ 2 files changed, 158 insertions(+), 115 deletions(-) diff --git a/src/app/wallet/shared/transaction-table/transaction-table.component.html b/src/app/wallet/shared/transaction-table/transaction-table.component.html index a175391f0..0e4add37d 100644 --- a/src/app/wallet/shared/transaction-table/transaction-table.component.html +++ b/src/app/wallet/shared/transaction-table/transaction-table.component.html @@ -9,141 +9,168 @@
amount
-
-
- - {{ tx.getDate() }} -
-
- + + + + {{ tx.getDate() }} + + + Stake - + add - + Orphan - + cacel - + Send - + arrow_forward - + Received - + arrow_back -
-
- {{ tx.getAddress() }} -
-
- TxId - {{ tx.txid }} -
-
- Blockindex - {{ tx.blockindex }} -
-
- Confirmations - {{ tx.confirmations }} -
-
- Amount - {{ tx.getAmount() }} PART -
-
- -
-
+ + + {{ tx.getAddress() }} + + + TxId {{ tx.txid }} + + + Blockindex {{ tx.blockindex }} + -
-
+ + Confirmations {{ tx.confirmations }} + + + Amount {{ tx.getAmount() }} PART + + -
-
-
- Status: -
-
- {{tx.confirmations}} confirmations -
-
- Transaction ID: -
- +
+
+
+ Status: + {{tx.confirmations}} confirmations
-
- -
-
-
- Date: -
-
- {{tx.getDate()}} -
-
- Transaction fee: -
-
- {{tx.fee ? tx.fee : 0}} PART -
+
+ Transaction ID: + {{tx.txid}}
-
+
-
-
-
- To: -
-
- {{tx.getAddress()}} -
-
- Net amount: -
-
- {{tx.fee ? tx.getAmount() - tx.fee : 0}} PART -
+
+
+ Date: + {{tx.getDate()}} +
+
+ Transaction fee: + {{tx.fee ? tx.fee : 0}} PART
-
+
-
-
-
- Credit: -
-
- Debit: -
-
- {{tx.getAmount()}} PART -
- -
-
+
+
+ To: + {{tx.getAddress()}}
-
+
+ Net amount: + {{tx.fee ? tx.getAmount() - tx.fee : 0}} PART +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -
-
+ + + - + [boundaryLinks]="true" + (pageChanged)="pageChanged($event)" + [totalItems]="txService.txCount" + [maxSize]="5" [rotate]="false" + [(ngModel)]="txService.currentPage" + class="pagination-sm center" + previousText="‹" nextText="›" + firstText="«" lastText="»" + [itemsPerPage]="txService.MAX_TXS_PER_PAGE"> diff --git a/src/app/wallet/shared/transaction-table/transaction-table.component.scss b/src/app/wallet/shared/transaction-table/transaction-table.component.scss index f47a40f46..d8dfe27ef 100644 --- a/src/app/wallet/shared/transaction-table/transaction-table.component.scss +++ b/src/app/wallet/shared/transaction-table/transaction-table.component.scss @@ -1,3 +1,19 @@ +.mat-expansion-panel-header { + border-bottom: 1px solid #e3e3e3; + min-height: 67px !important; + font-size: 14px; + + .mat-expansion-panel { + .mat-expanded { + border-bottom: none !important; + } + } +} +// @TODO conver css to scss +md-expansion-panel.mat-expansion-panel.mat-expanded md-expansion-panel-header { + border-bottom: none !important; +} + .btn-round-lg{ border-radius: 22.5px; } From b8b9b6a28dc2ca6dd35abc0a433938536ca88bd8 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Mon, 11 Sep 2017 23:11:09 +0530 Subject: [PATCH 046/177] Remove card container in address book component --- .../address-book/address-book.component.html | 56 +++++++++---------- 1 file changed, 27 insertions(+), 29 deletions(-) diff --git a/src/app/wallet/address-book/address-book.component.html b/src/app/wallet/address-book/address-book.component.html index a446572d1..56fa0434a 100644 --- a/src/app/wallet/address-book/address-book.component.html +++ b/src/app/wallet/address-book/address-book.component.html @@ -1,32 +1,30 @@ - - - -
-
- -
- - - search - +
+ +
+
+
- - -
- - - + + + search +
- - + + +
+ + +
+
From 7cba1ab5ac094b7763c73af513db5cd4bf0d6a48 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Mon, 11 Sep 2017 23:11:22 +0530 Subject: [PATCH 047/177] Reformate scss and add some css --- src/assets/theme.scss | 54 ++++++++++++++++++++++++++++--------------- 1 file changed, 36 insertions(+), 18 deletions(-) diff --git a/src/assets/theme.scss b/src/assets/theme.scss index d0381eceb..81fec5ec9 100644 --- a/src/assets/theme.scss +++ b/src/assets/theme.scss @@ -2,8 +2,8 @@ @import "theme/partgui-theme.css"; .mat-list { - .mat-list-item{ - .mat-list-item-content{ + .mat-list-item { + .mat-list-item-content { height: auto !important; } @@ -111,8 +111,9 @@ } //.address-word:nth-child(3){word-wrap: break-word;white-space: normal;flex-wrap: wrap;} -.details-address{flex-wrap: wrap;} - +.details-address { + flex-wrap: wrap; +} /*list*/ .icon-input { @@ -160,12 +161,19 @@ input[type="text"] { border: none; } -.md-list-radio{ - .mat-radio-button{margin-bottom: 12px;} - h5{margin-top: 0;} +.md-list-radio { + .mat-radio-button { + margin-bottom: 12px; + } + h5 { + margin-top: 0; + } } -.md-reduce-button{margin-bottom: 0 !important;padding-left: 8px !important;} +.md-reduce-button { + margin-bottom: 0 !important; + padding-left: 8px !important; +} .address, .address-label { overflow: hidden; @@ -175,27 +183,37 @@ input[type="text"] { white-space: nowrap; } -.md-left-border{border-left:1px solid #ddd; } +.md-left-border { + border-left: 1px solid #ddd; +} -@media (max-width:1280px) { - .qrcode{ +@media (max-width: 1280px) { + .qrcode { text-align: center; - img{width: 300px;height: 300px;} + img { + width: 300px; + height: 300px; + } + } + .md-left-border { + border-left: none; + justify-content: flex-start !important; } - .md-left-border{border-left:none;justify-content: flex-start !important; } } -@media (max-width:960px) { +@media (max-width: 960px) { .mat-form-field { width: 100%; } } - -@media (max-width:640px) { - .qrcode{ +@media (max-width: 640px) { + .qrcode { text-align: center; - img{height: auto;max-width: 100%;} + img { + height: auto; + max-width: 100%; + } } } From e4fc9061aecc394d6d64f5ac9b648bf2cd50724d Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Tue, 12 Sep 2017 18:49:12 +0530 Subject: [PATCH 048/177] Creates qr code modal box --- .../qr-code-modal.component.html | 27 ++++++++++++++++ .../qr-code-modal.component.scss | 0 .../qr-code-modal.component.spec.ts | 25 +++++++++++++++ .../qr-code-modal/qr-code-modal.component.ts | 31 +++++++++++++++++++ 4 files changed, 83 insertions(+) create mode 100644 src/app/wallet/shared/qr-code-modal/qr-code-modal.component.html create mode 100644 src/app/wallet/shared/qr-code-modal/qr-code-modal.component.scss create mode 100644 src/app/wallet/shared/qr-code-modal/qr-code-modal.component.spec.ts create mode 100644 src/app/wallet/shared/qr-code-modal/qr-code-modal.component.ts diff --git a/src/app/wallet/shared/qr-code-modal/qr-code-modal.component.html b/src/app/wallet/shared/qr-code-modal/qr-code-modal.component.html new file mode 100644 index 000000000..5a809e032 --- /dev/null +++ b/src/app/wallet/shared/qr-code-modal/qr-code-modal.component.html @@ -0,0 +1,27 @@ +

+ {{singleAddress.label}} +

+
+
+
+ +
+
+
+ {{ word }} +
+
+
+
+ +
+
+ + +
+
+
+
+ + diff --git a/src/app/wallet/shared/qr-code-modal/qr-code-modal.component.scss b/src/app/wallet/shared/qr-code-modal/qr-code-modal.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/wallet/shared/qr-code-modal/qr-code-modal.component.spec.ts b/src/app/wallet/shared/qr-code-modal/qr-code-modal.component.spec.ts new file mode 100644 index 000000000..a92d36ca0 --- /dev/null +++ b/src/app/wallet/shared/qr-code-modal/qr-code-modal.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { QrCodeModalComponent } from './qr-code-modal.component'; + +describe('QrCodeModalComponent', () => { + let component: QrCodeModalComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ QrCodeModalComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(QrCodeModalComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/wallet/shared/qr-code-modal/qr-code-modal.component.ts b/src/app/wallet/shared/qr-code-modal/qr-code-modal.component.ts new file mode 100644 index 000000000..91bd1799d --- /dev/null +++ b/src/app/wallet/shared/qr-code-modal/qr-code-modal.component.ts @@ -0,0 +1,31 @@ +import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; + +@Component({ + selector: 'app-qr-code-modal', + templateUrl: './qr-code-modal.component.html', + styleUrls: ['./qr-code-modal.component.scss'] +}) +export class QrCodeModalComponent implements OnInit { + + public singleAddress: any = { + label: 'Empty label', + address: 'Empty address', + owned: false + }; + + @ViewChild('qrCode') qrElementView: ElementRef; + + constructor() { } + + ngOnInit() { + } + + getQrSize() { + return this.qrElementView; + } + + showAddress(address: string) { + return address.match(/.{1,4}/g); + } + +} From f93ad59e53a3325848e14be0c4c5b70a861ae4dd Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Tue, 12 Sep 2017 18:49:49 +0530 Subject: [PATCH 049/177] Add qr code modal box in wallet module and some minor changes in address table --- .../address-table/address-table.component.ts | 16 ++++++++-------- src/app/wallet/wallet.module.ts | 7 +++++-- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/src/app/wallet/shared/address-table/address-table.component.ts b/src/app/wallet/shared/address-table/address-table.component.ts index 6f7393aec..7a8575a44 100644 --- a/src/app/wallet/shared/address-table/address-table.component.ts +++ b/src/app/wallet/shared/address-table/address-table.component.ts @@ -6,6 +6,8 @@ import { AddressService } from '../address.service'; import { Address } from '../address.model'; import { RPCService } from '../../../core/rpc/rpc.module'; +import {MdDialog} from "@angular/material"; +import {QrCodeModalComponent} from "../qr-code-modal/qr-code-modal.component"; @Component({ selector: 'address-table', @@ -42,11 +44,6 @@ export class AddressTableComponent implements OnInit { private addresses: Address[] = []; private _subAddresses: Subscription; - public singleAddress: any = { - label: 'Empty label', - address: 'Empty address', - owned: false - }; // Pagination currentPage: number = 1; @@ -56,7 +53,8 @@ export class AddressTableComponent implements OnInit { constructor( public _addressService: AddressService, - private _rpc: RPCService + private _rpc: RPCService, + public dialog: MdDialog ) { } @@ -141,9 +139,11 @@ export class AddressTableComponent implements OnInit { /** Open QR Code Modal */ openQrCodeModal(address: Object) { + const dialogRef = this.dialog.open(QrCodeModalComponent); + dialogRef.componentInstance.singleAddress = address; + console.log('qrElementView', this.qrElementView) + dialogRef.componentInstance.qrElementView = this.qrElementView; this.log.d(`qrcode, address: ${JSON.stringify(address)}`); - this.openQrModal = true; - this.singleAddress = address } closeQrModal() { diff --git a/src/app/wallet/wallet.module.ts b/src/app/wallet/wallet.module.ts index 4812db9bd..0743c4387 100644 --- a/src/app/wallet/wallet.module.ts +++ b/src/app/wallet/wallet.module.ts @@ -26,6 +26,7 @@ import { MaterialModule } from '@angular/material'; import { FlexLayoutModule } from '@angular/flex-layout'; import { AddAddressLabelComponent } from './receive/modals/add-address-label/add-address-label.component'; import { NewAddressModalComponent } from './address-book/modal/new-address-modal/new-address-modal.component'; +import { QrCodeModalComponent } from './shared/qr-code-modal/qr-code-modal.component'; const routes: Routes = [ { @@ -60,7 +61,8 @@ const routes: Routes = [ BalanceComponent, AddressLookupComponent, AddAddressLabelComponent, - NewAddressModalComponent + NewAddressModalComponent, + QrCodeModalComponent ], exports: [ TransactionsTableComponent, @@ -69,7 +71,8 @@ const routes: Routes = [ ], entryComponents: [ AddAddressLabelComponent, - NewAddressModalComponent + NewAddressModalComponent, + QrCodeModalComponent ], providers: [] }) From a94c8c555b9d1a2022af03bf3ed85d095035e6bd Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Tue, 12 Sep 2017 22:57:31 +0530 Subject: [PATCH 050/177] Rechange design of qrCodeModal box --- .../qr-code-modal.component.html | 31 +++++++++---------- .../qr-code-modal/qr-code-modal.component.ts | 4 +-- 2 files changed, 17 insertions(+), 18 deletions(-) diff --git a/src/app/wallet/shared/qr-code-modal/qr-code-modal.component.html b/src/app/wallet/shared/qr-code-modal/qr-code-modal.component.html index 5a809e032..dcc69ddb8 100644 --- a/src/app/wallet/shared/qr-code-modal/qr-code-modal.component.html +++ b/src/app/wallet/shared/qr-code-modal/qr-code-modal.component.html @@ -1,27 +1,26 @@ -

- {{singleAddress.label}} -

-
-
-
- -
-
-
+
+

+ {{singleAddress.label}} +

+
+
+ +
+
+
{{ word }}
-
+
- - +
+ + +
- - diff --git a/src/app/wallet/shared/qr-code-modal/qr-code-modal.component.ts b/src/app/wallet/shared/qr-code-modal/qr-code-modal.component.ts index 91bd1799d..0a4205fa5 100644 --- a/src/app/wallet/shared/qr-code-modal/qr-code-modal.component.ts +++ b/src/app/wallet/shared/qr-code-modal/qr-code-modal.component.ts @@ -1,4 +1,4 @@ -import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; +import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; @Component({ selector: 'app-qr-code-modal', @@ -21,7 +21,7 @@ export class QrCodeModalComponent implements OnInit { } getQrSize() { - return this.qrElementView; + return this.qrElementView.nativeElement.offsetWidth - 40; } showAddress(address: string) { From 59138b0408a8b4e8dacc7ca8006c4bfafecf9ddd Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Tue, 12 Sep 2017 22:58:27 +0530 Subject: [PATCH 051/177] Refacto NewAdress component for Edit address --- .../new-address-modal.component.html | 6 ++-- .../new-address-modal.component.ts | 29 +++++++++++++------ 2 files changed, 23 insertions(+), 12 deletions(-) diff --git a/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.html b/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.html index 191792734..5fda11c60 100644 --- a/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.html +++ b/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.html @@ -1,5 +1,4 @@ -

Add new address to addresbook

- +

{{modalTitle}}

@@ -11,7 +10,8 @@

Add new address to addresbook

 - +
diff --git a/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.ts b/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.ts index b0f2f5f88..4430e7363 100644 --- a/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.ts +++ b/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.ts @@ -1,9 +1,9 @@ -import { Component, OnInit } from '@angular/core'; -import { FormBuilder, FormGroup, Validators } from '@angular/forms'; -import { FlashNotificationService } from '../../../../services/flash-notification.service'; -import { RPCService } from '../../../../core/rpc/rpc.service'; -import { MdDialogRef } from '@angular/material'; -import { Log } from 'ng2-logger'; +import {Component, OnInit} from '@angular/core'; +import {FormBuilder, FormGroup, Validators} from '@angular/forms'; +import {FlashNotificationService} from '../../../../services/flash-notification.service'; +import {RPCService} from '../../../../core/rpc/rpc.service'; +import {MdDialogRef} from '@angular/material'; +import {Log} from 'ng2-logger'; @Component({ selector: 'app-new-address-modal', @@ -14,8 +14,10 @@ export class NewAddressModalComponent implements OnInit { public addAddressBookForm: FormGroup; public address: string; public label: string; + public isEdit: boolean; + public modalTitle: string; - log: any = Log.create('address-book.component'); + log: any = Log.create('app-new-address-modal'); /* Validation state @@ -30,6 +32,12 @@ export class NewAddressModalComponent implements OnInit { } ngOnInit(): void { + if (this.isEdit) { + this.verifyAddress(); + this.modalTitle = 'Edit address'; + } else { + this.modalTitle = 'Add new address to addresbook'; + } this.buildForm(); } @@ -85,7 +93,7 @@ export class NewAddressModalComponent implements OnInit { this.rpc_addAddressToBook_success(response) }, error => { - console.log('error', error); + console.log('error', error); this.rpc_addAddressToBook_failed(error); }); } @@ -97,7 +105,10 @@ export class NewAddressModalComponent implements OnInit { rpc_addAddressToBook_success(json: Object): void { if (json['result'] === 'success') { this.closeModal(); - this.flashNotificationService.open('Address successfully added to the addressbook!'); + const mesage: string = (this.isEdit) ? 'Address successfully updated to the addressbook!' + : 'Address successfully added to the addressbook!'; + + this.flashNotificationService.open(mesage); // TODO: remove specialPoll! (updates the address table) this._rpc.specialPoll(); } From 196fcd7980ccd1e35708981b1c8e17289f99a1d3 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Tue, 12 Sep 2017 22:59:11 +0530 Subject: [PATCH 052/177] Remove unwanted code and finalize add edit and delete address functionalty with modal --- .../wallet/address-book/address-book.component.html | 2 +- src/app/wallet/address-book/address-book.component.ts | 11 ++++++++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/app/wallet/address-book/address-book.component.html b/src/app/wallet/address-book/address-book.component.html index fdd23cfda..0e6d5b53c 100644 --- a/src/app/wallet/address-book/address-book.component.html +++ b/src/app/wallet/address-book/address-book.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/app/wallet/address-book/address-book.component.ts b/src/app/wallet/address-book/address-book.component.ts index 4dded3851..ea0af0e7c 100644 --- a/src/app/wallet/address-book/address-book.component.ts +++ b/src/app/wallet/address-book/address-book.component.ts @@ -1,6 +1,7 @@ -import { Component } from '@angular/core'; +import {Component, ElementRef, ViewChild} from '@angular/core'; import { MdDialog } from '@angular/material'; import { NewAddressModalComponent } from './modal/new-address-modal/new-address-modal.component'; +import { Log } from 'ng2-logger'; @Component({ selector: 'app-address-book', @@ -9,6 +10,7 @@ import { NewAddressModalComponent } from './modal/new-address-modal/new-address- }) export class AddressBookComponent { + log: any = Log.create('address-book.component'); public query: string; constructor(private dialog: MdDialog) { } @@ -16,4 +18,11 @@ export class AddressBookComponent { openNewAddress(): void { const dialogRef = this.dialog.open(NewAddressModalComponent); } + + editLabel(address: string): void { + this.log.d(`editLabel, address: ${address}`); + const dialogRef = this.dialog.open(NewAddressModalComponent); + dialogRef.componentInstance.address = address; + dialogRef.componentInstance.isEdit = true; + } } From 22f3a2ed51070cc91c54fa52f8c19caedf5c3c42 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Tue, 12 Sep 2017 22:59:52 +0530 Subject: [PATCH 053/177] Small changes in address table --- .../address-table.component.html | 2 +- .../address-table/address-table.component.ts | 38 +++++++------------ 2 files changed, 15 insertions(+), 25 deletions(-) diff --git a/src/app/wallet/shared/address-table/address-table.component.html b/src/app/wallet/shared/address-table/address-table.component.html index 225d3262a..2744a1bd7 100644 --- a/src/app/wallet/shared/address-table/address-table.component.html +++ b/src/app/wallet/shared/address-table/address-table.component.html @@ -23,7 +23,7 @@
-
{{ +
{{ address.label }}
diff --git a/src/app/wallet/shared/address-table/address-table.component.ts b/src/app/wallet/shared/address-table/address-table.component.ts index 7a8575a44..287e5cd2c 100644 --- a/src/app/wallet/shared/address-table/address-table.component.ts +++ b/src/app/wallet/shared/address-table/address-table.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core'; +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; import { Subscription } from 'rxjs/Subscription'; import { Log } from 'ng2-logger'; @@ -6,8 +6,10 @@ import { AddressService } from '../address.service'; import { Address } from '../address.model'; import { RPCService } from '../../../core/rpc/rpc.module'; -import {MdDialog} from "@angular/material"; -import {QrCodeModalComponent} from "../qr-code-modal/qr-code-modal.component"; +import { MdDialog } from '@angular/material'; +import { QrCodeModalComponent} from '../qr-code-modal/qr-code-modal.component'; +import { DeleteConfirmationModalComponent } from '../../../shared/delete-confirmation-modal/delete-confirmation-modal.component'; +import { FlashNotificationService } from '../../../services/flash-notification.service'; @Component({ selector: 'address-table', @@ -33,15 +35,11 @@ export class AddressTableComponent implements OnInit { @Input() displayIsMine: boolean = false; @Output() editLabelEmitter: EventEmitter = new EventEmitter(); - openQrModal: boolean = false; // Search query @Input() query: string; - @ViewChild('qrCode') qrElementView: ElementRef; - // Data storage - private addresses: Address[] = []; private _subAddresses: Subscription; @@ -54,7 +52,8 @@ export class AddressTableComponent implements OnInit { constructor( public _addressService: AddressService, private _rpc: RPCService, - public dialog: MdDialog + public dialog: MdDialog, + public flashNotification: FlashNotificationService ) { } @@ -110,24 +109,21 @@ export class AddressTableComponent implements OnInit { return this.addressDisplayAmount; } - public getQrSize() { - return this.qrElementView.nativeElement.offsetWidth - 40; - } - /** Delete address */ public deleteAddress(label: string, address: string) { - if (confirm(`Are you sure you want to delete ${label}: ${address}`)) { - // this._rpc.call(this, 'manageaddressbook', ['del', address], this.rpc_deleteAddress_success); + const dialogRef = this.dialog.open(DeleteConfirmationModalComponent); + dialogRef.componentInstance.dialogContent = `${label}: ${address}`; + dialogRef.componentInstance.onDelete.subscribe(() => { this._rpc.call('manageaddressbook', ['del', address]) .subscribe(response => { - this.rpc_deleteAddress_success(response); - }); - } + this.rpc_deleteAddress_success(response); + }); + }); } private rpc_deleteAddress_success(json: Object) { - alert(`Succesfully deleted ${json['address']}`); + this.flashNotification.open(`Succesfully deleted ${json['address']}`); this._rpc.specialPoll(); } @@ -141,15 +137,9 @@ export class AddressTableComponent implements OnInit { openQrCodeModal(address: Object) { const dialogRef = this.dialog.open(QrCodeModalComponent); dialogRef.componentInstance.singleAddress = address; - console.log('qrElementView', this.qrElementView) - dialogRef.componentInstance.qrElementView = this.qrElementView; this.log.d(`qrcode, address: ${JSON.stringify(address)}`); } - closeQrModal() { - this.openQrModal = false; - } - showAddress(address: string) { return address.match(/.{1,4}/g); } From f83b2ad1546f7f35b7694cb6eb4247e68d0e6252 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Tue, 12 Sep 2017 23:00:28 +0530 Subject: [PATCH 054/177] Adds helper css and update shared module --- src/app/shared/shared.module.ts | 9 +++++++-- src/assets/theme.scss | 3 +++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index a5e330e9e..86f000896 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -13,6 +13,7 @@ import { TableComponent } from './table/table.component'; import { GridComponent } from './grid/grid.component'; import { MaterialModule } from '@angular/material'; import { FlexLayoutModule } from '@angular/flex-layout'; +import { DeleteConfirmationModalComponent } from './delete-confirmation-modal/delete-confirmation-modal.component'; @NgModule({ imports: [ @@ -29,7 +30,8 @@ import { FlexLayoutModule } from '@angular/flex-layout'; declarations: [ HeaderComponent, TableComponent, - GridComponent + GridComponent, + DeleteConfirmationModalComponent ], exports: [ CommonModule, @@ -45,6 +47,9 @@ import { FlexLayoutModule } from '@angular/flex-layout'; TableComponent, GridComponent, AccordionModule - ] + ], + entryComponents: [ + DeleteConfirmationModalComponent + ], }) export class SharedModule { } diff --git a/src/assets/theme.scss b/src/assets/theme.scss index 81fec5ec9..9c6b3644a 100644 --- a/src/assets/theme.scss +++ b/src/assets/theme.scss @@ -186,6 +186,9 @@ input[type="text"] { .md-left-border { border-left: 1px solid #ddd; } +.container-block{ + padding: 20px; +} @media (max-width: 1280px) { .qrcode { From 032a7bf62397ddc3359dadf9a97a9ddac9f65cbb Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Tue, 12 Sep 2017 23:00:48 +0530 Subject: [PATCH 055/177] Creates delete confirmation modal box --- .../delete-confirmation-modal.component.html | 10 ++++++++ .../delete-confirmation-modal.component.scss | 3 +++ ...elete-confirmation-modal.component.spec.ts | 25 +++++++++++++++++++ .../delete-confirmation-modal.component.ts | 24 ++++++++++++++++++ 4 files changed, 62 insertions(+) create mode 100644 src/app/shared/delete-confirmation-modal/delete-confirmation-modal.component.html create mode 100644 src/app/shared/delete-confirmation-modal/delete-confirmation-modal.component.scss create mode 100644 src/app/shared/delete-confirmation-modal/delete-confirmation-modal.component.spec.ts create mode 100644 src/app/shared/delete-confirmation-modal/delete-confirmation-modal.component.ts diff --git a/src/app/shared/delete-confirmation-modal/delete-confirmation-modal.component.html b/src/app/shared/delete-confirmation-modal/delete-confirmation-modal.component.html new file mode 100644 index 000000000..81498e373 --- /dev/null +++ b/src/app/shared/delete-confirmation-modal/delete-confirmation-modal.component.html @@ -0,0 +1,10 @@ +

Are you sure you want to delete ?

+ +
+ {{dialogContent}} +
+ + + + + diff --git a/src/app/shared/delete-confirmation-modal/delete-confirmation-modal.component.scss b/src/app/shared/delete-confirmation-modal/delete-confirmation-modal.component.scss new file mode 100644 index 000000000..21c2296a9 --- /dev/null +++ b/src/app/shared/delete-confirmation-modal/delete-confirmation-modal.component.scss @@ -0,0 +1,3 @@ +.mat-dialog-content { + padding: 10px 26px; +} diff --git a/src/app/shared/delete-confirmation-modal/delete-confirmation-modal.component.spec.ts b/src/app/shared/delete-confirmation-modal/delete-confirmation-modal.component.spec.ts new file mode 100644 index 000000000..6ad8f5ce3 --- /dev/null +++ b/src/app/shared/delete-confirmation-modal/delete-confirmation-modal.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DeleteConfirmationModalComponent } from './delete-confirmation-modal.component'; + +describe('DeleteConfirmationModalComponent', () => { + let component: DeleteConfirmationModalComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DeleteConfirmationModalComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DeleteConfirmationModalComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/delete-confirmation-modal/delete-confirmation-modal.component.ts b/src/app/shared/delete-confirmation-modal/delete-confirmation-modal.component.ts new file mode 100644 index 000000000..31e866c20 --- /dev/null +++ b/src/app/shared/delete-confirmation-modal/delete-confirmation-modal.component.ts @@ -0,0 +1,24 @@ +import {Component, EventEmitter, OnInit, Output} from '@angular/core'; +import { MdDialogRef } from '@angular/material'; + +@Component({ + selector: 'app-delete-confirmation-modal', + templateUrl: './delete-confirmation-modal.component.html', + styleUrls: ['./delete-confirmation-modal.component.scss'] +}) +export class DeleteConfirmationModalComponent implements OnInit { + + public dialogContent: string; + + @Output() onDelete = new EventEmitter(); + + constructor(private diloagRef: MdDialogRef) { } + + ngOnInit(): void { + this.dialogContent = (this.dialogContent) ? this.dialogContent : 'This item'; + } + + onConfirmDelete(): void{ + this.onDelete.emit(); + } +} From 2b3f6e07b128d44a2af6156f449e264d612949b7 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Thu, 14 Sep 2017 23:06:54 +0530 Subject: [PATCH 056/177] Adds css for history list design --- src/assets/common/helper.scss | 7 +++++++ src/assets/theme.scss | 10 ++++++++++ 2 files changed, 17 insertions(+) diff --git a/src/assets/common/helper.scss b/src/assets/common/helper.scss index 764300c01..c144a6fc4 100644 --- a/src/assets/common/helper.scss +++ b/src/assets/common/helper.scss @@ -1,6 +1,13 @@ .cursor-pointer { cursor: pointer; } + .text-uppercase { text-transform: uppercase; } + +.list-header { + box-sizing: border-box; + font-weight: bold; + font-size: 16px; +} diff --git a/src/assets/theme.scss b/src/assets/theme.scss index 9c6b3644a..af333d88c 100644 --- a/src/assets/theme.scss +++ b/src/assets/theme.scss @@ -190,6 +190,16 @@ input[type="text"] { padding: 20px; } + +/*14/09/17*/ +//.history_date{flex: 0 0 10% !important;} +.history_longAddress{overflow: hidden; text-overflow: ellipsis;} +.history_txt{overflow: hidden; text-overflow: ellipsis;} +//.history_blockIndex{flex: 0 0 8%;} +//.history_confirmation{flex: 0 0 8%;} +//.history_amount{flex: 0 0 18%;} +.mat-content{max-width: 100%;} + @media (max-width: 1280px) { .qrcode { text-align: center; From d65b7ba2e2b7531299761ea3d4a41de9617d2d5f Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Thu, 14 Sep 2017 23:07:18 +0530 Subject: [PATCH 057/177] Creates AddressLookUpsCopy model --- src/app/wallet/models/address-look-up-copy.ts | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 src/app/wallet/models/address-look-up-copy.ts diff --git a/src/app/wallet/models/address-look-up-copy.ts b/src/app/wallet/models/address-look-up-copy.ts new file mode 100644 index 000000000..6fb1b4629 --- /dev/null +++ b/src/app/wallet/models/address-look-up-copy.ts @@ -0,0 +1,4 @@ +export class AddressLookUpCopy { + address: string; + label: string; +} From e54cb801855ea9241990295e96876a606c6f214e Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Thu, 14 Sep 2017 23:07:42 +0530 Subject: [PATCH 058/177] Creates SendConfirmationComponent --- .../send-confirmation-modal.component.html | 10 ++++++++ .../send-confirmation-modal.component.scss | 0 .../send-confirmation-modal.component.spec.ts | 25 +++++++++++++++++++ .../send-confirmation-modal.component.ts | 22 ++++++++++++++++ 4 files changed, 57 insertions(+) create mode 100644 src/app/wallet/send/send-confirmation-modal/send-confirmation-modal.component.html create mode 100644 src/app/wallet/send/send-confirmation-modal/send-confirmation-modal.component.scss create mode 100644 src/app/wallet/send/send-confirmation-modal/send-confirmation-modal.component.spec.ts create mode 100644 src/app/wallet/send/send-confirmation-modal/send-confirmation-modal.component.ts diff --git a/src/app/wallet/send/send-confirmation-modal/send-confirmation-modal.component.html b/src/app/wallet/send/send-confirmation-modal/send-confirmation-modal.component.html new file mode 100644 index 000000000..0dd69e83f --- /dev/null +++ b/src/app/wallet/send/send-confirmation-modal/send-confirmation-modal.component.html @@ -0,0 +1,10 @@ +

Validate

+ +
+ {{dialogContent}} +
+ + + + + diff --git a/src/app/wallet/send/send-confirmation-modal/send-confirmation-modal.component.scss b/src/app/wallet/send/send-confirmation-modal/send-confirmation-modal.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/wallet/send/send-confirmation-modal/send-confirmation-modal.component.spec.ts b/src/app/wallet/send/send-confirmation-modal/send-confirmation-modal.component.spec.ts new file mode 100644 index 000000000..25319eb5e --- /dev/null +++ b/src/app/wallet/send/send-confirmation-modal/send-confirmation-modal.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SendConfirmationModalComponent } from './send-confirmation-modal.component'; + +describe('SendConfirmationModalComponent', () => { + let component: SendConfirmationModalComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SendConfirmationModalComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SendConfirmationModalComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/wallet/send/send-confirmation-modal/send-confirmation-modal.component.ts b/src/app/wallet/send/send-confirmation-modal/send-confirmation-modal.component.ts new file mode 100644 index 000000000..15125bbde --- /dev/null +++ b/src/app/wallet/send/send-confirmation-modal/send-confirmation-modal.component.ts @@ -0,0 +1,22 @@ +import { Component, EventEmitter, OnInit, Output } from '@angular/core'; +import { MdDialogRef } from '@angular/material'; + +@Component({ + selector: 'app-send-confirmation-modal', + templateUrl: './send-confirmation-modal.component.html', + styleUrls: ['./send-confirmation-modal.component.scss'] +}) +export class SendConfirmationModalComponent { + + @Output() onConfirm = new EventEmitter(); + + public dialogContent: string; + + constructor() { + } + + confirm(): void { + this.onConfirm.emit(); + } + +} From 7cacb952079151623c20323f28b12fe03ae733ec Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Thu, 14 Sep 2017 23:08:13 +0530 Subject: [PATCH 059/177] Small change in partguiMaterial Theme css --- src/assets/theme/partgui-theme.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/theme/partgui-theme.css b/src/assets/theme/partgui-theme.css index 18142707e..87f075801 100644 --- a/src/assets/theme/partgui-theme.css +++ b/src/assets/theme/partgui-theme.css @@ -408,7 +408,7 @@ input.mat-input-element { } .mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item { - font-size: 16px + font-size: 14px } .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line { From 5686ed26314ee31705eb28becac87722fa503945 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Thu, 14 Sep 2017 23:08:51 +0530 Subject: [PATCH 060/177] Adds component in wallet module --- src/app/wallet/wallet.module.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/app/wallet/wallet.module.ts b/src/app/wallet/wallet.module.ts index 0743c4387..42852de0b 100644 --- a/src/app/wallet/wallet.module.ts +++ b/src/app/wallet/wallet.module.ts @@ -27,6 +27,7 @@ import { FlexLayoutModule } from '@angular/flex-layout'; import { AddAddressLabelComponent } from './receive/modals/add-address-label/add-address-label.component'; import { NewAddressModalComponent } from './address-book/modal/new-address-modal/new-address-modal.component'; import { QrCodeModalComponent } from './shared/qr-code-modal/qr-code-modal.component'; +import { SendConfirmationModalComponent } from './send/send-confirmation-modal/send-confirmation-modal.component'; const routes: Routes = [ { @@ -62,7 +63,8 @@ const routes: Routes = [ AddressLookupComponent, AddAddressLabelComponent, NewAddressModalComponent, - QrCodeModalComponent + QrCodeModalComponent, + SendConfirmationModalComponent ], exports: [ TransactionsTableComponent, @@ -72,7 +74,9 @@ const routes: Routes = [ entryComponents: [ AddAddressLabelComponent, NewAddressModalComponent, - QrCodeModalComponent + QrCodeModalComponent, + AddressLookupComponent, + SendConfirmationModalComponent ], providers: [] }) From 2137dd163770e86ec21bcdda1fcec6273d776abb Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Thu, 14 Sep 2017 23:09:19 +0530 Subject: [PATCH 061/177] Replace alert box by flash message --- src/app/wallet/send/send.service.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/app/wallet/send/send.service.ts b/src/app/wallet/send/send.service.ts index dbab720a4..2fa5fd1af 100644 --- a/src/app/wallet/send/send.service.ts +++ b/src/app/wallet/send/send.service.ts @@ -2,6 +2,7 @@ import { Injectable } from '@angular/core'; import { RPCService } from '../../core/rpc/rpc.module'; import { Log } from 'ng2-logger' +import {FlashNotificationService} from "../../services/flash-notification.service"; @Injectable() @@ -23,7 +24,8 @@ export class SendService { */ - constructor(public _rpc: RPCService) { + constructor(public _rpc: RPCService, + private flashNotification: FlashNotificationService) { // this._rpc.oldCall(this, 'liststealthaddresses', null, this.rpc_listDefaultAddress_success); this._rpc.call('liststealthaddresses', null) .subscribe(response => { @@ -114,7 +116,7 @@ export class SendService { rpc_send_success(json: any) { this.log.d(`rpc_send_success, succesfully executed transaction with txid ${json}`); - alert(`Succesfully sent ${this.amount} PART to ${this.address}!\nTransaction id: ${json}`); + this.flashNotification.open(`Succesfully sent ${this.amount} PART to ${this.address}!\nTransaction id: ${json}`); } rpc_send_failed(json: any) { From f68f86e6cc5f1a4161bf7939cdd42cabfda369e2 Mon Sep 17 00:00:00 2001 From: Kirti Anand Date: Thu, 14 Sep 2017 23:10:03 +0530 Subject: [PATCH 062/177] Refactor addressLookup component into md-modal box --- .../addresslookup.component.html | 81 +++++++++---------- .../addresslookup.component.scss | 22 ++--- .../addresslookup/addresslookup.component.ts | 43 +++++----- 3 files changed, 62 insertions(+), 84 deletions(-) diff --git a/src/app/wallet/addresslookup/addresslookup.component.html b/src/app/wallet/addresslookup/addresslookup.component.html index c0ba0068d..4099bca85 100644 --- a/src/app/wallet/addresslookup/addresslookup.component.html +++ b/src/app/wallet/addresslookup/addresslookup.component.html @@ -1,51 +1,42 @@ -