From 0a5b2ea8311a27cce7a44545813fb2d002777dc4 Mon Sep 17 00:00:00 2001
From: Stefano Rigano <sri@odoo.com>
Date: Wed, 8 Nov 2017 13:29:28 +0100
Subject: [PATCH] [IMP] account:  Configuration steps UI improved

* responsiveness
- Force flex-flow (avoid to apply side-chatter rules)
- Use odoo base padding
- Hide the configuration steps on mobile

* use same name in settings
* improve design

Was PR  #20754
---
 .../static/src/less/account_dashboard.less    | 26 +++++++++++++++++--
 .../src/xml/account_dashboard_setup_bar.xml   | 11 +++++---
 .../views/res_config_settings_views.xml       |  4 +--
 3 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/addons/account/static/src/less/account_dashboard.less b/addons/account/static/src/less/account_dashboard.less
index bd63593f0b5..6a2561862d2 100644
--- a/addons/account/static/src/less/account_dashboard.less
+++ b/addons/account/static/src/less/account_dashboard.less
@@ -6,8 +6,13 @@
 
     .o_account_dashboard_header {
         .o-flex(1, 0, 100%);
+        .o-flex-flow(column, nowrap);
         background-color: @odoo-view-background-color;
 
+        .o_form_statusbar {
+            padding-right: @odoo-horizontal-padding;
+        }
+
         h4 {
             font-size: @font-size-base;
             font-weight: 500;
@@ -21,15 +26,32 @@
         }
 
         .o_arrow_button.btn-default {
-            color: @gray-dark;
+            color: @text-muted;
+            text-transform: none;
+            font-weight: 500;
+
+            .o_account_dashboard_index {
+                color: @gray-dark;
+            }
 
             &.o_action_done {
-                color: @text-muted;
+                color: @gray-dark;
+                background-color: @gray-lighter;
+
+                &:after {
+                    border-left-color: @gray-lighter;
+                }
 
                 .fa-check {
                     color: @brand-success;
                 }
             }
+
+            &:last-of-type {
+                margin-left: @odoo-horizontal-padding;
+                padding-left: @odoo-horizontal-padding*.5;
+                border-left: 1px solid @gray-lighter-dark;
+            }
         }
     }
 }
diff --git a/addons/account/static/src/xml/account_dashboard_setup_bar.xml b/addons/account/static/src/xml/account_dashboard_setup_bar.xml
index ed657e4397b..069927bf9ae 100644
--- a/addons/account/static/src/xml/account_dashboard_setup_bar.xml
+++ b/addons/account/static/src/xml/account_dashboard_setup_bar.xml
@@ -2,33 +2,38 @@
 <templates>
     <!-- This template defines the setup bar, at the top of account module's dashboard -->
     <t t-name="account.AccountDashboardSetupBar">
-        <div class="o_account_dashboard_header o_form_view" t-if="values['show_setup_bar']">
+        <div class="o_account_dashboard_header hidden-xs o_form_view" t-if="values['show_setup_bar']">
             <div class="o_form_statusbar">
                 <div class="o_statusbar_status" data-original-title="" title="" >
                     <button name="setting_opening_move_action" type="company_object" t-attf-class="btn btn-sm o_arrow_button btn-default account_setup_dashboard_action #{values['initial_balance'] and 'o_action_done' or ''}">
                         <i class="fa fa-check" t-if="values['initial_balance']"/>
+                        <b class="o_account_dashboard_index">5</b>
                         Initial Balances
                     </button>
                     <button name="setting_chart_of_accounts_action" type="company_object" t-attf-class="btn btn-sm o_arrow_button btn-default account_setup_dashboard_action #{values['chart_of_accounts'] and 'o_action_done' or ''}" >
                         <i class="fa fa-check" t-if="values['chart_of_accounts']"/>
+                        <b class="o_account_dashboard_index">4</b>
                         Chart of Accounts
                     </button>
                     <button name="setting_init_fiscal_year_action" type="company_object" t-attf-class="btn btn-sm o_arrow_button btn-default account_setup_dashboard_action #{values['fiscal_year'] and 'o_action_done' or ''}">
                         <i class="fa fa-check" t-if="values['fiscal_year']"/>
+                        <b class="o_account_dashboard_index">3</b>
                         Fiscal Year
                     </button>
                     <button name="setting_init_bank_account_action" type="company_object" t-attf-class="btn btn-sm o_arrow_button btn-default account_setup_dashboard_action #{values['bank'] and 'o_action_done' or ''}">
                         <i class="fa fa-check" t-if="values['bank']"/>
+                        <b class="o_account_dashboard_index">2</b>
                         Bank Accounts
                     </button>
                     <button name="setting_init_company_action" type="company_object" t-attf-class="btn btn-sm o_arrow_button btn-default account_setup_dashboard_action #{values['company'] and 'o_action_done' or ''}">
                         <i class="fa fa-check" t-if="values['company']"/>
+                        <b class="o_account_dashboard_index">1</b>
                         Company Data
                     </button>
 
-                    <h4>Configuration Steps:</h4>
+                    <h4 class="text-muted">Configuration Steps</h4>
                 </div>
-                <div class="pull-right" style="padding: 7px;">
+                <div class="pull-right" style="padding: 7px 0;">
                     <button aria-hidden="true" data-dismiss="modal" type="company_object" name="setting_hide_setup_bar" class="account_setup_dashboard_action close">×</button>
                 </div>
             </div>
diff --git a/addons/account/views/res_config_settings_views.xml b/addons/account/views/res_config_settings_views.xml
index f2a8eae8f27..89ca7467247 100644
--- a/addons/account/views/res_config_settings_views.xml
+++ b/addons/account/views/res_config_settings_views.xml
@@ -49,9 +49,9 @@
                                         <field name="account_hide_setup_bar" widget="upgrade_boolean"/>
                                     </div>
                                     <div class="o_setting_right_pane">
-                                        <label string='Hide Setup Bar'/>
+                                        <label string='Hide the Configuration Steps bar'/>
                                         <div class="text-muted">
-                                            Deactivate setup bar on the dashboard
+                                            Deactivate the "Configuration Steps" bar on the dashboard
                                         </div>
                                     </div>
                                 </div>