From 1f261a8695b7ba5329ce475b132638edbfcf4128 Mon Sep 17 00:00:00 2001 From: Faris Ansari Date: Mon, 6 Mar 2017 18:01:58 +0530 Subject: [PATCH] UI changes --- erpnext/accounts/page/pos/pos.js | 54 +++-- erpnext/public/build.json | 2 + erpnext/public/css/erpnext.css | 127 +++++++----- erpnext/public/js/pos/customer_toolbar.html | 12 ++ erpnext/public/js/pos/pos.html | 206 ++++++++++--------- erpnext/public/js/pos/pos_bill_item_new.html | 9 + erpnext/public/js/pos/pos_item.html | 39 +++- erpnext/public/js/pos/pos_selected_item.html | 37 ++-- erpnext/public/less/erpnext.less | 171 +++++++++++---- 9 files changed, 413 insertions(+), 244 deletions(-) create mode 100644 erpnext/public/js/pos/customer_toolbar.html create mode 100644 erpnext/public/js/pos/pos_bill_item_new.html diff --git a/erpnext/accounts/page/pos/pos.js b/erpnext/accounts/page/pos/pos.js index 064c5f7621..862b98744e 100644 --- a/erpnext/accounts/page/pos/pos.js +++ b/erpnext/accounts/page/pos/pos.js @@ -142,7 +142,7 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({ try { localStorage.setItem('email_queue', JSON.stringify(this.email_queue)); } catch (e) { - frappe.throw(__("LocalStorage is full , did not save")) + frappe.throw(__("LocalStorage is full, did not save")) } }, @@ -401,21 +401,6 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({ me.make_item_list(); }); - this.party_field = frappe.ui.form.make_control({ - df: { - "fieldtype": "Data", - "options": this.party, - "label": this.party, - "fieldname": this.party.toLowerCase(), - "placeholder": __("Select or add new customer") - }, - parent: this.wrapper.find(".party-area"), - only_input: true, - }); - - this.party_field.make_input(); - setTimeout(this.set_focus.bind(this), 500); - this.wrapper.find(".btn-more").on("click", function() { me.page_len += 20; me.items = me.get_items(); @@ -585,6 +570,25 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({ make_customer: function () { var me = this; + $(frappe.render_template('customer_toolbar', { + allow_delete: this.frm.doc.allow_delete + })).insertAfter(this.page.$title_area.hide()); + + this.party_field = frappe.ui.form.make_control({ + df: { + "fieldtype": "Data", + "options": this.party, + "label": this.party, + "fieldname": this.party.toLowerCase(), + "placeholder": __("Select or add new customer") + }, + parent: this.page.wrapper.find(".party-area"), + only_input: true, + }); + + this.party_field.make_input(); + setTimeout(this.set_focus.bind(this), 500); + if (this.default_customer && !this.frm.doc.customer) { this.party_field.$input.val(this.default_customer); this.frm.doc.customer = this.default_customer; @@ -793,12 +797,12 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({ if (this.items.length > 0) { $.each(this.items, function(index, obj) { - if(index < me.page_len){ + if(index < me.page_len) { $(frappe.render_template("pos_item", { item_code: obj.name, item_price: format_currency(me.price_list_data[obj.name], me.frm.doc.currency), item_name: obj.name === obj.item_name ? "" : obj.item_name, - item_image: obj.image ? "url('" + obj.image + "')" : null, + item_image: obj.image, color: frappe.get_palette(obj.item_name), abbr: frappe.get_abbr(obj.item_name) })).tooltip().appendTo($wrap); @@ -816,7 +820,7 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({ } // if form is local then allow this function - $(me.wrapper).find("div.pos-item").on("click", function () { + $(me.wrapper).on("click", ".pos-item-wrapper", function () { if(me.list_customers_btn.hasClass("view_customer")) return; me.customer_validate(); @@ -889,7 +893,9 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({ bind_items_event: function() { var me = this; - $(this.wrapper).find(".pos-bill-item").click(function() { + $(this.wrapper).on('click', '.pos-bill-item', function() { + $(me.wrapper).find('.pos-bill-item').removeClass('active'); + $(this).addClass('active'); me.numeric_val = ""; me.numeric_id = "" me.item_code = $(this).attr("data-item-code"); @@ -1139,8 +1145,14 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({ show_items_in_item_cart: function () { var me = this; var $items = this.wrapper.find(".items").empty(); + var $no_items_message = this.wrapper.find(".no-items-message"); + $no_items_message.toggle(this.frm.doc.items.length === 0); + + var $totals_area = this.wrapper.find('.totals-area'); + $totals_area.toggle(this.frm.doc.items.length > 0); + $.each(this.frm.doc.items || [], function (i, d) { - $(frappe.render_template("pos_bill_item", { + $(frappe.render_template("pos_bill_item_new", { item_code: d.item_code, item_name: (d.item_name === d.item_code || !d.item_name) ? "" : ("
" + d.item_name), qty: d.qty, diff --git a/erpnext/public/build.json b/erpnext/public/build.json index 858514edfe..393e90c052 100644 --- a/erpnext/public/build.json +++ b/erpnext/public/build.json @@ -20,9 +20,11 @@ "public/js/controllers/transaction.js", "public/js/pos/pos.html", "public/js/pos/pos_bill_item.html", + "public/js/pos/pos_bill_item_new.html", "public/js/pos/pos_selected_item.html", "public/js/pos/pos_item.html", "public/js/pos/pos_tax_row.html", + "public/js/pos/customer_toolbar.html", "public/js/pos/pos_invoice_list.html", "public/js/payment/pos_payment.html", "public/js/payment/payment_details.html", diff --git a/erpnext/public/css/erpnext.css b/erpnext/public/css/erpnext.css index 1db761ec79..838d2604e4 100644 --- a/erpnext/public/css/erpnext.css +++ b/erpnext/public/css/erpnext.css @@ -13,9 +13,6 @@ margin: -10px auto; } /* pos */ -.pos-item-area { - padding: 0px 10px; -} .pos-item-wrapper { padding: 5px; } @@ -51,20 +48,11 @@ background-position: center; background-repeat: no-repeat; } -.pos-item-area { - border: 1px solid #d1d8dd; - border-top: none; -} .pos-item-toolbar { + height: 51px; padding: 10px 0px; border-bottom: 1px solid #d1d8dd; } -.item-list-area, -.list-customers { - padding: 15px 0px; - overflow-y: scroll; - height: calc(100vh - 162px); -} .pos-toolbar, .pos-bill-toolbar { padding: 10px 0px; @@ -73,20 +61,6 @@ .pos-item-toolbar .form-group { margin-bottom: 0px; } -.pos-bill-wrapper { - border: 1px solid #d1d8dd; - border-top: none; - margin-right: -1px; -} -.pos-bill { - border-top: 1px solid #d1d8dd; - margin-left: -15px; - margin-right: -15px; -} -.item-cart { - overflow-y: scroll; - height: calc(100vh - 72vh); -} .edit-pos-item { height: 50px; font-size: 14px; @@ -97,15 +71,6 @@ background-color: #f5f7fa; cursor: pointer; } -.pos-bill-row { - margin: 0px; - padding: 7px 0px; - border-top: 1px solid #d1d8dd; -} -.pos-bill-header { - border: none !important; - background-color: #f5f7fa; -} .pos-item-qty { display: inline-block; } @@ -181,21 +146,31 @@ border-color: #e8e8e8; } .numeric-keypad { - border: 1px solid #d1d8dd; - height: 69px; - width: 69px; + height: 60px; + width: 60px; font-size: 20px; font-weight: 200; - background-color: #FDFDFD; - border-color: #e8e8e8; + border-radius: 0; + background-color: #fff; margin-left: -4px; } +.numeric_keypad { + margin-left: -15px; +} +.numeric_keypad > .row > button { + border: none; + border-right: 1px solid #d1d8dd; + border-bottom: 1px solid #d1d8dd; +} +.numeric_keypad > .row > button:first-child { + border-left: 1px solid #d1d8dd; +} +.numeric_keypad > .row:first-child > button { + border-top: 1px solid #d1d8dd; +} .pos-pay { - height: 69px; - width: 69px; - font-size: 17px; - font-weight: 200; - margin-left: -4px; + background-color: #5E64FF; + border: none; } .multimode-payments { padding-left: 30px; @@ -269,3 +244,63 @@ body[data-route="pos"] .modal-dialog { .assessment-result-tool .score { text-align: right; } +.pos-list-row { + display: table; + table-layout: fixed; + width: 100%; + padding: 9px 15px; + font-size: 12px; + margin: 0px; + border-bottom: 1px solid #d1d8dd; +} +.pos-list-row .cell { + display: table-cell; + vertical-align: middle; +} +.pos-list-row .subject { + width: 50%; +} +.pos-list-row .list-row-checkbox, +.pos-list-row .list-select-all { + margin-right: 7px; +} +.pos-bill-header { + background-color: #f5f7fa; + border: 1px solid #d1d8dd; +} +.pos-bill-item.active { + background-color: #fffce7; +} +.totals-area { + border-right: 1px solid #d1d8dd; + border-left: 1px solid #d1d8dd; + margin-bottom: 15px; +} +body[data-route="pos"] .page-body { + height: calc(100vh - 40px); +} +.item-cart-items { + height: 30vh; + overflow: auto; + border: 1px solid #d1d8dd; + border-top: none; +} +.item-cart-items .no-items-message { + display: flex; + align-items: center; + justify-content: center; + height: 100%; +} +.pos .items .pos-list-row:last-child { + border-bottom: none; +} +.pos .form-section-heading { + padding: 0; +} +.pos { + overflow: hidden; +} +.pos .item-list { + border-left: 1px solid #d1d8dd; + border-right: 1px solid #d1d8dd; +} diff --git a/erpnext/public/js/pos/customer_toolbar.html b/erpnext/public/js/pos/customer_toolbar.html new file mode 100644 index 0000000000..a32c157220 --- /dev/null +++ b/erpnext/public/js/pos/customer_toolbar.html @@ -0,0 +1,12 @@ +
+
+ + {% if (allow_delete) { %} + {% } %} +
\ No newline at end of file diff --git a/erpnext/public/js/pos/pos.html b/erpnext/public/js/pos/pos.html index 8a08a8b590..17d1a5fd91 100644 --- a/erpnext/public/js/pos/pos.html +++ b/erpnext/public/js/pos/pos.html @@ -1,109 +1,111 @@
-
-
-
-
- - - {% if (allow_delete) { %} - - {% } %} -
-
-
- -
-
-
-
-
{%= __("Net Total") %}
-
-
-
-
-
{%= __("Taxes") %}
-
-
-
- {% if (apply_discount_on) { %} -
-
{%= __("Discount") %}
-
-
- % - -
-
-
-
- {%= get_currency_symbol(currency) %} - -
-
-
- {% } %} -
-
{%= __("Grand Total") %}
-
-
-
-
- - -
-
- -
-