fix merge

src/app/core-ui/core-ui.module.ts

@@ -4,11 +4,15 @@ import { CommonModule } from '@angular/common';
 import { MaterialModule } from './material/material.module';
 import { MainViewModule } from './main/main-view.module';
 
-import { MatDialogModule, MatDialogRef } from '@angular/material';
-import { MatDialog } from '@angular/material'; // TODO: move to material
+import { MatDialogModule } from '@angular/material';
+import { MatDialog } from '@angular/material';
+import { PaginatorComponent } from './paginator/paginator.component';
+// TODO: move to material
 
 @NgModule({
-  declarations: [],
+  declarations: [
+    PaginatorComponent
+  ],
   imports: [
     CommonModule,
     MaterialModule,
@@ -17,7 +21,8 @@ import { MatDialog } from '@angular/material'; // TODO: move to material
   ],
   exports: [
     MaterialModule,
-    MainViewModule
+    MainViewModule,
+    PaginatorComponent
   ]
 })
 export class CoreUiModule {

src/app/core-ui/main/main-view.component.html

@@ -131,7 +131,7 @@
       <!-- Sync progress -->
       <mat-content class="sync-progress cursor-pointer" (click)="syncScreen()">
         <!-- reused from syncing dialog -->
-        <app-percentage-bar #progress [sidebar]="true"></app-percentage-bar>
+        <app-percentage-bar #progress></app-percentage-bar>
       </mat-content>
 
     </footer><!-- .pin-to-bottom -->

src/app/core-ui/main/main-view.module.ts

@@ -8,6 +8,8 @@ import { CoreModule } from '../../core/core.module';
 
 import { MainViewComponent } from './main-view.component';
 import { StatusComponent } from './status/status.component';
+import { PercentageBarComponent } from '../../modals/shared/percentage-bar/percentage-bar.component';
+
 import { TransactionService } from '../../wallet/wallet/shared/transaction.service';
 
 @NgModule({
@@ -18,10 +20,12 @@ import { TransactionService } from '../../wallet/wallet/shared/transaction.servi
   ],
   exports: [
     MainViewComponent,
+    PercentageBarComponent
   ],
   declarations: [
     MainViewComponent,
     StatusComponent,
+    PercentageBarComponent
   ],
   providers: [
     TransactionService

src/app/core-ui/paginator/page-event-model.ts

@@ -0,0 +1,8 @@
+export class PageEvent {
+  /** The current page index. */
+  pageIndex: number;
+  /** The current page size */
+  pageSize: number;
+  /** The current total number of items being paged */
+  length: number;
+}

src/app/core-ui/paginator/paginator.component.html

@@ -0,0 +1,34 @@
+<div class="mat-paginator-page-size">
+  <div class="mat-paginator-page-size-label">{{_intl.itemsPerPageLabel}}</div>
+  <mat-form-field *ngIf="pageSizeOptions.length> 1" class="mat-paginator-page-size-select">
+    <mat-select [value]="pageSize" [aria-label]="_intl.itemsPerPageLabel"
+                (change)="_changePageSize($event.value)">
+      <mat-option *ngFor="let pageSizeOption of pageSizeOptions" [value]="pageSizeOption">
+        {{pageSizeOption}}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+  <div *ngIf="pageSizeOptions.length <= 1">{{pageSize}}</div>
+</div>
+<div class="mat-paginator-range-label">{{getRangeLabel(pageIndex, pageSize, length)}}</div>
+<button mat-icon-button type="button" class="mat-paginator-navigation-previous" (click)="firstPage()"
+        [matTooltip]="_intl.firstPageLable"
+        [matTooltipPosition]="'above'" [disabled]="!hasPreviousPage()">
+  <mat-icon class="icon" fontSet="partIcon" fontIcon="part-previous-double"></mat-icon>
+</button>
+<button mat-icon-button type="button" class="mat-paginator-navigation-previous" (click)="previousPage()"
+        [matTooltip]="_intl.previousPageLabel"
+        [matTooltipPosition]="'above'" [disabled]="!hasPreviousPage()">
+  <mat-icon class="icon" fontSet="partIcon" fontIcon="part-previous-single"></mat-icon>
+</button>
+
+<button mat-icon-button type="button" class="mat-paginator-navigation-next" (click)="nextPage()"
+        [matTooltip]="_intl.nextPageLabel" [matTooltipPosition]="'above'"
+        [disabled]="!hasNextPage()">
+  <mat-icon class="icon" fontSet="partIcon" fontIcon="part-next-single"></mat-icon>
+</button>
+<button mat-icon-button type="button" class="mat-paginator-navigation-next" (click)="lastPage()"
+        [matTooltip]="_intl.lastPageLable" [matTooltipPosition]="'above'"
+        [disabled]="!hasNextPage()">
+  <mat-icon class="icon" fontSet="partIcon" fontIcon="part-next-double"></mat-icon>
+</button>

src/app/core-ui/paginator/paginator.component.scss

@@ -0,0 +1,62 @@
+@import "./src/assets/_config"; // import shared colors etc.
+
+.mat-paginator-page-size {
+  display: flex;
+  align-items: center
+}
+
+.mat-paginator-page-size-label {
+  margin: 0 4px
+}
+
+.mat-paginator-page-size-select {
+  margin: 0 0 -1.25em 8px;
+  width: 56px
+}
+
+.mat-paginator-range-label {
+  margin: 0 32px
+}
+
+.mat-paginator-increment-button + .mat-paginator-increment-button {
+  margin: 0 0 0 8px
+}
+
+[dir=rtl] .mat-paginator-increment-button + .mat-paginator-increment-button {
+  margin: 0 8px 0 0
+}
+
+.mat-paginator-decrement, .mat-paginator-increment {
+  width: 8px;
+  height: 8px
+}
+
+.mat-paginator-decrement, [dir=rtl] .mat-paginator-increment {
+  transform: rotate(45deg)
+}
+
+.mat-paginator-increment, [dir=rtl] .mat-paginator-decrement {
+  transform: rotate(225deg)
+}
+
+.mat-paginator-decrement {
+  margin-left: 12px
+}
+
+[dir=rtl] .mat-paginator-decrement {
+  margin-right: 12px
+}
+
+.mat-paginator-increment {
+  margin-left: 16px
+}
+
+[dir=rtl] .mat-paginator-increment {
+  margin-right: 16px
+}
+
+button {
+  .mat-icon {
+    margin: 0;
+  }
+}

src/app/core-ui/paginator/paginator.component.spec.ts

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

src/app/core-ui/paginator/paginator.component.ts

@@ -0,0 +1,125 @@
+import { PageEvent } from './page-event-model';
+import {
+  Component,
+  EventEmitter,
+  HostBinding,
+  Input,
+  OnInit,
+  Output
+} from '@angular/core';
+
+@Component({
+  selector: 'app-paginator',
+  templateUrl: './paginator.component.html',
+  styleUrls: ['./paginator.component.scss']
+})
+
+export class PaginatorComponent implements OnInit {
+
+  pageIndex: number = 0;
+  @Input() length: number = 0;
+  @Input() pageSize: number = 0;
+  @Input() pageSizeOptions: number[] = [];
+  @Output() page: EventEmitter<PageEvent> = new EventEmitter<PageEvent>();
+
+  @HostBinding('class.mat-paginator')
+
+  public _intl: Object = {
+    itemsPerPageLabel: 'Items per page:',
+    nextPageLabel: 'Next page',
+    previousPageLabel: 'Previous page',
+    firstPageLable: 'Fist Page',
+    lastPageLable: 'Last Page'
+  };
+
+  constructor() { }
+
+  ngOnInit() {}
+
+  /** Advances to the next page if it exists. */
+  nextPage(): void {
+    if (!this.hasNextPage()) {
+      return;
+    }
+    this.pageIndex++;
+    this._emitPageEvent();
+  }
+
+  /** Move back to the previous page if it exists. */
+  previousPage(): void {
+    if (!this.hasPreviousPage()) {
+      return;
+    }
+    this.pageIndex--;
+    this._emitPageEvent();
+  }
+
+  /** Move back to the first page. */
+  firstPage(): void {
+    this.pageIndex = 0;
+    this._emitPageEvent();
+  }
+
+  /** go to the last page if it exists. */
+  lastPage(): void {
+    this.pageIndex = Math.ceil(this.length / this.pageSize) - 1;
+    this._emitPageEvent();
+  }
+
+  /**
+   * Whether there is a previous page.
+   * @return {?}
+   */
+  hasPreviousPage() {
+    return this.pageIndex >= 1 && this.pageSize !== 0;
+  };
+
+  /**
+   * Whether there is a next page.
+   * @return {?}
+   */
+  hasNextPage() {
+    const numberOfPages = Math.ceil(this.length / this.pageSize) - 1;
+    return this.pageIndex < numberOfPages && this.pageSize !== 0;
+  };
+
+  getRangeLabel(page: number, pageSize: number, length: number) {
+    if (length === 0 || pageSize === 0) {
+      return '0 of ' + length;
+    }
+    length = Math.max(length, 0);
+    const startIndex = page * pageSize;
+    // If the start index exceeds the list length, do not try and fix the end index to the end.
+    const endIndex = startIndex < length
+      ? Math.min(startIndex + pageSize, length)
+      : startIndex + pageSize;
+    return startIndex + 1 + ' - ' + endIndex + ' of ' + length;
+  }
+
+  /**
+   * Changes the page size so that the first item displayed on the page will still be
+   * displayed using the new page size.
+   *
+   * For example, if the page size is 10 and on the second page (items indexed 10-19) then
+   * switching so that the page size is 5 will set the third page as the current page so
+   * that the 10th item will still be displayed.
+   * @param {?} pageSize
+   * @return {?}
+   */
+  _changePageSize(pageSize: number): void {
+    // Current page needs to be updated to reflect the new page size. Navigate to the page
+    // containing the previous page's first item.
+    const startIndex = this.pageIndex * this.pageSize;
+    this.pageIndex = Math.floor(startIndex / pageSize) || 0;
+    this.pageSize = pageSize;
+    this._emitPageEvent();
+  }
+
+  _emitPageEvent(): void {
+    this.page.next({
+      pageIndex: this.pageIndex,
+      pageSize: this.pageSize,
+      length: this.length
+    });
+  }
+}

src/app/modals/encryptwallet/encryptwallet.component.spec.ts

@@ -1,4 +1,5 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatDialogRef } from '@angular/material';
 
 import { CoreModule } from '../../core/core.module';
 import { ModalsModule } from '../modals.module';
@@ -19,6 +20,9 @@ describe('EncryptwalletComponent', () => {
         ModalsModule,
         CoreModule.forRoot(),
         CoreUiModule.forRoot()
+      ],
+      providers: [
+        { provide: MatDialogRef }
       ]
     })
     .compileComponents();

src/app/modals/encryptwallet/encryptwallet.component.ts

@@ -1,5 +1,6 @@
 import {Component, forwardRef, Inject, ViewChild} from '@angular/core';
 import { Log } from 'ng2-logger';
+import { MatDialogRef } from '@angular/material';
 
 import { PasswordComponent } from '../shared/password/password.component';
 import { IPassword } from '../shared/password/password.interface';
@@ -21,11 +22,13 @@ export class EncryptwalletComponent {
   @ViewChild('passwordElement')
   passwordElement: PasswordComponent;
 
-  constructor(private _rpc: RpcService,
-              private flashNotification: SnackbarService,
-              @Inject(forwardRef(() => ModalsService))
-              private _modalsService: ModalsService) {
-  }
+  constructor(
+    @Inject(forwardRef(() => ModalsService))
+    private _modalsService: ModalsService,
+    private _rpc: RpcService,
+    private flashNotification: SnackbarService,
+    public _dialogRef: MatDialogRef<EncryptwalletComponent>
+  ) { }
 
   encryptwallet(password: IPassword) {
     if (this.password) {
@@ -47,10 +50,12 @@ export class EncryptwalletComponent {
                   .subscribe(() => {
                     if (!this._modalsService.initializedWallet) {
                       this._modalsService.open('createWallet', {forceOpen: true});
-                      this._rpc.toggleState(true);
                     } else {
                       this._modalsService.close();
+                      // force-close encrypt modal
+                      this._dialogRef.close();
                     }
+                    this._rpc.toggleState(true);
                   });
               }
             },

src/app/modals/modals.component.html

@@ -6,8 +6,4 @@
   <mat-spinner mode="indeterminate" *ngIf="loadSpinner"></mat-spinner>
 
   <ng-template #modalContainer></ng-template>
-</div>
-
-<div class="modal-footer-info">
-  <app-percentage-bar></app-percentage-bar>
-</div>
+</div>