From 534b8da99d34e83b1395406ffd6a1375478d156f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9rome=20Maes?= <jem@openerp.com>
Date: Wed, 6 May 2015 15:08:41 +0200
Subject: [PATCH] [IMP] web_planner, crm : prefix css classes to fit the future
 webclient conventions.

---
 addons/crm/web_planner_data.xml               | 113 ++++----
 .../web_planner/static/src/js/web_planner.js  |  48 ++--
 .../static/src/less/web_planner.less          | 249 ++++++++----------
 .../static/src/xml/web_planner.xml            |  14 +-
 4 files changed, 206 insertions(+), 218 deletions(-)

diff --git a/addons/crm/web_planner_data.xml b/addons/crm/web_planner_data.xml
index 2e21a1ae4c6..965a6ae2677 100644
--- a/addons/crm/web_planner_data.xml
+++ b/addons/crm/web_planner_data.xml
@@ -5,7 +5,7 @@
     <template id="crm_planner">
 
         <!--CRM Planner Page-->
-        <div class="row oe_planner">
+        <div class="row o_planner">
 
             <!--Mobile Planner Menu-->
             <div class="visible-xs-block col-xs-4">
@@ -86,7 +86,7 @@
                 </div>
             </div>
 
-            <div class="col-sm-4 col-md-3 hidden-xs side">
+            <div class="col-sm-4 col-md-3 hidden-xs o_planner_sidebar">
                 <!--Planner Menu-->
                 <ul class="nav nav-pills nav-stacked">
 
@@ -164,9 +164,9 @@
             </div>
 
             <!--Planner Pages-->
-            <div class="pages col-sm-8 col-md-9 col-xs-12">
+            <div class="o_planner_pages col-sm-8 col-md-9 col-xs-12">
 
-                <div id="planner_page1" class="planner-page show">
+                <div id="planner_page1" class="o_planner_page show">
                     <h1>Welcome.</h1>
                     <i><p>
                       Congratulations on taking the leap to boost your sales
@@ -199,7 +199,7 @@
                     </div>
                 </div>
 
-                <div id="planner_page2" class="planner-page">
+                <div id="planner_page2" class="o_planner_page">
                     <h1>Your expectations</h1>
                     <p class="text-muted">
                         What are your sales objectives? What challenges are you
@@ -207,15 +207,15 @@
                         of a successful implementation.
                     </p>
                     <div class="row">
-                        <div class="notebook-container col-md-12 col-xs-12">
-                            <ul class="notebook">
-                                <div class="lines"></div>
-                                <li class="header">
+                        <div class="o_planner_notebook_container col-md-12 col-xs-12">
+                            <ul class="o_planner_notebook">
+                                <div class="o_planner_notebook_line_separator"></div>
+                                <li class="o_planner_notebook_header">
                                     <h5><strong>Sales objectives</strong> by priority:</h5>
-                                    <a class="pull-right" data-toggle="collapse" href=".collapseOne">
+                                    <a class="pull-right" data-toggle="collapse" href="#o_planner_page2_help">
                                         <i class="fa fa-question-circle"></i>
                                     </a>
-                                    <div class="collapseOne collapse help">
+                                    <div id="o_planner_page2_help" class="collapse">
                                         <h5>Examples</h5>
                                         <ul>
                                             <li> Better visibility on team activities</li>
@@ -243,7 +243,7 @@
                     </div>
                 </div>
 
-                <div id="planner_page3" class="planner-page">
+                <div id="planner_page3" class="o_planner_page">
                     <h1>Your KPIs</h1>
                     <p class="text-muted">
                         What are the main KPIs you need to track the sales
@@ -252,15 +252,15 @@
                     </p>
 
                     <div class="row">
-                        <div class="notebook-container col-md-12">
-                            <ul class="notebook">
-                                <div class="lines"></div>
-                                <li class="header">
+                        <div class="o_planner_notebook_container col-md-12">
+                            <ul class="o_planner_notebook">
+                                <div class="o_planner_notebook_line_separator"></div>
+                                <li class="o_planner_notebook_header">
                                     <h5><strong>Your Main KPIs:</strong></h5>
-                                    <a class="pull-right" data-toggle="collapse" href=".collapseKPI">
+                                    <a class="pull-right" data-toggle="collapse" href="#o_planner_page3_help">
                                         <i class="fa fa-question-circle"></i>
                                     </a>
-                                    <div class="collapse collapseKPI help">
+                                    <div id="o_planner_page3_help" class="collapse">
                                         <h5>Examples</h5>
                                         <ul>
                                             <li> Sales Forecasts (month+1)</li>
@@ -281,7 +281,7 @@
                     </div>
                 </div>
 
-                <div id="planner_page4" class="planner-page">
+                <div id="planner_page4" class="o_planner_page">
                     <h1>Your Pipeline</h1>
                     <p class="text-muted">
                         Systematic organization is what makes the difference
@@ -293,9 +293,9 @@
                         performance.
                     </p>
                     <div class="row">
