From 86ab6a93b4b420b2f2894cfa93102649565332fe Mon Sep 17 00:00:00 2001
From: Rohit Waghchaure <rohitw1991@gmail.com>
Date: Fri, 24 Feb 2017 18:02:50 +0530
Subject: [PATCH] [Enhancement] POS, numeric keypad

---
 erpnext/accounts/page/pos/pos.js |  9 ++++
 erpnext/public/css/erpnext.css   | 15 ++++--
 erpnext/public/js/pos/pos.html   | 86 +++++++-------------------------
 erpnext/public/less/erpnext.less | 16 ++++--
 4 files changed, 51 insertions(+), 75 deletions(-)

diff --git a/erpnext/accounts/page/pos/pos.js b/erpnext/accounts/page/pos/pos.js
index 862b98744e..7e14ec824a 100644
--- a/erpnext/accounts/page/pos/pos.js
+++ b/erpnext/accounts/page/pos/pos.js
@@ -954,6 +954,15 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({
 			me.set_item_details(item_code, "rate", $(this).val());
 		})
 	},
+	
+	get_child_item: function(item_code) {
+		var me = this;
+		return $.map(me.frm.doc.items, function(doc){
+			if(doc.item_code == item_code) {
+				return doc
+			}
+		})
+	},
 
 	render_selected_item: function() {
 		doc = this.get_child_item(this.item_code);
diff --git a/erpnext/public/css/erpnext.css b/erpnext/public/css/erpnext.css
index 838d2604e4..b76d36ee56 100644
--- a/erpnext/public/css/erpnext.css
+++ b/erpnext/public/css/erpnext.css
@@ -137,13 +137,20 @@
 .pos-keyboard-key,
 .delete-btn {
   border: 1px solid #d1d8dd;
-  height: 85px;
-  width: 85px;
-  margin: 10px 10px;
-  font-size: 24px;
+  height: 69px;
+  width: 69px;
+  font-size: 20px;
   font-weight: 200;
   background-color: #FDFDFD;
   border-color: #e8e8e8;
+  margin-left: -4px;
+}
+.pos-pay {
+  height: 69px;
+  width: 69px;
+  font-size: 17px;
+  font-weight: 200;
+  margin-left: -4px;
 }
 .numeric-keypad {
   height: 60px;
diff --git a/erpnext/public/js/pos/pos.html b/erpnext/public/js/pos/pos.html
index 17d1a5fd91..aa9e80aaac 100644
--- a/erpnext/public/js/pos/pos.html
+++ b/erpnext/public/js/pos/pos.html
@@ -1,71 +1,23 @@
 <div class="pos">
-	<div class="row">
-		<div class="col-sm-6 pos-bill-wrapper">
-			<div class="col-sm-12"><h6 class="form-section-heading uppercase">Item Cart</h6></div>
-			<div class="pos-bill">
-				<div class="item-cart">
-					<div class="pos-list-row pos-bill-header text-muted h6">
-						<span class="cell subject">
-							<!--<input class="list-select-all" type="checkbox" title="{%= __("Select All") %}">-->
-							{{ __("Item Name")}}
-						</span>
-						<span class="cell text-right">{{ __("Quantity") }}</span>
-						<span class="cell text-right">{{ __("Discount") }}</span>
-						<span class="cell text-right">{{ __("Rate") }}</span>
-					</div>
-					<div class="item-cart-items">
-						<div class="no-items-message text-extra-muted">
-							<span class="text-center">
-								<i class="fa fa-4x fa-shopping-cart"></i>
-								<p>Tap items to add them here</p>
-							</span>
+    			</div>
+    			<div class="totals-area">
+                    <div class="row pos-bill-row net-total-area">
+                        <div class="col-xs-6"><h6 class="text-muted">{%= __("Net Total") %}</h6></div>
+                        <div class="col-xs-6"><h6 class="net-total text-right"></h6></div>
+                    </div>
+                    <div class="row pos-bill-row tax-area hide">
+						<div class="col-xs-12 text-muted">
+	                        <h6>{%= __("Taxes") %}</h6>
+							<div class="tax-table small"></div>
 						</div>
-						<div class="items">
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="totals-area">
-				<div class="pos-list-row net-total-area hide">
-					<div class="cell subject"></div>
-					<div class="cell"></div>
-					<div class="cell text-right">{%= __("Net Total") %}</div>
-					<div class="cell net-total text-right"></div>
-				</div>
-				<div class="pos-list-row tax-area">
-					<div class="cell subject"></div>
-					<div class="cell"></div>
-					<div class="cell text-muted">{%= __("Taxes") %}</div>
-					<div class="cell text-right tax-table"></div>
-				</div>
-				{% if (apply_discount_on) { %}
-				<div class="pos-list-row discount-amount-area hide">
-					<div class="cell text-muted">{%= __("Discount") %}</div>
-					<div class="cell discount-field-col">
-						<div class="input-group input-group-sm">
-							<span class="input-group-addon">%</span>
-							<input type="text" class="form-control discount-percentage text-right">
-						</div>
-					</div>
-					<div class="cell discount-field-col">
-						<div class="input-group input-group-sm">
-							<span class="input-group-addon">{%= get_currency_symbol(currency) %}</span>
-							<input type="text" class="form-control discount-amount text-right" placeholder="{%= 0.00 %}">
-						</div>
-					</div>
-				</div>
-				{% } %}
-				<div class="pos-list-row grand-total-area" style="border-bottom:1px solid #d1d8dd;">
-					<div class="cell subject"></div>
-					<div class="cell text-right bold">{%= __("Grand Total") %}</div>
-					<div class="cell grand-total text-right lead"></div>
-				</div>
-			</div>
-			<div class="list-customers" style="display:none">
-
-			</div>
-			<div class="row" style="margin-top: 15px">
-				<div class="col-xs-6 selected-item">
+                    </div>
+					{% if (apply_discount_on) { %}
+	                    <div class="row pos-bill-row discount-amount-area">
+	                        <div class="col-xs-6"><h6 class="text-muted">{%= __("Discount") %}</h6></div>
+							<div class="col-xs-3 discount-field-col">
+								<div class="input-group input-group-sm">
+									<span class="input-group-addon">%</span>
+									<input type="text" class="form-control discount-percentage text-right">
 
 				</div>
 				<div class="col-xs-6 numeric_keypad" style="display:none">
@@ -108,4 +60,4 @@
 			</div>
 		</div>
 	</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/erpnext/public/less/erpnext.less b/erpnext/public/less/erpnext.less
index 16857e3a69..8b1ecdc039 100644
--- a/erpnext/public/less/erpnext.less
+++ b/erpnext/public/less/erpnext.less
@@ -199,13 +199,21 @@
 
 .pos-keyboard-key, .delete-btn {
 	border: 1px solid #d1d8dd;
-	height:85px;
-	width:85px;
-	margin:10px 10px;
-	font-size:24px;
+	height:69px;
+	width:69px;
+	font-size:20px;
 	font-weight:200;
 	background-color: #FDFDFD;
 	border-color: #e8e8e8;
+	margin-left:-4px;
+}
+
+.pos-pay {
+	height:69px;
+	width:69px;
+	font-size:17px;
+	font-weight:200;
+	margin-left:-4px;
 }