[IMP] point_of_sale: removed action bar

bzr revid: fva@openerp.com-20120719152519-l6gbweu58fk54ga3
2012-07-19 17:25:19 +02:00
parent 3e09936b01
commit 6df84daaee
4 changed files with 163 additions and 79 deletions
@@ -156,11 +156,11 @@
 }

 .point-of-sale #rightheader button {
-    color: black;
-    height:29px;
-    margin:2px;
+    color: #273072;
+    height:27px;
+    margin:3px;
    margin-right:0px;
-    border: 1px solid black;
+    border: 1px solid #353A7E;
    background: #7f82ac;
    background: -webkit-gradient(linear, left top, left bottom, from(#b2b3d7), to(#7f82ac));
    background: -moz-linear-gradient(#b2b3d7, #7f82ac);
@@ -187,6 +187,33 @@
    font-weight: 900;
 }

+/*  c) The session buttons */
+
+.point-of-sale #rightheader .header-button{
+    float:right;
+    height:32px;
+    padding-left:10px;
+    padding-right:10px;
+    border-right:  1px solid #3a3a3a;
+    border-left:  1px solid #3a3a3a;
+    color:#DDD;
+    line-height:32px;
+    text-align:center;
+    cursor: pointer;
+
+    -webkit-transition-property: background;
+    -webkit-transition-duration: 0.2s;
+    -webkit-transition-timing-function: ease-out;
+}
+.point-of-sale #rightheader .header-button:last-child{
+    border-left:  1px solid #3a3a3a;
+}
+.point-of-sale #rightheader .header-button:hover{
+    background: rgba(0,0,0,0.2);
+    text-shadow: #000 0px 0px 3px;
+    color:#EEE;
+}
+
 /*  c) The notifications indicator */

 .point-of-sale .oe_pos_synch-notification{
@@ -234,7 +261,8 @@
    left:0;
    width:440px;
    top:0px;
-    bottom:105px;
+    /*bottom:105px;*/
+    bottom:0;
    border-right: solid 1px #CECBCB;
    background-color: white;
 }
@@ -318,7 +346,8 @@
 .point-of-sale #rightpane {
    position: absolute;
    top: 0;
-    bottom: 105px;
+    /*bottom: 105px;*/
+    bottom:0;
    left: 440px;
    right: 0;
    vertical-align: top;
@@ -152,14 +152,6 @@ function openerp_pos_screens(instance, module){ //module is instance.point_of_sa
            this.pos_widget.screen_selector.show_popup('help');
        },

-        logout_button_action: function(){
-            this.pos_widget.screen_selector.set_user_mode('client');
-        },
-
-        close_button_action: function(){
-            this.pos_widget.try_close();
-        },
-
        barcode_product_screen:         'products',     //if defined, this screen will be loaded when a product is scanned
        barcode_product_error_popup:    'error',    //if defined, this popup will be loaded when there's an error in the popup

@@ -223,6 +215,29 @@ function openerp_pos_screens(instance, module){ //module is instance.point_of_sa
            }
        },

+        // shows an action bar on the screen. The actionbar is automatically shown when you add a button
+        // with add_action_button()
+        show_action_bar: function(){
+            this.pos_widget.action_bar.show();
+            this.$element.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.$element.css({'bottom':'0px'});
+        },
+
+        // adds a new button to the action bar. The button definition takes three parameters, all optional :
+        // - label: the text below the button
+        // - icon:  a small icon that will be shown
+        // - click: a callback that will be executed when the button is clicked.
+        // the method returns a reference to the button widget, and automatically show the actionbar.
+        add_action_button: function(button_def){
+            this.show_action_bar();
+            return this.pos_widget.action_bar.add_new_button(button_def);
+        },
+
        // this method shows the screen and sets up all the widget related to this screen. Extend this method
        // if you want to alter the behavior of the screen.
        show: function(){
@@ -231,15 +246,30 @@ function openerp_pos_screens(instance, module){ //module is instance.point_of_sa
                this.$element.show();
            }

+            if(this.pos_widget.action_bar.get_button_count() > 0){
+                this.show_action_bar();
+            }else{
+                this.hide_action_bar();
+            }
+
            var self = this;
            var cashier_mode = this.pos_widget.screen_selector.get_user_mode() === 'cashier';

            this.pos_widget.set_numpad_visible(this.show_numpad && cashier_mode);
            this.pos_widget.set_leftpane_visible(this.show_leftpane);
            this.pos_widget.set_cashier_controls_visible(cashier_mode);
-            this.pos_widget.action_bar.set_element_visible('help-button',  !cashier_mode, function(){ self.help_button_action(); });
-            this.pos_widget.action_bar.set_element_visible('logout-button', cashier_mode && this.pos.use_selfcheckout, function(){ self.logout_button_action(); });
-            this.pos_widget.action_bar.set_element_visible('close-button', cashier_mode, function(){ self.close_button_action(); });
+            /*this.pos_widget.action_bar.set_element_visible('help-button',  !cashier_mode, function(){ self.help_button_action(); });*/
+
+            if(cashier_mode && this.pos.use_selfcheckout){
+                this.pos_widget.client_button.show();
+            }else{
+                this.pos_widget.client_button.hide();
+            }
+            if(cashier_mode){
+                this.pos_widget.close_button.show();
+            }else{
+                this.pos_widget.close_button.hide();
+            }
            
            this.pos_widget.username.set_user_mode(this.pos_widget.screen_selector.get_user_mode());

@@ -251,7 +281,6 @@ function openerp_pos_screens(instance, module){ //module is instance.point_of_sa
            });
        },