-                        <div class="notebook-container col-md-12">
-                            <ul class="notebook columns">
-                                <li class="row header">
+                        <div class="o_planner_notebook_container col-md-12">
+                            <ul class="o_planner_notebook">
+                                <li class="row o_planner_notebook_header">
                                     <div class="col-xs-12 col-md-4 col-md-push-8 fa fa-lightbulb-o">
                                         <select id="input_element_pipeline">
                                             <option value="odoo_default">Odoo Default</option>
@@ -340,7 +340,7 @@
                                     <input class="col-xs-12 col-sm-4" id="input_element_stage_6" type="text"/>
                                     <textarea class="col-xs-12 col-sm-7 col-sm-offset-1" id="input_element_stage_13" type="text"/>
                                 </li>
-                                <div class="lines"></div>
+                                <div class="o_planner_notebook_line_separator"></div>
                             </ul>
                         </div>
                     </div>
@@ -375,7 +375,7 @@
                     </table>
                     <div class="row">
                         <div class="col-md-8 col-xs-12 ">
-                            <div class="well well-lg footer-well">
+                            <div class="well well-lg">
                                 <strong>Recommended actions:</strong>
                                 <li>
                                     <a t-att-href="prepare_backend_url(
@@ -390,7 +390,7 @@
                             </div>
                         </div>
                         <div class="col-md-4 col-xs-12">
-                            <div class="well well-lg footer-well">
+                            <div class="well well-lg">
                                 <strong>Need help to structure your sale process ?</strong><br/>
                                 <a href="https://www.odoo.com/page/live-chat" target="_blank" style="margin-right:10px"><span class="fa fa-comment-o"/> Live Chat on</a><br/>
                                 <a href="mailto:info@odoo.com?subject=Sales%20Planner" target="_blank"><span class="fa fa-envelope-o"/> Email Our CRM Expert</a>
@@ -399,7 +399,7 @@
                     </div>
                 </div>
 
-                <div id="planner_page5" class="planner-page">
+                <div id="planner_page5" class="o_planner_page">
                     <h1>Customizations</h1>
                     <p class="text-muted">
                         Every business is different. Fortunatelly, Odoo allows
@@ -467,14 +467,14 @@
                         </div>
                         <div class="row">
                             <div class="col-md-8 col-xs-12">
-                                <div class="well well-lg footer-well">
+                                <div class="well well-lg">
                                     <span><strong>Contact us to customize your application:</strong><br/>
                                     We have special options for unlimited number of customizations !
                                     </span>
                                 </div>
                             </div>
                             <div class="col-md-4 col-xs-12">
-                                <div class="well well-lg footer-well">
+                                <div class="well well-lg">
                                     <strong>Contact us now:</strong><br/>
                                     <a href="https://www.odoo.com/page/live-chat" target="_blank" style="margin-right:10px"><span class="fa fa-comment-o"/> Live Chat on</a><br/>
                                     <a href="mailto:info@odoo.com?subject=Sales%20Planner" target="_blank"><span class="fa fa-envelope-o"/> Email Our CRM Expert</a>
@@ -484,14 +484,16 @@
                     </section>
                 </div>
 
-                <div id="planner_page6" class="planner-page">
+                <div id="planner_page6" class="o_planner_page">
                     <h1>Your Proposal</h1>
                     <p class="text-muted">
                         Odoo will help you create polished, professional quotations and contracts in minutes.
                         Tell us how you sell and we will tell you what
                         configuration will best fit your quotation process.
                     </p>
-                    <t t-if="not is_module_installed('sale')"><span class="text-muted">Note: To use those features, you need to install the <a t-att-href="prepare_backend_url('base.open_module_tree', 'form', 'sale')">Sales Management module.</a></span></t>
+                    <t t-if="not is_module_installed('sale')">
+                        <span class="text-muted">Note: To use those features, you need to install the <a t-att-href="prepare_backend_url('base.open_module_tree', 'form', 'sale')">Sales Management module.</a></span>
+                    </t>
                     <h4>What <strong>kind of proposals</strong> do you usually send to your customers ?</h4>
                     <section>
                         <div class="row">
@@ -541,9 +543,11 @@
                     </section>
                 </div>
 
-                <div id="planner_page7" class="planner-page">
+                <div id="planner_page7" class="o_planner_page">
                     <h1>Import Products</h1>
-                    <t t-if="not is_module_installed('product')"><span class="text-muted">Note: To use those features, you need to install the <a t-att-href="prepare_backend_url('base.open_module_tree', 'form', 'sale')">Sales Management.</a></span></t>
+                    <t t-if="not is_module_installed('product')">
+                        <span class="text-muted">Note: To use those features, you need to install the <a t-att-href="prepare_backend_url('base.open_module_tree', 'form', 'sale')">Sales Management.</a></span>
+                    </t>
                     <p>How do you want to <strong>import your products?</strong></p>
                     <div class="container-fluid">
                         <div class="row">
@@ -605,14 +609,14 @@
                     <div>
                         <div class="row">
                             <div class="col-md-8 col-xs-12">
