From e56bdb731d90feaa41c218f529d331463980e293 Mon Sep 17 00:00:00 2001
From: Aaron Bohy <aab@odoo.com>
Date: Fri, 24 Jul 2015 16:12:11 +0200
Subject: [PATCH] [IMP] base_import: ControlPanelMixin and new design
 compatibility

- Use the ControlPanelMixin in the Import view;
- Adapt the stylesheet to fit with both community and enterprise editions;
- Convert the css into less, use mixins and variables defined in web;
- Return the reload() deferred in the on_reverse_breadcrumb callback so that the
  previous action waits to be properly reloaded before being shown.
---
 addons/base_import/static/src/css/import.css  | 193 ------------------
 addons/base_import/static/src/js/import.js    |  49 +++--
 .../base_import/static/src/less/import.less   | 137 +++++++++++++
 addons/base_import/static/src/xml/import.xml  |  74 ++++---
 addons/base_import/views/base_import.xml      |   2 +-
 5 files changed, 206 insertions(+), 249 deletions(-)
 delete mode 100644 addons/base_import/static/src/css/import.css
 create mode 100644 addons/base_import/static/src/less/import.less

diff --git a/addons/base_import/static/src/css/import.css b/addons/base_import/static/src/css/import.css
deleted file mode 100644
index cdea7a7b58b..00000000000
--- a/addons/base_import/static/src/css/import.css
+++ /dev/null
@@ -1,193 +0,0 @@
-.oe_import {
-    height: 100%;
-    overflow: auto;
-}
-
-.oe_import > p {
-    margin-left: 8px;
-    margin-right: 8px;
-    margin-top: 13px; /* Customize space according bootstrap3 */
-    text-align: justify
-}
-
-.oe_import h2 {
-    margin-top: 0;
-    margin-bottom: 5px;
-    font-size: 1.5em; /* Customize according bootstrap3 */
-}
-
-.oe_padding {
-    padding: 13px;
-}
-/* ----------- IMPORT BOX ----------- */
-
-.oe_import .oe_import_box{
-    margin: 16px; 
-    padding: 16px;
-    background: #F0EEEE;
-    border-radius: 3px;
-    border: solid 1px #dddddd;
-    width: 600px;
-}
-/* Customize according bootstrap3 */
-.oe_import .oe_import_box label{
-    font-weight: normal;
-}
-.oe_import .oe_import_box .oe_import_file {
-    display: inline-block;
-}
-/* End of Customize */
-.oe_import .oe_import_toggle{
-    margin-top: 8px;
-}
-.oe_import .oe_import_options{
-    margin-top: 8px;
-}
-.oe_import .oe_import_options input{
-    width: 150px;
-}
-
-.oe_import a.oe_import_toggle {
-    display: block;
-}
-.oe_import a.oe_import_toggle:before {
-    content: '+'
-}
-
-.oe_import .oe_import_options p {
-    margin: 0 0 -7px 0; /* Customize margin-bottom of <p> according bootstrap3 */
-    padding: 0;
-}
-.oe_import .oe_import_options label {
-    display: inline-block;
-    width: 100px;
-    height:32px;
-    line-height:32px;
-    text-align: right;
-}
-
-/* ----------- INITIAL SETUP ------------ */
-
-.openerp .oe_list_buttons.oe_editing .o_list_button_import {
-    display: none;
-}
-
-.oe_import dd,
-.oe_import .oe_import_toggled,
-.oe_import .oe_import_grid,
-.oe_import .oe_import_error_report,
-.oe_import .oe_import_with_file,
-.oe_import .oe_import_noheaders,
-.oe_import .oe_import_report_more {
-    display: none;
-}
-/* Customize dd and label according bootstrap3 */ 
-.oe_import dd {
-    -webkit-margin-start: 40px;
-}
-.oe_import .oe_import_with_file label {
-    font-weight: normal;
-}
-/* End of customize */
-
-.oe_import.oe_import_preview .oe_import_grid {
-    display: table;
-}
-.oe_import.oe_import_error .oe_import_error_report,
-.oe_import.oe_import_with_file .oe_import_with_file,
-.oe_import.oe_import_noheaders .oe_import_noheaders,
-.oe_import .oe_import_report_showmore .oe_import_report_more {
-    display: block;
-}
-
-.oe_import .oe_import_noheaders {
-    color: #888;
-}
-
-
-.oe_import_selector ul,
-.oe_import_selector li {
-    margin: 0; padding: 0;
-}
-
-/* ------------- ERRORS AND WARNINGS REPORT ------------ */
-
-.oe_import .oe_import_error_report ul{
-    padding-left: 16px;
-}
-.oe_import .oe_import_report {
-    margin-right: 16px;
-    padding: 4px;
-    list-style: none;
-    border-bottom: solid 1px rgba(0,0,0,0.05);
-}
-.oe_import .oe_import_report:first-child{
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
-}
-.oe_import .oe_import_report:last-child{
-    border-bottom-left-radius:3px;
-    border-bottom-right-radius:3px;
-    border-bottom: none;
-}
-.oe_import .oe_import_report_error {
-    background-color: #FFD9DB;
-    color: #AF5F5E;
-}
-.oe_import .oe_import_report_error:last-of-type{
-    border-bottom:none;
-}
-.oe_import .oe_import_report_warning {
-    background-color: #FEFFD9;
-    color: #918743;
-}
-.oe_import .oe_import_report_warning:last-of-type{
-    border-bottom:none;
-}
-.oe_import .oe_import_report_info {
-    background-color: #d3ffd3;
-}
-.oe_import .oe_import_report_info:last-of-type{
-    border-bottom:none;
-}
-
-/* ------------- THE CSV TABLE ------------ */
-
-.oe_import .oe_import_grid{
-    margin: 16px;
-    border-radius:3px;
-    border: solid 1px #909090;
-}
-.oe_import .oe_import_grid tr{
-    height:16px;
-}
-.oe_import .oe_import_grid tr.oe_import_grid-header:first-child{
-    height: 24px;
-    background: #909090;
-    color: white;
-}
-.oe_import .oe_import_grid tr:nth-child(odd){
-    background: rgba(0,0,0,0.05);
-}
-.oe_import .oe_import_grid td{
-    padding: 2px;
-    padding-left: 4px;
-}
-.oe_import .oe_import_grid tr.oe_import_grid-header td:not(:last-child){
-    border-right: 1px solid #707070;
-}
-.oe_import .oe_import_grid td:not(:last-child){
-    border-right: 1px solid #D0D0D0;
-}
-
-.oe_import .oe_import_error_report > p {
-    background: #efc9cb;
-}
-
-/* Field dropdown */
-.oe_import_selector {
-    font-size: 10px;
-    /* copied from base.sass:~148 */
-    font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
-}
-
diff --git a/addons/base_import/static/src/js/import.js b/addons/base_import/static/src/js/import.js
index b5686ce46f8..4854df76410 100644
--- a/addons/base_import/static/src/js/import.js
+++ b/addons/base_import/static/src/js/import.js
@@ -1,6 +1,7 @@
 odoo.define('base_import.import', function (require) {
 "use strict";
 
+var ControlPanelMixin = require('web.ControlPanelMixin');
 var core = require('web.core');
 var ListView = require('web.ListView');
 var Model = require('web.DataModel');
@@ -74,7 +75,7 @@ ListView.include({
                     }
                 }, {
                     on_reverse_breadcrumb: function () {
-                        self.reload();
+                        return self.reload();
                     },
                 });
                 return false;
@@ -84,7 +85,7 @@ ListView.include({
     }
 });
 
