[WIP] point_of_sale: refactored popups:

- message and comment have been renamed to title and body - refactored the popups to remove duplicated code - a few css bugfixes for retina displays. (but css is still a mess) - (unrelated) set a background on body for less white on startup
2014-12-31 15:34:30 +01:00
parent f5abed280c
commit 7eebdbb677
7 changed files with 256 additions and 336 deletions
@@ -44,6 +44,7 @@ html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-family: sans-serif;
 }
+
 table {
    border-spacing: 0px;
    border-collapse: collapse;
@@ -1222,6 +1223,7 @@ td {
    }
    body {
        margin: 0;
+        color: white !important;
    }
    .oe_leftbar,
    .pos .pos-topheader, 
@@ -1861,12 +1863,12 @@ td {
    box-shadow: 0px 10px 20px rgba(0,0,0,0.4);
    z-index:1200;
 }
-.pos .popup .comment{
+.pos .popup .body {
    font-weight: normal;
    font-size: 18px;
    margin: 0px 16px 16px 16px;
 }
-.pos .popup .comment.traceback {
+.pos .popup .body.traceback {
    height: 264px;
    overflow: auto;
    font-size: 14px;
@@ -1876,17 +1878,6 @@ td {
       -moz-user-select: text;
            user-select: text;
 }
-.pos .popup .comment.traceback {
-    height: 264px;
-    overflow: auto;
-    font-size: 12px;
-    text-align: left;
-    white-space: pre-wrap;
-    font-family: 'Inconsolata';
-    -webkit-user-select: text;
-       -moz-user-select: text;
-            user-select: text;
-}
 .pos .popup .footer{
    position:absolute;
    bottom:0;
@@ -1964,7 +1955,7 @@ td {
    outline: none;
    box-shadow: 0px 0px 0px 3px #6EC89B;
 }
-.pos .popup.popup-selection .message {
+.pos .popup.popup-selection .title {
    margin-top: 0;
 }
 .pos .popup.popup-selection .selection {
@@ -1986,12 +1977,23 @@ td {
 .pos .popup.popup-selection .selection-item:nth-child(even) {
    background: rgb(247,247,247);
 }
+.pos .popup.popup-number {
+    width: 300px;
+    margin-left: -150px;
+}
+.pos .popup-number .footer{
+    text-align: center;
+}
+.pos .popup-number .footer .button{
+    float: none;
+    display: inline-block;
+}
 .pos .popup-numpad {
    margin: 12px auto;
    text-align: left;
-    width: 244px;
+    width: 250px;
 }
-.pos .popup-number .message {
+.pos .popup-number .title {
    margin-top: 0;
 }
 .pos .popup-numpad .input-button,
@@ -2013,20 +2015,27 @@ td {
 }

 .pos .popup.popup-password {
-    width: 238px;
-    margin-left: -119px;
+    width: 250px;
+    margin-left: -125;
 }
 .pos .popup-password .mode-button.add,
 .pos .popup-password .input-button.dot {
    display: none;
 }
 .pos .popup-password .popup-numpad {
-    width: 182px;
+    width: 190px;
 }
 .pos .popup-password .popup-input {
    width: 70%;
    -webkit-text-security: disc;
 }
+.pos .popup-password .footer{
+    text-align: center;
+}
+.pos .popup-password .footer .button{
+    float: none;
+    display: inline-block;
+}

 /*  ********* The Webkit Scrollbar  ********* */

@@ -417,8 +417,8 @@ openerp.point_of_sale.load_devices = function load_devices(instance,module){ //m
                        },function(error){
                            if (error) {
                                self.pos.chrome.screen_selector.show_popup('error-traceback',{
-                                    'message': _t('Printing Error: ') + error.data.message,
-                                    'comment': error.data.debug,
+                                    'title': _t('Printing Error: ') + error.data.message,
+                                    'body':  error.data.debug,
                                });
                                return;
                            }
@@ -733,8 +733,8 @@ openerp.point_of_sale.load_models = function load_models(instance, module){ //mo
                        delete error.data.debug;
                    }
                    self.gui.show_popup('error-traceback',{
-                        message: error.data.message,
-                        comment: error.data.debug
+                        'title': error.data.message,
+                        'body':  error.data.debug
                    });
                }
                // prevent an error popup creation by the rpc failure
@@ -96,7 +96,6 @@ openerp.point_of_sale.load_screens = function load_screens(instance, module){ //
            var screen = this.screen_set[screen_name];
            if (!screen) {
                console.error("ERROR: show_screen("+screen_name+") : screen not found");
-                debugger;
            }

            this.close_popup();
@@ -185,7 +184,7 @@ openerp.point_of_sale.load_screens = function load_screens(instance, module){ //
        // - only_managers: restricts the list to managers
        // - current_user: password will not be asked if this 
        //                 user is selected.
-        // - message: The title of the user selection list. 
+        // - title: The title of the user selection list. 
        select_user: function(options){
            options = options || {};
            var self = this;
@@ -203,7 +202,7 @@ openerp.point_of_sale.load_screens = function load_screens(instance, module){ //
            }

            this.show_popup('selection',{
-                'message': options.message || _t('Select User'),
+                'title': options.title || _t('Select User'),
                list: list,
                confirm: function(user){ def.resolve(user); },
                cancel:  function(){ def.reject(); },
@@ -229,7 +228,7 @@ openerp.point_of_sale.load_screens = function load_screens(instance, module){ //
            var ret = new $.Deferred();
            if (password) {
                this.gui.show_popup('password',{
-                    'message': _t('Password ?'),
+                    'title': _t('Password ?'),
                    confirm: function(pw) {
                        if (pw !== password) {
                            self.show_popup('error',_t('Incorrect Password'));
@@ -260,10 +259,58 @@ openerp.point_of_sale.load_screens = function load_screens(instance, module){ //
                return this.select_user({
                    security:       true, 
                    only_managers:  true,
-                    message:       _t('Login as a Manager'),
+                    title:       _t('Login as a Manager'),
                })
            }
        },
+
+        /* ---- Gui: KEYBOARD INPUT ---- */
+
+        // This is a helper to handle numpad keyboard input. 
+        // - buffer: an empty or number string
+        // - input:  '[0-9],'+','-','.','CLEAR','BACKSPACE'
+        // - options: 'firstinput' -> will clear buffer if
+        //     input is '[0-9]' or '.'
+        //  returns the new buffer containing the modifications
+        //  (the original is not touched) 
+        numpad_input: function(buffer, input, options) { 
+            var options = options || {};
+            var newbuf  = buffer.slice(0);
+
+            if (input === '.') {
+                if (options.firstinput) {
+                    newbuf = "0.";
+                }else if (!newbuf.length || newbuf === '-') {
+                    newbuf += "0.";
+                } else if (newbuf.indexOf('.') < 0){
+                    newbuf = newbuf + '.';
+                }
+            } else if (input === 'CLEAR') {
+                newbuf = ""; 
+            } else if (input === 'BACKSPACE') { 
+                newbuf = newbuf.substring(0,newbuf.length - 1);
+            } else if (input === '+') {
+                if ( newbuf[0] === '-' ) {
+                    newbuf = newbuf.substring(1,newbuf.length);
+                }
+            } else if (input === '-') {
+                if ( newbuf[0] === '-' ) {
+                    newbuf = newbuf.substring(1,newbuf.length);
+                } else {
+                    newbuf = '-' + newbuf;
+                }
+            } else if (input[0] === '+' && !isNaN(parseFloat(input))) {
+                newbuf = '' + ((parseFloat(newbuf) || 0) + parseFloat(input));
+            } else if (!isNaN(parseInt(input))) {
+                if (options.firstinput) {
+                    newbuf = '' + input;
+                } else {
+                    newbuf += input;
+                }
+            }
+
+            return newbuf;
+        },
    });

    module.ScreenWidget = module.PosBaseWidget.extend({
@@ -391,70 +438,87 @@ openerp.point_of_sale.load_screens = function load_screens(instance, module){ //
    });

    module.PopUpWidget = module.PosBaseWidget.extend({
-        show: function(){
+        init: function(parent, args) {
+            this._super(parent, args);
+            this.options = {};
+        },
+        events: {
+            'click .button.cancel':  'click_cancel',
+            'click .button.confirm': 'click_confirm',
+            'click .selection-item': 'click_item',
+            'click .input-button':   'click_numpad',
+            'click .mode-button':    'click_numpad',
+        },
+
+        // show the popup !  
+        show: function(options){
            if(this.$el){
                this.$el.removeClass('oe_hidden');
            }
+            
+            if (typeof options === 'string') {
+                this.options = {title: options};
+            } else {
+                this.options = options || {};
+            }
+
+            this.renderElement();
+
+            // popups block the barcode reader ... 
+            if (this.pos.barcode_reader) {
+                this.pos.barcode_reader.save_callbacks();
+                this.pos.barcode_reader.reset_action_callbacks();
+            }
        },
-        /* called before hide, when a popup is closed */
+
+        // called before hide, when a popup is closed.
+        // extend this if you want a custom action when the 
+        // popup is closed.
        close: function(){
+            if (this.pos.barcode_reader) {
+                this.pos.barcode_reader.restore_callbacks();
+            }
        },
-        /* hides the popup. keep in mind that this is called in the initialization pass of the 
-         * pos instantiation, so you don't want to do anything fancy in here */
+
+        // hides the popup. keep in mind that this is called in 
+        // the initialization pass of the pos instantiation, 
+        // so you don't want to do anything fancy in here
        hide: function(){
-            if(this.$el){
+            if (this.$el) {
                this.$el.addClass('oe_hidden');
            }
        },
-    });

-    module.FullscreenPopup = module.PopUpWidget.extend({
-        template:'FullscreenPopupWidget',
-        show: function(){
-            var self = this;
-            this._super();
-            this.renderElement();
-            this.$('.button.fullscreen').off('click').click(function(){
-                window.document.body.webkitRequestFullscreen();
-                self.gui.close_popup();
-            });
-            this.$('.button.cancel').off('click').click(function(){
-                self.gui.close_popup();
-            });
+        // what happens when we click cancel
+        // ( it should close the popup and do nothing )
+        click_cancel: function(){
+            this.gui.close_popup();
+            if (this.options.cancel) {
+                this.options.cancel.call(this);
+            }
        },
-        ismobile: function(){
-            return typeof window.orientation !== 'undefined'; 
-        }
-    });

+        // what happens when we confirm the action
+        click_confirm: function(){
+            this.gui.close_popup();
+            if (this.options.confirm) {
+                this.options.confirm.call(this);
+            }
+        },
+
+        // Since Widget does not support extending the events declaration
+        // we declared them all in the top class.
+        click_item: function(){},
+        click_numad: function(){},
+    });

    module.ErrorPopupWidget = module.PopUpWidget.extend({
        template:'ErrorPopupWidget',
        show: function(options){
-            options = options || {};
-            var self = this;
-            this._super();
+            this._super(options);

            $('body').append('<audio src="/point_of_sale/static/src/sounds/error.wav" autoplay="true"></audio>');

-            this.message = options.message || _t('Error');
-            this.comment = options.comment || '';
-
-            this.renderElement();
-
-            this.pos.barcode_reader.save_callbacks();
-            this.pos.barcode_reader.reset_action_callbacks();
-
-            this.$('.footer .button').click(function(){
-                self.gui.close_popup();
-                if ( options.confirm ) {
-                    options.confirm.call(self);
-                }
-            });
-        },
-        close:function(){
-            this._super();
-            this.pos.barcode_reader.restore_callbacks();
        },
    });

@@ -465,44 +529,19 @@ openerp.point_of_sale.load_screens = function load_screens(instance, module){ //
    module.ErrorBarcodePopupWidget = module.ErrorPopupWidget.extend({
        template:'ErrorBarcodePopupWidget',
        show: function(barcode){
-            this.barcode = barcode;
-            this._super();
+            this._super({barcode: barcode});
        },
    });

    module.ConfirmPopupWidget = module.PopUpWidget.extend({
        template: 'ConfirmPopupWidget',
-        show: function(options){
-            options = options || {};
-            var self = this;
-            this._super();
-
-            this.message = options.message || '';
-            this.comment = options.comment || '';
-            this.renderElement();
-            
-            this.$('.button.cancel').click(function(){
-                self.gui.close_popup();
-                if( options.cancel ){
-                    options.cancel.call(self);
-                }
-            });
-
-            this.$('.button.confirm').click(function(){
-                self.gui.close_popup();
-                if( options.confirm ){
-                    options.confirm.call(self);
-                }
-            });
-        },
    });

    /**
     * A popup that allows the user to select one item from a list. 
     *
     * show_popup('selection',{
-     *  message: 'Pick an Option',
-     *      message: "Popup Title",
+     *      title: "Popup Title",
     *      list: [
     *          { label: 'foobar',  item: 45 },
     *          { label: 'bar foo', item: 'stuff' },
@@ -523,19 +562,10 @@ openerp.point_of_sale.load_screens = function load_screens(instance, module){ //
            var self = this;
            this._super();

-            this.message = options.message || '';
            this.list    = options.list    || [];
            this.renderElement();

-            this.$('.button.cancel').click(function(){
-                self.gui.close_popup();
-                if (options.cancel){
-                    options.cancel.call(self);
-                }
-            });
-
            this.$('.selection-item').click(function(){
-                self.gui.close_popup();
                if (options.confirm) {
                    var item = self.list[parseInt($(this).data('item-index'))];
                    item = item ? item.item : item;
@@ -543,6 +573,13 @@ openerp.point_of_sale.load_screens = function load_screens(instance, module){ //
                }
            });
        },
+        click_item : function(event) {
+            this.gui.close_popup();
+            if (this.options.confirm) {
+                var item = self.list[parseInt($(event.target).data('item-index'))];
+                item = item ? item.item : item;
+            }
+        }
    });

    module.TextInputPopupWidget = module.PopUpWidget.extend({
@@ -552,27 +589,19 @@ openerp.point_of_sale.load_screens = function load_screens(instance, module){ //
            var self = this;
            this._super();

-            this.message = options.message || '';
-            this.comment = options.comment || '';
-            this.value   = options.value   || '';
            this.renderElement();
            this.$('input,textarea').focus();
            
-            this.$('.button.cancel').click(function(){
-                self.gui.close_popup();
-                if( options.cancel ){
-                    options.cancel.call(self);
-                }
-            });
-
            this.$('.button.confirm').click(function(){
-                self.gui.close_popup();
-                var value = self.$('input,textarea').val();
-                if( options.confirm ){
-                    options.confirm.call(self,value);
-                }
            });
        },
+        click_confirm: function(){
+            var value = self.$('input,textarea').val();
+            self.gui.close_popup();
+            if( this.options.confirm ){
+                this.options.confirm.call(self,value);
+            }
+        },
    });

    module.TextAreaPopupWidget = module.TextInputPopupWidget.extend({
@@ -581,84 +610,40 @@ openerp.point_of_sale.load_screens = function load_screens(instance, module){ //

    module.NumberPopupWidget = module.PopUpWidget.extend({
        template: 'NumberPopupWidget',
-        click_numpad_button: function($el,event){
-            this.numpad_input($el.data('action'));
-        },
-        numpad_input: function(input) { //FIXME -> Deduplicate code
-            var oldbuf = this.inputbuffer.slice(0);
-
-            if (input === '.') {
-                if (this.firstinput) {
-                    this.inputbuffer = "0.";
-                }else if (!this.inputbuffer.length || this.inputbuffer === '-') {
-                    this.inputbuffer += "0.";
-                } else if (this.inputbuffer.indexOf('.') < 0){
-                    this.inputbuffer = this.inputbuffer + '.';
-                }
-            } else if (input === 'CLEAR') {
-                this.inputbuffer = ""; 
-            } else if (input === 'BACKSPACE') { 
-                this.inputbuffer = this.inputbuffer.substring(0,this.inputbuffer.length - 1);
-            } else if (input === '+') {
-                if ( this.inputbuffer[0] === '-' ) {
-                    this.inputbuffer = this.inputbuffer.substring(1,this.inputbuffer.length);
-                }
-            } else if (input === '-') {
-                if ( this.inputbuffer[0] === '-' ) {
-                    this.inputbuffer = this.inputbuffer.substring(1,this.inputbuffer.length);
-                } else {
-                    this.inputbuffer = '-' + this.inputbuffer;
-                }
-            } else if (input[0] === '+' && !isNaN(parseFloat(input))) {
-                this.inputbuffer = '' + ((parseFloat(this.inputbuffer) || 0) + parseFloat(input));
-            } else if (!isNaN(parseInt(input))) {
-                if (this.firstinput) {
-                    this.inputbuffer = '' + input;
-                } else {
-                    this.inputbuffer += input;
-                }
-            }
-
-            this.firstinput = this.inputbuffer.length === 0;
-
-            if (this.inputbuffer !== oldbuf) {
-                this.$('.value').text(this.inputbuffer);
-            }
-        },
        show: function(options){
            options = options || {};
            var self = this;
            this._super();

-            this.message = options.message || '';
-            this.comment = options.comment || '';
            this.inputbuffer = options.value   || '';
            this.renderElement();
            this.firstinput = true;
-            
-            this.$('.input-button,.mode-button').click(function(event){
-                self.click_numpad_button($(this),event);
-            });
-            this.$('.button.cancel').click(function(){
-                self.gui.close_popup();
-                if( options.cancel ){
-                    options.cancel.call(self);
-                }
-            });
+        },
+        click_numpad: function(event){
+            var newbuf = this.gui.numpad_input(
+                this.inputbuffer, 
+                $(event.target).data('action'), 
+                {'firstinput': this.firstinput});

-            this.$('.button.confirm').click(function(){
-                self.gui.close_popup();
-                if( options.confirm ){
-                    options.confirm.call(self,self.inputbuffer);
-                }
-            });
+            this.firstinput = (newbuf.length === 0);
+            
+            if (newbuf !== this.inputbuffer) {
+                this.inputbuffer = newbuf;
+                this.$('.value').text(this.inputbuffer);
+            }
+        },
+        click_confirm: function(event){
+            this.gui.close_popup();
+            if( this.options.confirm ){
+                this.options.confirm.call(this,this.inputbuffer);
+            }
        },
    });

    module.PasswordPopupWidget = module.NumberPopupWidget.extend({
        renderElement: function(){
            this._super();
-            this.$('.popup').addClass('popup-password');    // HELLO HACK !
+            this.$('.popup').addClass('popup-password');    // WHY NOT ?!
        },
    });

@@ -1003,9 +988,7 @@ openerp.point_of_sale.load_screens = function load_screens(instance, module){ //
            });

            if (!fields.name) {
-                this.gui.show_popup('error',{
-                    message: _t('A Customer Name Is Required'),
-                });
+                this.gui.show_popup('error',_t('A Customer Name Is Required'));
                return;
            }
            
@@ -1022,8 +1005,8 @@ openerp.point_of_sale.load_screens = function load_screens(instance, module){ //
            },function(err,event){
                event.preventDefault();
                self.gui.show_popup('error',{
-                    'message':_t('Error: Could not Save Changes'),
-                    'comment':_t('Your Internet connection is probably down.'),
+                    'title': _t('Error: Could not Save Changes'),
+                    'body': _t('Your Internet connection is probably down.'),
                });
            });
        },
@@ -1079,8 +1062,8 @@ openerp.point_of_sale.load_screens = function load_screens(instance, module){ //
            var self = this;
            if (!file.type.match(/image.*/)) {
                this.gui.show_popup('error',{
-                    message:_t('Unsupported File Format'),
-                    comment:_t('Only web-compatible Image formats such as .png or .jpeg are supported'),
+                    title: _t('Unsupported File Format'),
+                    body:  _t('Only web-compatible Image formats such as .png or .jpeg are supported'),
                });
                return;
            }
@@ -1094,8 +1077,8 @@ openerp.point_of_sale.load_screens = function load_screens(instance, module){ //
            }
            reader.onerror = function(){
                self.gui.show_popup('error',{
-                    message:_t('Could Not Read Image'),
-                    comment:_t('The provided file could not be read due to an unknown error'),
+                    title :_t('Could Not Read Image'),
+                    body  :_t('The provided file could not be read due to an unknown error'),
                });
            };
            reader.readAsDataURL(file);
@@ -1322,42 +1305,12 @@ openerp.point_of_sale.load_screens = function load_screens(instance, module){ //
        // a string that represents the key pressed.
        payment_input: function(input) {
            var oldbuf = this.inputbuffer.slice(0);
+            var newbuf = this.gui.numpad_input(this.inputbuffer, input, {'firstinput': this.firstinput});

-            if (input === '.') {
-                if (this.firstinput) {
-                    this.inputbuffer = "0.";
-                }else if (!this.inputbuffer.length || this.inputbuffer === '-') {
-                    this.inputbuffer += "0.";
-                } else if (this.inputbuffer.indexOf('.') < 0){
-                    this.inputbuffer = this.inputbuffer + '.';
-                }
-            } else if (input === 'CLEAR') {
-                this.inputbuffer = ""; 
-            } else if (input === 'BACKSPACE') { 
-                this.inputbuffer = this.inputbuffer.substring(0,this.inputbuffer.length - 1);
-            } else if (input === '+') {
-                if ( this.inputbuffer[0] === '-' ) {
-                    this.inputbuffer = this.inputbuffer.substring(1,this.inputbuffer.length);
-                }
-            } else if (input === '-') {
-                if ( this.inputbuffer[0] === '-' ) {
-                    this.inputbuffer = this.inputbuffer.substring(1,this.inputbuffer.length);
-                } else {
-                    this.inputbuffer = '-' + this.inputbuffer;
-                }
-            } else if (input[0] === '+' && !isNaN(parseFloat(input))) {
-                this.inputbuffer = '' + ((parseFloat(this.inputbuffer) || 0) + parseFloat(input));
-            } else if (!isNaN(parseInt(input))) {
-                if (this.firstinput) {
-                    this.inputbuffer = '' + input;
-                } else {
-                    this.inputbuffer += input;
-                }
-            }
-
-            this.firstinput = this.inputbuffer.length === 0;
-
-            if (this.inputbuffer !== oldbuf) {
+            this.firstinput = (newbuf.length === 0);
+            
+            if (newbuf !== this.inputbuffer) {
+                this.inputbuffer = newbuf;
                var order = this.pos.get_order();
                if (order.selected_paymentline) {
                    order.selected_paymentline.set_amount(parseFloat(this.inputbuffer));
@@ -1551,8 +1504,8 @@ openerp.point_of_sale.load_screens = function load_screens(instance, module){ //
            // process empty orders. This is not the right place to fix it.
            if (order.get_orderlines().length === 0) {
                this.gui.show_popup('error',{
-                    'message': _t('Empty Order'),
-                    'comment': _t('There must be at least one product in your order before it can be validated'),
+                    'title': _t('Empty Order'),
+                    'body':  _t('There must be at least one product in your order before it can be validated'),
                });
                return;
            }
@@ -1569,8 +1522,8 @@ openerp.point_of_sale.load_screens = function load_screens(instance, module){ //
                }
                if (!cash) {
                    this.gui.show_popup('error',{
-                        message: _t('Cannot return change without a cash payment method'),
-                        comment: _t('There is no cash payment method available in this point of sale to handle the change.\n\n Please pay the exact amount or add a cash payment method in the point of sale configuration'),
+                        title: _t('Cannot return change without a cash payment method'),
+                        body:  _t('There is no cash payment method available in this point of sale to handle the change.\n\n Please pay the exact amount or add a cash payment method in the point of sale configuration'),
                    });
                    return;
                }
@@ -1589,16 +1542,16 @@ openerp.point_of_sale.load_screens = function load_screens(instance, module){ //
                    self.invoicing = false;
                    if (error === 'error-no-client') {
                        self.gui.show_popup('confirm',{
-                            message: _t('Please select the Customer'),
-                            comment: _t('You need to select the customer before you can invoice an order.'),
+                            'title': _t('Please select the Customer'),
+                            'body': _t('You need to select the customer before you can invoice an order.'),
                            confirm: function(){
                                self.gui.show_screen('clientlist');
                            },
                        });
                    } else {
                        self.gui.show_popup('error',{
-                            message: _t('The order could not be sent'),
-                            comment: _t('Check your internet connection and try again.'),
+                            'title': _t('The order could not be sent'),
+                            'body': _t('Check your internet connection and try again.'),
                        });
                    }
                });
@@ -286,8 +286,8 @@ openerp.point_of_sale.load_widgets = function load_widgets(instance, module){ //
                return;
            } else if ( !order.is_empty() ){
                this.gui.show_popup('confirm',{
-                    message: _t('Destroy Current Order ?'),
-                    comment: _t('You will lose any data associated with the current order'),
+                    'title': _t('Destroy Current Order ?'),
+                    'body': _t('You will lose any data associated with the current order'),
                    confirm: function(){
                        self.pos.delete_current_order();
                    },
@@ -579,7 +579,7 @@ openerp.point_of_sale.load_widgets = function load_widgets(instance, module){ //
            this.gui.select_user({
                'security':     true,
                'current_user': this.pos.get_cashier(),
-                'message':      _t('Change Cashier'),
+                'title':      _t('Change Cashier'),
            }).then(function(user){
                self.pos.set_cashier(user);
                self.renderElement();
@@ -724,8 +724,8 @@ openerp.point_of_sale.load_widgets = function load_widgets(instance, module){ //
            });
            this.$('.button.delete_orders').click(function(){
                self.gui.show_popup('confirm',{
-                    message: _t('Delete Unsent Orders ?'),
-                    comment: _t('This operation will permanently destroy all unsent orders from the local storage. You will lose all the data. This operation cannot be undone.'),
+                    'title': _t('Delete Unsent Orders ?'),
+                    'body':  _t('This operation will permanently destroy all unsent orders from the local storage. You will lose all the data. This operation cannot be undone.'),
                    confirm: function(){
                        self.pos.db.remove_all_orders();
                        self.pos.set({synch: { state:'connected', pending: 0 }});
@@ -737,8 +737,8 @@ openerp.point_of_sale.load_widgets = function load_widgets(instance, module){ //
            });
            this.$('.button.delete_unpaid_orders').click(function(){
                self.gui.show_popup('confirm',{
-                    message: _t('Delete Unpaid Orders ?'),
-                    comment: _t('This operation will permanently destroy all unpaid orders from all sessions that have been put in the local storage. You will lose all the data and exit the point of sale. This operation cannot be undone.'),
+                    'title': _t('Delete Unpaid Orders ?'),
+                    'body':  _t('This operation will permanently destroy all unpaid orders from all sessions that have been put in the local storage. You will lose all the data and exit the point of sale. This operation cannot be undone.'),
                    confirm: function(){
                        self.pos.db.remove_all_unpaid_orders();
                        window.location = '/';
@@ -867,6 +867,8 @@ openerp.point_of_sale.load_widgets = function load_widgets(instance, module){ //
            this.pos = new module.PosModel(this.session,{chrome:this});
            this.gui = new module.Gui({pos: this.pos, chrome: this});
            this.chrome = this; // So that chrome's childs have chrome set automatically
+            this.pos.gui = this.gui;
+
            this.widget = {};   // contains references to subwidgets instances

            this.numpad_visible = true;
@@ -875,7 +877,6 @@ openerp.point_of_sale.load_widgets = function load_widgets(instance, module){ //
            this.cashier_controls_visible = true;

            this.pos.ready.done(function(){
-                console.log('yeah');
                self.build_chrome();
                self.pos.on_chrome_started();
                self.started.resolve();
@@ -928,23 +929,23 @@ openerp.point_of_sale.load_widgets = function load_widgets(instance, module){ //
        loading_error: function(err){
            var self = this;

-            var message = err.message;
-            var comment = err.stack;
+            var title = err.message;
+            var body  = err.stack;

            if(err.message === 'XmlHttpRequestError '){
-                message = 'Network Failure (XmlHttpRequestError)';
-                comment = 'The Point of Sale could not be loaded due to a network problem.\n Please check your internet connection.';
+                title = 'Network Failure (XmlHttpRequestError)';
+                body  = 'The Point of Sale could not be loaded due to a network problem.\n Please check your internet connection.';
            }else if(err.message === 'OpenERP Server Error'){
-                message = err.data.message;
-                comment = err.data.debug;
+                title = err.data.message;
+                body  = err.data.debug;
            }

-            if( typeof comment !== 'string' ){
-                comment = 'Traceback not available.';
+            if( typeof body !== 'string' ){
+                body = 'Traceback not available.';
            }

            var popup = $(QWeb.render('ErrorTracebackPopupWidget',{
-                widget: { message: message, comment: comment },
+                widget: { title: title , body: body },
            }));

            popup.find('.button').click(function(){
@@ -985,8 +986,6 @@ openerp.point_of_sale.load_widgets = function load_widgets(instance, module){ //
            this.$('.loader').removeClass('oe_hidden').animate({opacity:1},150,'swing');
        },

-
-
        screens: {
            'products':     module.ProductScreenWidget,
            'receipt':      module.ReceiptScreenWidget,
@@ -1150,8 +1149,8 @@ openerp.point_of_sale.load_widgets = function load_widgets(instance, module){ //
                },function(err,event) {
                    event.preventDefault();
                    self.gui.show_popup('error',{
-                        'message': _t('Could not close the point of sale.'),
-                        'comment': _t('Your internet connection is probably down.'),
+                        'title': _t('Could not close the point of sale.'),
+                        'body':  _t('Your internet connection is probably down.'),
                    });
                    self.close_button.renderElement();
                });
@@ -157,7 +157,7 @@
            <button class="input-button number-char">0</button>
            <button class="input-button number-char">.</button>
            <button class="input-button numpad-backspace">
-                <img src="/point_of_sale/static/src/img/backspace.png" width="24" height="21" />
+                <img style="pointer-events: none;" src="/point_of_sale/static/src/img/backspace.png" width="24" height="21" />
            </button>
            <br />
        </div>
@@ -797,58 +797,15 @@
        </receipt>
    </t>

-    <t t-name="FullscreenPopupWidget">
-        <div class="modal-dialog">
-            <div class="popup popup-fullscreen">
-                <p class="message">Fullscreen Setup</p>
-
-                <t t-if='widget.ismobile()'>
-                    <p class="comment">
-                        The best way to make the point of sale fullscreen on mobile
-                        devices is to add the point of sale to your home screen. On 
-                        iPhone and iPad this is done by tapping <img src='/point_of_sale/static/src/img/ios-share-icon.png' />
-                        and then <i>Add to Homescreen</i>
-                    </p>
-                    <p class='comment'>
-                        This also works on Android with the Chrome Beta Browser, using the <i>Add to Homescreen</i> option 
-                        in the browser's menu.
-                    </p>
-                    <p class='comment'> 
-                        If you want to work in fullscreen just this time tap the <i>Go Fullscreen</i> button.
-                    </p>
-                </t>
-
-                <t t-if='!widget.ismobile()'>
-                    <p class="comment">
-                        The best way to make the point of sale fullscreen on desktop
-                        and laptops is to launch your browser in kiosk mode. Please
-                        refer to your browser's documentation for the specific 
-                        instructions.
-                    </p>
-                    <p class="comment">
-                        If you want to work in fullscreen just this time, click the <i> Go Fullscreen</i> button.
-                    </p>
-                </t>
-
-                <div class="footer">
-                    <div class="button fullscreen">
-                        Go Fullscreen
-                    </div>
-                    <div class="button cancel">
-                        Cancel
-                    </div>
-                </div>
-            </div>
-        </div>
-    </t>
-
    <t t-name="ErrorInvoiceTransferPopupWidget">
        <div class="modal-dialog">
            <div class="popup popup-invoice">
-                <p class="message">The Order could not be sent to the server for invoicing. Invoices cannot be generated
-                    in offline mode. Please check your internet connection and try again.</p>
+                <p class="title">
+                    The Order could not be sent to the server for invoicing. Invoices cannot be generated
+                    in offline mode. Please check your internet connection and try again.
+                </p>
                <div class="footer">
-                    <div class="button">
+                    <div class="button cancel">
                        Ok
                    </div>
                </div>
@@ -859,10 +816,10 @@
    <t t-name="ErrorPopupWidget">
        <div class="modal-dialog">
            <div class="popup popup-error">
-                <p class="message"><t t-esc=" widget.message || 'Error' " /></p>
-                <p class="comment"><t t-esc=" widget.comment || '' "/></p>
+                <p class="title"><t t-esc=" widget.options.title || 'Error' " /></p>
+                <p class="body"><t t-esc=" widget.options.body || '' "/></p>
                <div class="footer">
-                    <div class="button">
+                    <div class="button cancel">
                        Ok
                    </div>
                </div>
@@ -873,10 +830,10 @@
    <t t-name="ErrorTracebackPopupWidget">
        <div class="modal-dialog">
            <div class="popup popup-error">
-                <p class="message"><t t-esc=" widget.message || 'Error' " /></p>
-                <p class="comment traceback"><t t-esc=" widget.comment || '' "/></p>
+                <p class="title"><t t-esc=" widget.options.title || 'Error' " /></p>
+                <p class="body traceback"><t t-esc=" widget.options.body || '' "/></p>
                <div class="footer">
-                    <div class="button">
+                    <div class="button cancel">
                        Ok
                    </div>
                </div>
@@ -887,10 +844,10 @@
    <t t-name="ErrorTracebackPopupWidget">
        <div class="modal-dialog">
            <div class="popup popup-error">
-                <p class="message"><t t-esc=" widget.message || 'Error' " /></p>
-                <p class="comment traceback"><t t-esc=" widget.comment || '' "/></p>
+                <p class="title"><t t-esc=" widget.options.title || 'Error' " /></p>
+                <p class="body traceback"><t t-esc=" widget.options.body || '' "/></p>
                <div class="footer">
-                    <div class="button">
+                    <div class="button cancel">
                        Ok
                    </div>
                </div>
@@ -901,16 +858,16 @@
    <t t-name="ErrorBarcodePopupWidget">
        <div class="modal-dialog">
            <div class="popup popup-barcode">
-                <p class="message">Unknown Barcode
+                <p class="title">Unknown Barcode
                    <br />
-                    <span class='barcode'><t t-esc="widget.barcode" /></span>
+                    <span class='barcode'><t t-esc="widget.options.barcode" /></span>
                </p>
-                <p class="comment">
+                <p class="body">
                    The Point of Sale could not find any product, client, employee
                    or action associated with the scanned barcode.
                </p>
                <div class="footer">
-                    <div class="button">
+                    <div class="button cancel">
                        Ok
                    </div>
                </div>
@@ -921,8 +878,8 @@
    <t t-name="ConfirmPopupWidget">
        <div class="modal-dialog">
            <div class="popup popup-confirm">
-                <p class="message"><t t-esc=" widget.message || 'Confirm ?' " /></p>
-                <p class="comment"><t t-esc=" widget.comment || '' "/></p>
+                <p class="title"><t t-esc=" widget.options.title || 'Confirm ?' " /></p>
+                <p class="body"><t t-esc="  widget.options.body || '' "/></p>
                <div class="footer">
                    <div class="button confirm">
                        Confirm 
@@ -938,8 +895,8 @@
    <t t-name="TextInputPopupWidget">
        <div class="modal-dialog">
            <div class="popup popup-textinput">
-                <p class="message"><t t-esc=" widget.message || '' " /></p>
-                <input type='text' t-att-value="widget.value || ''"></input>
+                <p class="title"><t t-esc=" widget.options.title || '' " /></p>
+                <input type='text' t-att-value="widget.options.value || ''"></input>
                <div class="footer">
                    <div class="button confirm">
                        Ok 
@@ -955,8 +912,8 @@
    <t t-name="TextAreaPopupWidget">
        <div class="modal-dialog">
            <div class="popup popup-textinput">
-                <p class="message"><t t-esc=" widget.message || '' " /></p>
-                <textarea rows="10" cols="40"><t t-esc="widget.value" /></textarea>
+                <p class="title"><t t-esc=" widget.options.title || '' " /></p>
+                <textarea rows="10" cols="40"><t t-esc="widget.options.value" /></textarea>
                <div class="footer">
                    <div class="button confirm">
                        Ok 
@@ -972,14 +929,14 @@
    <t t-name="UnsentOrdersPopupWidget">
        <div class="modal-dialog">
            <div class="popup popup-unsent-orders">
-                <p class="message">Unsent Orders</p>
+                <p class="title">Unsent Orders</p>
                <t t-if='widget.pos.db.get_orders().length === 0'>
-                    <p class='comment'>
+                    <p class='body'>
                        There are no unsent orders
                    </p>
                </t>
                <t t-if='widget.pos.db.get_orders().length > 0'>
-                    <p class='comment traceback'>
+                    <p class='body traceback'>
                        <t t-esc='JSON.stringify(widget.pos.db.get_orders(),null,2)' />
                    </p>
                </t>
@@ -995,14 +952,14 @@
    <t t-name="UnpaidOrdersPopupWidget">
        <div class="modal-dialog">
            <div class="popup popup-unpaid-orders">
-                <p class="message">Unpaid Orders</p>
+                <p class="title">Unpaid Orders</p>
                <t t-if='widget.pos.db.get_unpaid_orders().length === 0'>
-                    <p class='comment'>
+                    <p class='body'>
                        There are no unpaid orders
                    </p>
                </t>
                <t t-if='widget.pos.db.get_unpaid_orders().length > 0'>
-                    <p class='comment traceback'>
+                    <p class='body traceback'>
                        <t t-esc='JSON.stringify(widget.pos.db.get_unpaid_orders(),null,2)' />
                    </p>
                </t>
@@ -1018,7 +975,7 @@
    <t t-name="SelectionPopupWidget">
        <div class="modal-dialog">
            <div class="popup popup-selection">
-                <p class="message"><t t-esc=" widget.message || 'Select' " /></p>
+                <p class="title"><t t-esc=" widget.options.title || 'Select' " /></p>
                <div class='selection scrollable-y touch-scrollable'>
                    <t t-foreach="widget.list || []" t-as="item">
                        <div class='selection-item' t-att-data-item-index='item_index'>
@@ -1038,7 +995,7 @@
    <t t-name="NumberPopupWidget">
        <div class="modal-dialog">
            <div class="popup popup-number">
-                <p class="message"><t t-esc=" widget.message || '' " /></p>
+                <p class="title"><t t-esc=" widget.options.title || '' " /></p>
                <div class='popup-input value active'>
                    <t t-esc='widget.inputbuffer' />
                </div>
@@ -1062,7 +1019,7 @@
                    <button class="input-button number-char" data-action='0'>0</button>
                    <button class="input-button number-char dot" data-action='.'>.</button>
                    <button class="input-button numpad-backspace" data-action='BACKSPACE' >
-                        <img src="/point_of_sale/static/src/img/backspace.png" width="24" height="21" />
+                        <img style="pointer-events: none;" src="/point_of_sale/static/src/img/backspace.png" width="24" height="21" />
                    </button>
                    <br />
                </div>
@@ -24,6 +24,8 @@
        <link rel="apple-touch-icon" sizes="120x120" href="/point_of_sale/static/src/img/touch-icon-iphone-retina.png"/>
        <link rel="apple-touch-icon" sizes="152x152" href="/point_of_sale/static/src/img/touch-icon-ipad-retina.png"/>

+        <style> body { background: #222; } </style> 
+
        <link rel="shortcut icon" href="/web/static/src/img/favicon.ico" type="image/x-icon"/>
        <link rel="stylesheet" href="/point_of_sale/static/src/fonts/lato/stylesheet.css" /> 
        <link rel="stylesheet" href="/web/static/lib/fontawesome/css/font-awesome.css" />