-                                <div class="well well-lg footer-well">
+                                <div class="well well-lg">
                                     <span><strong>Need help to import your data ?</strong><br/>
                                     Odoo's importation service can handle the whole process for you.
                                     </span>
                                 </div>
                             </div>
                             <div class="col-md-4 col-xs-12">
-                                <div class="well well-lg footer-well">
+                                <div class="well well-lg">
                                     <strong>Contact us now:</strong><br/>
                                     <a href="https://www.odoo.com/page/live-chat" target="_blank" style="margin-right:10px">
                                         <span class="fa fa-comment-o"/> Live Chat on</a><br/>
@@ -624,7 +628,7 @@
                     </div>
                 </div>
 
-                <div id="planner_page8" class="planner-page">
+                <div id="planner_page8" class="o_planner_page">
                     <h1>Incoming Emails</h1>
                     <p class="text-muted">
                         Incoming email create leads automatically when a new prospect contacts you.
@@ -662,7 +666,7 @@
                                         <strong>Don't forget to change this address on:</strong><br/>
                                         <li>Your business cards</li>
                                         <li>Your document templates</li>
-                                        <li>Your LinkedIn or social media pages</li>
+                                        <li>Your LinkedIn or social media o_planner_pages</li>
                                         <li>Your website</li>
                                     </div>
                                 </div>
@@ -680,7 +684,7 @@
                     <br/>
                 </div>
 
-                <div id="planner_page10" class="planner-page">
+                <div id="planner_page10" class="o_planner_page">
                     <h1>Reporting</h1>
                     <h4><strong>Click on 'Reporting' in the main menu </strong>and generate statistics relevent to each profiles:</h4>
                     <section class="container-fluid">
@@ -756,7 +760,7 @@
                         </div>
                         <div class="row">
                             <div class="col-md-8 col-xs-12">
-                                <div class="well well-lg footer-well">
+                                <div class="well well-lg">
                                     <span><strong>We are here to help you:</strong>
                                     if you don't succeed in getting your favorite KPIs,
                                     contact us and we will help you create custom reports.
@@ -764,7 +768,7 @@
                                 </div>
                             </div>
                             <div class="col-md-4 col-xs-12">
-                                <div class="well well-lg footer-well">
+                                <div class="well well-lg">
                                     <span><strong>Contact us now:</strong></span><br/>
                                     <a href="#" target="_blank" style="margin-right:10px"><span class="fa fa-comment-o"/> Live Chat on</a><br/>
                                     <a href="mailto:info@odoo.com?subject=Sales%20Planner" target="_blank"><span class="fa fa-envelope-o"/> Email Our CRM Expert</a>
@@ -774,7 +778,7 @@
                     </div>
                 </div>
 
-                <div id="planner_page11" class="planner-page">
+                <div id="planner_page11" class="o_planner_page">
                     <h1>Your users</h1>
                     <h4 class="text-muted text-center">You're almost finished !</h4>
                     <section class="container-fluid">
@@ -795,13 +799,13 @@
                     </section>
                 </div>
 
-                <div id="planner_page12" class="planner-page">
+                <div id="planner_page12" class="o_planner_page">
                     <h1>Weekly meetings</h1>
                     <p class="text-muted">
                         Once your CRM is up and running, it’s time to boost your sales performance.
                         Start by focusing on continuous improvement.
                     </p>
-                    <div class="container-fluid paragraphs ">
+                    <div class="container-fluid o_planner_paragraphs">
                         <div class="row">
                             <div class="hidden-xs hidden-sm col-md-2 icon"><span  data-icon="&#xe075;" /></div>
                             <div class="col-xs-12 col-md-10">
@@ -850,7 +854,7 @@
                     </div>
                 </div>
 
-                <div id="planner_page13" class="planner-page">
+                <div id="planner_page13" class="o_planner_page">
                     <h1>Develop Sales Tools</h1>
                     <p>
                         The three main practices to develop a sales force are
@@ -862,7 +866,7 @@
                         continuous improvements of your sales teams.
                     </p>
 
-                    <div class="container-fluid paragraphs">
+                    <div class="container-fluid o_planner_paragraphs">
                         <div class="row">
                             <div class="col-sm-1 col-md-2 icon"><span  data-icon="&#xe087;" /></div>
                             <div class="col-sm-11 col-md-10">
@@ -925,7 +929,7 @@
                     </section>
                 </div>
 
-                <div id="planner_page15" class="planner-page">
+                <div id="planner_page15" class="o_planner_page">
                     <h1>Boost Lead</h1>
                     <p class="text-muted">
                         Odoo is the  only software in the world to fully integrate marketing with the whole of your sales
@@ -935,12 +939,12 @@
                         <strong>To boost your lead acquisition machine,</strong> you should have a look at our marketing apps:
                     </h4>
                     <section>
-                        <div class="row">
+                        <div class="row o_planner_row_apps">
                             <div class="text-center col-md-4 col-xs-6">
                                 <span class="fa fa-envelope fa-4x"></span>
                                 <h3><strong>Mass mailing</strong></h3>
                                 <p>Design efficient email campaigns. Send, convert and track your success</p>
