Skip to content

B
Breeze
Commit 7822b524 authored by Pieterjan Vanhoof's avatar Pieterjan Vanhoof Committed by GitHub
Browse files
Options

Merge pull request #58 from stratisproject/ui 

- Added bootstrap grids to all components
- Add copy to clipboard at receive component
- Add basic styling
parents 93983ede 37c9ccee
Hide whitespace changes
Inline Side-by-side
Showing with 306 additions and 134 deletions
Breeze.UI/package.json
View file @ 7822b524
......@@ -37,6 +37,7 @@
"angular2-material-datepicker": "^0.5.0",
"bootstrap": "^4.0.0-alpha.6",
"core-js": "^2.4.1",
"ngx-clipboard": "^8.0.2",
"rxjs": "^5.4.0",
"zone.js": "^0.8.10"
},
......
Breeze.UI/src/app/app.module.ts
View file @ 7822b524
......@@ -3,7 +3,8 @@ import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { ClipboardModule } from 'ngx-clipboard';
import { SharedModule } from './shared/shared.module';
......@@ -24,6 +25,7 @@ import { ReceiveComponent } from './wallet/receive/receive.component';
AppRoutingModule,
BrowserModule,
BrowserAnimationsModule,
ClipboardModule,
ReactiveFormsModule,
FormsModule,
HttpModule,
......
Breeze.UI/src/app/login/login.component.html
View file @ 7822b524
<h1>Welcome to Breeze</h1>
<form *ngIf="hasWallet" [formGroup]="openWalletForm" (ngSubmit)="onDecryptClicked()">
<p>Choose the wallet you want to open:</p>
<div class="form-group">
<label>Select wallet name to open:</label>
<select class="form-control" formControlName="selectWallet">
<option *ngFor="let wallet of wallets" [value]="wallet">{{wallet}}</option>
</select>
<div class="container">
<div class="row">
<div class="col">
<h1>Welcome to Breeze</h1>
</div>
</div>
<p>Please enter your password to decrypt your wallet</p>
<div class="form-group">
<label>Your password: </label>
<input class="form-control" type="password" formControlName="password" placeholder="Enter password here">
<div class="row">
<div class="col">
<form *ngIf="hasWallet" [formGroup]="openWalletForm" (ngSubmit)="onDecryptClicked()">
<div class="form-group">
<label>Select wallet name to open</label>
<select class="form-control" formControlName="selectWallet">
<option *ngFor="let wallet of wallets" [value]="wallet">{{wallet}}</option>
</select>
</div>
<p>Please enter your password to decrypt your wallet</p>
<div class="form-group">
<label>Your password: </label>
<input class="form-control" type="password" formControlName="password" placeholder="Enter password here">
</div>
<div class="form-group">
<button type="submit" [disabled]="!openWalletForm.valid" class="btn btn-success">Decrypt</button>
</div>
</form>
</div>
</div>
<div class="form-group">
<button type="submit" [disabled]="!openWalletForm.valid" class="btn btn-success">Decrypt</button>
<div class="row">
<div class="col" *ngIf="hasWallet;else no_wallet">
If you like to create or restore a wallet please click the button below.
</div>
</div>
<div class="row">
<div class="col">
<ng-template #no_wallet>
<p> Looks like you're new here. Please create or restore a wallet.</p>
</ng-template>
</div>
</div>
<div class="row">
<div class="col">
<button type="button" (click)="onCreateClicked()" class="btn btn-success">Create or restore wallet</button>
</div>
</div>
</form>
<div *ngIf="hasWallet;else no_wallet">
<p> If you like to create or restore a wallet please click the button below.</p>
</div>
<ng-template #no_wallet>
<p> Looks like you're new here. Please create or restore a wallet.</p>
</ng-template>
<button type="button" (click)="onCreateClicked()" class="btn btn-success">Create or restore wallet</button>
Breeze.UI/src/app/setup/create/create.component.html
View file @ 7822b524
<div class="content-wrapper">
<h1>
Please create a new wallet.
</h1>
<form [formGroup]="createWalletForm" (ngSubmit)="onCreateClicked()">
<div class="form-group">
<label>Name:</label>
<input class="form-control" formControlName="walletName" type="text" placeholder="Enter a name for your wallet.">
<div *ngIf="formErrors.walletName" class="alert alert-danger">{{formErrors.walletName}}</div>
<div class="container">
<div class="row">
<div class="col">
<h1>Please create a new wallet.</h1>
</div>
</div>
<div class="form-group">
<label>Password:</label>
<input class="form-control" formControlName="walletPassword" type="password" placeholder="Enter a password for your wallet.">
<div *ngIf="formErrors.walletPassword" class="alert alert-danger">{{formErrors.walletPassword}}</div>
<div class="row">
<div class="col">
<form [formGroup]="createWalletForm" (ngSubmit)="onCreateClicked()">
<div class="form-group">
<label>Name:</label>
<input class="form-control" formControlName="walletName" type="text" placeholder="Enter a name for your wallet.">
<div *ngIf="formErrors.walletName" class="alert alert-danger">{{formErrors.walletName}}</div>
</div>
<div class="form-group">
<label>Password:</label>
<input class="form-control" formControlName="walletPassword" type="password" placeholder="Enter a password for your wallet.">
<div *ngIf="formErrors.walletPassword" class="alert alert-danger">{{formErrors.walletPassword}}</div>
</div>
<div class="form-group">
<label>Network:</label>
<select name="network" formControlName="selectNetwork">
<option value="main">Main</option>
<option value="test">Testnet</option>
</select>
</div>
<div class="form-group">
<button type="submit" [disabled]="!createWalletForm.valid" class="btn btn-success">Create Wallet</button>
</div>
</form>
</div>
</div>
<div class="form-group">
<label>Network:</label>
<select name="network" formControlName="selectNetwork">
<option value="main">Main</option>
<option value="test">Testnet</option>
</select>
<div class="row">
<div class="col">
<label>Mnemonic:</label>
<label>{{responseMessage}}</label>
</div>
</div>
<div class="form-group">
<button type="submit" [disabled]="!createWalletForm.valid" class="btn btn-success">Create Wallet</button>
</div>
</form>
<div>
<label>Mnemonic:</label>
</div>
<div>
<label>{{responseMessage}}</label>
</div>
<div class="form-group">
<button type="button" class="btn btn-success" (click)="onBackClicked()">Back</button>
<div class="row">
<div class="col">
<button type="button" class="btn btn-success" (click)="onBackClicked()">Back</button>
</div>
</div>
</div>
Breeze.UI/src/app/setup/setup.component.html
View file @ 7822b524
<h1>Welcome to Breeze.</h1>
<p>
If you haven't used Breeze before, please create a new wallet.
</p>
<p>
Users who have previously used Breeze, can choose to recover their wallet.
</p>
<button (click)="onCreateClicked()">Create</button>
<button (click)="onRecoverClicked()">Recover</button>
<button (click)="onBackClicked()">Back</button>
<div class="container">
<div class="row">
<div class="col">
<h1>Welcome to Breeze.</h1>
</div>
</div>
<div class="row">
<div vlass="col">
<p>
If you haven't used Breeze before, please create a new wallet.
</p>
<p>
Users who have previously used Breeze, can choose to recover their wallet.
</p>
</div>
</div>
<div class="row">
<div class="col">
<button (click)="onCreateClicked()" class="btn">Create</button>
</div>
<div class="col">
<button (click)="onRecoverClicked()" class="btn">Recover</button>
</div>
<div class="col">
<button (click)="onBackClicked()" class="btn">Back</button>
</div>
</div>
</div>
Breeze.UI/src/app/wallet/dashboard/dashboard.component.css
View file @ 7822b524
.container {
width: 100%;
}
#dashboard {
padding-top: 50px !important;
padding-left: 100px !important;
border: 2px solid;
border-color: #D5E3F0;
background-color: #DAE6F2;
height: 200px;
width:100%;
}
#sendButton {
width: 100px;
font-family: "Lato Black";
color: #A1B0C3;
background-color: white;
border-radius: 25px;
}
#receiveButton {
width: 100px;
font-family: "Lato Black";
color: white;
background-color: #20B9FF;
border-radius: 25px;
}
#transactions {
padding-left: 100px !important;
margin-top: 10px;
}
.transactionsTable {
border-collapse: separate;
border-spacing: 10px;
}
.transactionsTable tr {
border: 1px solid #D5E3F0;
text-align: left;
border-spacing: 10px;
}
.transactionsTable th {
text-align: left;
border-spacing: 10px;
}
.transactionsTable td {
height: 50px;
vertical-align: center;
}
Breeze.UI/src/app/wallet/dashboard/dashboard.component.html
View file @ 7822b524
<div class="container">
<div class="row">
<div class="container nopadding">
<div class="row nopadding" id="dashboard">
<div class="col">
<div>Active Balance</div>
<div>Balance: {{confirmedBalance | coinNotation | coinAbbreviation}}</div>
......@@ -11,31 +11,31 @@
</div>
<div class="col">
<div>
<button (click)="openSendDialog()" class="btn">SEND</button>
<button (click)="openReceiveDialog()" class="btn">RECEIVE</button>
<button (click)="openSendDialog()" class="btn" id="sendButton">Send</button>
<button (click)="openReceiveDialog()" class="btn" id="receiveButton">Receive</button>
</div>
</div>
</div>
<div class="row" id="transactions">
<div class="col">
<div>Transactions</div>
<table *ngIf="transactions; else noTransactions">
<table cellspacing="5px" cellpadding="5px" class="transactionsTable" *ngIf="transactions; else noTransactions">
<thead>
<th>Timestamp</th>
<th>Amount</th>
<th>Confirmed</th>
<th>Timestamp</th>
<th>Transaction ID</th>
</thead>
<tr *ngFor="let transaction of transactions; let i=index">
<!--<td *ngIf="{{ transaction.amount }} < 0">SENT</td>
<td *ngIf="{{ transaction.amount }} > 0">RECEIVED</td>-->
<td *ngIf="i<5">{{ transaction.timestamp }}</td>
<td *ngIf="i<5">{{ transaction.amount | coinNotation | coinAbbreviation }}</td>
<td *ngIf="i<5">{{ transaction.confirmed }}</td>
<td *ngIf="i<5">{{ transaction.timestamp * 1000 | date:'medium' }}</td>
<td *ngIf="i<5">{{ transaction.txId }}</td>
</tr>
</table>
<ng-template #noTransactions>Looks like you haven't made any transactions yet</ng-template>
<ng-template #noTransactions>Looks like you haven't made any transactions yet</ng-template>
</div>
</div>
</div>
Breeze.UI/src/app/wallet/history/history.component.html
View file @ 7822b524
<h1>History</h1>
<table *ngIf="transactions; else noTransactions">
<thead>
<th>Timestamp</th>
<th>Amount</th>
<th>Confirmed</th>
<th>Transaction ID</th>
</thead>
<tr *ngFor="let transaction of transactions">
<!--<td *ngIf="{{ transaction.amount }} < 0; else received">SENT</td>
<td #received>RECEIVED</td>-->
<td>{{ transaction.timestamp }}</td>
<td>{{ transaction.amount | coinNotation | coinAbbreviation }}</td>
<td>{{ transaction.confirmed }}</td>
<td>{{ transaction.txId }}</td>
</tr>
</table>
<ng-template #noTransactions>Looks like you haven't made any transactions yet.</ng-template>
<div class="container">
<div class="row">
<div class="col">
<table *ngIf="transactions; else noTransactions">
<thead>
<th>Timestamp</th>
<th>Amount</th>
<th>Confirmed</th>
<th>Transaction ID</th>
</thead>
<tr *ngFor="let transaction of transactions">
<!--<td *ngIf="{{ transaction.amount }} < 0; else received">SENT</td>
<td #received>RECEIVED</td>-->
<td>{{ transaction.timestamp }}</td>
<td>{{ transaction.amount | coinNotation | coinAbbreviation }}</td>
<td>{{ transaction.confirmed }}</td>
<td>{{ transaction.txId }}</td>
</tr>
</table>
</div>
<div class="row">
<div class="col">
<ng-template #noTransactions>Looks like you haven't made any transactions yet.</ng-template>
</div>
</div>
</div>
</div>
Breeze.UI/src/app/wallet/menu/menu.component.css
View file @ 7822b524
.navbar {
height: 100px;
height: 60px;
width: 100%;
margin: 0;
padding: 0;
}
.nav-link {
margin: 0 auto;
text-align: center;
width: 120px;
background-color: white;
color: black;
border: none;
}
.is-active {
background-color: white;
color: #FF9900;
border-bottom: 2px solid;
border-color: #FF9900;
padding-bottom:25px;
}
Breeze.UI/src/app/wallet/menu/menu.component.html
View file @ 7822b524
<nav class="navbar navbar-toggleable-sm navbar-fixed-top navbar-light bg-faded ">
<nav class="navbar navbar-toggleable-sm navbar-fixed-top">
<div class="container">
<ul class="navbar-nav mr-auto" routerLinkActive="active">
<li class="nav-item"><a class="nav-link" routerLink="dashboard">Dashboard</a></li>
<li class="nav-item"><a class="nav-link" routerLink="history">History</a></li>
<li class="nav-item"><a class="nav-link" routerLink="dashboard" [routerLinkActive]="['is-active']">Dashboard</a></li>
<li class="nav-item"><a class="nav-link" routerLink="history" [routerLinkActive]="['is-active']">History</a></li>
<li class="nav-item"><a class="nav-link" (click)="logOut()">Logout</a></li>
</ul>
<div class="navbar-brand">Breeze</div>
......
Breeze.UI/src/app/wallet/receive/receive.component.html
View file @ 7822b524
<div class="content-wrapper" id="receiveForm">
<h1>Receive</h1>
<div>
<div>
<table *ngIf="address">
<thead>
<th>Receive address: </th>
</thead>
<tr>
<td>{{ address }}</td>
</tr>
</table>
<button type="button" class="btn" (click)="activeModal.close('Close click')">Close</button>
</div>
<div class="container" id="receiveForm">
<div class="row">
<div class="col">
<h1>Receive</h1>
</div>
</div>
<div class="row">
<div class="col">
<table *ngIf="address">
<thead>
<th>Receive address: </th>
</thead>
<tr>
<td>{{ address }}</td>
<td><button class="btn" type="button" ngxClipboard [cbContent]="address" (cbOnSuccess)="isCopied1=true" [class.btn-success]= "isCopied1">Copy</button>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col">
<button type="button" class="btn" (click)="activeModal.close('Close click')">Close</button>
</div>
</div>
</div>
Breeze.UI/src/app/wallet/receive/receive.component.ts
View file @ 7822b524
......@@ -16,13 +16,17 @@ import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
export class ReceiveComponent {
constructor(private apiService: ApiService, private globalService: GlobalService, public activeModal: NgbActiveModal) {}
private address: any;
private address: any = "";
private errorMessage: string;
ngOnInit() {
this.getUnusedReceiveAddresses();
}
private copyAddress() {
}
private getUnusedReceiveAddresses() {
let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType())
this.apiService.getUnusedReceiveAddress(walletInfo)
......
Breeze.UI/src/app/wallet/send/send.component.html
View file @ 7822b524
<div class="content-wrapper" id="sendForm">
<h1>Send</h1>
<form [formGroup]="sendForm" (ngSubmit)="send()">
<div class="form-group">
<label>Pay To</label>
<input class="form-control" formControlName="address" type="text" placeholder="Please enter the recipients address.">
<div *ngIf="formErrors.address" class="alert alert-danger">{{formErrors.address}}</div>
</div>
<div class="form-group">
<label>Amount</label>
<input class="form-control" formControlName="amount" type="text" placeholder="Please enter the amount you want to send.">
<div *ngIf="formErrors.amount" class="alert alert-danger">{{formErrors.amount}}</div>
</div>
<div class="form-group">
<label>Fee</label>
<input class="form-control" id="feeSlider" formControlName="fee" type="range" min="1" max="3" value="2">
</div>
<div class="form-group">
<label>Wallet Password</label>
<input class="form-control" formControlName="password" type="password" placeholder="Please enter your wallet password.">
<div *ngIf="formErrors.password" class="alert alert-danger">{{formErrors.password}}</div>
</div>
<button type="submit" [disabled]="!sendForm.valid" class="btn btn-success">Send</button>
<button type="button" class="btn" (click)="activeModal.close('Close click')">Close</button>
</form>
<div class="container" id="sendForm">
<div class="row">
<div class="col">
<h1>Send</h1>
</div>
</div>
<div class="row">
<div class="col">
<form [formGroup]="sendForm" (ngSubmit)="send()">
<div class="form-group">
<label>Pay To</label>
<input class="form-control" formControlName="address" type="text" placeholder="Please enter the recipients address.">
<div *ngIf="formErrors.address" class="alert alert-danger">{{formErrors.address}}</div>
</div>
<div class="form-group">
<label>Amount</label>
<input class="form-control" formControlName="amount" type="text" placeholder="Please enter the amount you want to send.">
<div *ngIf="formErrors.amount" class="alert alert-danger">{{formErrors.amount}}</div>
</div>
<div class="form-group">
<label>Fee</label>
<input class="form-control" id="feeSlider" formControlName="fee" type="range" min="1" max="3" value="2">
</div>
<div class="form-group">
<label>Wallet Password</label>
<input class="form-control" formControlName="password" type="password" placeholder="Please enter your wallet password.">
<div *ngIf="formErrors.password" class="alert alert-danger">{{formErrors.password}}</div>
</div>
<button type="submit" [disabled]="!sendForm.valid" class="btn btn-success">Send</button>
<button type="button" class="btn" (click)="activeModal.close('Close click')">Close</button>
</form>
</div>
</div>
</div>
Breeze.UI/src/styles.css
View file @ 7822b524
......@@ -13,3 +13,24 @@ td {
width: 100%;
height: 100%;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
.row {
padding: 0;
margin: 0;
}
.col {
padding: 0;
margin: 0;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment