[IMP] Improved the code to use css direct from lib on xml by data-role.

bzr revid: jra@tinyerp.com-20110831061816-xqgbt9uo601o5yx1

4 files changed, 104 insertions, 139 deletions

diff --git a/addons/web_mobile/static/src/js/chrome_mobile.js b/addons/web_mobile/static/src/js/chrome_mobile.js
index 551856e01fb..5305b6bc67b 100644
--- a/addons/web_mobile/static/src/js/chrome_mobile.js
+++ b/addons/web_mobile/static/src/js/chrome_mobile.js
@@ -20,7 +20,7 @@ openerp.web_mobile.MobileWebClient = openerp.base.Widget.extend({
         this.$element.html(QWeb.render("WebClient", {}));
         this.session = new openerp.base.Session("oe_errors");
         this.crashmanager =  new openerp.base.CrashManager(this);
-        this.login = new openerp.web_mobile.Login(this, "oe_app");
+        this.login = new openerp.web_mobile.Login(this, "oe_login");
 //        this.session.on_session_invalid.add(this.login.do_ask_login);
     },
     start: function() {
@@ -74,7 +74,7 @@ openerp.web_mobile.Login =  openerp.base.Widget.extend({
             .removeClass("login_invalid")
             .addClass("login_valid");
             //.hide();
-        this.homepage = new openerp.web_mobile.HomePage(this, "oe_app");
+        this.homepage = new openerp.web_mobile.HomePage(this, "oe_home");
         this.homepage.start();
     },
     do_ask_login: function(continuation) {
@@ -97,12 +97,14 @@ openerp.web_mobile.HomePage =  openerp.base.Widget.extend({
         this.shortcuts = new openerp.web_mobile.Shortcuts(this, "oe_shortcuts");
         this.menu = new openerp.web_mobile.Menu(this, "oe_menu", "oe_secondary_menu");
         this.options = new openerp.web_mobile.Options(this, "oe_options");
+        this.footer = new openerp.web_mobile.Footer(this, "oe_footer");
         this.header.start();
         this.shortcuts.start();
         this.menu.start();
         this.options.start();
-        jQuery("#oe_header").find("h1").html('Home');
+        this.footer.start();
         this.$element.find("a").click(this.on_clicked);
+        $.mobile.changePage($("#oe_home"), "slide", true, true);
     }
 });
 
@@ -113,15 +115,16 @@ openerp.web_mobile.Header =  openerp.base.Widget.extend({
     start: function() {
         var self = this;
         self.$element.html(QWeb.render("Header", this));
-        self.$element.find("a").click(this.on_clicked);
+    }
+});
+
+openerp.web_mobile.Footer =  openerp.base.Widget.extend({
+    init: function(session, element_id) {
+        this._super(session, element_id);
     },
-    on_clicked: function(ev) {
-        $opt = $(ev.currentTarget);
-        current_id = $opt.attr('id');
-        if (current_id == 'home') {
-            this.homepage = new openerp.web_mobile.HomePage(this, "oe_app");
-            this.homepage.start();
-        }
+    start: function() {
+        var self = this;
+        self.$element.html(QWeb.render("Footer", this));
     }
 });
 
@@ -140,9 +143,11 @@ openerp.web_mobile.Shortcuts =  openerp.base.Widget.extend({
         $shortcut = $(ev.currentTarget);
         id = $shortcut.data('menu');
         res_id = $shortcut.data('res');
-        jQuery("#oe_header").find("h1").html($shortcut.data('name'));
-        this.listview = new openerp.web_mobile.ListView(this, "oe_app", res_id);
+        this.header = new openerp.web_mobile.Header(this, "oe_header");
+        this.listview = new openerp.web_mobile.ListView(this, "oe_list", res_id);
+        this.header.start();
         this.listview.start();
+        jQuery("#oe_header").find("h1").html($shortcut.data('name'));
     }
 });
 
@@ -169,13 +174,15 @@ openerp.web_mobile.Menu =  openerp.base.Widget.extend({
                 this.children = this.data.data.children[i];
             }
         }
-        jQuery("#oe_header").find("h1").html($menu.data('name'));
         this.$element
             .removeClass("login_valid")
             .addClass("secondary_menu");
             //.hide();
-        this.secondary = new openerp.web_mobile.Secondary(this, "oe_app", this.children);
+        this.header = new openerp.web_mobile.Header(this, "oe_header");
+        this.secondary = new openerp.web_mobile.Secondary(this, "oe_sec_menu", this.children);
+        this.header.start();
         this.secondary.start();
+        jQuery("#oe_header").find("h1").html($menu.data('name'));
     }
 });
 
