[IMP] point_of_sale: removed all ids from templates and css

bzr revid: fva@openerp.com-20131105141903-3n8iq4geiwhq4nav
This commit is contained in:
Frédéric van der Essen 2013-11-05 15:19:03 +01:00
parent 7a991fbb46
commit d4e8041601
4 changed files with 88 additions and 108 deletions

View File

@ -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 {

View File

@ -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 ?
}

View File

@ -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');
}
}
},

View File

@ -5,30 +5,30 @@
<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">
@ -73,12 +73,12 @@
</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>
@ -144,11 +144,9 @@
</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>
@ -156,16 +154,15 @@
<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">
@ -213,7 +210,7 @@
</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">
@ -222,28 +219,28 @@
<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>
@ -252,7 +249,7 @@
</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">
@ -300,13 +297,6 @@
</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">