[IMP] point_of_sale: scrollbar
bzr revid: fva@openerp.com-20120621162352-v8msrulvti2hxjem
This commit is contained in:
Frédéric van der Essen
parent
53d870aea0
commit
f68c7f936f
|
|
@ -84,14 +84,20 @@ Main features :
|
|||
# Web client
|
||||
'js': [
|
||||
'static/lib/backbone/backbone-0.5.3.js',
|
||||
'static/lib/mousewheel/jquery.mousewheel-3.0.6.js',
|
||||
'static/src/js/pos_models.js',
|
||||
'static/src/js/pos_basewidget.js',
|
||||
'static/src/js/pos_keyboard_widget.js',
|
||||
'static/src/js/pos_scrollbar_widget.js',
|
||||
'static/src/js/pos_widgets.js',
|
||||
'static/src/js/pos_devices.js',
|
||||
'static/src/js/pos_screens.js',
|
||||
'static/src/js/pos_main.js'
|
||||
],
|
||||
'css': ['static/src/css/pos.css'],
|
||||
'css': [
|
||||
'static/src/css/pos.css',
|
||||
'static/src/css/keyboard.css'
|
||||
],
|
||||
'qweb': ['static/src/xml/pos.xml'],
|
||||
'auto_install': True,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,84 @@
|
|||
/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
|
||||
* Licensed under the MIT License (LICENSE.txt).
|
||||
*
|
||||
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
|
||||
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
|
||||
* Thanks to: Seamus Leahy for adding deltaX and deltaY
|
||||
*
|
||||
* Version: 3.0.6
|
||||
*
|
||||
* Requires: 1.2.2+
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
|
||||
var types = ['DOMMouseScroll', 'mousewheel'];
|
||||
|
||||
if ($.event.fixHooks) {
|
||||
for ( var i=types.length; i; ) {
|
||||
$.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
|
||||
}
|
||||
}
|
||||
|
||||
$.event.special.mousewheel = {
|
||||
setup: function() {
|
||||
if ( this.addEventListener ) {
|
||||
for ( var i=types.length; i; ) {
|
||||
this.addEventListener( types[--i], handler, false );
|
||||
}
|
||||
} else {
|
||||
this.onmousewheel = handler;
|
||||
}
|
||||
},
|
||||
|
||||
teardown: function() {
|
||||
if ( this.removeEventListener ) {
|
||||
for ( var i=types.length; i; ) {
|
||||
this.removeEventListener( types[--i], handler, false );
|
||||
}
|
||||
} else {
|
||||
this.onmousewheel = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.extend({
|
||||
mousewheel: function(fn) {
|
||||
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
|
||||
},
|
||||
|
||||
unmousewheel: function(fn) {
|
||||
return this.unbind("mousewheel", fn);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function handler(event) {
|
||||
var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
|
||||
event = $.event.fix(orgEvent);
|
||||
event.type = "mousewheel";
|
||||
|
||||
// Old school scrollwheel delta
|
||||
if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
|
||||
if ( orgEvent.detail ) { delta = -orgEvent.detail/3; }
|
||||
|
||||
// New school multidimensional scroll (touchpads) deltas
|
||||
deltaY = delta;
|
||||
|
||||
// Gecko
|
||||
if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
|
||||
deltaY = 0;
|
||||
deltaX = -1*delta;
|
||||
}
|
||||
|
||||
// Webkit
|
||||
if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
|
||||
if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
|
||||
|
||||
// Add event and delta to the front of the arguments
|
||||
args.unshift(event, delta, deltaX, deltaY);
|
||||
|
||||
return ($.event.dispatch || $.event.handle).apply(this, args);
|
||||
}
|
||||
|
||||
})(jQuery);
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
/* Onscreen Keyboard http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-keyboard-with-css-and-jquery/ */
|
||||
|
||||
.point-of-sale .keyboard_frame{
|
||||
display: none;
|
||||
position:absolute;
|
||||
left: 0;
|
||||
bottom: 0px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-top: 15px;
|
||||
width: 100%;
|
||||
height: 0px; /* 235px, animated via jquery */
|
||||
background-color: #BBB;
|
||||
overflow:hidden;
|
||||
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0, 0.3);
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
z-index:10000;
|
||||
|
||||
}
|
||||
.point-of-sale .keyboard_frame .close_button{
|
||||
height:40px;
|
||||
width:60px;
|
||||
text-align:center;
|
||||
background-color: #DDD;
|
||||
font-size: 12px;
|
||||
line-height:40px;
|
||||
border: 1px solid #CCC;
|
||||
-webkit-border-radius: 5px;
|
||||
-webkit-box-shadow: 0px 2px 5px rgba(0,0,0, 0.2);
|
||||
position:absolute;
|
||||
top:0;
|
||||
right:15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.point-of-sale .keyboard li {
|
||||
float: left;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
top:0;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
-webkit-box-shadow: 0px 2px 5px rgba(0,0,0, 0.2);
|
||||
-webkit-transition-property: top, background-color;
|
||||
-webkit-transition-duration: 0.2s;
|
||||
-webkit-transition-timing-function: linear;
|
||||
}
|
||||
.point-of-sale .keyboard li:hover {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
left: 0px;
|
||||
border-color: #ddd;
|
||||
background-color:#e5e5e5;
|
||||
cursor: pointer;
|
||||
-webkit-transition-property: top, background-color;
|
||||
-webkit-transition-duration: 0.1s;
|
||||
-webkit-transition-timing-function: ease-out;
|
||||
}
|
||||
.point-of-sale .uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.point-of-sale .on {
|
||||
display: none;
|
||||
}
|
||||
.point-of-sale .firstitem{
|
||||
clear: left;
|
||||
}
|
||||
.point-of-sale .keyboard .lastitem {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* ---- full sized keyboard ---- */
|
||||
|
||||
.point-of-sale .full_keyboard {
|
||||
list-style: none;
|
||||
font-size: 14px;
|
||||
width: 680px;
|
||||
height: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.point-of-sale .full_keyboard li{
|
||||
margin: 0 5px 5px 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
.point-of-sale .full_keyboard .tab, .point-of-sale .full_keyboard .delete {
|
||||
width: 70px;
|
||||
}
|
||||
.point-of-sale .full_keyboard .capslock {
|
||||
width: 80px;
|
||||
}
|
||||
.point-of-sale .full_keyboard .return {
|
||||
width: 77px;
|
||||
}
|
||||
.point-of-sale .full_keyboard .left-shift {
|
||||
width: 95px;
|
||||
}
|
||||
.point-of-sale .full_keyboard .right-shift {
|
||||
width: 109px;
|
||||
}
|
||||
.point-of-sale .full_keyboard .space {
|
||||
clear: left;
|
||||
width: 673px;
|
||||
}
|
||||
|
||||
/* ---- simplified keyboard ---- */
|
||||
|
||||
.point-of-sale .simple_keyboard {
|
||||
list-style: none;
|
||||
font-size: 16px;
|
||||
width: 545px;
|
||||
height: 220px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.point-of-sale .simple_keyboard li{
|
||||
margin: 0 5px 5px 0;
|
||||
width: 49px;
|
||||
height: 49px;
|
||||
line-height: 49px;
|
||||
}
|
||||
.point-of-sale .simple_keyboard .firstitem.row_asdf{
|
||||
margin-left:25px;
|
||||
}
|
||||
.point-of-sale .simple_keyboard .firstitem.row_zxcv{
|
||||
margin-left:55px;
|
||||
}
|
||||
.point-of-sale .simple_keyboard .delete{
|
||||
width: 103px;
|
||||
}
|
||||
.point-of-sale .simple_keyboard .return{
|
||||
width: 103px;
|
||||
}
|
||||
.point-of-sale .simple_keyboard .space{
|
||||
width:268px;
|
||||
}
|
||||
.point-of-sale .simple_keyboard .numlock{
|
||||
width:103px;
|
||||
}
|
||||
|
|
@ -129,6 +129,7 @@
|
|||
position: absolute;
|
||||
top: 56px;
|
||||
bottom: 0;
|
||||
background: #F0EEEE; //#E6E4E4; //yellow; //#F0EEEE;
|
||||
}
|
||||
.point-of-sale #leftpane {
|
||||
-webkit-box-sizing:border-box;
|
||||
|
|
@ -272,7 +273,6 @@
|
|||
top: 0;
|
||||
bottom: 105px;
|
||||
left: 440px;
|
||||
//height:100%;
|
||||
right: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
|
@ -285,10 +285,17 @@
|
|||
background: -webkit-gradient(linear, left top, left bottom, from(white), to(#d3d3d3));
|
||||
}
|
||||
.point-of-sale .product-list {
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
top: 72px;
|
||||
bottom: 0;
|
||||
padding:10px;
|
||||
overflow: hidden;
|
||||
height:100%;
|
||||
}
|
||||
.point-of-sale .product-list-container {
|
||||
position:absolute;
|
||||
top:0px;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
right:0px;
|
||||
//background:url('../img/bg_callout_gradient_scratched_stars.png');
|
||||
}
|
||||
.point-of-sale .breadcrumb li {
|
||||
float: left;
|
||||
|
|
@ -338,6 +345,7 @@
|
|||
display: none;
|
||||
}
|
||||
.point-of-sale #categories {
|
||||
background:#f0f0f0;
|
||||
border-bottom: 1px solid #cecbcb;
|
||||
}
|
||||
.point-of-sale #categories h4 {
|
||||
|
|
@ -359,15 +367,17 @@
|
|||
vertical-align: top;
|
||||
display: inline-block;
|
||||
font-size: 11px;
|
||||
margin: 5px;
|
||||
margin: 10px;
|
||||
max-width: 120px;
|
||||
border: 1px solid lightgray;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
-moz-box-shadow: 0px 1px 4px #777777;
|
||||
-webkit-box-shadow: 0px 1px 4px #777777;
|
||||
-box-shadow: 0px 1px 4px #777777;
|
||||
background:#fff;
|
||||
border: 1px solid #fff;
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 3px;
|
||||
-moz-box-shadow: 0px 1px 8px #777777;
|
||||
-webkit-box-shadow: 0px 1px 8px rgba(0,0,0,0.2);
|
||||
-box-shadow: 0px 1px 8px rgba(0,0,0,0.9);
|
||||
-webkit-filter: blur(3px);
|
||||
}
|
||||
.point-of-sale .product-img {
|
||||
position: relative;
|
||||
|
|
@ -375,6 +385,7 @@
|
|||
height: 100px;
|
||||
background: white;
|
||||
text-align: center;
|
||||
-webkit-filter: blur(3px);
|
||||
}
|
||||
.point-of-sale .price-tag {
|
||||
position: absolute;
|
||||
|
|
@ -424,17 +435,45 @@
|
|||
font-weight: 900;
|
||||
}
|
||||
|
||||
.point-of-sale .step-screen {
|
||||
.point-of-sale .screen {
|
||||
position:absolute;
|
||||
text-align: center;
|
||||
top:0px;
|
||||
bottom:0px;
|
||||
width:100%;
|
||||
}
|
||||
.point-of-sale .step-screen header h2 {
|
||||
.point-of-sale .screen header h2 {
|
||||
margin-top: 0px;
|
||||
padding-top: 7px;
|
||||
}
|
||||
.point-of-sale .step-screen p{
|
||||
.point-of-sale .screen p{
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.point-of-sale .screen .layout-table {
|
||||
border:none;
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.point-of-sale .screen .header-row {
|
||||
width:100%;
|
||||
height:0px;
|
||||
}
|
||||
|
||||
.point-of-sale .screen .header-cell{
|
||||
width:100%;
|
||||
height:0px;
|
||||
}
|
||||
.point-of-sale .screen .content-row {
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
.point-of-sale .screen .content-cell{
|
||||
width:100%;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.point-of-sale .pos-step-container {
|
||||
display: inline-block;
|
||||
font-size: 1.5em;
|
||||
|
|
@ -459,7 +498,7 @@
|
|||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.point-of-sale .step-screen button {
|
||||
.point-of-sale .screen button {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
padding: 7px 0 7px 0;
|
||||
|
|
@ -523,6 +562,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* ----------------------- ACTION BAR ---------------------- */
|
||||
|
||||
.point-of-sale .pos-actionbar{
|
||||
position:absolute;
|
||||
left: 0;
|
||||
|
|
@ -609,6 +650,8 @@
|
|||
float:right;
|
||||
}
|
||||
|
||||
/* ----------------------- POP-UPS ---------------------- */
|
||||
|
||||
.point-of-sale .modal-dialog{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
|
@ -699,150 +742,61 @@
|
|||
line-height:180px;
|
||||
}
|
||||
|
||||
/* Onscreen Keyboard http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-keyboard-with-css-and-jquery/ */
|
||||
/* ----------------------- SCROLLBAR ---------------------- */
|
||||
|
||||
.point-of-sale .keyboard_frame{
|
||||
display: none;
|
||||
.point-of-sale .scrollbar{
|
||||
position:absolute;
|
||||
left: 0;
|
||||
bottom: 0px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-top: 15px;
|
||||
width: 100%;
|
||||
height: 0px; /* 235px, animated via jquery */
|
||||
background-color: #BBB;
|
||||
overflow:hidden;
|
||||
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0, 0.3);
|
||||
-webkit-touch-callout: none;
|
||||
top:0px;
|
||||
right:0px;
|
||||
width:48px;
|
||||
height:100%;
|
||||
background: rgba(0,0,0,0.1);
|
||||
|
||||
}
|
||||
.point-of-sale .scrollbar .button{
|
||||
width:100%;
|
||||
height: 48px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
font-size:48px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
z-index:10000;
|
||||
|
||||
transition: all 250ms ease-in-out;
|
||||
}
|
||||
.point-of-sale .keyboard_frame .close_button{
|
||||
height:40px;
|
||||
width:60px;
|
||||
text-align:center;
|
||||
background-color: #DDD;
|
||||
font-size: 12px;
|
||||
line-height:40px;
|
||||
border: 1px solid #CCC;
|
||||
-webkit-border-radius: 5px;
|
||||
-webkit-box-shadow: 0px 2px 5px rgba(0,0,0, 0.2);
|
||||
.point-of-sale .scrollbar .button{
|
||||
background: rgba(0,0,0,0.6);
|
||||
-webkit-box-shadow: 0px 1px 4px rgba(0,0,0,0.01);
|
||||
color:white;
|
||||
text-shadow: rgba(255,255,255,0.5) 0px 0px 10px;
|
||||
-webkit-transition: all 250ms ease-in-out;
|
||||
}
|
||||
.point-of-sale .scrollbar .button.disabled{
|
||||
background: rgba(0,0,0,0.3);
|
||||
color:rgba(255,255,255,0.5);
|
||||
-webkit-transition: all 250ms ease-in-out;
|
||||
}
|
||||
|
||||
/*
|
||||
.point-of-sale .scrollbar .button{
|
||||
background: -webkit-linear-gradient(-90deg,#efefef,#d8d8d8);
|
||||
border: 1px solid #ababab;
|
||||
-webkit-box-shadow: 0px 1px 4px rgba(0,0,0,0.2);
|
||||
}*/
|
||||
.point-of-sale .scrollbar .down-button{
|
||||
position:absolute;
|
||||
top:0;
|
||||
right:15px;
|
||||
cursor: pointer;
|
||||
bottom:0px;
|
||||
}
|
||||
.point-of-sale .keyboard li {
|
||||
float: left;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
top:0;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
-webkit-box-shadow: 0px 2px 5px rgba(0,0,0, 0.2);
|
||||
-webkit-transition-property: top, background-color;
|
||||
-webkit-transition-duration: 0.2s;
|
||||
-webkit-transition-timing-function: linear;
|
||||
.point-of-sale .scrollbar .up-button{
|
||||
position:absolute;
|
||||
top:0px;
|
||||
}
|
||||
.point-of-sale .keyboard li:hover {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
left: 0px;
|
||||
border-color: #ddd;
|
||||
background-color:#e5e5e5;
|
||||
cursor: pointer;
|
||||
-webkit-transition-property: top, background-color;
|
||||
-webkit-transition-duration: 0.1s;
|
||||
-webkit-transition-timing-function: ease-out;
|
||||
}
|
||||
.point-of-sale .uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.point-of-sale .on {
|
||||
display: none;
|
||||
}
|
||||
.point-of-sale .firstitem{
|
||||
clear: left;
|
||||
}
|
||||
.point-of-sale .keyboard .lastitem {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* ---- full sized keyboard ---- */
|
||||
|
||||
.point-of-sale .full_keyboard {
|
||||
list-style: none;
|
||||
font-size: 14px;
|
||||
width: 680px;
|
||||
height: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.point-of-sale .full_keyboard li{
|
||||
margin: 0 5px 5px 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
.point-of-sale .full_keyboard .tab, .point-of-sale .full_keyboard .delete {
|
||||
width: 70px;
|
||||
}
|
||||
.point-of-sale .full_keyboard .capslock {
|
||||
width: 80px;
|
||||
}
|
||||
.point-of-sale .full_keyboard .return {
|
||||
width: 77px;
|
||||
}
|
||||
.point-of-sale .full_keyboard .left-shift {
|
||||
width: 95px;
|
||||
}
|
||||
.point-of-sale .full_keyboard .right-shift {
|
||||
width: 109px;
|
||||
}
|
||||
.point-of-sale .full_keyboard .space {
|
||||
clear: left;
|
||||
width: 673px;
|
||||
}
|
||||
|
||||
/* ---- simplified keyboard ---- */
|
||||
|
||||
.point-of-sale .simple_keyboard {
|
||||
list-style: none;
|
||||
font-size: 16px;
|
||||
width: 545px;
|
||||
height: 220px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.point-of-sale .simple_keyboard li{
|
||||
margin: 0 5px 5px 0;
|
||||
width: 49px;
|
||||
height: 49px;
|
||||
line-height: 49px;
|
||||
}
|
||||
.point-of-sale .simple_keyboard .firstitem.row_asdf{
|
||||
margin-left:25px;
|
||||
}
|
||||
.point-of-sale .simple_keyboard .firstitem.row_zxcv{
|
||||
margin-left:55px;
|
||||
}
|
||||
.point-of-sale .simple_keyboard .delete{
|
||||
width: 103px;
|
||||
}
|
||||
.point-of-sale .simple_keyboard .return{
|
||||
width: 103px;
|
||||
}
|
||||
.point-of-sale .simple_keyboard .space{
|
||||
width:268px;
|
||||
}
|
||||
.point-of-sale .simple_keyboard .numlock{
|
||||
width:103px;
|
||||
.point-of-sale .scrollbar .scroller{
|
||||
position:absolute;
|
||||
top:33%;
|
||||
bottom:50%;
|
||||
width:100%;
|
||||
background: rgba(0,0,0,0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,185 @@
|
|||
|
||||
function openerp_pos_keyboard(instance, module){ //module is instance.point_of_sale
|
||||
// ---------- OnScreen Keyboard Widget ----------
|
||||
|
||||
// A Widget that displays an onscreen keyboard.
|
||||
// There are two options when creating the widget :
|
||||
//
|
||||
// * 'keyboard_model' : 'simple' | 'full' (default)
|
||||
// The 'full' emulates a PC keyboard, while 'simple' emulates an 'android' one.
|
||||
//
|
||||
// * 'input_selector : (default: '.searchbox input')
|
||||
// defines the dom element that the keyboard will write to.
|
||||
//
|
||||
// The widget is initially hidden. It can be shown with this.show(), and is
|
||||
// automatically shown when the input_selector gets focused.
|
||||
|
||||
module.OnscreenKeyboardWidget = instance.web.Widget.extend({
|
||||
template: 'OnscreenKeyboardSimple',
|
||||
init: function(parent, options){
|
||||
var self = this;
|
||||
this._super(parent,options);
|
||||
options = options || {};
|
||||
|
||||
this.keyboard_model = options.keyboard_model || 'full';
|
||||
if(this.keyboard_model === 'full'){
|
||||
this.template = 'OnscreenKeyboardFull';
|
||||
}
|
||||
|
||||
this.input_selector = options.input_selector || '.searchbox input';
|
||||
|
||||
//show the keyboard when the input zone is clicked.
|
||||
$(this.input_selector).focus(function(){self.show();});
|
||||
|
||||
//Keyboard state
|
||||
this.capslock = false;
|
||||
this.shift = false;
|
||||
this.numlock = false;
|
||||
},
|
||||
|
||||
connect : function(){
|
||||
var self = this;
|
||||
$(this.input_selector).focus(function(){self.show();});
|
||||
},
|
||||
|
||||
// Write a character to the input zone
|
||||
writeCharacter: function(character){
|
||||
var $input = $(this.input_selector);
|
||||
$input[0].value += character;
|
||||
$input.keydown();
|
||||
$input.keyup();
|
||||
},
|
||||
|
||||
// Sends a 'return' character to the input zone. TODO
|
||||
sendReturn: function(){
|
||||
},
|
||||
|
||||
// Removes the last character from the input zone.
|
||||
deleteCharacter: function(){
|
||||
var $input = $(this.input_selector);
|
||||
var input_value = $input[0].value;
|
||||
$input[0].value = input_value.substr(0, input_value.length - 1);
|
||||
$input.keydown();
|
||||
$input.keyup();
|
||||
},
|
||||
|
||||
// Clears the content of the input zone.
|
||||
deleteAllCharacters: function(){
|
||||
var $input = $(this.input_selector);
|
||||
$input[0].value = "";
|
||||
$input.keydown();
|
||||
$input.keyup();
|
||||
},
|
||||
|
||||
// Makes the keyboard show and slide from the bottom of the screen.
|
||||
show: function(){
|
||||
$('.keyboard_frame').show().animate({'height':'235px'}, 500, 'swing');
|
||||
},
|
||||
|
||||
// Makes the keyboard hide by sliding to the bottom of the screen.
|
||||
hide: function(){
|
||||
var self = this;
|
||||
var frame = $('.keyboard_frame');
|
||||
frame.animate({'height':'0'}, 500, 'swing', function(){ frame.hide(); self.reset(); });
|
||||
},
|
||||
|
||||
//What happens when the shift key is pressed : toggle case, remove capslock
|
||||
toggleShift: function(){
|
||||
$('.letter').toggleClass('uppercase');
|
||||
$('.symbol span').toggle();
|
||||
|
||||
self.shift = (self.shift === true) ? false : true;
|
||||
self.capslock = false;
|
||||
},
|
||||
|
||||
//what happens when capslock is pressed : toggle case, set capslock
|
||||
toggleCapsLock: function(){
|
||||
$('.letter').toggleClass('uppercase');
|
||||
self.capslock = true;
|
||||
},
|
||||
|
||||
//What happens when numlock is pressed : toggle symbols and numlock label
|
||||
toggleNumLock: function(){
|
||||
$('.symbol span').toggle();
|
||||
$('.numlock span').toggle();
|
||||
self.numlock = (self.numlock === true ) ? false : true;
|
||||
},
|
||||
|
||||
//After a key is pressed, shift is disabled.
|
||||
removeShift: function(){
|
||||
if (self.shift === true) {
|
||||
$('.symbol span').toggle();
|
||||
if (this.capslock === false) $('.letter').toggleClass('uppercase');
|
||||
|
||||
self.shift = false;
|
||||
}
|
||||
},
|
||||
|
||||
// Resets the keyboard to its original state; capslock: false, shift: false, numlock: false
|
||||
reset: function(){
|
||||
if(this.shift){
|
||||
this.toggleShift();
|
||||
}
|
||||
if(this.capslock){
|
||||
this.toggleCapsLock();
|
||||
}
|
||||
if(this.numlock){
|
||||
this.toggleNumLock();
|
||||
}
|
||||
},
|
||||
|
||||
//called after the keyboard is in the DOM, sets up the key bindings.
|
||||
start: function(){
|
||||
var self = this;
|
||||
|
||||
//this.show();
|
||||
|
||||
|
||||
$('.close_button').click(function(){
|
||||
self.deleteAllCharacters();
|
||||
self.hide();
|
||||
});
|
||||
|
||||
// Keyboard key click handling
|
||||
$('.keyboard li').click(function(){
|
||||
|
||||
var $this = $(this),
|
||||
character = $this.html(); // If it's a lowercase letter, nothing happens to this variable
|
||||
|
||||
if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
|
||||
self.toggleShift();
|
||||
return false;
|
||||
}
|
||||
|
||||
if ($this.hasClass('capslock')) {
|
||||
self.toggleCapsLock();
|
||||
return false;
|
||||
}
|
||||
|
||||
if ($this.hasClass('delete')) {
|
||||
self.deleteCharacter();
|
||||
return false;
|
||||
}
|
||||
|
||||
if ($this.hasClass('numlock')){
|
||||
self.toggleNumLock();
|
||||
return false;
|
||||
}
|
||||
|
||||
// Special characters
|
||||
if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
|
||||
if ($this.hasClass('space')) character = ' ';
|
||||
if ($this.hasClass('tab')) character = "\t";
|
||||
if ($this.hasClass('return')) character = "\n";
|
||||
|
||||
// Uppercase letter
|
||||
if ($this.hasClass('uppercase')) character = character.toUpperCase();
|
||||
|
||||
// Remove shift once a key is clicked.
|
||||
self.removeShift();
|
||||
|
||||
self.writeCharacter(character);
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
|
@ -9,6 +9,10 @@ openerp.point_of_sale = function(instance) {
|
|||
|
||||
openerp_pos_basewidget(instance,module); // import pos_basewidget.js
|
||||
|
||||
openerp_pos_keyboard(instance,module); // import pos_keyboard_widget.js
|
||||
|
||||
openerp_pos_scrollbar(instance,module); // import pos_scrollbar_widget.js
|
||||
|
||||
openerp_pos_screens(instance,module); // import pos_screens.js
|
||||
|
||||
openerp_pos_widgets(instance,module); // import pos_widgets.js
|
||||
|
|
|
|||
|
|
@ -157,7 +157,6 @@ function openerp_pos_screens(instance, module){ //module is instance.point_of_sa
|
|||
}
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
module.PopUpWidget = module.PosBaseWidget.extend({
|
||||
show: function(){
|
||||
|
|
@ -172,7 +171,6 @@ function openerp_pos_screens(instance, module){ //module is instance.point_of_sa
|
|||
},
|
||||
});
|
||||
|
||||
|
||||
module.HelpPopupWidget = module.PopUpWidget.extend({
|
||||
template:'HelpPopupWidget',
|
||||
show: function(){
|
||||
|
|
@ -330,7 +328,11 @@ function openerp_pos_screens(instance, module){ //module is instance.point_of_sa
|
|||
click: function(){
|
||||
clearInterval(this.intervalID);
|
||||
self.pos.proxy.weighting_end();
|
||||
self.pos_widget.screen_selector.set_current_screen('scan');
|
||||
if( self.pos_widget.screen_selector.get_user_mode() === 'client'){
|
||||
self.pos_widget.screen_selector.set_current_screen('scan');
|
||||
}else{
|
||||
self.pos_widget.screen_selector.set_current_screen('products');
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
|
@ -539,7 +541,7 @@ function openerp_pos_screens(instance, module){ //module is instance.point_of_sa
|
|||
label: 'weight',
|
||||
icon: '/point_of_sale/static/src/img/icons/png48/scale.png',
|
||||
click: function(){
|
||||
self.pos_widget.screen_selector.set_current_screen('scale_product');
|
||||
self.pos_widget.screen_selector.set_current_screen('scale_invite');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,207 @@
|
|||
/*
|
||||
* This Widget provides a javascript scrollbar that is suitable to use with resistive
|
||||
* tactile screens.
|
||||
*
|
||||
* Options:
|
||||
* target_widget : the widget that will be scrolled.
|
||||
* target_selector : if you don't want to scroll the root element of the the widget, you can provide a
|
||||
* jquery selector string that will match on the widget's dom element. If there is no widget provided,
|
||||
* it will match on the document
|
||||
* step: on each click, the target will be scrolled by it's deplayed size multiplied by this value.
|
||||
* delay: this is the duration of the scrolling animation
|
||||
* wheel_step: the target will be scrolled by wheel_step pixels on each mouse scroll.
|
||||
*/
|
||||
function openerp_pos_scrollbar(instance, module){ //module is instance.point_of_sale
|
||||
|
||||
module.ScrollbarWidget = instance.web.Widget.extend({
|
||||
template:'ScrollbarWidget',
|
||||
|
||||
init: function(parent,options){
|
||||
options = options || {};
|
||||
this._super(parent,options);
|
||||
this.target_widget = options.target_widget;
|
||||
this.target_selector = options.target_selector;
|
||||
this.scroll_target = this.target().scrollTop();
|
||||
this.scroll_step = options.step || 0.8;
|
||||
this.scroll_delay = options.delay || 250;
|
||||
this.wheel_step = options.wheel_step || 80;
|
||||
},
|
||||
|
||||
start: function(){
|
||||
var self = this;
|
||||
this.$('.up-button').off('click').click(function(){
|
||||
self.page_up();
|
||||
});
|
||||
this.$('.down-button').off('click').click(function(){
|
||||
self.page_down();
|
||||
});
|
||||
this.update_scroller_dimensions();
|
||||
this.update_button_status();
|
||||
this.auto_hide(false);
|
||||
$(window).resize(function(){ //FIXME REMOVE HANDLER ...
|
||||
self.update_scroller_dimensions();
|
||||
self.update_button_status();
|
||||
self.auto_hide(false);
|
||||
});
|
||||
this.target().bind('mousewheel',function(event,delta){
|
||||
self.scroll(delta*self.wheel_step);
|
||||
});
|
||||
this.$element.bind('mousewheel',function(event,delta){
|
||||
self.scroll(delta*self.wheel_step);
|
||||
});
|
||||
this.$element.bind('click',function(event){
|
||||
var vpos = event.pageY - self.$element.offset().top;
|
||||
var spos = self.scroller_dimensions();
|
||||
if(vpos > spos.bar_pos && vpos < spos.pos){
|
||||
self.page_up();
|
||||
}else if( (vpos < spos.bar_pos + spos.bar_height) &&
|
||||
(vpos > spos.pos + spos.height) ){
|
||||
self.page_down();
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
// shows the scrollbar. if animated is true, it will do it in an animated fashion
|
||||
show: function(animated){ //FIXME: animated show and hide don't work ... ?
|
||||
if(animated){
|
||||
this.$element.show().animate({'width':'48px'}, 500, 'swing');
|
||||
}else{
|
||||
this.$element.show().css('width','48px');
|
||||
}
|
||||
},
|
||||
|
||||
// hides the scrollbar. if animated is true, it will do it in a animated fashion
|
||||
hide: function(animated){
|
||||
var self = this;
|
||||
if(animated){
|
||||
this.$element.animate({'width':'0px'}, 500, 'swing', function(){ self.$element.hide();});
|
||||
}else{
|
||||
this.$element.hide().css('width','0px');
|
||||
}
|
||||
},
|
||||
|
||||
// returns the scroller position and other information as a dictionnary with the following fields:
|
||||
// pos: the position in pixels of the top of the scroller starting from the top of the scrollbar
|
||||
// height: the height of the scroller in pixels
|
||||
// bar_pos: the position of the top of the scrollbar's inner region, starting from the top
|
||||
// bar_height: the height of the scrollbar's inner region
|
||||
scroller_dimensions: function(){
|
||||
var target = this.target()[0];
|
||||
var scroller_height = target.clientHeight / target.scrollHeight;
|
||||
var scroller_pos = this.scroll_target / target.scrollHeight;
|
||||
var button_up_height = this.$('.up-button')[0].offsetHeight;
|
||||
var button_down_height = this.$('.down-button')[0].offsetHeight;
|
||||
|
||||
var bar_height = this.$element[0].offsetHeight;
|
||||
var scrollbar_height = bar_height - button_up_height - button_down_height;
|
||||
|
||||
scroller_pos = scroller_pos * scrollbar_height + button_up_height;
|
||||
scroller_height = scroller_height * scrollbar_height;
|
||||
|
||||
return { pos: Math.round(scroller_pos),
|
||||
height: Math.round(scroller_height),
|
||||
bar_pos: button_up_height,
|
||||
bar_height: scrollbar_height };
|
||||
},
|
||||
|
||||
//scrolls up or down by pixels
|
||||
scroll: function(pixels){
|
||||
var target = this.target()[0];
|
||||
this.scroll_target = this.scroll_target - pixels;
|
||||
this.scroll_target = Math.max(0,Math.min(target.scrollHeight-target.clientHeight, this.scroll_target));
|
||||
this.target().scrollTop(this.scroll_target);
|
||||
this.update_scroller_dimensions();
|
||||
this.update_button_status();
|
||||
},
|
||||
|
||||
//checks if it should show or hide the scrollbar based on the target content and then show or hide it
|
||||
// if animated is true, then the scrollbar will be shown or hidden with an animation
|
||||
auto_hide: function(animated){
|
||||
var target = this.target()[0];
|
||||
if(target.clientHeight && (target.clientHeight === target.scrollHeight)){
|
||||
this.hide(animated);
|
||||
}else{
|
||||
this.show(animated);
|
||||
}
|
||||
},
|
||||
|
||||
//returns the pageup/down scrolling distance in pixels
|
||||
get_scroll_step: function(){
|
||||
var target = this.target()[0];
|
||||
var step = target.clientHeight * this.scroll_step;
|
||||
var c = target.scrollHeight / step;
|
||||
var c = Math.max(1,Math.ceil(c));
|
||||
return target.scrollHeight / c;
|
||||
},
|
||||
|
||||
//sets the scroller to the correct size and position based on the target scrolling status
|
||||
//if animated is true, the scroller will move smoothly to its destination
|
||||
update_scroller_dimensions: function(animated){
|
||||
var dim = this.scroller_dimensions();
|
||||
if(animated){
|
||||
this.$('.scroller').animate({'top':dim.pos+'px', 'height': dim.height+'px'},this.scroll_delay);
|
||||
}else{
|
||||
this.$('.scroller').css({'top':dim.pos+'px', 'height': dim.height+'px'});
|
||||
}
|
||||
},
|
||||
|
||||
//disable or enable the up/down buttons according to the scrolled position
|
||||
update_button_status: function(){
|
||||
var target = this.target()[0];
|
||||
this.$('.up-button').removeClass('disabled');
|
||||
this.$('.down-button').removeClass('disabled');
|
||||
if(this.scroll_target === 0){
|
||||
this.$('.up-button').addClass('disabled');
|
||||
}
|
||||
if(this.scroll_target + target.clientHeight >= target.scrollHeight){
|
||||
this.$('.down-button').addClass('disabled');
|
||||
}
|
||||
},
|
||||
|
||||
//returns the jquery object of the scrolling target
|
||||
target: function(){
|
||||
if(this.target_widget){
|
||||
if(this.target_selector){
|
||||
return this.target_widget.$(this.target_selector);
|
||||
}else{
|
||||
return this.target_widget.$element;
|
||||
}
|
||||
}else if(this.target_selector){
|
||||
return $(this.target_selector);
|
||||
}else{
|
||||
return undefined;
|
||||
}
|
||||
},
|
||||
|
||||
//scroll one page up
|
||||
page_up: function(){
|
||||
var target = this.target()[0]
|
||||
if(this.scroll_target <= 0){
|
||||
return;
|
||||
}
|
||||
this.scroll_target = this.scroll_target - this.get_scroll_step();
|
||||
this.scroll_target = Math.max(0,this.scroll_target);
|
||||
this.target().animate({'scrollTop':this.scroll_target},this.scroll_delay);
|
||||
this.update_scroller_dimensions(true);
|
||||
this.update_button_status();
|
||||
},
|
||||
|
||||
//scroll one page down
|
||||
page_down: function(){
|
||||
var target = this.target()[0];
|
||||
var max_scroll = target.scrollHeight - target.clientHeight;
|
||||
|
||||
if(this.scroll_target >= max_scroll){
|
||||
this.scroll_target = max_scroll;
|
||||
this.target().scrollTop(max_scroll);
|
||||
return;
|
||||
}
|
||||
this.scroll_target = this.scroll_target + this.get_scroll_step();
|
||||
this.scroll_target = Math.min(this.scroll_target, max_scroll);
|
||||
this.target().animate({'scrollTop':this.scroll_target},this.scroll_delay);
|
||||
this.update_scroller_dimensions(true);
|
||||
this.update_button_status();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
|
@ -508,6 +508,8 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa
|
|||
self.renderElement();
|
||||
});
|
||||
},
|
||||
start: function(){
|
||||
},
|
||||
set_weight: function(weight){
|
||||
for(var i = 0; i < this.product_list.length; i++){
|
||||
this.product_list[i].set_weight(weight);
|
||||
|
|
@ -532,190 +534,15 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa
|
|||
self.product_list.push(product);
|
||||
return product;
|
||||
})
|
||||
.invoke('appendTo', this.$element);
|
||||
},
|
||||
});
|
||||
.invoke('appendTo', this.$('.product-list'));
|
||||
|
||||
// ---------- OnScreen Keyboard Widget ----------
|
||||
|
||||
// A Widget that displays an onscreen keyboard.
|
||||
// There are two options when creating the widget :
|
||||
//
|
||||
// * 'keyboard_model' : 'simple' | 'full' (default)
|
||||
// The 'full' emulates a PC keyboard, while 'simple' emulates an 'android' one.
|
||||
//
|
||||
// * 'input_selector : (default: '.searchbox input')
|
||||
// defines the dom element that the keyboard will write to.
|
||||
//
|
||||
// The widget is initially hidden. It can be shown with this.show(), and is
|
||||
// automatically shown when the input_selector gets focused.
|
||||
|
||||
module.OnscreenKeyboardWidget = instance.web.Widget.extend({
|
||||
template: 'OnscreenKeyboardSimple',
|
||||
init: function(parent, options){
|
||||
var self = this;
|
||||
this._super(parent,options);
|
||||
options = options || {};
|
||||
|
||||
this.keyboard_model = options.keyboard_model || 'full';
|
||||
if(this.keyboard_model === 'full'){
|
||||
this.template = 'OnscreenKeyboardFull';
|
||||
}
|
||||
|
||||
this.input_selector = options.input_selector || '.searchbox input';
|
||||
|
||||
//show the keyboard when the input zone is clicked.
|
||||
$(this.input_selector).focus(function(){self.show();});
|
||||
|
||||
//Keyboard state
|
||||
this.capslock = false;
|
||||
this.shift = false;
|
||||
this.numlock = false;
|
||||
},
|
||||
|
||||
connect : function(){
|
||||
var self = this;
|
||||
$(this.input_selector).focus(function(){self.show();});
|
||||
},
|
||||
|
||||
// Write a character to the input zone
|
||||
writeCharacter: function(character){
|
||||
var $input = $(this.input_selector);
|
||||
$input[0].value += character;
|
||||
$input.keydown();
|
||||
$input.keyup();
|
||||
},
|
||||
|
||||
// Sends a 'return' character to the input zone. TODO
|
||||
sendReturn: function(){
|
||||
},
|
||||
|
||||
// Removes the last character from the input zone.
|
||||
deleteCharacter: function(){
|
||||
var $input = $(this.input_selector);
|
||||
var input_value = $input[0].value;
|
||||
$input[0].value = input_value.substr(0, input_value.length - 1);
|
||||
$input.keydown();
|
||||
$input.keyup();
|
||||
},
|
||||
|
||||
// Clears the content of the input zone.
|
||||
deleteAllCharacters: function(){
|
||||
var $input = $(this.input_selector);
|
||||
$input[0].value = "";
|
||||
$input.keydown();
|
||||
$input.keyup();
|
||||
},
|
||||
|
||||
// Makes the keyboard show and slide from the bottom of the screen.
|
||||
show: function(){
|
||||
$('.keyboard_frame').show().animate({'height':'235px'}, 500, 'swing');
|
||||
},
|
||||
|
||||
// Makes the keyboard hide by sliding to the bottom of the screen.
|
||||
hide: function(){
|
||||
var self = this;
|
||||
var frame = $('.keyboard_frame');
|
||||
frame.animate({'height':'0'}, 500, 'swing', function(){ frame.hide(); self.reset(); });
|
||||
},
|
||||
|
||||
//What happens when the shift key is pressed : toggle case, remove capslock
|
||||
toggleShift: function(){
|
||||
$('.letter').toggleClass('uppercase');
|
||||
$('.symbol span').toggle();
|
||||
|
||||
self.shift = (self.shift === true) ? false : true;
|
||||
self.capslock = false;
|
||||
},
|
||||
|
||||
//what happens when capslock is pressed : toggle case, set capslock
|
||||
toggleCapsLock: function(){
|
||||
$('.letter').toggleClass('uppercase');
|
||||
self.capslock = true;
|
||||
},
|
||||
|
||||
//What happens when numlock is pressed : toggle symbols and numlock label
|
||||
toggleNumLock: function(){
|
||||
$('.symbol span').toggle();
|
||||
$('.numlock span').toggle();
|
||||
self.numlock = (self.numlock === true ) ? false : true;
|
||||
},
|
||||
|
||||
//After a key is pressed, shift is disabled.
|
||||
removeShift: function(){
|
||||
if (self.shift === true) {
|
||||
$('.symbol span').toggle();
|
||||
if (this.capslock === false) $('.letter').toggleClass('uppercase');
|
||||
|
||||
self.shift = false;
|
||||
}
|
||||
},
|
||||
|
||||
// Resets the keyboard to its original state; capslock: false, shift: false, numlock: false
|
||||
reset: function(){
|
||||
if(this.shift){
|
||||
this.toggleShift();
|
||||
}
|
||||
if(this.capslock){
|
||||
this.toggleCapsLock();
|
||||
}
|
||||
if(this.numlock){
|
||||
this.toggleNumLock();
|
||||
}
|
||||
},
|
||||
|
||||
//called after the keyboard is in the DOM, sets up the key bindings.
|
||||
start: function(){
|
||||
var self = this;
|
||||
|
||||
//this.show();
|
||||
|
||||
|
||||
$('.close_button').click(function(){
|
||||
self.deleteAllCharacters();
|
||||
self.hide();
|
||||
this.scrollbar = new module.ScrollbarWidget(this,{
|
||||
target_widget: this,
|
||||
target_selector: '.product-list',
|
||||
});
|
||||
|
||||
// Keyboard key click handling
|
||||
$('.keyboard li').click(function(){
|
||||
|
||||
var $this = $(this),
|
||||
character = $this.html(); // If it's a lowercase letter, nothing happens to this variable
|
||||
|
||||
if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
|
||||
self.toggleShift();
|
||||
return false;
|
||||
}
|
||||
|
||||
if ($this.hasClass('capslock')) {
|
||||
self.toggleCapsLock();
|
||||
return false;
|
||||
}
|
||||
|
||||
if ($this.hasClass('delete')) {
|
||||
self.deleteCharacter();
|
||||
return false;
|
||||
}
|
||||
this.scrollbar.replace(this.$('.placeholder-ScrollbarWidget'));
|
||||
|
||||
if ($this.hasClass('numlock')){
|
||||
self.toggleNumLock();
|
||||
return false;
|
||||
}
|
||||
|
||||
// Special characters
|
||||
if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
|
||||
if ($this.hasClass('space')) character = ' ';
|
||||
if ($this.hasClass('tab')) character = "\t";
|
||||
if ($this.hasClass('return')) character = "\n";
|
||||
|
||||
// Uppercase letter
|
||||
if ($this.hasClass('uppercase')) character = character.toUpperCase();
|
||||
|
||||
// Remove shift once a key is clicked.
|
||||
self.removeShift();
|
||||
|
||||
self.writeCharacter(character);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -160,19 +160,35 @@
|
|||
</t>
|
||||
|
||||
<t t-name="ProductListWidget">
|
||||
<ol id="products-screen-ol" class="product-list">
|
||||
</ol>
|
||||
<div class='product-list-container'>
|
||||
<ol id="products-screen-ol" class="product-list">
|
||||
</ol>
|
||||
<span class="placeholder-ScrollbarWidget" />
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<t t-name="SearchProductScreenWidget">
|
||||
<div id="products-screen">
|
||||
<span class="placeholder-ProductCategoriesWidget" />
|
||||
<span class="placeholder-ProductListWidget" />
|
||||
<div id="products-screen" class="screen">
|
||||
<table class="layout-table">
|
||||
|
||||
<tr class="header-row">
|
||||
<td class="header-cell">
|
||||
<span class="placeholder-ProductCategoriesWidget" />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="content-row">
|
||||
<td class="content-cell">
|
||||
<span class="placeholder-ProductListWidget" />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<t t-name="PaymentScreenWidget">
|
||||
<div id="payment-screen" class="step-screen">
|
||||
<div id="payment-screen" class="screen">
|
||||
<header><h2>Payment</h2></header>
|
||||
<div class="pos-step-container">
|
||||
<div class="pos-payment-container">
|
||||
|
|
@ -213,7 +229,7 @@
|
|||
</t> <!-- pos-payment-screen -->
|
||||
|
||||
<t t-name="ReceiptScreenWidget">
|
||||
<div id="receipt-screen" class="step-screen" >
|
||||
<div id="receipt-screen" class="screen" >
|
||||
<header><h2>Receipt</h2></header>
|
||||
<div class="pos-step-container">
|
||||
<div class="pos-receipt-container">
|
||||
|
|
@ -223,7 +239,7 @@
|
|||
</t>
|
||||
|
||||
<t t-name="WelcomeScreenWidget">
|
||||
<div class="welcome-screen step-screen">
|
||||
<div class="welcome-screen screen">
|
||||
<header><h2>Welcome</h2></header>
|
||||
<img src="/point_of_sale/static/src/img/scan.png" />
|
||||
<p> Please scan an item or your member card </p>
|
||||
|
|
@ -232,14 +248,14 @@
|
|||
|
||||
|
||||
<t t-name="ScanProductScreenWidget">
|
||||
<div class="scan-product-screen step-screen">
|
||||
<div class="scan-product-screen screen">
|
||||
<header><h2>Please scan an item</h2></header>
|
||||
<img src="/point_of_sale/static/src/img/scan.png" />
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<t t-name="ClientPaymentScreenWidget">
|
||||
<div class="scan-product-screen step-screen">
|
||||
<div class="scan-product-screen screen">
|
||||
<header><h2>Payment</h2></header>
|
||||
<img src="/point_of_sale/static/src/img/bancontact.png" />
|
||||
<p>Please insert your card in the reader and follow the instructions to complete
|
||||
|
|
@ -248,7 +264,7 @@
|
|||
</t>
|
||||
|
||||
<t t-name="ScaleInviteScreenWidget">
|
||||
<div class="scale-invite-screen step-screen">
|
||||
<div class="scale-invite-screen screen">
|
||||
<header><h2>Please put your product on the scale</h2></header>
|
||||
<img src="/point_of_sale/static/src/img/scale.png" />
|
||||
</div>
|
||||
|
|
@ -341,6 +357,20 @@
|
|||
</li>
|
||||
</t>
|
||||
|
||||
<t t-name="ScrollbarWidget">
|
||||
<div class='scrollbar'>
|
||||
<div class='up-button button oe_e'>
|
||||
&atilde;
|
||||
</div>
|
||||
|
||||
<div class='scroller'>
|
||||
</div>
|
||||
|
||||
<div class='down-button button oe_e'>
|
||||
&auml;
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
<t t-name="OrderlineWidget">
|
||||
<tr>
|
||||
<td>
|
||||
|
|
@ -366,6 +396,25 @@
|
|||
</tr>
|
||||
</t>
|
||||
|
||||
<t t-name="OrderlineWidget2">
|
||||
<li class="orderline">
|
||||
<h4 class="product-name">
|
||||
Pizza
|
||||
</h4>
|
||||
<span class="price">
|
||||
3.14$
|
||||
</span>
|
||||
<ul class="info-list">
|
||||
<li class="info">
|
||||
5 pizza at $0.51/pizza
|
||||
</li>
|
||||
<li class="info">
|
||||
25 discount
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</t>
|
||||
|
||||
<t t-name="PaymentlineWidget">
|
||||
<tr class="paymentline">
|
||||
<td class="paymentline-type">
|
||||
|
|
|
|||
Loading…
Reference in New Issue