@@ -188,6 +195,7 @@ openerp.web_mobile.Secondary =  openerp.base.Widget.extend({
         var v = { menu : this.data };
         this.$element.html(QWeb.render("Menu.secondary", v));
         this.$element.add(this.$secondary_menu).find("a").click(this.on_menu_click);
+        $.mobile.changePage($("#oe_sec_menu"), "slide", true, true);
     },
     on_menu_click: function(ev, id) {
         $menu = $(ev.currentTarget);
@@ -197,22 +205,25 @@ openerp.web_mobile.Secondary =  openerp.base.Widget.extend({
                 this.children = this.data.children[i];
             }
         }
-        jQuery("#oe_header").find("h1").html($menu.data('name'));
         var child_len = this.children.children.length;
         if (child_len > 0) {
             this.$element
                 .removeClass("secondary_menu")
                 .addClass("content_menu");
                 //.hide();
-            this.secondary = new openerp.web_mobile.Secondary(this, "oe_app", this.children);
+            this.header = new openerp.web_mobile.Header(this, "oe_header");
+            this.secondary = new openerp.web_mobile.Secondary(this, "oe_sec_menu_new", this.children);
+            this.header.start();
             this.secondary.start();
+            $.mobile.changePage($("#oe_sec_menu_new"), "slide", true, true);
         }
         else {
             if (id) {
-                this.listview = new openerp.web_mobile.ListView(this, "oe_app", id);
+                this.listview = new openerp.web_mobile.ListView(this, "oe_list", id);
                 this.listview.start();
             }
         }
+        jQuery("#oe_header").find("h1").html($menu.data('name'));
     }
 });
 
@@ -223,12 +234,6 @@ openerp.web_mobile.Options =  openerp.base.Widget.extend({
     start: function() {
         var self = this;
         this.$element.html(QWeb.render("Options", this));
-        self.$element.find("#logout").click(self.on_logout);
-    },
-    on_logout: function(ev) {
-        this.session.logout();
-//        this.login = new openerp.web_mobile.Login(this, "oe_app");
-//        this.login.start();
     }
 });
 
diff --git a/addons/web_mobile/static/src/js/form_mobile.js b/addons/web_mobile/static/src/js/form_mobile.js
index 4a3e2167c02..40e897299c3 100644
--- a/addons/web_mobile/static/src/js/form_mobile.js
+++ b/addons/web_mobile/static/src/js/form_mobile.js
@@ -38,7 +38,6 @@ openerp.web_mobile.FormView = openerp.base.Widget.extend({
                         var notebooks = view_fields[j];
                     }
                 }
-                $("#oe_header").find("h1").html(result.fields_view.arch.attrs.string);
                 self.$element.html(QWeb.render("FormView", {'get_fields': get_fields, 'notebooks': notebooks || false, 'fields' : fields, 'values' : data }));
                     self.$element.find('select').change(function(ev){
                         selection.on_select_option(ev);
@@ -101,6 +100,8 @@ openerp.web_mobile.FormView = openerp.base.Widget.extend({
                         });
                     });
                 });
