[IMP] point_of_sale: restructured the main widget to use a generic scrollable subwindow system

bzr revid: fva@openerp.com-20131106103255-3ym4kh9wom5t1vra

5 files changed, 79 insertions, 116 deletions

diff --git a/addons/point_of_sale/static/src/css/keyboard.css b/addons/point_of_sale/static/src/css/keyboard.css
index d5ce468d7be..d060735be8d 100644
--- a/addons/point_of_sale/static/src/css/keyboard.css
+++ b/addons/point_of_sale/static/src/css/keyboard.css
@@ -1,6 +1,6 @@
 /* Onscreen Keyboard http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-keyboard-with-css-and-jquery/ */
 
-.point-of-sale .keyboard_frame{
+.pos .keyboard_frame{
     display: none;
     position:absolute;
     left:    0;
@@ -12,7 +12,6 @@
     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;
@@ -22,7 +21,7 @@
     z-index:10000;
 
 }
-.point-of-sale .keyboard_frame .close_button{
+.pos .keyboard_frame .close_button{
     height:40px;
     width:60px;
     text-align:center;
@@ -31,13 +30,12 @@
     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 {
+.pos .keyboard li {
 	float: left;
 	text-align: center;
 	background-color: #fff;
@@ -45,12 +43,11 @@
     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 {
+.pos .keyboard li:hover {
 	position: relative;
 	top: 2px;
 	left: 0px;
@@ -61,22 +58,22 @@
     -webkit-transition-duration: 0.1s;
     -webkit-transition-timing-function: ease-out;
 }
-.point-of-sale .uppercase {
+.pos .uppercase {
 	text-transform: uppercase;
 }
-.point-of-sale .on {
+.pos .on {
 	display: none;
 }
-.point-of-sale .firstitem{
+.pos .firstitem{
 	clear: left;
 }
-.point-of-sale .keyboard .lastitem {
+.pos .keyboard .lastitem {
 	margin-right: 0 !important;
 }
 
 /* ---- full sized keyboard ---- */
 
-.point-of-sale .full_keyboard {
+.pos .full_keyboard {
     list-style: none;
     font-size: 14px;
     width: 685px;
@@ -84,35 +81,35 @@
     margin-left: auto !important;
     margin-right: auto !important;
 }
-.point-of-sale .full_keyboard li{
+.pos .full_keyboard li{
 	margin: 0 5px 5px 0 !important;
 	width: 40px;
 	height: 40px;
 	line-height: 40px;
 }
-.point-of-sale .full_keyboard .tab, .point-of-sale .full_keyboard .delete {
+.pos .full_keyboard .tab, .pos .full_keyboard .delete {
 	width: 70px;
 }
-.point-of-sale .full_keyboard .capslock {
+.pos .full_keyboard .capslock {
 	width: 80px;
 }
-.point-of-sale .full_keyboard .return {
+.pos .full_keyboard .return {
 	width: 77px;
 }
-.point-of-sale .full_keyboard .left-shift {
+.pos .full_keyboard .left-shift {
 	width: 95px;
 }
-.point-of-sale .full_keyboard .right-shift {
+.pos .full_keyboard .right-shift {
 	width: 109px;
 }
-.point-of-sale .full_keyboard .space {
+.pos .full_keyboard .space {
 	clear: left;
 	width: 673px;
 }
 
 /* ---- simplified keyboard ---- */
 
-.point-of-sale .simple_keyboard {
+.pos .simple_keyboard {
     list-style: none;
     font-size: 16px;
     width: 555px;
@@ -120,27 +117,27 @@
     margin-left: auto !important;
     margin-right: auto !important;
 }
-.point-of-sale .simple_keyboard li{
+.pos .simple_keyboard li{
     margin: 0 5px 5px 0 !important;
     width: 49px;
     height: 49px;
     line-height: 49px;
 }
-.point-of-sale .simple_keyboard .firstitem.row_asdf{
+.pos .simple_keyboard .firstitem.row_asdf{
     margin-left:25px !important;
 }
-.point-of-sale .simple_keyboard .firstitem.row_zxcv{
+.pos .simple_keyboard .firstitem.row_zxcv{
     margin-left:55px !important;
 }
-.point-of-sale .simple_keyboard .delete{
+.pos .simple_keyboard .delete{
     width: 103px;
 }
-.point-of-sale .simple_keyboard .return{
+.pos .simple_keyboard .return{
     width: 103px;
 }
-.point-of-sale .simple_keyboard .space{
+.pos .simple_keyboard .space{
     width:273px;
 }
-.point-of-sale .simple_keyboard .numlock{
+.pos .simple_keyboard .numlock{
     width:103px;
 }
diff --git a/addons/point_of_sale/static/src/css/pos.css b/addons/point_of_sale/static/src/css/pos.css
index 742f38257e8..8183132ee35 100644
--- a/addons/point_of_sale/static/src/css/pos.css
+++ b/addons/point_of_sale/static/src/css/pos.css
@@ -19,6 +19,7 @@
        -moz-user-select: none;
             user-select: none;
     text-shadow: none;
+    overflow: hidden;
 }
 
 .pos * {
@@ -119,39 +120,6 @@
     min-height: 30px;
 }
 
-/* ---- Panes ----- */
-
-/*
-.pos .headerpane{
-    position: absolute;
-    left: 0px;
-    right: 0px;
-    top: 0px;
-    height: 40px;
-    background: rgb(100,100,100)
-}
-.pos .mainpane{
-    position: absolute;
-    left: 0px;
-    right: 0px;
-    top: 40px;
-    bottom: 0px;
-}
-.pos .leftpane{
-    position: absolute;
-    left: 0px;
-    width: 400px;
-    top: 0px;
-    bottom: 0px;
-}
-.pos .rightpane{
-    position: absolute;
-    left: 400px;
-    right: 0px;
-    top: 0px;
-    bottom: 0px;
-}*/
-
 /*  ********* Generic element styling  ********* */
 
 .pos a {
@@ -347,16 +315,10 @@
     left:0;
     width:440px;
     top:0px;
-    /*bottom:105px;*/
     bottom:0;
     border-right: solid 1px #CECBCB;
-    background-color: white;
 }
-.pos .pos-leftpane footer {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
+.pos .pos-leftpane .pads {
     background: #F0EEEE;
     white-space: nowrap;
 }
@@ -670,6 +632,7 @@
     top:0px;
     bottom:0px;
     width:100%;
+    overflow: auto;
 }
 .pos .screen header h2 {
     margin-top: 0px;
@@ -742,21 +705,20 @@
     margin-left: 16px;
     background: white;
     color: #4c4c4c; 
+    box-shadow: 0px 2px rgba(143, 143, 143, 0.3) inset;
     -webkit-animation: all 250ms linear;
 }
 
 .pos .pos-step-container input:focus{
-    color: #5d7ad6;
+    color: rgb(130, 124, 255);
+    box-shadow: 0px 2px rgba(130, 124, 255, 0.3) inset;
     -webkit-animation: all 250ms linear;
 }
 
 .pos .pos-payment-container {
     text-align: left;
-    min-width: 500px;
-    margin-top: 50px;
-    padding: 40px;
-    background-color: #f8f8f8;
-    border: solid 1px rgb(220,220,220);
+    min-width: 320px;
+    margin-top: 40px;
 }
 .pos .pos-payment-container .left-block{
     display: inline-block;
@@ -976,8 +938,8 @@
 .pos .order-container{
     position: absolute;
     top: 0px;
-    bottom: 232px;
     width:100%;
+    height: 100%;
     background: #F0EEEE;
 }
 
@@ -1099,14 +1061,9 @@
 /*  ********* The ActionBarWidget  ********* */
 
 .pos .pos-actionbar{
-    position:absolute;
-    left:    0;
-    bottom:  0px;
     height: 105px;
-    width:  100%;
-    margin: 0;
     background: #f5f5f5;    /*#ebebeb;*/
-    border-top: solid 1px #afafb6;
+    border-top: solid 1px #cecece;
     z-index:900;
 }
 
@@ -1114,16 +1071,6 @@
     list-style:  none;
 }
 
-.pos .pos-actionbar-left-pane{
-    height: 100%;
-    width:  434px;
-    margin: 0px;
-    padding-left:3px;
-    padding-right:3px;
-    border-right: solid 1px #dfdfdf;
-    float:  left;
-}
-
 .pos .pos-actionbar-button-list{
     height: 100%;
     margin: 0px;
diff --git a/addons/point_of_sale/static/src/js/screens.js b/addons/point_of_sale/static/src/js/screens.js
index c6261477fe6..ae848ac79b3 100644
--- a/addons/point_of_sale/static/src/js/screens.js
+++ b/addons/point_of_sale/static/src/js/screens.js
@@ -227,13 +227,11 @@ function openerp_pos_screens(instance, module){ //module is instance.point_of_sa
         // with add_action_button()
         show_action_bar: function(){
             this.pos_widget.action_bar.show();
-            this.$el.css({'bottom':'105px'});
         },
 
         // hides the action bar. The actionbar is automatically hidden when it is empty
         hide_action_bar: function(){
             this.pos_widget.action_bar.hide();
-            this.$el.css({'bottom':'0px'});
         },
 
         // adds a new button to the action bar. The button definition takes three parameters, all optional :
diff --git a/addons/point_of_sale/static/src/js/widgets.js b/addons/point_of_sale/static/src/js/widgets.js
index 32c5515b5ae..0b3c1bc344f 100644
--- a/addons/point_of_sale/static/src/js/widgets.js
+++ b/addons/point_of_sale/static/src/js/widgets.js
@@ -229,14 +229,6 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa
             }
             this.orderlinewidgets = [];
 
-            if(this.display_mode === 'maximized'){
-                $('.pos .order-container').css({'bottom':'0px'});
-            }else if(this.display_mode === 'actionbar'){
-                $('.pos .order-container').css({'bottom':'105px'});
-            }else if(this.display_mode !== 'numpad'){
-                console.error('ERROR: OrderWidget renderElement(): wrong display_mode:',this.display_mode);
-            }
-
             var $content = this.$('.orderlines');
             this.currentOrderLines.each(_.bind( function(orderLine) {
                 var line = new module.OrderlineWidget(this, {
@@ -889,25 +881,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(this.$('.pos-rightpane'));
+            this.product_screen.appendTo(this.$('.screens'));
 
             this.receipt_screen = new module.ReceiptScreenWidget(this, {});
-            this.receipt_screen.appendTo(this.$('.pos-rightpane'));
+            this.receipt_screen.appendTo(this.$('.screens'));
 
             this.payment_screen = new module.PaymentScreenWidget(this, {});
-            this.payment_screen.appendTo(this.$('.pos-rightpane'));
+            this.payment_screen.appendTo(this.$('.screens'));
 
             this.welcome_screen = new module.WelcomeScreenWidget(this,{});
-            this.welcome_screen.appendTo(this.$('.pos-rightpane'));
+            this.welcome_screen.appendTo(this.$('.screens'));
 
             this.client_payment_screen = new module.ClientPaymentScreenWidget(this, {});
-            this.client_payment_screen.appendTo(this.$('.pos-rightpane'));
+            this.client_payment_screen.appendTo(this.$('.screens'));
 
             this.scale_invite_screen = new module.ScaleInviteScreenWidget(this, {});
-            this.scale_invite_screen.appendTo(this.$('.pos-rightpane'));
+            this.scale_invite_screen.appendTo(this.$('.screens'));
 
             this.scale_screen = new module.ScaleScreenWidget(this,{});
-            this.scale_screen.appendTo(this.$('.pos-rightpane'));
+            this.scale_screen.appendTo(this.$('.screens'));
 
             // --------  Popups ---------
 
@@ -944,7 +936,7 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa
             this.username.replace(this.$('.placeholder-UsernameWidget'));
 
             this.action_bar = new module.ActionBarWidget(this);
-            this.action_bar.appendTo(this.$(".pos-rightpane"));
+            this.action_bar.replace(this.$(".placeholder-RightActionBar"));
 
             this.left_action_bar = new module.ActionBarWidget(this);
             this.left_action_bar.replace(this.$('.placeholder-LeftActionBar'));
diff --git a/addons/point_of_sale/static/src/xml/pos.xml b/addons/point_of_sale/static/src/xml/pos.xml
index e17764cecde..3d398f22d4c 100644
--- a/addons/point_of_sale/static/src/xml/pos.xml
+++ b/addons/point_of_sale/static/src/xml/pos.xml
@@ -19,23 +19,52 @@
                     <!-- here goes header buttons -->
                 </div>
             </div>
+
             <div class="pos-content">
 
                 <div class="pos-leftpane">
-                    <div class="placeholder-OrderWidget"></div>
-                    <footer>
-                        <div class="placeholder-PaypadWidget"></div>
-                        <div class="placeholder-NumpadWidget"></div>
-                    </footer>
-                    <div class='placeholder-LeftActionBar'></div>
+                    <div class='window'>
+                        <div class='subwindow'>
+                            <div class='subwindow-container'>
+                                <div class="placeholder-OrderWidget"></div>
+                            </div>
+                        </div>
+
+                        <div class='subwindow collapsed'>
+                            <div class='subwindow-container pads'>
+                                <div class="placeholder-PaypadWidget"></div>
+                                <div class="placeholder-NumpadWidget"></div>
+                            </div>
+                        </div>
+
+                        <div class='subwindow collapsed'>
+                            <div class='subwindow-container'>
+                                <div class='placeholder-LeftActionBar'></div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
+
                 <div class="pos-rightpane">
+                    <div class='window'>
+                        <div class='subwindow'>
+                            <div class='subwindow-container screens'>
+                            </div>
+                        </div>
+
+                        <div class='subwindow collapsed'>
+                            <div class='subwindow-container'>
+                                <div class='placeholder-RightActionBar'></div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
 
                 <div class="placeholder-OnscreenKeyboardWidget"></div>
             </div>
-            <div class="loader">
-            </div>
+
+            <div class="loader"></div>
+
             &lt;!--[if IE]&gt;
             <div class='not-supported-browser'>
                 <div class='message'>