[IMP] web,account,...: Regroup settings, add a nav and search bar

Purpose
=======

Settings are often way too long and hard to scan and sometimes you don't know where to find the settings you're looking for.
By adding a left navigation, you can already have an overview of the settings, and switch easily between them.

Specification
=============

- Add a search bar on all the apps that have settings which can search results from all the installed apps.
  (If i'm on sales settings,and I search anything then it shows results from sales settings and also shows
  all the other matching results from all the other apps such as, Inventory...etc) with app name.
- Able to activate feature from the current page results (no matter if the searched result is from another apps).
- Highlight searched word in results
- Delete the sheet, have a full white background
- Add left navigation bar on setting
- Left navigation bar fixed
- List displayed based on installed apps
- On right panel, by default display current app setting and change accordingly
- [Mobile] Left navigation bar displayed on top
- Add Breadcrumb on top of the page: have the name "Settings" + Save / discard CTA + Search
- Add General Settings on the nav bar
- remove "save this page..." notif in all settings
- Delete all recommanded apps section + all checkbox that install app should disappear:
	payroll: https://drive.google.com/a/odoo.com/file/d/0B1uIL9E_zXrrSkMzWVpuZ0ZoaFE/view?usp=drivesdk
	Events: https://drive.google.com/a/odoo.com/file/d/0B1uIL9E_zXrrYXlHMHd2NTM2blE/view?usp=drivesdk
	Manufacturing: Delete Repair - Quality Control - Maintenance - Product Lifecycle Management [LAP][ok]
	Timesheets: https://drive.google.com/a/odoo.com/file/d/0B1uIL9E_zXrrdFg5XzNydkd2TlU/view?usp=drivesdk
	project: https://drive.google.com/a/odoo.com/file/d/0B1uIL9E_zXrraWo3NE04TktwcTQ/view?usp=drivesdk
	inventory: https://drive.google.com/a/odoo.com/file/d/0B1uIL9E_zXrrQkRaVUR5ekFQYTQ/view?usp=drivesdk
	recruitment: https://drive.google.com/a/odoo.com/file/d/0B1uIL9E_zXrrbDdqLWQweF80UkE/view?usp=drivesdk
	purchase: https://drive.google.com/a/odoo.com/file/d/0B1uIL9E_zXrrRlAyUDBnb0trQWs/view?usp=drivesdk
	email marketing: https://drive.google.com/a/odoo.com/file/d/0B1uIL9E_zXrrOUZONjhvX2k3Y2s/view?usp=drivesdk
	expenses: https://drive.google.com/a/odoo.com/file/d/0B1uIL9E_zXrrR0JpN1ZpQmtxU3M/view?usp=drivesdk
	attendances: https://drive.google.com/a/odoo.com/file/d/0B1uIL9E_zXrralpjZ1VJclNpMWs/view?usp=drivesdk
- About duplicate settings:
	Docsaway: Delete from Sales + delete Default Print Provider
	Attributs & Variants: Delete from Purchases - Manufacturing
	Multi-currencies: delete from Sales
	Unit Of Measures: Delete from Purchase & Expenses
- Add a scroll bar on the left bar when there's too many apps
- Keep the navbar visible even when you search
- Move General Settings to the bottom of the list
- Update on Settings:
    - Accounting:
        - rename automatic rates
        - Anglo Saxon Account: Should be in technical feature
        - Place Accounting Reports section before Taxes section
    - CRM:
        - Phone Validation: Enforce international format becomes
        - Local Numbers: (2 radio buttons proposals) Add international prefix / No prefix
    - Fleet: typo " ... a new car if ..." + text is too long <br>
    - project: fix tooltip for colab pads

1 files changed, 192 insertions, 0 deletions

