/* ********* The black header bar ********* */
-.point-of-sale #topheader {
+.point-of-sale .pos-topheader {
position:absolute;
left:0;
top:0;
/* a) The left part of the top-bar */
-.point-of-sale #branding{
+.point-of-sale .pos-branding{
position: absolute;
display: table-cell;
left:0;
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;
/* b) The right part of the top-bar */
-.point-of-sale #rightheader {
+.point-of-sale .pos-rightheader {
position: absolute;
left:440px;
right:0;
height:100%;
}
-.point-of-sale #rightheader button {
+.point-of-sale .pos-rightheader button {
color: #273072;
height:27px;
margin:3px;
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;
/* c) The session buttons */
-.point-of-sale #rightheader .header-button{
+.point-of-sale .pos-rightheader .header-button{
float:right;
height:32px;
padding-left:10px;
-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;
}
/* ********* Contains everything below the bar ********* */
-.point-of-sale #content {
+.point-of-sale .pos-content {
width: 100%;
position: absolute;
top: 34px;
/* ********* 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;
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;
/* ********* 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;
overflow-y: auto;
overflow-x: hidden;
}
-.point-of-sale #paypad button {
+.point-of-sale .paypad button {
height: 50px;
display: block;
width: 100%;
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;
/* ********* 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;
.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;*/
vertical-align: top;
}
-.point-of-sale #rightpane header {
+.point-of-sale .pos-rightpane header {
padding: 0;
height: 32px;
border-bottom: 1px solid #c7c7c7;
/* 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;
}
}
@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 {
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();
},
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();
}
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 ?
}
order: new_order,
pos: self.pos
});
- new_order_button.appendTo($('#orders'));
+ new_order_button.appendTo(this.$('.orders'));
new_order_button.selectOrder();
}, self);
// -------- 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 ---------
// -------- 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 ---------
if(this.pos.debug){
this.debug_widget = new module.DebugWidget(this);
- this.debug_widget.appendTo(this.$('#content'));
+ this.debug_widget.appendTo(this.$('.pos-content'));
}
},
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');
}
}
},
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');
}
}
},
<t t-name="PosWidget">
<div class="point-of-sale">
- <div id="topheader">
- <div id="branding">
+ <div class="pos-topheader">
+ <div class="pos-branding">
<img src="/point_of_sale/static/src/img/logo.png" />
<span class="placeholder-UsernameWidget"></span>
</div>
- <div id="rightheader">
- <div id="order-selector">
+ <div class="pos-rightheader">
+ <div class="order-selector">
<button class="neworder-button square"><img src='/point_of_sale/static/src/img/plus.png' /></button>
<button class="deleteorder-button square"><img src='/point_of_sale/static/src/img/minus.png' /></button>
- <ol id="orders"></ol>
+ <ol class="orders"></ol>
</div>
<!-- here goes header buttons -->
</div>
</div>
- <div id="content">
+ <div class="pos-content">
- <div id="leftpane">
- <div id="placeholder-OrderWidget"></div>
+ <div class="pos-leftpane">
+ <div class="placeholder-OrderWidget"></div>
<footer>
- <div id="placeholder-PaypadWidget"></div>
- <div id="placeholder-NumpadWidget"></div>
+ <div class="placeholder-PaypadWidget"></div>
+ <div class="placeholder-NumpadWidget"></div>
</footer>
</div>
- <div id="rightpane">
+ <div class="pos-rightpane">
</div>
</div>
<div class="loader">
</t>
<t t-name="PaypadWidget">
- <div id="paypad">
+ <div class="paypad">
</div>
</t>
<t t-name="NumpadWidget">
- <div id="numpad">
+ <div class="numpad">
<button class="input-button number-char">1</button>
<button class="input-button number-char">2</button>
<button class="input-button number-char">3</button>
</div>
</header>
<t t-if="widget.subcategories.length > 0">
- <div id="categories">
- <div class="white-gradient"></div>
+ <div class="categories">
<ol class="category-list">
</ol>
- <div class="shadow-top"></div>
</div>
</t>
</t>
<t t-name="ProductListWidget">
<div class='product-list-container'>
<div class="product-list-scroller">
- <ol id="products-screen-ol" class="product-list">
+ <ol class="product-list">
</ol>
</div>
- <div class="shadow-top"></div>
<span class="placeholder-ScrollbarWidget" />
</div>
</t>
<t t-name="ProductScreenWidget">
- <div id="products-screen" class="screen">
+ <div class="product-screen screen">
<table class="layout-table">
<tr class="header-row">
</t>
<t t-name="PaymentScreenWidget">
- <div id="payment-screen" class="screen">
+ <div class="payment-screen screen">
<header><h2>Payment</h2></header>
<div class="pos-step-container">
<div class="pos-payment-container">
<span class="left-block">
Total:
</span>
- <span class='right-block' id="payment-due-total"></span>
+ <span class="right-block payment-due-total"></span>
</div>
- <table id="paymentlines">
+ <table class="paymentlines">
</table>
<div class="footer">
<div class="infoline">
<span class='left-block'>
Paid:
</span>
- <span class='right-block' id="payment-paid-total"></span>
+ <span class="right-block payment-paid-total"></span>
</div>
<div class="infoline">
<span class='left-block'>
Remaining:
</span>
- <span class='right-block' id="payment-remaining"></span>
+ <span class="right-block payment-remaining"></span>
</div>
<div class="infoline" >
<span class='left-block'>
Change:
</span>
- <span class='right-block' id="payment-change"></span>
+ <span class="right-block payment-change"></span>
</div>
</div>
</div>
</t> <!-- pos-payment-screen -->
<t t-name="ReceiptScreenWidget">
- <div id="receipt-screen" class="screen" >
+ <div class="receipt-screen screen" >
<header><h2>Receipt</h2></header>
<div class="pos-step-container">
<div class="pos-receipt-container">
</div>
</t>
- <t t-name="ScaleProductSelectionScreenWidget">
- <div class="scale-product-selection-screen">
- <span class="placeholder-ProductCategoriesWidget" />
- <span class="placeholder-ProductListWidget" />
- </div>
- </t>
-
<t t-name="HelpPopupWidget">
<div class="modal-dialog">
<div class="popup popup-help">
projects / odoo / odoo.git / commitdiff