+                $.mobile.changePage($("#oe_form"), "slide", true, true);
+                $("#oe_header").find("h1").html(result.fields_view.arch.attrs.string);
         });
     },
     get_fields: function(view_fields, fields) {
diff --git a/addons/web_mobile/static/src/js/list_mobile.js b/addons/web_mobile/static/src/js/list_mobile.js
index b4ba5e08cc3..081bcaa1328 100644
--- a/addons/web_mobile/static/src/js/list_mobile.js
+++ b/addons/web_mobile/static/src/js/list_mobile.js
@@ -17,56 +17,25 @@ openerp.web_mobile.ListView = openerp.base.Widget.extend({
         var self = this;
         if (data.action.length) {
             this.action = data.action[0][2];
-            this.on_search_data('');
+            this.on_search_data();
         }
     },
-    on_search_data: function(request){
-        if(request){
-            if(request.term){
-                var search_val = request.term;
-            }else{
-                if(request.which==27 || request.which==13 || request.which==9){
-                    var search_val = '';
-                }else if(request.which==38 || request.which==40 || request.which==39 || request.which==37){
-                    return;
-                }else if($("#searchid").val()==""){
-                    var search_val = '';
-                }else{
-                    return;
-                }
-            }
-        }
-        else{
-            var search_val = '';
-        }
+    on_search_data: function(ev){
         var self = this;
-
         var dataset = new openerp.base.DataSetStatic(this, this.action.res_model, this.action.context);
-        dataset.domain=[['name','ilike',search_val]];
-        dataset.name_search(search_val, dataset.domain, 'ilike',false ,function(result){
+        dataset.name_search('', [], 'ilike',false ,function(result){
             self.$element.html(QWeb.render("ListView", {'records' : result}));
-            self.$element.find("#searchid").focus();
-            if(request.term){
-                self.$element.find("#searchid").val(request.term);
-            }
-            self.$element.find("#searchid").autocomplete({
-                source: function(req) { self.on_search_data(req); },
-                focus: function(e, ui) {
-                    e.preventDefault();
-                },
-                html: true,
-                minLength: 0,
-                delay: 0
-            });
-            self.$element.find("#searchid").keyup(self.on_search_data);
             self.$element.find("a#list-id").click(self.on_list_click);
+            $.mobile.changePage($("#oe_list"), "slide", true, true);
         });
     },
     on_list_click: function(ev) {
         $record = $(ev.currentTarget);
         var self = this;
         id = $record.data('id');
-        this.formview = new openerp.web_mobile.FormView(this, "oe_app", id, this.action);
+        this.header = new openerp.web_mobile.Header(this, "oe_header");
+        this.formview = new openerp.web_mobile.FormView(this, "oe_form", id, this.action);
+        this.header.start();
         this.formview.start();
     }
  });
diff --git a/addons/web_mobile/static/src/xml/web_mobile.xml b/addons/web_mobile/static/src/xml/web_mobile.xml
index a3af2e39b90..aca6ed04c9e 100644
--- a/addons/web_mobile/static/src/xml/web_mobile.xml
+++ b/addons/web_mobile/static/src/xml/web_mobile.xml
@@ -4,10 +4,12 @@
 <templates id="template" xml:space="preserve">
 
 <t t-name="WebClient">
-    <div data-role="page">
-        <div id="oe_header"></div>
-        <div id="oe_app"></div>
-    </div>
+    <div data-role="page" id="oe_login"></div>
+    <div data-role="page" id="oe_home"></div>
+    <div data-role="page" id="oe_sec_menu"></div>
+    <div data-role="page" id="oe_sec_menu_new"></div>
+    <div data-role="page" id="oe_list"></div>
+    <div data-role="page" id="oe_form"></div>
 </t>
 
 <t t-name="Login">
@@ -39,29 +41,32 @@
 </t>
 
 <t t-name="HomePage">
-    <div role="main" class="ui-content" data-role="content">
-        <div id="oe_shortcuts" class="shortcuts"></div>
-        <div id="oe_menu" class="menu"></div>
-        <div id="oe_options" class="options"></div>
+    <div id="oe_header"></div>
+    <div data-role="content">
+        <div id="oe_shortcuts"></div>
+        <div id="oe_menu"></div>
+        <div id="oe_options"></div>
     </div>
+    <div id="oe_footer"></div>
 </t>
 
 <t t-name="Header">
-    <div role="banner" class="ui-bar-b ui-header" data-role="header" data-theme="b">
-        <h1 aria-level="1" role="heading" tabindex="0" class="ui-title">OpenERP</h1>
-        <a id="home" class="ui-btn-right jqm-home ui-btn ui-btn-icon-notext ui-btn-corner-all ui-shadow ui-btn-up-b" data-direction="reverse" data-iconpos="notext" data-icon="home" href="#" title="Home" data-theme="b">
-            <span class="ui-btn-inner ui-btn-corner-all">
-                <span class="ui-btn-text">Home</span>
-                <span class="ui-icon ui-icon-home ui-icon-shadow"></span>
-            </span>
-        </a>
+    <div data-role="header" data-theme="b">
+        <h1>OpenERP</h1>
+        <a id="home" class="ui-btn-right" data-iconpos="notext" data-icon="home" href="#oe_home" title="Home" data-theme="b"></a>
+    </div>
+</t>
+
+<t t-name="Footer">
+    <div data-role="footer" data-theme="b">
+        <h1>Footer</h1>
     </div>
 </t>
 
 <t t-name="Shortcuts">
     <ul data-dividertheme="b" data-theme="c" data-inset="true" data-role="listview" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
         <li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-btn ui-bar-b ui-corner-top ui-btn-up-undefined">
-            Shortcuts
+                Shortcuts
         </li>
         <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c" t-foreach="sc" t-as="opt">
             <div class="ui-btn-inner ui-li">
@@ -73,7 +78,7 @@
                 <span class="ui-icon ui-icon-arrow-r"></span>
             </div>
         </li>
-    </ul>
+   </ul>
 </t>
 
 <t t-name="Menu">
@@ -95,67 +100,47 @@
 </t>
 
 <t t-name="Menu.secondary">
-    <div role="main" class="ui-content" data-role="content">
-        <ul data-role="listview" class="ui-listview">
-            <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c" t-foreach="menu.children" t-as="menu">
-                <div class="ui-btn-inner ui-li">
-                    <div class="ui-btn-text">
-                        <a href="#" class="ui-link-inherit" t-attf-id="menu_#{menu.id}" t-att-data-menu="menu.id" t-att-data-name="menu.name">
-                            <span><t t-esc="menu.name"/></span>
-                        </a>
-                    </div>
-                        <span class="ui-icon ui-icon-arrow-r"></span>
-                </div>
+    <div id="oe_header"></div>
+     <div data-role="header" data-theme="b">
+        <h1>OpenERP</h1>
+        <a id="home" class="ui-btn-right" data-iconpos="notext" data-icon="home" href="#" title="Home" data-theme="b"></a>
+    </div>
+    <div data-role="content">
+        <ul data-role="listview">
+            <li data-theme="c" t-foreach="menu.children" t-as="menu">
+                <a href="#" t-attf-id="menu_#{menu.id}" t-att-data-menu="menu.id" t-att-data-name="menu.name">
+                    <t t-esc="menu.name"/>
+                </a>
             </li>
         </ul>
     </div>
 </t>
 
 <t t-name="Options">
-    <ul data-dividertheme="b" data-theme="c" data-inset="true" data-role="listview" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
-        <li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-btn ui-bar-b ui-corner-top ui-btn-up-undefined">
+    <ul data-dividertheme="b" data-theme="c" data-inset="true" data-role="listview">
+        <li data-role="list-divider">
             Options
         </li>
-        <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c">
-            <div class="ui-btn-inner ui-li">
-                <div class="ui-btn-text">
-                    <a id="logout" href="#" class="ui-link-inherit">
-                        Logout
-                    </a>
-                </div>
-                    <span class="ui-icon ui-icon-arrow-r"></span>
-            </div>
+        <li data-theme="c">
+            <a id="logout" href="#oe_login">Logout</a>
         </li>
-        <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c">
-            <div class="ui-btn-inner ui-li">
-                <div class="ui-btn-text">
-                    <a id="pref" href="#" class="ui-link-inherit">
-                        Preferences
-                    </a>
-                </div>
-                    <span class="ui-icon ui-icon-arrow-r"></span>
-            </div>
+        <li data-theme="c">
+            <a id="pref" href="#">Preferences</a>
         </li>
     </ul>
 </t>
 
 <t t-name="ListView">
-    <div role="main" class="ui-content" data-role="content">
-        <form class="ui-listview-filter ui-bar-c" role="search">
-            <div id="search-data" class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield ui-body-c">
-                <input id="searchid" placeholder="Filter items..." data-type="search" class="ui-input-text ui-body-null" autosearch="true" setTimeDefault="700"/>
-            </div>
-        </form>
-        <ul role="listbox" data-role="listview" class="ui-listview">
-            <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c" t-foreach="records" t-as="record">
-                <div class="ui-btn-inner ui-li">
-                    <div class="ui-btn-text">
-                        <a id="list-id" t-att-data-id="record[0]" href="#" class="ui-link-inherit">
-                            <span><t t-esc="record[1]"/></span>
-                        </a>
-                    </div>
-                        <span class="ui-icon ui-icon-arrow-r"></span>
-                </div>
+     <div data-role="header" data-theme="b">
+        <h1>OpenERP</h1>
+        <a id="home" class="ui-btn-right" data-iconpos="notext" data-icon="home" href="#oe_home" title="Home" data-theme="b"></a>
+    </div>
+    <div data-role="content">
+        <ul data-role="listview" data-inset="true" data-theme="d" data-filter="true">
+            <li data-theme="c" t-foreach="records" t-as="record">
+                <a id="list-id" t-att-data-id="record[0]" href="#">
+                    <t t-esc="record[1]"/>
+                </a>
             </li>
         </ul>
     </div>
@@ -242,7 +227,6 @@
                     </div>
                 </t>
                  <t t-if="fields[field.attrs.name].type == 'many2one'">
-
                     <div class="ui-select">
                         <div data-theme="c" class="ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-up-c">
                             <span class="ui-btn-inner ui-btn-corner-all">
@@ -270,27 +254,34 @@
                     </div>
                 </t>
                 <t t-if="fields[field.attrs.name].type == 'one2many'">
-                    <div class="info ui-collapsible-contain" data-collapsed="true" data-role="collapsible">
+                    <ul role="listbox" data-role="listview" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
+                        <li tabindex="0" data-theme="d" role="option" class="ui-btn ui-btn-icon-right ui-li ui-corner-top ui-corner-bottom ui-btn-up-d">
+                            <div class="ui-btn-inner">
+                                <div class="ui-btn-text">
+                                    <a href="#" class="ui-link-inherit">
+                                        <span><t t-esc="til"/></span>
+                                    </a>
+                                </div>
+                                <span class="ui-icon ui-icon-arrow-r"></span>
+                            </div>
+                        </li>
+                    </ul>
+                    <!--  <div class="info ui-collapsible-contain" data-collapsed="true" data-role="collapsible">
                         <h1 class="ui-collapsible-heading">
                             <a class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-shadow ui-corner-all ui-btn-up-c" href="#" data-theme="c" t-id="page.attrs.string">
                                 <span class="ui-btn-inner ui-corner-all">
                                     <span class="ui-btn-text">
                                         <t t-esc="til"></t>
-                                        <!-- <span class="ui-collapsible-heading-status"></span> -->
-                                    </span>
-                                    <span data-theme="d" class="ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-d">
-                                        <span class="ui-btn-inner ui-btn-corner-all ui-corner-all">
-                                            <span class="ui-btn-text"></span>
-                                            <span class="ui-icon ui-icon-shadow ui-icon-plus"></span>
-                                        </span>
+                                        <span class="ui-collapsible-heading-status"></span>
                                     </span>
                                 </span>
                             </a>
+                            <span class="ui-icon ui-icon-arrow-r"></span>
                             <div class="ui-collapsible-content ui-collapsible-content-collapsed" aria-hidden="true">
                                 <div class="detail"></div>
                             </div>
                         </h1>
-                    </div>
+                    </div>-->
                 </t>
             </div>
             </t>
@@ -322,5 +313,4 @@
         </form>
     </div>
 </t>
-
 </templates>