[IMP] action bar
bzr revid: fva@openerp.com-20120418141144-g2653zv5vn33xfm5
This commit is contained in:
Frédéric van der Essen
parent
e81d9fd69e
commit
3a10debd1f
|
|
@ -1,4 +1,6 @@
|
|||
|
||||
body{
|
||||
overflow: hidden;
|
||||
}
|
||||
.point-of-sale {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
|
@ -116,9 +118,15 @@
|
|||
bottom: 0;
|
||||
}
|
||||
.point-of-sale #leftpane {
|
||||
height: 100%;
|
||||
-webkit-box-sizing:border-box;
|
||||
position:absolute;
|
||||
left:0;
|
||||
width:440px;
|
||||
top:0px;
|
||||
bottom:105px;
|
||||
/*height: 87%;
|
||||
width: 440px;
|
||||
position: relative;
|
||||
position: relative;*/
|
||||
border-right: solid 1px #afafb6;
|
||||
background-color: white;
|
||||
}
|
||||
|
|
@ -249,10 +257,10 @@
|
|||
.point-of-sale #rightpane {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 441px;
|
||||
bottom: 105px;
|
||||
left: 440px;
|
||||
//height:100%;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
.point-of-sale #rightpane header {
|
||||
|
|
@ -487,6 +495,79 @@
|
|||
}
|
||||
}
|
||||
|
||||
.point-of-sale .pos-actionbar{
|
||||
position:absolute;
|
||||
left: 0;
|
||||
bottom: 0px;
|
||||
height: 105px;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
background: #f5f5f5; /*#ebebeb;*/
|
||||
border-top: solid 1px #afafb6;
|
||||
}
|
||||
|
||||
.point-of-sale .pos-actionbar ul{
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.point-of-sale .pos-actionbar-left-region{
|
||||
height: 100%;
|
||||
width: 434px;
|
||||
margin: 0px;
|
||||
padding-left:3px;
|
||||
padding-right:3px;
|
||||
border-right: solid 1px #dfdfdf;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.point-of-sale .pos-actionbar-right-region{
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
padding-left:3px;
|
||||
padding-right:3px;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.point-of-sale .pos-actionbar .button{
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
text-align:center;
|
||||
margin:3px;
|
||||
margin-top:6px;
|
||||
line-height: 90px;
|
||||
float:left;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
border: 1px solid #cacaca;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
|
||||
background: #e2e2e2;
|
||||
background: -moz-linear-gradient(#f0f0f0, #e2e2e2);
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#e2e2e2));
|
||||
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0, 0.3);
|
||||
}
|
||||
.point-of-sale .pos-actionbar .button:hover {
|
||||
color: white;
|
||||
background: #7f82ac;
|
||||
border: 1px solid #7f82ac;
|
||||
background: -moz-linear-gradient(#9d9fc5, #7f82ac);
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#9d9fc5), to(#7f82ac));
|
||||
|
||||
-webkit-transition-property: background, border;
|
||||
-webkit-transition-duration: 0.2s;
|
||||
-webkit-transition-timing-function: ease-out;
|
||||
}
|
||||
|
||||
.point-of-sale .pos-actionbar .button.rightalign{
|
||||
float:right;
|
||||
}
|
||||
|
||||
/* Onscreen Keyboard http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-keyboard-with-css-and-jquery/ */
|
||||
|
||||
.point-of-sale .keyboard_frame{
|
||||
|
|
|
|||
|
|
@ -177,14 +177,14 @@ openerp.point_of_sale = function(session) {
|
|||
if (stored)
|
||||
this.data[key] = JSON.parse(stored);
|
||||
else
|
||||
console.log('Store get: ',key, 'default: ',_default);
|
||||
//console.log('Store get: ',key, 'default: ',_default);
|
||||
return _default;
|
||||
}
|
||||
console.log('Store get: ',key, 'value: ',this.data[key]);
|
||||
//console.log('Store get: ',key, 'value: ',this.data[key]);
|
||||
return this.data[key];
|
||||
},
|
||||
set: function(key, value) {
|
||||
console.log('Store set: ',key,' value: ',value);
|
||||
//console.log('Store set: ',key,' value: ',value);
|
||||
this.data[key] = value;
|
||||
localStorage['oe_pos_' + key] = JSON.stringify(value);
|
||||
},
|
||||
|
|
@ -540,7 +540,7 @@ openerp.point_of_sale = function(session) {
|
|||
existing.incrementQuantity();
|
||||
} else {
|
||||
var line = new Orderline(product.toJSON());
|
||||
console.log('orderline:',line,product.toJSON());
|
||||
//console.log('orderline:',line,product.toJSON());
|
||||
this.get('orderLines').add(line);
|
||||
line.bind('killme', function() {
|
||||
this.get('orderLines').remove(line);
|
||||
|
|
@ -1244,11 +1244,67 @@ openerp.point_of_sale = function(session) {
|
|||
}
|
||||
});
|
||||
|
||||
var ToolbarWidget = session.web.Widget.extend({
|
||||
tagName: 'div',
|
||||
var ActionButtonWidget = session.web.Widget.extend({
|
||||
template:'pos-action-button',
|
||||
init: function(parent, options){
|
||||
this._super(parent, options);
|
||||
this.label = options.label || 'button';
|
||||
this.rightalign = options.rightalign || false;
|
||||
},
|
||||
});
|
||||
|
||||
var ActionbarWidget = session.web.Widget.extend({
|
||||
template:'pos-actionbar',
|
||||
init: function(parent, options){
|
||||
this._super(parent,options);
|
||||
this.left_button_list = [];
|
||||
this.right_button_list = [];
|
||||
},
|
||||
start: function(){
|
||||
console.log('hello world!');
|
||||
window.actionbarwidget = this;
|
||||
},
|
||||
destroyButtons:function(position){
|
||||
var button_list;
|
||||
if(position === 'left'){
|
||||
button_list = this.left_button_list;
|
||||
this.left_button_list = [];
|
||||
}else if (position === 'right'){
|
||||
button_list = this.right_button_list;
|
||||
this.right_button_list = [];
|
||||
}else{
|
||||
return this;
|
||||
}
|
||||
for(var i = 0; i < button_list.length; i++){
|
||||
button_list[i].destroy();
|
||||
}
|
||||
return this;
|
||||
},
|
||||
addNewButton: function(position,button_options){
|
||||
if(arguments.length == 2){
|
||||
var button_list;
|
||||
var $button_list;
|
||||
if(position === 'left'){
|
||||
button_list = this.left_button_list;
|
||||
$button_list = $('.pos-actionbar-left-region');
|
||||
}else if(position === 'right'){
|
||||
button_list = this.right_button_list;
|
||||
$button_list = $('.pos-actionbar-right-region');
|
||||
}
|
||||
var button = new ActionButtonWidget(this,button_options);
|
||||
button_list.push(button);
|
||||
button.appendTo($button_list);
|
||||
}else{
|
||||
for(var i = 1; i < arguments.length; i++){
|
||||
this.addNewButton(position,arguments[i]);
|
||||
}
|
||||
}
|
||||
return this;
|
||||
}
|
||||
/*
|
||||
renderElement: function() {
|
||||
//this.$element.html(this.template_fct());
|
||||
},*/
|
||||
});
|
||||
|
||||
// A Widget that displays an onscreen keyboard.
|
||||
|
|
@ -1545,6 +1601,16 @@ openerp.point_of_sale = function(session) {
|
|||
|
||||
this.onscreenKeyboard = new OnscreenKeyboardWidget(null,{keyboard_model:'simple'});
|
||||
this.onscreenKeyboard.appendTo($(".point-of-sale #content"));
|
||||
|
||||
this.actionBar = new ActionbarWidget(null);
|
||||
this.actionBar.appendTo($(".point-of-sale #content"));
|
||||
|
||||
this.actionBar.addNewButton('left',{'label':'foobar'});
|
||||
this.actionBar.addNewButton('left',{'label':'test'});
|
||||
this.actionBar.addNewButton('left',{'label':'kikoo', rightalign:true});
|
||||
|
||||
this.actionBar.addNewButton('right',{'label':'boo'});
|
||||
this.actionBar.addNewButton('right',{'label':'bah', rightalign:true});
|
||||
};
|
||||
|
||||
//returns true if the code is a valid EAN codebar number by checking the control digit.
|
||||
|
|
|
|||
|
|
@ -294,6 +294,26 @@
|
|||
</table>
|
||||
</div>
|
||||
</t>
|
||||
<t t-name="pos-actionbar">
|
||||
<div class="pos-actionbar">
|
||||
<ul class="pos-actionbar-left-region">
|
||||
<!-- <li class="button">yoyo</li>
|
||||
<li class="button">foo</li>
|
||||
<li class="button rightalign">bar</li> -->
|
||||
</ul>
|
||||
|
||||
<ul class="pos-actionbar-right-region">
|
||||
<!-- <li class="button">BUTTOOON</li>
|
||||
<li class="button">JEEENKIINS</li>
|
||||
<li class="button rightalign">ARGH</li> -->
|
||||
</ul>
|
||||
</div>
|
||||
</t>
|
||||
<t t-name="pos-action-button">
|
||||
<li t-att-class=" 'button '+ (widget.rightalign ? 'rightalign ' : '')">
|
||||
<t t-esc="widget.label" />
|
||||
</li>
|
||||
</t>
|
||||
<!-- Onscreen Keyboard :
|
||||
http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-keyboard-with-css-and-jquery/ -->
|
||||
<t t-name="pos-onscreen-keyboard-full-template">
|
||||
|
|
|
|||
Loading…
Reference in New Issue