diff --git a/addons/point_of_sale/static/src/css/pos.css b/addons/point_of_sale/static/src/css/pos.css index 487a9a6c41c..8e2234b6e8c 100644 --- a/addons/point_of_sale/static/src/css/pos.css +++ b/addons/point_of_sale/static/src/css/pos.css @@ -110,7 +110,7 @@ /* ********* The black header bar ********* */ -.point-of-sale #topheader { +.point-of-sale .pos-topheader { position:absolute; left:0; top:0; @@ -124,7 +124,7 @@ /* a) The left part of the top-bar */ -.point-of-sale #branding{ +.point-of-sale .pos-branding{ position: absolute; display: table-cell; left:0; @@ -138,13 +138,13 @@ line-height:100%; vertical-align: middle; } -.point-of-sale #branding img { +.point-of-sale .pos-branding img { height: 32px; width: 116px; margin-left:5px; vertical-align:middle; } -.point-of-sale #branding .username{ +.point-of-sale .pos-branding .username{ float:right; color:#DDD; font-size:16px; @@ -155,7 +155,7 @@ /* b) The right part of the top-bar */ -.point-of-sale #rightheader { +.point-of-sale .pos-rightheader { position: absolute; left:440px; right:0; @@ -163,7 +163,7 @@ height:100%; } -.point-of-sale #rightheader button { +.point-of-sale .pos-rightheader button { color: #273072; height:27px; margin:3px; @@ -172,22 +172,22 @@ background: #7f82ac; } -.point-of-sale #rightheader button.square{ +.point-of-sale .pos-rightheader button.square{ width: 32px; margin-left:4px; } -.point-of-sale div#order-selector { +.point-of-sale .order-selector { display: inline; } -.point-of-sale ol#orders { +.point-of-sale .orders { display: inline; margin-left: 8px; } -.point-of-sale li.order-selector-button { +.point-of-sale .order-selector-button { display: inline; } -.point-of-sale li.selected-order button { +.point-of-sale .selected-order button { font-weight: 900; background: #7174A8 !important; color: rgb(236, 237, 255) !important; @@ -195,7 +195,7 @@ /* c) The session buttons */ -.point-of-sale #rightheader .header-button{ +.point-of-sale .pos-rightheader .header-button{ float:right; height:32px; padding-left:10px; @@ -211,10 +211,10 @@ -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: ease-out; } -.point-of-sale #rightheader .header-button:last-child{ +.point-of-sale .pos-rightheader .header-button:last-child{ border-left: 1px solid #3a3a3a; } -.point-of-sale #rightheader .header-button:active{ +.point-of-sale .pos-rightheader .header-button:active{ background: rgba(0,0,0,0.2); color:#EEE; } @@ -249,7 +249,7 @@ /* ********* Contains everything below the bar ********* */ -.point-of-sale #content { +.point-of-sale .pos-content { width: 100%; position: absolute; top: 34px; @@ -259,7 +259,7 @@ /* ********* The leftpane contains the order, numpad and paypad ********* */ -.point-of-sale #leftpane { +.point-of-sale .pos-leftpane { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; @@ -273,7 +273,7 @@ border-right: solid 1px #CECBCB; background-color: white; } -.point-of-sale #leftpane footer { +.point-of-sale .pos-leftpane footer { position: absolute; bottom: 0; left: 0; @@ -284,7 +284,7 @@ /* ********* The paypad contains the payment buttons ********* */ -.point-of-sale #paypad { +.point-of-sale .paypad { padding: 8px 4px 8px 8px; display: inline-block; text-align: center; @@ -294,7 +294,7 @@ overflow-y: auto; overflow-x: hidden; } -.point-of-sale #paypad button { +.point-of-sale .paypad button { height: 50px; display: block; width: 100%; @@ -304,9 +304,9 @@ color: #555555; font-size: 14px; } -.point-of-sale #paypad button:active, -.point-of-sale #numpad button:active, -.point-of-sale #numpad .selected-mode, +.point-of-sale .paypad button:active, +.point-of-sale .numpad button:active, +.point-of-sale .numpad .selected-mode, .point-of-sale .popup button:active{ border: none; color: white; @@ -315,12 +315,12 @@ /* ********* The Numpad ********* */ -.point-of-sale #numpad { +.point-of-sale .numpad { padding: 8px 8px 8px 4px; display: inline-block; text-align: center; } -.point-of-sale #numpad button { +.point-of-sale .numpad button { height: 50px; width: 50px; margin: 0px 0px 4px 0px; @@ -331,13 +331,13 @@ .point-of-sale .input-button { font-size: 24px; } -.point-of-sale .mode-button, .point-of-sale #numpad-delete, .point-of-sale #numpad-minus { +.point-of-sale .mode-button { font-size: 14px; } /* ********* The right pane contains the screens and headers ********* */ -.point-of-sale #rightpane { +.point-of-sale .pos-rightpane { position: absolute; top: 0; /*bottom: 105px;*/ @@ -347,7 +347,7 @@ vertical-align: top; } -.point-of-sale #rightpane header { +.point-of-sale .pos-rightpane header { padding: 0; height: 32px; border-bottom: 1px solid #c7c7c7; @@ -432,19 +432,11 @@ /* c) the categories list */ -.point-of-sale #categories { - /*background:#f0f0f0;*/ +.point-of-sale .categories { position: relative; border-bottom: 1px solid #cecece; } -.point-of-sale #categories .white-gradient{ - position: absolute; - top:50%; - left:0; - right:0; - bottom:0; -} -.point-of-sale #categories h4 { +.point-of-sale .categories h4 { display: inline-block; margin: 9px 5px; } @@ -754,20 +746,20 @@ } @media print { - .point-of-sale #topheader, .point-of-sale #leftpane { + .point-of-sale .pos-topheader, .point-of-sale .pos-leftpane { display: none !important; } - .point-of-sale #content { + .point-of-sale .pos-content { top: 0px !important; } - .point-of-sale #rightpane { + .point-of-sale .pos-rightpane { left: 0px !important; background-color: white; } - #receipt-screen header { + .point-of-sale .receipt-screen header { display: none !important; } - #receipt-screen { + .point-of-sale .receipt-screen { text-align: left; } .pos-actionbar { diff --git a/addons/point_of_sale/static/src/js/screens.js b/addons/point_of_sale/static/src/js/screens.js index 77a542ff93c..c6261477fe6 100644 --- a/addons/point_of_sale/static/src/js/screens.js +++ b/addons/point_of_sale/static/src/js/screens.js @@ -998,7 +998,7 @@ function openerp_pos_screens(instance, module){ //module is instance.point_of_sa l.on('delete_payment_line', self, function(r) { self.deleteLine(r); }); - l.appendTo(this.$('#paymentlines')); + l.appendTo(this.$('.paymentlines')); this.paymentlinewidgets.push(l); if(this.numpadState){ this.numpadState.resetValue(); @@ -1007,7 +1007,7 @@ function openerp_pos_screens(instance, module){ //module is instance.point_of_sa }, renderElement: function() { this._super(); - this.$('#paymentlines').empty(); + this.$('.paymentlines').empty(); for(var i = 0, len = this.paymentlinewidgets.length; i < len; i++){ this.paymentlinewidgets[i].destroy(); } @@ -1029,10 +1029,10 @@ function openerp_pos_screens(instance, module){ //module is instance.point_of_sa var remaining = dueTotal > paidTotal ? dueTotal - paidTotal : 0; var change = paidTotal > dueTotal ? paidTotal - dueTotal : 0; - this.$('#payment-due-total').html(this.format_currency(dueTotal)); - this.$('#payment-paid-total').html(this.format_currency(paidTotal)); - this.$('#payment-remaining').html(this.format_currency(remaining)); - this.$('#payment-change').html(this.format_currency(change)); + this.$('.payment-due-total').html(this.format_currency(dueTotal)); + this.$('.payment-paid-total').html(this.format_currency(paidTotal)); + this.$('.payment-remaining').html(this.format_currency(remaining)); + this.$('.payment-change').html(this.format_currency(change)); if(currentOrder.selected_orderline === undefined){ remaining = 1; // What is this ? } diff --git a/addons/point_of_sale/static/src/js/widgets.js b/addons/point_of_sale/static/src/js/widgets.js index 1abd6c3daba..d237b552d17 100644 --- a/addons/point_of_sale/static/src/js/widgets.js +++ b/addons/point_of_sale/static/src/js/widgets.js @@ -842,7 +842,7 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa order: new_order, pos: self.pos }); - new_order_button.appendTo($('#orders')); + new_order_button.appendTo(this.$('.orders')); new_order_button.selectOrder(); }, self); @@ -889,25 +889,25 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa // -------- Screens --------- this.product_screen = new module.ProductScreenWidget(this,{}); - this.product_screen.appendTo($('#rightpane')); + this.product_screen.appendTo(this.$('.pos-rightpane')); this.receipt_screen = new module.ReceiptScreenWidget(this, {}); - this.receipt_screen.appendTo($('#rightpane')); + this.receipt_screen.appendTo(this.$('.pos-rightpane')); this.payment_screen = new module.PaymentScreenWidget(this, {}); - this.payment_screen.appendTo($('#rightpane')); + this.payment_screen.appendTo(this.$('.pos-rightpane')); this.welcome_screen = new module.WelcomeScreenWidget(this,{}); - this.welcome_screen.appendTo($('#rightpane')); + this.welcome_screen.appendTo(this.$('.pos-rightpane')); this.client_payment_screen = new module.ClientPaymentScreenWidget(this, {}); - this.client_payment_screen.appendTo($('#rightpane')); + this.client_payment_screen.appendTo(this.$('.pos-rightpane')); this.scale_invite_screen = new module.ScaleInviteScreenWidget(this, {}); - this.scale_invite_screen.appendTo($('#rightpane')); + this.scale_invite_screen.appendTo(this.$('.pos-rightpane')); this.scale_screen = new module.ScaleScreenWidget(this,{}); - this.scale_screen.appendTo($('#rightpane')); + this.scale_screen.appendTo(this.$('.pos-rightpane')); // -------- Popups --------- @@ -938,42 +938,42 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa // -------- Misc --------- this.notification = new module.SynchNotificationWidget(this,{}); - this.notification.appendTo(this.$('#rightheader')); + this.notification.appendTo(this.$('.pos-rightheader')); this.username = new module.UsernameWidget(this,{}); this.username.replace(this.$('.placeholder-UsernameWidget')); this.action_bar = new module.ActionBarWidget(this); - this.action_bar.appendTo($(".point-of-sale #rightpane")); + this.action_bar.appendTo(this.$(".pos-rightpane")); this.left_action_bar = new module.ActionBarWidget(this); - this.left_action_bar.appendTo($(".point-of-sale #leftpane")); + this.left_action_bar.appendTo(this.$(".pos-leftpane")); this.paypad = new module.PaypadWidget(this, {}); - this.paypad.replace($('#placeholder-PaypadWidget')); + this.paypad.replace(this.$('.placeholder-PaypadWidget')); this.numpad = new module.NumpadWidget(this); - this.numpad.replace($('#placeholder-NumpadWidget')); + this.numpad.replace(this.$('.placeholder-NumpadWidget')); this.order_widget = new module.OrderWidget(this, {}); - this.order_widget.replace($('#placeholder-OrderWidget')); + this.order_widget.replace(this.$('.placeholder-OrderWidget')); this.onscreen_keyboard = new module.OnscreenKeyboardWidget(this, { 'keyboard_model': 'simple' }); - this.onscreen_keyboard.appendTo($(".point-of-sale #content")); + this.onscreen_keyboard.appendTo(this.$(".pos-content")); this.close_button = new module.HeaderButtonWidget(this,{ label: _t('Close'), action: function(){ self.close(); }, }); - this.close_button.appendTo(this.$('#rightheader')); + this.close_button.appendTo(this.$('.pos-rightheader')); this.client_button = new module.HeaderButtonWidget(this,{ label: _t('Self-Checkout'), action: function(){ self.screen_selector.set_user_mode('client'); }, }); - this.client_button.appendTo(this.$('#rightheader')); + this.client_button.appendTo(this.$('.pos-rightheader')); // -------- Screen Selector --------- @@ -1006,7 +1006,7 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa if(this.pos.debug){ this.debug_widget = new module.DebugWidget(this); - this.debug_widget.appendTo(this.$('#content')); + this.debug_widget.appendTo(this.$('.pos-content')); } }, @@ -1053,12 +1053,12 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa if(visible !== this.leftpane_visible){ this.leftpane_visible = visible; if(visible){ - $('#leftpane').removeClass('oe_hidden').animate({'width':this.leftpane_width},500,'swing'); - $('#rightpane').animate({'left':this.leftpane_width},500,'swing'); + this.$('.pos-leftpane').removeClass('oe_hidden').animate({'width':this.leftpane_width},500,'swing'); + this.$('.pos-rightpane').animate({'left':this.leftpane_width},500,'swing'); }else{ - var leftpane = $('#leftpane'); - $('#leftpane').animate({'width':'0px'},500,'swing', function(){ leftpane.addClass('oe_hidden'); }); - $('#rightpane').animate({'left':'0px'},500,'swing'); + var leftpane = this.$('.pos-leftpane'); + leftpane.animate({'width':'0px'},500,'swing', function(){ leftpane.addClass('oe_hidden'); }); + this.$('.pos-rightpane').animate({'left':'0px'},500,'swing'); } } }, @@ -1067,11 +1067,9 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa if(visible !== this.cashier_controls_visible){ this.cashier_controls_visible = visible; if(visible){ - $('#loggedas').removeClass('oe_hidden'); - $('#rightheader').removeClass('oe_hidden'); + this.$('.pos-rightheader').removeClass('oe_hidden'); }else{ - $('#loggedas').addClass('oe_hidden'); - $('#rightheader').addClass('oe_hidden'); + this.$('.pos-rightheader').addClass('oe_hidden'); } } }, diff --git a/addons/point_of_sale/static/src/xml/pos.xml b/addons/point_of_sale/static/src/xml/pos.xml index daa1164a2df..3d3f921f07c 100644 --- a/addons/point_of_sale/static/src/xml/pos.xml +++ b/addons/point_of_sale/static/src/xml/pos.xml @@ -5,30 +5,30 @@
-
-
+
+
-
-
+
+
-
    +
      -
      +
      -
      -
      +
      +
      -
      -
      +
      +
      -
      +
      @@ -73,12 +73,12 @@ -
      +
      -
      +
      @@ -144,11 +144,9 @@
      -
      -
      +
      -
      @@ -156,16 +154,15 @@
      -
        +
      -
      -
      +
      @@ -213,7 +210,7 @@ -
      +

      Payment

      @@ -222,28 +219,28 @@ Total: - +
      -
      +
      Paid: - +
      Remaining: - +
      Change: - +
      @@ -252,7 +249,7 @@ -
      +

      Receipt

      @@ -300,13 +297,6 @@
      - -
      - - -
      -       -