-var DataImport = Widget.extend({
+var DataImport = Widget.extend(ControlPanelMixin, {
     template: 'ImportView',
     opts: [
         {name: 'encoding', label: _lt("Encoding:"), value: 'utf-8'},
@@ -133,22 +134,17 @@ var DataImport = Widget.extend({
                 }
             }));
         },
-        // buttons
-        'click .oe_import_validate': 'validate',
-        'click .oe_import_import': 'import',
-        'click .oe_import_cancel': function (e) {
-            e.preventDefault();
-            this.exit();
-        }
     },
     init: function (parent, action) {
         this._super.apply(this, arguments);
+        this.action_manager = parent;
         this.res_model = action.params.model;
         this.parent_context = action.params.context || {};
         // import object id
         this.id = null;
         this.Import = new Model('base_import.import');
         this.session = session;
+        action.display_name = _t('Import a CSV File'); // Displayed in the breadcrumbs
     },
     start: function () {
         var self = this;
@@ -162,9 +158,26 @@ var DataImport = Widget.extend({
             }]).done(function (id) {
                 self.id = id;
                 self.$('input[name=import_id]').val(id);
+
+                self.render_buttons();
+                var status = {
+                    breadcrumbs: self.action_manager.get_breadcrumbs(),
+                    cp_content: {$buttons: self.$buttons},
+                };
+                self.update_control_panel(status);
             })
         );
     },
