UI language management: Global UI revision - Part 1

src/app/cancel/cancel.component.html

@@ -1,19 +1,32 @@
-<div  class='cancelTitle'>{{ vE.cancelTitle }}</div>
+<div  class='cancelTitle'>{{title}}</div>
 <div class="container" >
-    <mat-dialog-content>
-		<p class="text">{{msg}}</p>
+    <mat-dialog-content 
+         style="font-family: 'Spartan', sans-serif;
+				display: flex;
+				justify-content: space-between;
+				margin-top: 20px;
+				padding: 20px;">
+		{{msg1}}<br>{{msg2}}
 	</mat-dialog-content>
-	<div style="display: flex;
+	<div style="font-family: 'Spartan', sans-serif;
+				display: flex;
 				justify-content: space-between;
 				margin-top: 20px;
 				padding: 20px;">
 		<button mat-raised-button 
 		        style="background-color: #ff5722;
+		        	   font-family: 'Spartan', sans-serif;
+		        	   font-size: 14px;
+		        	   font-weight: 600;
 		        	   color : white;"
 		        (click)="confirm()">
 			{{ vE.cancelConfirmBtn }}
 		</button>
-		<button mat-raised-button (click)="close()">
+		<button mat-raised-button 
+		        style="font-family: 'Spartan', sans-serif;
+		        	   font-size: 14px;
+		        	   font-weight: 600;"
+				(click)="close()">
 			{{ vE.cancelDismissBtn }}
 		</button>
 	</div>

src/app/cancel/cancel.component.ts