diff --git a/addons/web/static/src/less/base_settings.less b/addons/web/static/src/less/base_settings.less
new file mode 100644
index 00000000000..a93a2e26ef0
--- /dev/null
+++ b/addons/web/static/src/less/base_settings.less
@@ -0,0 +1,192 @@
+@o-mobile-tabs-height: 40px;
+
+.o_base_settings {
+    padding: 0px !important;
+    overflow: auto;
+    display: flex !important;
+    flex-flow: column nowrap;
+    height: 100%;
+    @media (max-width: @screen-xs-max) {
+        flex-direction: column;
+    }
+    .o_control_panel {
+        flex: 0 0 auto;
+        .o_panel {
+            display: flex;
+            flex: 1 0 100%;
+            .title {
+                width: 50%;
+                font-size: 18px;
+                color: #8f8f8f;
+            }
+            .o_setting_search {
+                width: 50%;
+                position: relative;
+                .searchInput {
+                    border: 0px;
+                    padding: 0px;
+                }
+                .searchInput , .searchInput:focus {
+                    border-bottom: 1px solid #8f8f8f;
+                    box-shadow: none;
+                    height: 26px;
+                }
+                .searchIcon {
+                    position: absolute;
+                    top: 4px;
+                    left: auto;
+                    bottom: auto;
+                    right: 0;
+                }
+            }
+        }
+        .o_form_statusbar {
+            padding: 0px !important;
+            margin: 0px !important;
+            border: 0px;
+        }
+    }
+    .o_setting_container {
+        height: 100%;
+        overflow: auto;
+        display: flex;
+        @media (max-width: @screen-xs-max) {
+            .o-flex-flow(column, wrap);
+        }
+        .settings_tab {
+            .o-flex(1, 1, 17%);
+            background: #f3f3f3;
+            overflow: auto;
+            @media (max-width: @screen-xs-max) {
+                .o-flex(0, 0, @o-mobile-tabs-height);
+                display: inline-flex;
+                overflow: auto;
+                position: relative;
+                overflow: hidden;
+                .selected {
+                    background-color: #f3f3f3 !important;
+                }
+            }
+            .selected {
+                background-color: #fff;
+                .icon {
+                    filter: grayscale(0%) !important;
+                }
+             }
+            .tab {
+                font-size: 15px;
+                padding-left: 16px;
+                height: 40px;
+                width: 100%;
+                line-height: 40px;
+                cursor: pointer;
+                display: inline-flex;
+                .icon {
+                    width: 23px;
+                    filter: grayscale(100%);
+                }
+                .app_name {
+                    padding-left: 10px;
+                    padding-right: 10px;
+                    white-space: nowrap;
+                }
+                @media (max-width: @screen-xs-max) {
+                    .o_mobile_tab();
+                }
+            }
+        }
+        .settings {
+            position: relative;
+            .o-flex(1, 1, 83%);
+            overflow: auto;
+            padding: 0 16px 0 16px;
+            @media (max-width: @screen-xs-max) {
+                .o-flex(none, none, none);
+                display: inline-flex;
+                overflow-x: hidden;
+                overflow-y: auto;
+                .app_settings_block, .notFound {
+                    flex: 0 0 100vw;
+                }
+            }
+            .settingSearchHeader {
+                display: flex;
+                margin-top: 30px;
+                margin-bottom: 15px;
+                .icon {
+                    width: 25px;
+                    height: 25px;
+                }
+                .appName {
+                    font-size: 20px;
+                    padding-left: 10px;
+                }
+            }
+            .notFound {
+                color : #d4d1d1;
+                text-align: center;
+                font-size: 25px;
+                padding-top: 50px;
+            }
+            .highlighter {
+                background: yellow;
+            }
+        }
+        .d-block {
+            display: block !important;
+        }
+    }
+}
+
+.o_mobile_tab() {
+    display: block;
+    position: absolute;
+    font-size: 14px;
+    font-weight: 500;
+    width: auto;
+    left: 100%;
+    padding: 10px;
+    text-align: center;
+    height: @o-mobile-tabs-height;
+    transition: 0.2s all;
+    transform: translate3d(0,0,0);
+    line-height: inherit;
+
+    .app_name {
+        display: block;
+        white-space: nowrap;
+        padding-left: 0px;
+        padding-right: 0px;
+    }
+
+    &:after {
+        content: ' ';
+        position: absolute;
+        bottom: 0px;
+        left: 0;
+        background: @odoo-brand-primary;
+        width: 100%;
+        height: 3px;
+        opacity: 0;
+        transition: 0.2s all;
+        transform: translate3d(0,3px,0);
+    }
+
+    &.previous, &.before {
+        left: 0px;
+    }
+
+    &.current {
+        left: 50%;
+        font-weight: 600;
+
+        &:after {
+            opacity: 1;
+            transform: translate3d(0,0,0);
+        }
+    }
+
+    &.next, &.after {
+        left: 100%;
+    }
+}