-
        // this method is called when the screen is closed to make place for a new screen. this is a good place
        // to put your cleanup stuff as it is guaranteed that for each show() there is one and only one close()
        close: function(){
@@ -366,8 +395,7 @@ function openerp_pos_screens(instance, module){ //module is instance.point_of_sa
                }
            },500);

-            this.pos_widget.action_bar.add_new_button(
-                {
+            this.add_action_button({
                    label: 'back',
                    icon: '/point_of_sale/static/src/img/icons/png48/go-previous.png',
                    click: function(){  
@@ -375,8 +403,7 @@ function openerp_pos_screens(instance, module){ //module is instance.point_of_sa
                        self.pos.proxy.weighting_end();
                        self.pos_widget.screen_selector.set_current_screen(self.previous_screen);
                    }
-                }
-            );
+                });
        },
        close: function(){
            this._super();
@@ -395,7 +422,8 @@ function openerp_pos_screens(instance, module){ //module is instance.point_of_sa
            this.renderElement();
            var self = this;

-            this.pos_widget.action_bar.add_new_button({
+
+            this.add_action_button({
                    label: 'back',
                    icon: '/point_of_sale/static/src/img/icons/png48/go-previous.png',
                    click: function(){
@@ -403,7 +431,7 @@ function openerp_pos_screens(instance, module){ //module is instance.point_of_sa
                    }
                });

-            this.validate_button = this.pos_widget.action_bar.add_new_button({
+            this.validate_button = this.add_action_button({
                    label: 'Validate',
                    icon: '/point_of_sale/static/src/img/icons/png48/validate.png',
                    click: function(){
@@ -465,8 +493,10 @@ function openerp_pos_screens(instance, module){ //module is instance.point_of_sa

    module.ClientPaymentScreenWidget =  module.ScreenWidget.extend({
        template:'ClientPaymentScreenWidget',
+
        next_screen: 'welcome',
        previous_screen: 'products',
+
        show: function(){
            this._super();
            var self = this;
@@ -503,17 +533,15 @@ function openerp_pos_screens(instance, module){ //module is instance.point_of_sa
                }
            },500);

-            this.pos_widget.action_bar.add_new_button(
-                {
+            this.add_action_button({
                    label: 'back',
                    icon: '/point_of_sale/static/src/img/icons/png48/go-previous.png',
-                    click: function(){  //TODO Go to ask for weighting screen
+                    click: function(){  
                        clearInterval(this.intervalID);
                        self.pos.proxy.payment_canceled();
                        self.pos_widget.screen_selector.set_current_screen(self.previous_screen);
                    }
-                }
-            );
+                });
        },
        close: function(){
            this._super();
@@ -578,7 +606,7 @@ function openerp_pos_screens(instance, module){ //module is instance.point_of_sa
            }

            if(this.pos_widget.screen_selector.current_mode === 'client'){ 
-                this.pos_widget.action_bar.add_new_button({
+                this.add_action_button({
                        label: 'pay',
                        icon: '/point_of_sale/static/src/img/icons/png48/go-next.png',
                        click: function(){  
@@ -618,13 +646,13 @@ function openerp_pos_screens(instance, module){ //module is instance.point_of_sa
            this._super();
            var self = this;

-            this.pos_widget.action_bar.add_new_button({
+            this.add_action_button({
                    label: 'Print',
                    icon: '/point_of_sale/static/src/img/icons/png48/printer.png',
                    click: function(){ self.print(); },
                });

-            this.pos_widget.action_bar.add_new_button({
+            this.add_action_button({
                    label: 'Next Order',
                    icon: '/point_of_sale/static/src/img/icons/png48/go-next.png',
                    click: function() { self.finishOrder(); },
@@ -676,7 +704,7 @@ function openerp_pos_screens(instance, module){ //module is instance.point_of_sa

            this.set_numpad_state(this.pos_widget.numpad.state);
            
-            this.back_button = this.pos_widget.action_bar.add_new_button({
+            this.back_button = this.add_action_button({
                    label: 'Back',
                    icon: '/point_of_sale/static/src/img/icons/png48/go-previous.png',
                    click: function(){  
@@ -684,7 +712,7 @@ function openerp_pos_screens(instance, module){ //module is instance.point_of_sa
                    },
                });
            
-            this.validate_button = this.pos_widget.action_bar.add_new_button({
+            this.validate_button = this.add_action_button({
                    label: 'Validate',
                    icon: '/point_of_sale/static/src/img/icons/png48/validate.png',
                    click: function(){
@@ -112,7 +112,7 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa
        template:'OrderWidget',
        init: function(parent, options) {
            this._super(parent,options);
-            this.compact = false;   
+            this.compact = options.compact !== undefined ? options.compact : true;   
            this.set_numpad_state(options.numpadState);
            this.pos.bind('change:selectedOrder', this.change_selected_order, this);
            this.bind_orderline_events();
@@ -166,6 +166,7 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa
            this._super();

            if(!this.compact){
+                console.log('not compact');
                $('.point-of-sale .order-container').css({'bottom':'0px'});
            }

@@ -212,6 +213,7 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa
            this.$('.summary .value.total').html(this.format_currency(total));
        },
        set_compact: function(compact){
+            console.log('set_compact',compact);
            if(this.compact !== compact){
                this.compact = compact;
                this.renderElement();
@@ -313,6 +315,7 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa

    module.ActionButtonWidget = instance.web.Widget.extend({
        template:'ActionButtonWidget',
+        icon_template:'ActionButtonWidgetWithIcon',
        init: function(parent, options){
            this._super(parent, options);
            this.label = options.label || 'button';
@@ -320,7 +323,7 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa
            this.click_action = options.click;
            if(options.icon){
                this.icon = options.icon;
-                this.template = 'ActionButtonWidgetWithIcon';
+                this.template = this.icon_template;
            }
        },
        renderElement: function(){
@@ -359,18 +362,20 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa
            this.button_list = [];
            return this;
        },
+        get_button_count: function(){
+            return this.button_list.length;
+        },
        add_new_button: function(button_options){
-            if(arguments.length == 1){
-                var button = new module.ActionButtonWidget(this,button_options);
-                this.button_list.push(button);
-                button.appendTo($('.pos-actionbar-button-list'));
-                return button;
-            }else{
-                for(var i = 0; i < arguments.length; i++){
-                    this.add_new_button(arguments[i]);
-                }
-            }
-            return undefined;
+            var button = new module.ActionButtonWidget(this,button_options);
+            this.button_list.push(button);
+            button.appendTo($('.pos-actionbar-button-list'));
+            return button;
+        },
+        show:function(){
+            this.$element.show();
+        },
+        hide:function(){
+            this.$element.hide();
        },
    });

@@ -419,14 +424,10 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa
            this._super();

            var hasimages = false;  //if none of the subcategories have images, we don't display buttons with icons
-            console.log('barfoo');
-         
            _.each(this.subcategories, function(category){
                if(category.category_image_small){
-                    console.log("Image:",category.category_image_small);
                    hasimages = true;
                }else{
-                    console.log('NoImage:',category.category_image_small);
                }
            });

@@ -603,14 +604,35 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa
        },
    });

+    module.HeaderButtonWidget = module.PosBaseWidget.extend({
+        template: 'HeaderButtonWidget',
+        init: function(parent, options){
+            options = options || {};
+            this._super(parent, options);
+            this.action = options.action;
+            this.label   = options.label;
+        },
+        renderElement: function(){
+            var self = this;
+            this._super();
+            if(this.action){
+                this.$element.click(function(){ self.action(); });
+            }
+        },
+        show: function(){ this.$element.show(); },
+        hide: function(){ this.$element.hide(); },
+
+    });
+
+
 // ---------- Main Point of Sale Widget ----------

    // this is used to notify the user that data is being synchronized on the network
    module.SynchNotificationWidget = module.PosBaseWidget.extend({
        template: "SynchNotificationWidget",
-        init: function(parent,options) {
+        init: function(parent, options){
            options = options || {};
-            this._super(parent,options);
+            this._super(parent, options);
        },
        renderElement: function() {
            var self = this;
@@ -652,6 +674,14 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa
            this.leftpane_visible = true;
            this.leftpane_width   = '440px';
            this.cashier_controls_visible = true;
+            var degree = 0;
+            /*
+             //Epileptic mode
+            setInterval(function(){ 
+                $('body').css({'-webkit-filter':'sepia('+Math.round(Math.random())+') hue-rotate('+Math.random()*360+'deg) blur('+Math.random()*5+'px)' });
+            },100);
+            */
+            
        },
      
        start: function() {
@@ -708,6 +738,7 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa
        // This method instantiates all the screens, widgets, etc. If you want to add new screens change the
        // startup screen, etc, override this method.
        build_widgets: function() {
+            var self = this;

            // --------  Screens ---------

@@ -749,13 +780,13 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa
            // --------  Misc ---------

            this.notification = new module.SynchNotificationWidget(this,{});
-            this.notification.replace(this.$('.placeholder-SynchNotificationWidget'));
+            this.notification.appendTo(this.$('#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 #content"));
+            this.action_bar.appendTo($(".point-of-sale #rightpane"));

            this.paypad = new module.PaypadWidget(this, {});
            this.paypad.replace($('#placeholder-PaypadWidget'));
@@ -770,6 +801,19 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa
                'keyboard_model': 'simple'
            });
            this.onscreen_keyboard.appendTo($(".point-of-sale #content")); 
+
+            this.close_button = new module.HeaderButtonWidget(this,{
+                label:'Close',
+                action: function(){ self.try_close(); },
+            });
+            this.close_button.appendTo(this.$('#rightheader'));
+
+            this.client_button = new module.HeaderButtonWidget(this,{
+                label:'Self-Checkout',
+                action: function(){ self.screen_selector.set_user_mode('client'); },
+            });
+            this.client_button.appendTo(this.$('#rightheader'));
+
            
            // --------  Screen Selector ---------

@@ -15,7 +15,7 @@
                        <button class="neworder-button">+</button>
                        <ol id="orders"></ol>
                    </div>
-                    <span class="placeholder-SynchNotificationWidget"></span>
+                    <!-- here goes header buttons -->
                </div>
            </div>
            <div id="content">
@@ -44,6 +44,12 @@
        </div>
    </t>

+    <t t-name="HeaderButtonWidget">
+        <div class="header-button">
+            <t t-esc="widget.label" />
+        </div>
+    </t>
+
    <t t-name="PosCloseWarning">
        <div>There are pending operations that could not be saved into the database, are you sure you want to exit?</div>
    </t>
@@ -531,30 +537,7 @@

    <t t-name="ActionBarWidget">
        <div class="pos-actionbar">
-            <div class="pos-actionbar-left-pane">
-                <div class="button help-button">
-                    <div class='icon'>
-                        <img src="/point_of_sale/static/src/img/icons/png48/help.png" />
-                        <div class='iconlabel'>Help</div>
-                    </div>
-                </div>
-                <div class="button close-button">
-                    <div class='icon'>
-                        <img src="/point_of_sale/static/src/img/icons/png48/shut-down.png" />
-                        <div class='iconlabel'>Close</div>
-                    </div>
-                </div>
-                <div class="button logout-button">
-                    <div class='icon'>
-                        <img src="/point_of_sale/static/src/img/icons/png48/system-log-out.png" />
-                        <div class='iconlabel'>Client Mode</div>
-                    </div>
-                </div>
-            </div>
            <ul class="pos-actionbar-button-list">
-                <!-- <li class="button">BUTTOOON</li>
-                <li class="button">JEEENKIINS</li>
-                <li class="button rightalign">ARGH</li> -->
            </ul>
        </div>
    </t>