[Enhancement] POS Redesign (#7639)
* item group, discount
* POS Redesign
* offline customer
* removed offline records from modal view
diff --git a/erpnext/public/css/erpnext.css b/erpnext/public/css/erpnext.css
index 7f85de9..cfe9f63 100644
--- a/erpnext/public/css/erpnext.css
+++ b/erpnext/public/css/erpnext.css
@@ -67,7 +67,6 @@
.pos-toolbar,
.pos-bill-toolbar {
padding: 10px 0px;
- border-bottom: 1px solid #d1d8dd;
height: 51px;
}
.pos-item-toolbar .form-group {
@@ -79,6 +78,7 @@
margin-right: -1px;
}
.pos-bill {
+ border-top: 1px solid #d1d8dd;
margin-left: -15px;
margin-right: -15px;
}
@@ -171,6 +171,9 @@
.payment-toolbar {
padding-right: 30px;
}
+.list-row-head.pos-invoice-list {
+ border-top: 1px solid #d1d8dd;
+}
body[data-route="pos"] .modal-dialog {
width: 750px;
}
diff --git a/erpnext/public/js/pos/pos.html b/erpnext/public/js/pos/pos.html
index 9d0ab60..44e42d7 100644
--- a/erpnext/public/js/pos/pos.html
+++ b/erpnext/public/js/pos/pos.html
@@ -1,14 +1,26 @@
<div class="pos">
<div class="row">
- <div class="col-sm-5 pos-bill-wrapper">
- <div class="pos-bill-toolbar row">
- <div class="party-area col-xs-12"></div>
+ <div class="col-sm-6 pos-bill-wrapper">
+ <div class="pos-bill-toolbar" style="display: flex;">
+ <div class="party-area" style="flex: 1;"></div>
+ <button class="btn btn-default list-customers-btn" style="margin: 0 5px 0 15px;">
+ <i class="fa fa-list"></i>
+ </button>
+ <button class="btn btn-default add-customer-btn">
+ <i class="fa fa-plus"></i>
+ </button>
+ {% if (allow_delete) { %}
+ <button class="btn btn-default btn-danger" style="margin: 0 5px 0 5px;display:none">
+ <i class="octicon octicon-trashcan"></i>
+ </button>
+ {% } %}
</div>
<div class="pos-bill">
<div class="item-cart">
<div class="row pos-bill-row pos-bill-header">
- <div class="col-xs-5"><h6>{%= __("Item") %}</h6></div>
- <div class="col-xs-4"><h6 class="text-right">{%= __("Quantity") %}</h6></div>
+ <div class="col-xs-4"><h6>{%= __("Item") %}</h6></div>
+ <div class="col-xs-3"><h6 class="text-right">{%= __("Quantity") %}</h6></div>
+ <div class="col-xs-2"><h6 class="text-right">{%= __("Discount") %}</h6></div>
<div class="col-xs-3"><h6 class="text-right">{%= __("Rate") %}</h6></div>
</div>
<div class="items"></div>
@@ -48,18 +60,27 @@
</div>
</div>
</div>
+ <div class="list-customers">
+
+ </div>
</div>
- <div class="col-sm-7 pos-items-section">
+ <div class="col-sm-6 pos-items-section">
<div class="row pos-item-area">
</div>
<span id="customer-results" style="color:#68a;"></span>
<div class="row pos-item-toolbar">
- <div class="search-area col-xs-12"></div>
+ <div class="search-item-group col-xs-5"></div>
+ <div class="search-item col-xs-7"></div>
</div>
- <div class="item-list-area">
+ <div class="item-list-area" style="auto">
<div class="app-listing item-list"></ul>
</div>
</div>
+ <div class="row">
+ <div class="text-right list-paging-area">
+ <button class="btn btn-default btn-more btn-sm" style="margin:5px 20px">{{ __("More") }}</button>
+ </div>
+ </div>
</div>
</div>
diff --git a/erpnext/public/js/pos/pos_bill_item.html b/erpnext/public/js/pos/pos_bill_item.html
index f5d1a76..1a1f1e2 100644
--- a/erpnext/public/js/pos/pos_bill_item.html
+++ b/erpnext/public/js/pos/pos_bill_item.html
@@ -1,25 +1,30 @@
<div class="row pos-bill-row pos-bill-item" data-item-code="{%= item_code %}">
- <div class="col-xs-5"><h6>{%= item_code || "" %}{%= item_name || "" %}</h6></div>
- <div class="col-xs-4">
+ <div class="col-xs-4"><h6>{%= item_code || "" %}{%= __(item_name) || "" %}</h6></div>
+ <div class="col-xs-3">
<div class="row pos-qty-row">
<div class="col-xs-2 text-center pos-qty-btn" data-action="decrease-qty"><i class="fa fa-minus text-muted" style="font-size:12px"></i></div>
<div class="col-xs-8">
<div>
- <input type="text" value="{%= qty %}" class="form-control input-sm pos-item-qty text-right">
+ <input type="tel" value="{%= qty %}" class="form-control pos-item-qty text-right">
</div>
{% if(actual_qty != null) { %}
<div style="margin-top: 5px;" class="text-muted small text-right">
- <span title="{%= __("In Stock") %}">{%= actual_qty || 0 %}<span>
+ {%= __("In Stock: ") %} <span>{%= actual_qty || 0.0 %}</span>
</div>
{% } %}
</div>
<div class="col-xs-2 text-center pos-qty-btn" data-action="increase-qty"><i class="fa fa-plus text-muted" style="font-size:12px"></i></div>
</div>
</div>
+ <div class="col-xs-2 text-right">
+ <div class="row input-sm">
+ <input type="tel" value="{%= discount_percentage %}" class="form-control text-right pos-item-discount">
+ </div>
+ </div>
<div class="col-xs-3 text-right">
<div class="text-muted" style="margin-top: 5px;">
{% if(enabled) { %}
- <input type="text" value="{%= rate %}" class="form-control input-sm pos-item-rate text-right">
+ <input type="tel" value="{%= rate %}" class="form-control input-sm pos-item-rate text-right">
{% } else { %}
<h6>{%= format_currency(rate) %}</h6>
{% } %}
diff --git a/erpnext/public/less/erpnext.less b/erpnext/public/less/erpnext.less
index 790a031..495e618 100644
--- a/erpnext/public/less/erpnext.less
+++ b/erpnext/public/less/erpnext.less
@@ -82,7 +82,7 @@
.pos-toolbar, .pos-bill-toolbar {
padding: 10px 0px;
- border-bottom: 1px solid #d1d8dd;
+ // border-bottom: 1px solid #d1d8dd;
height: 51px;
}
@@ -97,6 +97,7 @@
}
.pos-bill {
+ border-top: 1px solid @border-color;
margin-left: -15px;
margin-right: -15px;
}
@@ -213,6 +214,10 @@
padding-right: 30px;
}
+.list-row-head.pos-invoice-list {
+ border-top: 1px solid @border-color;
+}
+
body[data-route="pos"] .modal-dialog {
width: 750px;