[IMP] css: improved csv import css

bzr revid: fva@openerp.com-20121017165646-8u35781nm8skhulh

2 files changed, 141 insertions, 41 deletions

diff --git a/addons/base_import/static/src/css/import.css b/addons/base_import/static/src/css/import.css
index 21e598ff707..07b193c3dc4 100644
--- a/addons/base_import/static/src/css/import.css
+++ b/addons/base_import/static/src/css/import.css
@@ -1,3 +1,54 @@
+.oe_import{
+    display: inline-block;
+    width: 600px;
+    padding: 16px;
+}
+.oe_import > p {
+    margin-left: 8px;
+    margin-right: 8px;
+    text-align: justify
+}
+
+/* ----------- IMPORT BOX ----------- */
+
+.oe_import .oe_import_box{
+    margin: 16px; 
+    padding: 16px;
+    background: #F0EEEE;
+    border-radius: 3px;
+    border: solid 1px #dddddd;
+}
+.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;
+    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_alternative {
     visibility: visible;
 }
@@ -25,38 +76,85 @@
     display: block;
 }
 
-.oe_import .oe_import_error_report ul .oe_import_report_error {
+.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_error_report ul .oe_import_report_warning {
+.oe_import .oe_import_report_warning {
     background-color: #FEFFD9;
+    color: #918743;
 }
-.oe_import .oe_import_error_report ul .oe_import_report_info {
+.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_noheaders {
-    color: #888;
+.oe_import .oe_import_report_info:last-of-type{
+    border-bottom:none;
 }
 
-.oe_import a.oe_import_toggle {
-    display: block;
+/* ------------- THE CSV TABLE ------------ */
+
+.oe_import .oe_import_grid{
+    margin: 16px;
+    border-radius:3px;
+    border: solid 1px #909090;
 }
-.oe_import a.oe_import_toggle:before {
-    content: '> '
+.oe_import .oe_import_grid tr{
+    height:16px;
 }
-
-.oe_import .oe_import_options p {
-    margin: 0;
-    padding: 0;
+.oe_import .oe_import_grid tr.oe_import_grid-header:first-child{
+    height: 24px;
+    background: #909090;
+    color: white;
 }
-.oe_import .oe_import_options label {
-    display: inline-block;
-    width: 8em;
-    text-align: right;
+.oe_import .oe_import_grid tr:nth-child(odd){
+    background: rgba(0,0,0,0.05);
 }
-
-.oe_import_selector ul,
-.oe_import_selector li {
-    margin: 0; padding: 0;
+.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;
+}
+
+
+
diff --git a/addons/base_import/static/src/xml/import.xml b/addons/base_import/static/src/xml/import.xml
index 1c57c40c9db..4f721032d1d 100644
--- a/addons/base_import/static/src/xml/import.xml
+++ b/addons/base_import/static/src/xml/import.xml
@@ -21,24 +21,26 @@
                     class="oe_import_csv" target="_blank">.CSV</a>
             file to import. If you need a sample importable file, you
             can use the export tool to generate one.</p>
-            <label t-attf-for="file_#{_id}" autofocus="autofocus">CSV File:</label>
-            <input type="file" id-attf-id="file_#{_id}"
-                   name="file" class="oe_import_file"/>
-            <button type="button" class="oe_import_file_reload">
-                <img src="/web/static/src/img/icons/gtk-refresh.png"/>
-            </button>
-            <div class="oe_import_with_file">
-                <a href="#" class="oe_import_toggle">
-                    File Format Options…</a>
-                <div class="oe_import_toggled oe_import_options">
-                    <p t-foreach="widget.opts" t-as="option">
-                        <!-- no @name, avoid submission when file_update called -->
-                        <label t-attf-for="#{option.name}_#{_id}">
-                            <t t-esc="option.label"/></label>
-                        <input t-attf-id="#{option.name}_#{_id}"
-                               t-attf-class="oe_import_#{option.name}"
-                               t-att-value="option.value"/>
-                    </p>
+            <div class="oe_import_box">
+                <label t-attf-for="file_#{_id}" autofocus="autofocus">CSV File:</label>
+                <input type="file" id-attf-id="file_#{_id}"
+                       name="file" class="oe_import_file"/>
+                <button type="button" class="oe_import_file_reload">
+                    <img src="/web/static/src/img/icons/gtk-refresh.png"/>
+                </button>
+                <div class="oe_import_with_file">
+                    <a href="#" class="oe_import_toggle">
+                        File Format Options…</a>
+                    <div class="oe_import_toggled oe_import_options">
+                        <p t-foreach="widget.opts" t-as="option">
+                            <!-- no @name, avoid submission when file_update called -->
+                            <label t-attf-for="#{option.name}_#{_id}">
+                                <t t-esc="option.label"/></label>
+                            <input t-attf-id="#{option.name}_#{_id}"
+                                   t-attf-class="oe_import_#{option.name}"
+                                   t-att-value="option.value"/>
+                        </p>
+                    </div>
                 </div>
             </div>
 
@@ -54,7 +56,7 @@
                 simpler especially when the file has many columns.</p>
 
                 <div class="oe_import_error_report"></div>
-                <table class="oe_import_grid" width="100%"/>
+                <table class="oe_import_grid" />
 
                 <h2>Frequently Asked Questions</h2>
                 <dl>