@@ -12,7 +12,8 @@ import { LanguageData } from '../language.model';
 
 export class CancelComponent {
 	title: string;
-	msg: string;
+	msg1: string;
+	msg2: string;
 	// -------------------------------------
     //
     // Language Support
@@ -27,10 +28,11 @@ export class CancelComponent {
 	constructor(
 		private languageService : LanguageService,
 		private dialogRef: MatDialogRef<CancelComponent>,
-		@Inject(MAT_DIALOG_DATA) public data: { title: string, msg: string}
+		@Inject(MAT_DIALOG_DATA) public data: { title: string, msg1: string, msg2: string;}
 	) {
 		this.title = data.title;
-		this.msg = data.msg;
+		this.msg1 = data.msg1;
+		this.msg2 = data.msg2;
 	}
 
 	ngOnInit() {

src/app/header/header.component.ts

@@ -57,7 +57,10 @@ export class HeaderComponent implements OnInit, OnDestroy {
     //
     vE = {
     	headerGetCurrency : '',
-    	headerLastBlock : ''
+    	headerLastBlock : '',
+    	headerLogoutLbl : '',
+    	headerLogoutMsg1 : '',
+    	headerLogoutMsg2 : ''
     }
     //
     // ------------------------------------------------------------
@@ -92,7 +95,11 @@ export class HeaderComponent implements OnInit, OnDestroy {
 
 		dialogConfig.disableClose = true;
 		dialogConfig.autoFocus = true;
-		dialogConfig.data = {title: 'Logout?', msg: 'Are you sure you want to disconnect from ZGo? You will have to re-link your wallet via shielded memo.'};
+		dialogConfig.data = { title: this.vE.headerLogoutLbl, 
+		                      msg1: this.vE.headerLogoutMsg1, 
+		                      msg2: this.vE.headerLogoutMsg2 };
+
+		console.log(dialogConfig.data);		                      
 
 		const dialogRef = this.dialog.open(CancelComponent, dialogConfig);
 		dialogRef.afterClosed().subscribe(val => {
@@ -118,6 +125,10 @@ export class HeaderComponent implements OnInit, OnDestroy {
 
 			        this.vE.headerLastBlock = response.data.header_last_block;
 			        this.vE.headerGetCurrency = response.data.header_get_currency;
+			        this.vE.headerLogoutLbl = response.data.header_logout_lbl;
+			        this.vE.headerLogoutMsg1 = response.data.header_logout_msg1;
+			        this.vE.headerLogoutMsg2 = response.data.header_logout_msg2;
+
 			    },
 				error  => { console.log('Error >> ',error); }
 			);

src/app/items/item-add/item-add.component.css

@@ -12,5 +12,5 @@ input[type=number]{
 	color: white;
 	font-size: 26px;
 	text-align: center;
-	padding: 5px;
+	padding: 10px;
 }

src/app/items/item-list/item-list.component.ts

@@ -69,7 +69,12 @@ export class ItemListComponent implements OnInit{
     //
     vE = {
     	itemlistAvailItems : '',
-    	itemlistListEmpty : ''
+    	itemlistListEmpty : '',
+    	itemlistItemAdded : '',
+    	itemlistItemUpdated : '',
+    	itemlistItemDeleted : '',
+    	itemlistNotifClose : '',
+    	itemlistNotifSuccess : ''
     }
     //
     // ------------------------------------------------------------
@@ -115,8 +120,10 @@ export class ItemListComponent implements OnInit{
 				var item:Item = {_id: '', name: val.name, description: val.description, cost: val.cost, owner: this.owner.address};
 				this.itemService.addItem(item);
 				this.notifierService
-				    .showNotification("Item successfully created!",
-			    	              "Close","success");
+				    .showNotification(this.vE.itemlistItemAdded ,
+		    	              		  this.vE.itemlistNotifClose,
+			    	              	  "success",
+			    	              	  this.vE.itemlistNotifSuccess);
 			}
 			this.itemService.getItems(this.owner.address);
 			this.itemsUpdate.subscribe((items) => {
@@ -150,8 +157,10 @@ export class ItemListComponent implements OnInit{
 					this.itemService.getItems(this.owner.address);
 				});
 				this.notifierService
-				    .showNotification("Item information updated!!",
-				    	              "Close","success");
+				    .showNotification(this.vE.itemlistItemUpdated,
+		    	              		  this.vE.itemlistNotifClose,
+			    	              	  "success",
+			    	              	  this.vE.itemlistNotifSuccess);
 			}
 			this.itemService.getItems(this.owner.address);
 		});
@@ -174,8 +183,10 @@ export class ItemListComponent implements OnInit{
 				this.itemService.deleteItem(val);
 				this.items = [];
 				this.notifierService
-				    .showNotification("Item deleted!!",
-			    	              "Close","success");
+				    .showNotification(this.vE.itemlistItemDeleted,
+			    	              this.vE.itemlistNotifClose,
+			    	              "success",
+			    	              this.vE.itemlistNotifSuccess);
 			}
 			this.itemService.getItems(this.owner.address);
 			this.itemsUpdate.subscribe((items) => {
@@ -222,6 +233,11 @@ export class ItemListComponent implements OnInit{
 
 			        this.vE.itemlistListEmpty = response.data.itemlist_list_empty;
 			        this.vE.itemlistAvailItems = response.data.itemlist_avail_items;
+			        this.vE.itemlistItemAdded = response.data.itemlist_item_added;
+			        this.vE.itemlistItemUpdated = response.data.itemlist_item_updated;
+			        this.vE.itemlistItemDeleted = response.data.itemlist_item_deleted;
+			        this.vE.itemlistNotifClose = response.data.itemlist_notif_close;
+			        this.vE.itemlistNotifSuccess = response.data.itemlist_notif_success;
 			    },
 				error  => { console.log('Error >> ',error); }
 			);

src/app/language.service.ts

@@ -12,13 +12,13 @@ var Buffer = require('buffer/').Buffer;
 export class LanguageService {
 //
 // URL for test using REST API to local MariaDB database 
-// private baseURL = 'http://localhost:8080/zgointl';
+  private baseURL = 'http://localhost:8080/zgointl';
 //  
 // URL for test using REST API to local MongoDB database 
 //  private baseURL = 'http://localhost:5000/zgointl';
 //
 // URL for access MongoDB database from remote server 
-  private baseURL = ConfigData.Be_URL + 'api/getlang';
+//  private baseURL = ConfigData.Be_URL + 'api/getlang';
 
   public zgoLanguage: string = '';
 
@@ -48,8 +48,8 @@ export class LanguageService {
     return this.http.get<LanguageData>(this.baseURL + 
                         '/?lang=' + this.zgoLanguage +
                         '&component=' + viewName
-                        ,
-                        { headers : reqHeaders }
+//                        ,
+//                        { headers : reqHeaders }
                         );
   }  
 }

src/app/listorders/listorders.component.css

@@ -128,12 +128,12 @@ img.icon{
 
 .minibutton {
 	font-family: 'Spartan', sans-serif;
-	font-size: 12px;
+	font-size: 14px;
 	background:  #ff5722;
 	color: white;
 	height: 24px;
 	line-height: 20px;
-	padding: 2px;
+	padding: 10px;
 }
 
 .spacer {

src/app/order/order.component.css

@@ -55,8 +55,8 @@ img.icon{
 	background-color: #ff5722;
 	color: white;
 	font-weight: 500;
-	height: 25px !important;
-	width: 105px !important;
+	height: 30px !important;
+	width: 115px !important;
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -67,7 +67,7 @@ img.icon{
 .button-cancel-class {
 	font-family: 'Spartan', sans-serif;
 	font-weight: 500;
-	height: 25px !important;
+	height: 30px !important;
 	width: 100px !important;
 	display: flex;
 	align-items: center;

src/app/order/order.component.html

@@ -79,7 +79,7 @@
 		</table>
 	</div>
 <div class="container" style="margin: 2px; 
-                              height: 35px;
+                              height: 40px;
                               background: lightblue;
                               border-top: 2px solid lightgray;
                               border-bottom: 2px solid lightgray;
@@ -102,13 +102,13 @@
 					<button mat-raised-button 
 					        class="buttons-class"
 					        (click)="invoice()">
-					        <fa-icon [icon]="faInvoice" ></fa-icon> {{ vE.orderInvoiceBtn }}</button>
+					        <fa-icon [icon]="faInvoice" ></fa-icon> {{vE.orderInvoiceBtn}}</button>
 				</td>
 				<td  align="right">
 
 					<button mat-raised-button 
 					        class="buttons-class"
-					        (click)="checkout()">{{ vE.orderCheckoutBtn }}
+					        (click)="checkout()">{{vE.orderCheckoutBtn}}
 					</button>
 <!--
 					<button mat-raised-button class="text" color="primary" (click)="checkout()">Checkout</button>

src/app/prompt-invoice/prompt-invoice.component.css

@@ -1,3 +1,8 @@
+::ng-deep .mdc-button__label {
+	font-family: "Spartan" sans-serif;
+	font-size: 14px;
+	font-weight: 600;
+}
 
 ::ng-deep .invoice {
 	font-family: "Spartan";

src/app/prompt-invoice/prompt-invoice.component.html

@@ -15,7 +15,7 @@
 				<th></th>
 			</tr>
 		</thead>
-		<tbody>
+		<tr>
 			<td class="urlDetail" 
 			    style="text-align: left;" 
 			    width="94%">
@@ -39,7 +39,7 @@
 			   </a>
 			</td>
 			
-		</tbody>
+		</tr>
 	</table>
 
 	<mat-dialog-actions>

src/app/prompt-receipt/prompt-receipt.component.css

@@ -1,3 +1,8 @@
+::ng-deep .mdc-button__label {
+	font-family: "Spartan" sans-serif;
+	font-size: 14px;
+	font-weight: 600;
+}
 
 ::ng-deep .invoice {
 	font-family: "Spartan";

src/app/scan/scan.component.css

@@ -1,12 +1,76 @@
 .text {
 	font-family: 'Spartan', sans-serif;
 }
+
+.scan_header {
+	font-family: 'Spartan', sans-serif;
+	font-size: 24px;
+	font-weight: 600;
+	text-align: center;
+	padding: 10px;
+	color: white;
+	background: #ff5722;
+}
+
+.scan_message {
+	font-family: 'Spartan', sans-serif;
+	font-size: 16px;
+	font-weight: 600;
+	text-align: center;
+	color: black;
+	padding: 10px;
+}
+
+.scan_message2 {
+	font-family: 'Spartan', sans-serif;
+	font-size: 16px;
+	font-weight: 600;
+	text-align: center;
+	color: black;
+	padding-top: 30px;
+	padding-bottom: 30px;
+}
+
+.scan_button_send {
+	font-family: 'Spartan', sans-serif;
+	font-size: 12px;
+	font-weight: 500;
+	text-align: center;
+	color: white;
+	background: #ff5722;
+	align-items: center;
+}
+
+.scan_button_close {
+	font-family: 'Spartan', sans-serif;
+	font-size: 12px;
+	font-weight: 500;
+	text-align: center;
+	align-items: center;
+}
+
+.scan_button_row1 {
+	font-family: 'Spartan', sans-serif;
+	font-size: 12px;
+	align-items: center;
+	height: 30px;
+}
+
+.scan_button_row2 {
+	font-family: 'Spartan', sans-serif;
+	font-size: 20px;
+	height: 30px;
+	padding: 20px;
+	padding-top: 20px;
+	padding-left: 20px;
+	padding-right: 20px;
+	padding-bottom: 20px;
+}
+
 .mat-dialog-title{
 	line-height: 20px;
 }
-h4.text{
-	margin: 0px;
-}
+
 .small {
 	font-size: small;
 }

src/app/scan/scan.component.html

@@ -1,32 +1,54 @@
-<div align="center" mat-dialog-title>
-<h4 class="text">{{ vE.scanScanqrCode }}</h4>
+<div class="scan_header">{{ vE.scanScanqrCode }}
 </div>
 
 <mat-dialog-content>
 	<div align="center">
-	<p class="text">{{ vE.scanTextInfo }}</p>
+	<p class="scan_message">{{ vE.scanTextInfo }}</p>
 	<div class="qrcode" id="checkout-qr"></div>
 	</div>
 </mat-dialog-content>
-<mat-dialog-actions>
-	<table cellspacing="0" width="100%">
-		<tr>
-			<td>
-				<button mat-raised-button class="text" color="primary" (click)="confirm()">
-					<mat-icon class="icon">verified_user</mat-icon>{{ vE.scanMemoSent }}
-				</button>
-			</td>
-			<td align="right">
-				<button mat-raised-button class="text" (click)="close()">
-					<mat-icon class="icon">close</mat-icon>{{ vE.scanCloseBtn }}
-				</button>
-			</td>
-		</tr>
-	</table>
-</mat-dialog-actions>
-<div align="center">
-	<p class="small text">{{ vE.scanUseThis }}<a [href]="zcashUrl">{{vE.scanWalletLink}}</a>, or</p>
-	<button class="small text" (click)="copyAddress()">{{ vE.scanCopyAddress }}</button> 
-	<button class="small text" (click)="copyAmount()">{{ vE.scanCopyAmount }}</button> 
-	<button class="small text" (click)="copyMemo()">{{ vE.scanCopyMemo }}</button> 
+
+<table width="100%">
+	<tr>
+		<td align="center">
+			<button mat-raised-button class="scan_button_send"  (click)="confirm()">
+				<mat-icon class="icon">verified_user</mat-icon>{{ vE.scanMemoSent }}
+			</button>
+		</td>
+		<td align="center">
+			<button mat-raised-button class="scan_button_close" (click)="close()">
+				<mat-icon class="icon">close</mat-icon>{{ vE.scanCloseBtn }}
+			</button>
+		</td>
+	</tr>
+</table>
+
+<div class='scan_message2'>
+	{{ vE.scanCantScan }}<br> {{ vE.scanUseThis }}<a [href]="zcashUrl">{{vE.scanWalletLink}}</a>,<br>{{ vE.scanOrButton }}
 </div>
+
+<table style="width:100%;
+			  padding-left: 30px;
+			  padding-right: 30px;"> 
+	<tr>
+		<td align="center" style="width: 45%;">
+			<button style="font-size: 14px;" (click)="copyAddress()">{{ vE.scanCopyAddress }}</button>
+		</td>
+		<td style="width: 10%;"></td>	    
+		<td align="center" style="width: 45%;">
+			<button style="font-size: 14px;" (click)="copyAmount()">{{ vE.scanCopyAmount }}</button>
+		</td>
+	</tr>
+</table>
+
+<table style="width:100%;
+			  padding-top: 10px;	
+			  padding-left: 30px;
+			  padding-right: 30px;
+			  padding-bottom: 10px;"> 
+	<tr>
+		<td align="center" >
+			<button style="font-size: 14px;" (click)="copyMemo()">{{ vE.scanCopyMemo }}</button> 
+		</td>
+	</tr>
+</table>

src/app/scan/scan.component.ts

@@ -42,7 +42,9 @@ export class ScanComponent implements OnInit{
 		scanNotservError : '',
 		scanFuncNotavail : '',
 		scanCopyError : '',
-		scanFailPayment : ''
+		scanFailPayment : '',
+		scanCantScan : '',
+		scanOrButton : ''
 	}	
 	//
 	constructor(
@@ -166,6 +168,8 @@ export class ScanComponent implements OnInit{
 				this.vE.scanNotservClose = response.data.scan_notserv_close;
 				this.vE.scanNotservError = response.data.scan_notserv_error;
 				this.vE.scanFuncNotavail = response.data.scan_func_notavail;
+				this.vE.scanCantScan = response.data.scan_cant_scan;
+				this.vE.scanOrButton = response.data.scan_or_button;
 
 	      	},
 	        	error  => { console.log('Error >> ',error); }

src/app/settings/settings.component.css

@@ -2,6 +2,11 @@
 	font-family: 'Spartan', sans-serif;
 }
 
+::ng-deep .mdc-tab__text-label {
+	font-family: 'Spartan', sans-serif;
+	font-size: 14px;
+}
+
 .settings-title {
 	font-family: 'Spartan', sans-serif;
 	background: #ff5722;

src/app/settings/settings.component.html

@@ -7,7 +7,8 @@
 			margin-left: 10px;
 			margin-right: 10px;">
 	<mat-tab-group mat-tab-align-tabs="start">
-		<mat-tab label="{{ vE.settingsTabMainlbl }}" style="height: 400px;">
+		<mat-tab label="{{ vE.settingsTabMainlbl }}" 
+		         style="height: 400px;">
 			<div class="container" style="margin-bottom:  20px;">
 				<mat-dialog-content [formGroup]="settingsForm">
 					<mat-form-field  class="settings-field" [style.width.%]="100">