From 3a10debd1fb4ef7b3f1d17d045f615e714b9aff3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20van=20der=20Essen?= <fva@openerp.com>
Date: Wed, 18 Apr 2012 16:11:44 +0200
Subject: [PATCH] [IMP] action bar

bzr revid: fva@openerp.com-20120418141144-g2653zv5vn33xfm5
---
 addons/point_of_sale/static/src/css/pos.css | 93 +++++++++++++++++++--
 addons/point_of_sale/static/src/js/pos.js   | 78 +++++++++++++++--
 addons/point_of_sale/static/src/xml/pos.xml | 20 +++++
 3 files changed, 179 insertions(+), 12 deletions(-)

diff --git a/addons/point_of_sale/static/src/css/pos.css b/addons/point_of_sale/static/src/css/pos.css
index 47ea23f202b..b3aaded127b 100644
--- a/addons/point_of_sale/static/src/css/pos.css
+++ b/addons/point_of_sale/static/src/css/pos.css
@@ -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{
diff --git a/addons/point_of_sale/static/src/js/pos.js b/addons/point_of_sale/static/src/js/pos.js
index 9e8c962d62a..6fde28e0941 100644
--- a/addons/point_of_sale/static/src/js/pos.js
+++ b/addons/point_of_sale/static/src/js/pos.js
@@ -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.
diff --git a/addons/point_of_sale/static/src/xml/pos.xml b/addons/point_of_sale/static/src/xml/pos.xml
index b772b9ca2e5..bd0ecb5b65a 100644
--- a/addons/point_of_sale/static/src/xml/pos.xml
+++ b/addons/point_of_sale/static/src/xml/pos.xml
@@ -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">