-                                <a t-att-href="prepare_backend_url('base.open_module_tree', 'form', 'mass_mailing')" class="btn odoo_purple btn_install">
+                                <a t-att-href="prepare_backend_url('base.open_module_tree', 'form', 'mass_mailing')" class="btn odoo_purple">
                                     <span class="fa fa-arrow-circle-o-down"/> Install Mailing</a>
                             </div>
                             <div class="text-center col-md-4 col-xs-6">
@@ -948,7 +952,7 @@
                                 <h3><strong>Live Chat</strong></h3>
                                 <p>Engage directly with your website visitors to attract leads and boost online sales.</p>
                                 <a t-att-href="prepare_backend_url('base.open_module_tree', 'form', 'im_livechat')"
-                                    class="btn odoo_purple btn_install">
+                                    class="btn odoo_purple">
                                     <span class="fa fa-arrow-circle-o-down"/> Install Live Chat</a>
                             </div>
                             <div class="text-center col-md-4 col-xs-6">
@@ -956,16 +960,15 @@
                                 <h3><strong>Survey</strong></h3>
                                 <p>Gain high quality insight from surveys, a great way to engage with prospects</p>
                                 <a t-att-href="prepare_backend_url('base.open_module_tree', 'form', 'survey')"
-                                    class="btn odoo_purple btn_install">
+                                    class="btn odoo_purple">
                                     <span class="fa fa-arrow-circle-o-down"/> Install Surveys</a>
                             </div>
-                            <div class="clearfix hidden-xs"></div>
                             <div class="text-center col-md-4 col-xs-6">
                                 <span class="fa fa-home fa-4x"></span>
                                 <h3><strong>Website Builder</strong></h3>
                                 <p>Get an awesome website for your business. Fully customizable and SEO friendly.</p>
                                 <a t-att-href="prepare_backend_url('base.open_module_tree', 'form', 'website')"
-                                    class="btn odoo_purple btn_install">
+                                    class="btn odoo_purple">
                                     <span class="fa fa-arrow-circle-o-down"/> Install Website Builder</a>
                             </div>
                             <div class="text-center col-md-4 col-xs-6">
@@ -973,7 +976,7 @@
                                 <h3><strong>Events</strong></h3>
                                 <p>Create sleek and attractive event pages. Sell online and organize on site.</p>
                                 <a t-att-href="prepare_backend_url('base.open_module_tree', 'form', 'event')"
-                                    class="btn odoo_purple btn_install">
+                                    class="btn odoo_purple">
                                     <span class="fa fa-arrow-circle-o-down"/> Install Events</a>
                             </div>
                             <div class="text-center col-md-4 col-xs-6">
@@ -981,7 +984,7 @@
                                 <h3><strong>e-Commerce</strong></h3>
                                 <p>Boost your online sales with sleek product pages.</p>
                                 <a t-att-href="prepare_backend_url('base.open_module_tree', 'form', 'website_sale')"
-                                    class="btn odoo_purple btn_install">
+                                    class="btn odoo_purple">
                                     <span class="fa fa-arrow-circle-o-down"/> Install e-Commerce</a>
                             </div>
 
@@ -989,8 +992,8 @@
                     </section>
                 </div>
 
-                <div id="planner_page16" class="planner-page text-centered">
-                    <h1 class="text-center trophy" data-icon="&#xe006;" />
+                <div id="planner_page16" class="o_planner_page text-centered">
+                    <h1 class="text-center o_planner_trophy" data-icon="&#xe006;" />
                     <div class="text-center">
                         <h1>Congratulations, you're done !</h1>
                         <h3>We hope this process helped you improve your sales strategy.</h3>
