Merge pull request #156 from stratisproject/ui

Add context menu, add logout confirmation

Breeze.UI/main.ts

@@ -19,6 +19,10 @@ if (serve) {
   });
 }
 
+require('electron-context-menu')({
+  showInspectElement: serve
+});
+
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
 let mainWindow = null;

Breeze.UI/package.json

@@ -54,6 +54,7 @@
     "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.27",
     "angular2-material-datepicker": "^0.5.0",
     "core-js": "^2.4.1",
+    "electron-context-menu": "^0.9.1",
     "ngx-clipboard": "^8.0.3",
     "rxjs": "5.4.1",
     "zone.js": "^0.8.12"

Breeze.UI/src/app/app.module.ts

@@ -19,6 +19,7 @@ import { GlobalService } from './shared/services/global.service';
 import { SendComponent } from './wallet/send/send.component';
 import { ReceiveComponent } from './wallet/receive/receive.component';
 import { TransactionDetailsComponent } from './wallet/transaction-details/transaction-details.component';
+import { LogoutConfirmationComponent } from './wallet/logout-confirmation/logout-confirmation.component';
 
 
 @NgModule({
@@ -36,6 +37,7 @@ import { TransactionDetailsComponent } from './wallet/transaction-details/transa
   declarations: [
     AppComponent,
     LoginComponent,
+    LogoutConfirmationComponent,
     SendComponent,
     ReceiveComponent,
     TransactionDetailsComponent
@@ -43,7 +45,8 @@ import { TransactionDetailsComponent } from './wallet/transaction-details/transa
   entryComponents: [
     SendComponent,
     ReceiveComponent,
-    TransactionDetailsComponent
+    TransactionDetailsComponent,
+    LogoutConfirmationComponent
   ],
   providers: [ ApiService, GlobalService ],
   bootstrap: [ AppComponent ]

Breeze.UI/src/app/wallet/logout-confirmation/logout-confirmation.component.html

+<div id="modalLogout" tabindex="-1" role="dialog" aria-labelledby="modal_logout" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div>
+      <div class="modal-header">
+        <div class="bubble"><i class="icon-download"></i></div>
+      </div>
+      <div class="modal-body">
+        <h5 class="modal-title text-uppercase" id="modalReceive">Logout</h5>
+        <form>
+          <div class="form-group clearfix">
+            <label class="float-left">Are you sure you want to logout?</label>
+          </div>
+          <div>
+            <button type="button" class="btn btn-lg btn-primary float-left" data-dismiss="modal" aria-label="Logout" (click)="onLogout()">Yes</button>
+            <button type="button" class="btn btn-lg btn-primary float-right" data-dismiss="modal" aria-label="Close" (click)="activeModal.close('Close click')">Cancel</button>
+          </div>
+          <br>
+        </form>
+      </div>
+      <div class="modal-footer">
+        <p></p>
+      </div>
+    </div>
+  </div>
+</div>

Breeze.UI/src/app/wallet/logout-confirmation/logout-confirmation.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LogoutConfirmationComponent } from './logout-confirmation.component';
+
+describe('LogoutConfirmationComponent', () => {
+  let component: LogoutConfirmationComponent;
+  let fixture: ComponentFixture<LogoutConfirmationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LogoutConfirmationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LogoutConfirmationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

Breeze.UI/src/app/wallet/logout-confirmation/logout-confirmation.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-logout-confirmation',
+  templateUrl: './logout-confirmation.component.html',
+  styleUrls: ['./logout-confirmation.component.css']
+})
+export class LogoutConfirmationComponent implements OnInit {
+
+  constructor(private activeModal: NgbActiveModal, private router: Router) { }
+
+  ngOnInit() {
+  }
+
+  private onLogout() {
+    this.activeModal.close();
+    this.router.navigate(['/login']);
+  }
+}

Breeze.UI/src/app/wallet/menu/menu.component.ts

 import { Component } from '@angular/core';
-import { Router } from '@angular/router';
+
+import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+import { LogoutConfirmationComponent } from '../logout-confirmation/logout-confirmation.component';
 
 @Component({
   selector: 'app-menu',
@@ -7,9 +10,9 @@ import { Router } from '@angular/router';
   styleUrls: ['./menu.component.css'],
 })
 export class MenuComponent {
-  constructor(private router: Router) {}
+  constructor(private modalService: NgbModal) {}
 
   private logOut() {
-    this.router.navigate(['/login']);
+    const modalRef = this.modalService.open(LogoutConfirmationComponent);
   }
 }

Breeze.UI/src/app/wallet/sidebar/sidebar.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'sidebar',
   templateUrl: './sidebar.component.html',
-  styleUrls: ['./sidebar.component.scss']
+  styleUrls: ['./sidebar.component.css']
 })
 export class SidebarComponent implements OnInit {
 

Breeze.UI/src/app/wallet/status-bar/status-bar.component.ts

@@ -10,7 +10,7 @@ import { Subscription } from 'rxjs/Subscription';
 @Component({
   selector: 'status-bar',
   templateUrl: './status-bar.component.html',
-  styleUrls: ['./status-bar.component.scss']
+  styleUrls: ['./status-bar.component.css']
 })
 export class StatusBarComponent implements OnInit {
 
@@ -46,15 +46,15 @@ export class StatusBarComponent implements OnInit {
 
             if(!this.isChainSynced) {
               this.percentSynced = "syncing...";
-            } 
+            }
             else {
               this.percentSyncedNumber = ((this.lastBlockSyncedHeight / this.chainTip) * 100);
               if (this.percentSyncedNumber.toFixed(0) === "100" && this.lastBlockSyncedHeight != this.chainTip) {
                 this.percentSyncedNumber = 99;
               }
 
-              this.percentSynced = this.percentSyncedNumber.toFixed(0) + "%";  
-            } 
+              this.percentSynced = this.percentSyncedNumber.toFixed(0) + "%";
+            }
           }
         },
         error => {

Breeze.UI/src/app/wallet/transaction-details/transaction-details.component.ts

@@ -5,7 +5,7 @@ import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 @Component({
   selector: 'transaction-details',
   templateUrl: './transaction-details.component.html',
-  styleUrls: ['./transaction-details.component.scss']
+  styleUrls: ['./transaction-details.component.css']
 })
 export class TransactionDetailsComponent implements OnInit {