+    render_buttons: function() {
+        var self = this;
+        this.$buttons = $(QWeb.render("ImportView.buttons", this));
+        this.$buttons.filter('.o_import_validate').on('click', this.validate.bind(this));
+        this.$buttons.filter('.o_import_import').on('click', this.import.bind(this));
+        this.$buttons.filter('.o_import_cancel').on('click', function(e) {
+            e.preventDefault();
+            self.exit();
+        });
+    },
     setup_encoding_picker: function () {
         this.$('input.oe_import_encoding').select2({
             width: '160px',
@@ -219,7 +232,7 @@ var DataImport = Widget.extend({
 
     //- File & settings change section
     onfile_loaded: function () {
-        this.$('.oe_import_button, .oe_import_file_reload')
+        this.$buttons.filter('.o_import_button').add(this.$('.oe_import_file_reload'))
                 .prop('disabled', true);
         if (!this.$('input.oe_import_file').val()) { return; }
 
@@ -230,7 +243,7 @@ var DataImport = Widget.extend({
     },
     onpreviewing: function () {
         var self = this;
-        this.$('.oe_import_button, .oe_import_file_reload')
+        this.$buttons.filter('.o_import_button').add(this.$('.oe_import_file_reload'))
                 .prop('disabled', true);
         this.$el.addClass('oe_import_with_file');
         // TODO: test that write // succeeded?
@@ -253,12 +266,12 @@ var DataImport = Widget.extend({
                 QWeb.render('ImportView.preview.error', result));
     },
     onpreview_success: function (event, from, to, result) {
-        this.$('.oe_import_import').removeClass('oe_highlight');
-        this.$('.oe_import_validate').addClass('oe_highlight');
-        this.$('.oe_import_button, .oe_import_file_reload')
+        this.$buttons.filter('.o_import_import').removeClass('btn-primary');
+        this.$buttons.filter('.o_import_validate').addClass('btn-primary');
+        this.$buttons.filter('.o_import_button').add(this.$('.oe_import_file_reload'))
                 .prop('disabled', false);
         this.$el.addClass('oe_import_preview');
-        this.$('table').html(QWeb.render('ImportView.preview', result));
+        this.$('.oe_import_grid').html(QWeb.render('ImportView.preview', result));
 
         if (result.headers.length === 1) {
             this.$('.oe_import_options').show();
@@ -419,8 +432,10 @@ var DataImport = Widget.extend({
     },
     onresults: function (event, from, to, message) {
         var no_messages = _.isEmpty(message);
-        this.$('.oe_import_import').toggleClass('oe_highlight', no_messages);
-        this.$('.oe_import_validate').toggleClass('oe_highlight', !no_messages);
+        this.$buttons.filter('.o_import_import').toggleClass('btn-primary', no_messages);
+        this.$buttons.filter('.o_import_import').toggleClass('btn-default', !no_messages);
+        this.$buttons.filter('.o_import_validate').toggleClass('btn-primary', !no_messages);
+        this.$buttons.filter('.o_import_validate').toggleClass('btn-default', no_messages);
         if (no_messages) {
             message.push({
                 type: 'info',
diff --git a/addons/base_import/static/src/less/import.less b/addons/base_import/static/src/less/import.less
new file mode 100644
index 00000000000..ae4cba002f8
--- /dev/null
+++ b/addons/base_import/static/src/less/import.less
@@ -0,0 +1,137 @@
+.oe_import {
+    .o-webclient-padding(@top: 8px);
+    background-color: white;
+    overflow: auto;
+    position: absolute; // Needed for chrome
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    @media (max-width: @screen-xs-max) {
+        position: static;
+    }
+
+    > p {
+        text-align: justify
+    }
+    h2 {
+        margin-top: 0;
+        font-size: large; // override h2 font-size which is too large
+    }
+    .oe_padding {
+        padding: 13px 0;
+    }
+
+    .oe_import_box {
+        padding: 16px;
+        background: #F0EEEE;
+        border-radius: @border-radius-base;
+        border: solid 1px #dddddd;
+        label {
+            font-weight: normal;
+        }
+        .oe_import_file {
+            display: inline-block;
+        }
+    }
+
+    .oe_import_toggle {
+        margin-top: 8px;
+    }
+    a.oe_import_toggle {
+        display: block;
+        &:before {
+            content: '+'
+        }
+    }
+    .oe_import_options {
+        margin-top: 8px;
+        p {
+            margin: 0;
+        }
+        label {
+            width: 100px;
+            line-height: 32px;
+            text-align: right;
+        }
+    }
+    /* ----------- INITIAL SETUP ------------ */
+    dd,
+    .oe_import_toggled,
+    .oe_import_grid,
+    .oe_import_error_report,
+    .oe_import_with_file,
+    .oe_import_noheaders,
+    .oe_import_report_more {
+        display: none;
+    }
+
+    .oe_import_with_file label {
+        font-weight: normal;
+    }
+
+    &.oe_import_preview .oe_import_grid {
+        display: table;
+    }
+    &.oe_import_error .oe_import_error_report,
+    &.oe_import_with_file .oe_import_with_file,
+    &.oe_import_noheaders .oe_import_noheaders,
+    .oe_import_report_showmore .oe_import_report_more {
+        display: block;
+    }
+
+    .oe_import_noheaders {
+        .text-muted();
+    }
+
+    /* ------------- ERRORS AND WARNINGS REPORT ------------ */
+    .oe_import_error_report {
+        > ul {
+            padding: 0;
+        }
+        .oe_import_report {
+            padding: 4px;
+            margin: 2px 0;
+            list-style: none;
+            border-radius: @border-radius-base;
+        }
+        .oe_import_report_error {
+            .bg-danger();
+            .text-danger();
+        }
+        .oe_import_report_warning {
+            .bg-warning();
+            .text-warning();
+        }
+        .oe_import_report_info {
+            .bg-info();
+            .text-info();
+        }
+    }
+
+    /* ------------- THE CSV TABLE ------------ */
+    .oe_import_grid {
+        tr {
+            &.oe_import_grid-header:first-child {
+                line-height: 24px;
+                font-weight: normal;
+            }
+            td {
+                padding: 4px;
+            }
+        }
+    }
+
+}
+
+/* Field dropdown */
+.oe_import_selector {
+    font-size: @font-size-small;
+    ul, li {
+        margin: 0; padding: 0;
+    }
+}
+
+.o-list-buttons.o-editing .o_list_button_import {
+    display: none; // hidden for list view editable
+}
diff --git a/addons/base_import/static/src/xml/import.xml b/addons/base_import/static/src/xml/import.xml
index 677d50d4dc1..40484a23ede 100644
--- a/addons/base_import/static/src/xml/import.xml
+++ b/addons/base_import/static/src/xml/import.xml
@@ -2,28 +2,12 @@
     <t t-name="ImportView">
         <t t-set="_id" t-value="_.uniqueId('export')"/>
         <form action="" method="post" enctype="multipart/form-data" class="oe_import">
-            <div class="oe_view_manager oe_view_manager_current">
-                <div class="oe-control-panel oe_padding">
-                    <h2>
-                        Import a CSV File
-                    </h2>
-                    <input type="hidden" name="session_id"
-                       t-att-value="widget.session.session_id"/>
-                    <input type="hidden" name="import_id"/>
-                    <button type="button" disabled="disabled"
-                            class="oe_button oe_import_button oe_import_validate oe_highlight"
-                        >Validate</button>
-                    <button type="button" disabled="disabled"
-                            class="oe_button oe_import_button oe_import_import"
-                        >Import</button>
-                    <span class="oe_fade">or</span>
-                    <a class="oe_import_cancel" href="#">Cancel</a>
-                </div>
-            </div>
-
+            <input type="hidden" name="session_id"
+               t-att-value="widget.session.session_id"/>
+            <input type="hidden" name="import_id"/>
             <p>Select the <a
                     href="http://en.wikipedia.org/wiki/Comma-separated_values"
-                    class="oe_import_csv" target="_blank">.CSV</a>
+                    target="_blank">.CSV</a>
             file to import. If you need a sample importable file, you
             can use the export tool to generate one.</p>
             <div class="oe_import_box">
@@ -72,7 +56,7 @@
                 simpler especially when the file has many columns.</p>
 
                 <div class="oe_import_error_report"></div>
-                <table class="oe_import_grid" />
+                <table class="table-striped table-bordered oe_import_grid" />
             </div>
             <div class="oe_padding">
                 <h2>Frequently Asked Questions</h2>
@@ -349,26 +333,40 @@
         </form>
     </t>
 
+    <t t-name="ImportView.buttons">
+        <button type="button" class="btn btn-sm btn-primary o_import_button o_import_validate"
+                disabled="disabled">Validate</button>
+        <button type="button" class="btn btn-sm btn-default o_import_button o_import_import"
+                disabled="disabled">Import</button>
+        <button type="button" class="btn btn-sm btn-default o_import_cancel">Cancel</button>
+    </t>
+
     <t t-name="ImportView.preview">
-        <tr t-if="headers" class="oe_import_grid-header">
-            <td t-foreach="headers" t-as="header" class="oe_import_grid-cell"
-                ><t t-esc="header"/></td>
-        </tr>
-        <tr class="oe_import_fields">
-            <!-- Iterate on first row to ensure we have all columns -->
-            <td t-foreach="preview[0]" t-as="column">
-                <input class="oe_import_match_field"/>
-            </td>
-        </tr>
-        <tr t-foreach="preview" t-as="row" class="oe_import_grid-row">
-            <td t-foreach="row" t-as="cell" class="oe_import_grid-cell"
-                ><t t-esc="cell"/></td>
-        </tr>
+        <thead>
+            <tr t-if="headers" class="oe_import_grid-header">
+                <td t-foreach="headers" t-as="header" class="oe_import_grid-cell"
+                    ><t t-esc="header"/></td>
+            </tr>
+            <tr class="oe_import_fields">
+                <!-- Iterate on first row to ensure we have all columns -->
+                <td t-foreach="preview[0]" t-as="column">
+                    <input class="oe_import_match_field"/>
+                </td>
+            </tr>
+        </thead>
+        <tbody>
+            <tr t-foreach="preview" t-as="row" class="oe_import_grid-row">
+                <td t-foreach="row" t-as="cell" class="oe_import_grid-cell"
+                    ><t t-esc="cell"/></td>
+            </tr>
+        </tbody>
     </t>
     <t t-name="ImportView.preview.error">
-        <p>Import preview failed due to: <t t-esc="error"/>. The issue is
-            usually an incorrect file encoding.</p>
-        <p>Here is the start of the file we could not import:</p>
+        <div class="oe_import_report oe_import_report_error">
+            <p>Import preview failed due to: <t t-esc="error"/>. The issue is
+                usually an incorrect file encoding.</p>
+            <p>Here is the start of the file we could not import:</p>
+        </div>
         <pre><t t-esc="preview"/></pre>
     </t>
     <ul t-name="ImportView.error">
diff --git a/addons/base_import/views/base_import.xml b/addons/base_import/views/base_import.xml
index 34d1d265b5c..daebee78d84 100644
--- a/addons/base_import/views/base_import.xml
+++ b/addons/base_import/views/base_import.xml
@@ -3,7 +3,7 @@
     <data>
         <template id="assets_backend" name="base_import assets" inherit_id="web.assets_backend">
             <xpath expr="." position="inside">
-                <link rel="stylesheet" href="/base_import/static/src/css/import.css"/>
+                <link rel="stylesheet" href="/base_import/static/src/less/import.less"/>
                 <script type="text/javascript" src="/base_import/static/lib/javascript-state-machine/state-machine.js"></script>
                 <script type="text/javascript" src="/base_import/static/src/js/import.js"></script>
             </xpath>