diff --git a/addons/web_planner/static/src/js/web_planner.js b/addons/web_planner/static/src/js/web_planner.js
index 505d42f7680..c591bc33338 100644
--- a/addons/web_planner/static/src/js/web_planner.js
+++ b/addons/web_planner/static/src/js/web_planner.js
@@ -14,7 +14,7 @@ var bus = core.bus;
 var PlannerLauncher = Widget.extend({
     template: "PlannerLauncher",
     events: {
-        'click .oe_planner_progress': 'toggle_dialog'
+        'click .o_planner_progress': 'toggle_dialog'
     },
     init: function(parent) {
         this._super(parent);
@@ -71,7 +71,7 @@ var PlannerLauncher = Widget.extend({
         this.planner = planner;
         this.dialog && this.dialog.destroy();
         this.dialog = new PlannerDialog(this, planner);
-        this.$(".oe_planner_progress").tooltip({html: true, title: this.planner.tooltip_planner, placement: 'bottom', delay: {'show': 500}});
+        this.$(".o_planner_progress").tooltip({html: true, title: this.planner.tooltip_planner, placement: 'bottom', delay: {'show': 500}});
         this.dialog.on("planner_progress_changed", this, function(percent){
             self.update_parent_progress_bar(percent);
         });
@@ -92,16 +92,16 @@ var PlannerLauncher = Widget.extend({
     calling the 'render' method (server side), then footer are appended to every pages (client side). Data are saved when a 'mark button' is clicked.
     Some element of the template MUST respect naming convention :
         * Input elements (select, textarea, radio, ...) MUST HAVE an 'id' as 'input_element_#####', where ##### is a string.
-        * Page div MUST HAVE the class "planner-page" and an 'id' as 'planner_page#', where # is ideally a
+        * Page div MUST HAVE the class "o_planner_page" and an 'id' as 'planner_page#', where # is ideally a
           number. !!! The declaration order of the page are important. The 'id' number is NOT the sequence order.
         * Menu item MUST HAVE an href attribute containing the id of the page they are referencing.
 */
 var PlannerDialog = Widget.extend({
     template: "PlannerDialog",
     events: {
-        'click .oe_planner div[id^="planner_page"] a[href^="#planner_page"]': 'change_page',
-        'click .oe_planner li a[href^="#planner_page"]': 'change_page',
-        'click .oe_planner div[id^="planner_page"] button[data-pageid^="planner_page"]': 'mark_as_done',
+        'click .o_planner div[id^="planner_page"] a[href^="#planner_page"]': 'change_page',
+        'click .o_planner li a[href^="#planner_page"]': 'change_page',
+        'click .o_planner div[id^="planner_page"] button[data-pageid^="planner_page"]': 'mark_as_done',
         'hidden.bs.modal': 'on_modal_hide',
         'shown.bs.modal': 'on_modal_show',
     },
@@ -160,14 +160,14 @@ var PlannerDialog = Widget.extend({
     },
     update_ui_progress_bar: function(percent) {
         this.$(".progress-bar").css('width', percent+"%");
-        this.$(".progress_col").find('span.counter').text(percent+"%");
+        this.$(".o_planner_progress_col").find('.o_planner_progress_counter').text(percent+"%");
     },
     add_pages_footer: function() {
         var self = this;
         //find all the pages and append footer to each pages
-        _.each(self.$('.oe_planner div[id^="planner_page"]'), function(element) {
+        _.each(self.$('.o_planner div[id^="planner_page"]'), function(element) {
             var $el = $(element);
-            var next_page_name = self.$(".oe_planner .side li a[href='#"+$el.next().attr('id')+"']").text() || ' Finished!';
+            var next_page_name = self.$(".o_planner .o_planner_sidebar li a[href='#"+$el.next().attr('id')+"']").text() || ' Finished!';
             var footer_template = QWeb.render("PlannerFooter", {
                 'next_page_name': next_page_name,
                 'next_page_id': $el.next().attr('id'),
@@ -180,10 +180,10 @@ var PlannerDialog = Widget.extend({
     },
     resize_dialog: function() {
         var winH  = $(window).height();
-        var $modal = this.$('.planner-dialog');
+        var $modal = this.$('.o_planner_dialog');
         $modal.height(winH/1.1);
-        this.$('.pages').height($modal.height() - 60);
-        this.$('.side').height($modal.height() - 75);
+        this.$('.o_planner_pages').height($modal.height() - 60);
+        this.$('.o_planner_sidebar').height($modal.height() - 75);
     },
     // page switching
     change_page: function(ev) {
@@ -192,18 +192,18 @@ var PlannerDialog = Widget.extend({
         this._switch_page(page_id);
     },
     _switch_page: function(page_id) {
-        this.$(".oe_planner li a[href^='#planner_page']").parent().removeClass('active');
-        this.$(".oe_planner li a[href=#"+page_id+"]").parent().addClass('active');
-        this.$(".oe_planner div[id^='planner_page']").removeClass('show');
-        this.$(".oe_planner div[id="+page_id+"]").addClass('show');
-        this.$(".oe_planner .pages").scrollTop("0");
+        this.$(".o_planner li a[href^='#planner_page']").parent().removeClass('active');
+        this.$(".o_planner li a[href=#"+page_id+"]").parent().addClass('active');
+        this.$(".o_planner div[id^='planner_page']").removeClass('show');
+        this.$(".o_planner div[id="+page_id+"]").addClass('show');
+        this.$(".o_planner .o_planner_pages").scrollTop("0");
         this.planner.data['last_open_page'] = page_id;
         session.set_cookie(this.cookie_name, page_id, 8*60*60); // create cookie for 8h
     },
     // planner data functions
     _get_values: function(page_id){
         // if no page_id, take the complete planner
-        var base_elem = page_id ? this.$(".oe_planner div[id="+page_id+"]") : this.$(".oe_planner div[id^='planner_page']");
+        var base_elem = page_id ? this.$(".o_planner div[id="+page_id+"]") : this.$(".o_planner div[id^='planner_page']");
         var values = {};
         // get the selector for all the input and mark_button
         // only INPUT (select, textearea, input, checkbox and radio), and BUTTON (.mark_button#) are observed
@@ -239,7 +239,7 @@ var PlannerDialog = Widget.extend({
             if (elem.prop("tagName") == 'BUTTON'){
                 if(val == 'marked'){
                     elem.addClass('fa-check-square-o btn-default').removeClass('fa-square-o btn-primary');
-                    self.$(".oe_planner li a[href=#"+elem.data('pageid')+"] span").addClass('fa-check');
+                    self.$(".o_planner li a[href=#"+elem.data('pageid')+"] span").addClass('fa-check');
                 }
             }
             if (elem.prop("tagName") == 'INPUT' || elem.prop("tagName") == 'TEXTAREA'){
@@ -259,8 +259,8 @@ var PlannerDialog = Widget.extend({
         var vals = this._get_values(page_id);
         this.planner.data = _.extend(this.planner.data, vals);
         // re compute the progress percentage
-        var mark_btn = this.$(".oe_planner button[id^='mark_button']");
-        var marked_btn = this.$(".oe_planner button[id^='mark_button'].fa-check-square-o");
+        var mark_btn = this.$(".o_planner button[id^='mark_button']");
+        var marked_btn = this.$(".o_planner button[id^='mark_button'].fa-check-square-o");
         var percent = parseInt((marked_btn.length+1) / (mark_btn.length+1) * 100);
         this.set('progress', percent);
         this.planner.progress = percent;
@@ -275,10 +275,10 @@ var PlannerDialog = Widget.extend({
         var self = this;
         var btn = $(ev.currentTarget);
         var page_id = btn.attr('data-pageid');
-        var active_menu = self.$(".oe_planner li a[href=#"+page_id+"] span");
-        var active_page = self.$(".oe_planner div[id^='planner_page'].planner-page.show");
+        var active_menu = self.$(".o_planner li a[href=#"+page_id+"] span");
+        var active_page = self.$(".o_planner div[id^='planner_page'].o_planner_page.show");
 
-        var next_button = self.$(".oe_planner a[data-parent="+page_id+"]");
+        var next_button = self.$(".o_planner a[data-parent="+page_id+"]");
         if (!btn.hasClass('fa-check-square-o')) {
             active_menu.addClass('fa-check');
             btn.addClass('fa-check-square-o btn-default').removeClass('fa-square-o btn-primary');
diff --git a/addons/web_planner/static/src/less/web_planner.less b/addons/web_planner/static/src/less/web_planner.less
index 417136ad183..d16bde12f7c 100644
--- a/addons/web_planner/static/src/less/web_planner.less
+++ b/addons/web_planner/static/src/less/web_planner.less
@@ -176,14 +176,14 @@
 
 /**************** MENU PROGRESS BAR ****************/
 #oe_main_menu_navbar.navbar {
-    .oe_planner_systray {
+    .o_planner_systray {
         width: 100px;
         height: 13px;
         margin: 10px 0 0 0;
-        div.oe_planner_progress {
+        div.o_planner_progress {
             cursor: pointer;
         }
-        .oe_planner_progress {
+        .o_planner_progress {
             div.progress {
                 height: 13px;
             }
@@ -225,13 +225,13 @@
         color: #fff;
     }
 
-    .planner-page{
+    .o_planner_page{
         display : none;
     }
-    .planner-dialog {
+    .o_planner_dialog {
         width: 85%;
         max-width: 1024px;
-        overflow: hidden;
+        //overflow: hidden;
         margin-left: auto;
         margin-right: auto;
 
@@ -252,13 +252,13 @@
             background: #f3f3f3;
         }
         .modal-body {
-            overflow: hidden;
+            overflow-x: hidden;
             max-height: inherit;
         }
-        .row.oe_planner {
+        .row.o_planner {
             padding: 0 15px;
         }
-        .planner_footer {
+        .o_planner_footer {
             padding: 0;
             height: auto;
             overflow-y: visible;
@@ -339,8 +339,40 @@
                 opacity: 1;
             }
         }
-         // MARKED ANIMATION
-        .planner-page.marked:after {
+        // PROGRESS
+        .o_planner_progress_container {
+            padding: 0;
+            .o_planner_progress_col {
+                border-right: 1px solid #E5E5E5;
+                background: #f7f7f7;
+                padding: 10px 12px 0 12px;
+                i.fa{
+                    font-size: 1.7em;
+                    padding-left: 0;
+                    margin-right: 0.2em;
+                    margin-top: 0.1em;
+                    color: #929292;
+                }
+                .o_planner_progress_counter {
+                    padding: 6px 0 0 8px;
+                    font-weight: bold;
+                    color: #727272;
+                }
+                .progress {
+                    background-color: #C4C4C4;
+                    height: 30px;
+                    padding: 3px;
+                }
+                .progress-bar {
+                    background: #A24689;
+                    border-radius: 4px;
+                    height: 95%;
+                    box-shadow: 0 1px 0 #7A3067;
+                }
+            }
+        }
+        // MARKED ANIMATION
+        .o_planner_page.marked:after {
             position: absolute;
             left: 0;
             top: 0;
@@ -371,39 +403,6 @@
             -ms-transform-origin: 50% 50%;
             -ms-animation-fill-mode:forwards; /*IE 10+*/
         }
-        // PROGRESS
-        .progress_container {
-            padding: 0;
-
-            .progress_col {
-                border-right: 1px solid #E5E5E5;
-                background: #f7f7f7;
-                padding: 10px 12px 0 12px;
-                i.fa{
-                    font-size: 1.7em;
-                    padding-left: 0;
-                    margin-right: 0.2em;
-                    margin-top: 0.1em;
-                    color: #929292;
-                }
-                .counter {
-                    padding: 6px 0 0 8px;
-                    font-weight: bold;
-                    color: #727272;
-                }
-                .progress {
-                    background-color: #C4C4C4;
-                    height: 30px;
-                    padding: 3px;
-                }
-                .progress-bar {
-                    background: #A24689;
-                    border-radius: 4px;
-                    height: 95%;
-                    box-shadow: 0 1px 0 #7A3067;
-                }
-            }
-        }
         // MENU MOBILE
         .dropdown.mobile {
             padding: 10px 12px 0 0px;
@@ -430,7 +429,7 @@
                 margin-right: 5px;
             }
         }
-        .side {
+        .o_planner_sidebar {
             padding: 5px 5px 20px 10px;
             border-right: 1px solid #E5E5E5;
             background: #f7f7f7;
@@ -469,95 +468,76 @@
             }
         }
         //NOTEBOOK
-        .notebook-container {
+        .o_planner_notebook_container {
             margin: 20px 0;
-        }
-        .notebook {
-            color: #555;
-            font-size: 22px;
-            padding: 0 !important;
-            font-family: courier, monospace;
-            border: 1px solid #faebcc;
-            color: #8a6d3b;
-            position: relative;
-            background-color: #fcf8e3;
 
-            textarea,input {
-                background: #fcf8e3;
-                border: none;
-                font-size: 15px;
-                line-height: 17px;
-            }
-            > li {
-                list-style: none;
-                border-bottom: 1px dashed #C1D6DA;
-                padding: 10px 10px 5px 55px;
-                text-transform: capitalize;
-                margin: 0;
-                span {
-                    position: absolute;
-                    left: 9px;
-                    color: rgb(199, 180, 146);
-                    font-size: 20px;
-                    font-weight: bold;
+            .o_planner_notebook {
+                color: #555;
+                padding: 0 !important;
+                font-family: courier, monospace;
+                border: 1px solid #faebcc;
+                color: #8a6d3b;
+                position: relative;
+                background-color: #fcf8e3;
+
+                textarea,input {
+                    background: #fcf8e3;
+                    border: none;
                 }
-            }
-            > li:last-child { border-bottom: 0;}
-
-            li.header {
-                div.dropdown { display: inline;float:right; }
-                span {position: relative; left: 0;}
-                a {
-                    color: #C4A87A;
-                    position: absolute;
-                    top: 13px;
-                    right: 13px;
-                    &:hover {
-                        text-decoration: none;
-                        color: #9C855D;
+                > li {
+                    list-style: none;
+                    border-bottom: 1px dashed #C1D6DA;
+                    padding: 10px 10px 5px 55px;
+                    text-transform: capitalize;
+                    margin: 0;
+                    span {
+                        position: absolute;
+                        left: 9px;
+                        color: rgb(199, 180, 146);
+                        font-size: 20px;
+                        font-weight: bold;
                     }
                 }
-                select {
-                    margin-bottom: 10px;
-                    font-family: sans-serif;
-                    font-size: 17px;
-                    border: none;
-                    background: #F5E7CF;
+                > li:last-child { border-bottom: 0;}
+
+                .o_planner_notebook_header {
+                    div.dropdown { display: inline;float:right; }
+                    a {
+                        color: #C4A87A;
+                        position: absolute;
+                        top: 13px;
+                        right: 13px;
+                        &:hover {
+                            text-decoration: none;
+                            color: #9C855D;
+                        }
+                    }
+                    select {
+                        margin-bottom: 10px;
+                        font-family: sans-serif;
+                        font-size: 16px;
+                        border: none;
+                        background: #F5E7CF;
+                    }
                 }
-                .help{
-                    font-size: 14px;
-                    color: rgb(126, 95, 41);
-                    background: #fcf8e3;
-                    position: relative;
-                    box-shadow: inset 0 10px 10px -9px #A89E64;
-                    padding-top: 15px;
-                    li {font-style: italic;}
+                > li:not(.o_planner_notebook_header):hover {
+                    background-color: #F5EFD0;
+                }
+                .o_planner_notebook_line_separator {
+                    border-left: 1px solid #ffaa9f;
+                    border-right: 1px solid #ffaa9f;
+                    background: transparent;
+                    position: absolute;
+                    width: 3px;
+                    height: 100%;
+                    top: 0;
+                    left: 42px;
+                    border-bottom: 0;
+                    border-top: 0;
                 }
             }
-            > li:not(.header):hover {
-                background-color: #F5EFD0;
-                -webkit-transition: all 0.2s;
-                -moz-transition:    all 0.2s;
-                -ms-transition:     all 0.2s;
-                -o-transition:      all 0.2s;
-            }
-            .lines {
-                border-left: 1px solid #ffaa9f;
-                border-right: 1px solid #ffaa9f;
-                background: transparent;
-                position: absolute;
-                width: 3px;
-                height: 100%;
-                top: 0;
-                left: 42px;
-                border-bottom: 0;
-                border-top: 0;
-            }
         }
-        .notebook.columns {
-            textarea,input {margin-bottom: 1em;}
-        }
-        .trophy {
+        .o_planner_trophy {
             font-size: 11em;
             color: #A24689;
             margin-top: .5em;
@@ -568,12 +548,11 @@
             -webkit-animation-fill-mode: both;
             animation-fill-mode: both;
         }
-        .alert-info.info_icon span.fa { color: #8ABCD4; }
         .info_icon {
             position: relative;
             padding-left: 5em;
             min-height: 6em;
-            span.fa {
+            .fa {
                 position: absolute;
                 font-size: 5em;
                 left: 0.2em;
@@ -581,7 +560,7 @@
             }
         }
     }
-    .pages {
+    .o_planner_pages {
         color: #444;
         margin-top:-60px;
         overflow-x: hidden;
@@ -602,12 +581,18 @@
         }
     }
     // PARAGRAPHS
-    .paragraphs .icon {
+    .o_planner_paragraphs .icon {
         text-align: center;
         font-size: 2em;
         margin: 1em auto .5em;
         color: #21b799;
     }
+    // INSTALL APP
+    .o_planner_row_apps{
+        .col-md-4{
+            margin-top: 20px;
+        }
+    }
 }
 
 // XS size
@@ -615,13 +600,13 @@
     #PlannerModal .pages {
         margin-top: 0px;
     }
-    #PlannerModal .counter {
+    #PlannerModal .o_planner_progress_counter {
         padding: 6px 0 0 5px;
     }
 }
 // SM size
 @media screen and (min-width: 769px) {
-    #PlannerModal .paragraphs {
+    #PlannerModal .o_planner_paragraphs {
         div.col-md-10 {
             margin-top:1em;
         }
@@ -634,7 +619,7 @@
 }
 // MD size
 @media screen and (min-width: 992px) {
-    #PlannerModal .paragraphs .icon {
+    #PlannerModal .o_planner_paragraphs .icon {
         font-size: 4em;
         margin: 0.3em auto .5em;
         span{
diff --git a/addons/web_planner/static/src/xml/web_planner.xml b/addons/web_planner/static/src/xml/web_planner.xml
index 5a64841c38d..11d06959a85 100644
--- a/addons/web_planner/static/src/xml/web_planner.xml
+++ b/addons/web_planner/static/src/xml/web_planner.xml
@@ -2,8 +2,8 @@
 
 <templates id="template">
     <t t-name="PlannerLauncher">
-       <li class="oe_topbar_item oe_planner_systray">
-            <div class="oe_planner_progress">
+       <li class="oe_topbar_item o_planner_systray">
+            <div class="o_planner_progress">
                 <span class="fa fa-question-circle pull-left" style="color:white;"/>
                 <div class="progress">
                     <div class="progress-bar" t-attf-style="width:0%;">
@@ -14,7 +14,7 @@
     </t>
 
     <t t-name="PlannerFooter">
-        <div class="planner_footer col-sm-8 col-md-9 col-xs-12 hidden-print">
+        <div class="o_planner_footer col-sm-8 col-md-9 col-xs-12 hidden-print">
             <span class="shadow" />
 
             <div class="col-xs-6 text-left mark-block">
@@ -40,18 +40,18 @@
     <t t-name="PlannerDialog">
         <div>
             <div class="modal fade odoo_colors" id="PlannerModal" tabindex="-1" role="dialog" aria-labelledby="PlannerModalLabel" aria-hidden="true">
-                <div class="modal-dialog planner-dialog">
+                <div class="modal-dialog o_planner_dialog">
                     <div class="modal-content">
                         <div class="modal-body">
                             <button type="button" class="close" data-dismiss="modal"><i class="fa fa-times"></i></button>
                             <div>
-                                <div class="col-sm-12 col-xs-7 progress_container">
-                                    <div class="col-sm-4 col-md-3 col-xs-12 progress_col">
+                                <div class="col-sm-12 col-xs-7 o_planner_progress_container">
+                                    <div class="col-sm-4 col-md-3 col-xs-12 o_planner_progress_col">
                                         <i class="fa fa-question-circle col-xs-1"></i>
                                         <div class="progress col-xs-9">
                                             <div class="progress-bar" t-attf-style="width:0%;"></div>
                                         </div>
-                                        <span class="counter col-xs-1"></span>
+                                        <span class="o_planner_progress_counter col-xs-1"></span>
                                     </div>
                                 </div>
                                 <div class="content_page"/>