[FIX] account: reconciliation widget: new design compatibility

- Use less instead of sass
- Use class name of both old and new designs
- Small CSS tweaks to support both designs
- JS compatibility fixes + a little cleanup
- The ctrl-enter shortcut only reconciles balanced entries

5 files changed, 114 insertions, 502 deletions

diff --git a/addons/account/static/src/css/account_reconciliation.css b/addons/account/static/src/css/account_reconciliation.css
deleted file mode 100644
index 61eddca259e..00000000000
--- a/addons/account/static/src/css/account_reconciliation.css
+++ /dev/null
@@ -1,379 +0,0 @@
-.openerp .oe_reconciliation {
-  font-size: 12px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -o-user-select: none;
-  user-select: none;
-  cursor: default;
-  height: 100%;
-  overflow: auto;
-  /* icons */ }
-  .openerp .oe_reconciliation .oe_form_sheetbg {
-    padding-top: 0; }
-    .openerp .oe_reconciliation .oe_form_sheetbg .oe_form_sheet {
-      position: relative;
-      padding: 20px 15px 20px 15px;
-      border-top: 0;
-      height: 100%; }
-  .openerp .oe_reconciliation .clearer {
-    clear: both; }
-  .openerp .oe_reconciliation .oe_view_nocontent {
-    max-width: none; }
-    .openerp .oe_reconciliation .oe_view_nocontent > p {
-      padding: 0 10%; }
-  .openerp .oe_reconciliation h1 input, .openerp .oe_reconciliation h2 input {
-    height: auto !important; }
-  .openerp .oe_reconciliation h1 {
-    width: 48%;
-    padding: 0 0 0 15px;
-    margin: 0 0 25px 0;
-    float: left;
-    font-size: 2em;
-    height: 1.5em; }
-  .openerp .oe_reconciliation .statement_name span {
-    line-height: 1.5em;
-    cursor: pointer; }
-  .openerp .oe_reconciliation .change_statement_name_container {
-    display: none;
-    width: 95%; }
-    .openerp .oe_reconciliation .change_statement_name_container td:first-child, .openerp .oe_reconciliation .change_statement_name_container td:first-child > input {
-      width: 99%; }
-    .openerp .oe_reconciliation .change_statement_name_container td:last-child {
-      width: 1%;
-      padding-left: 3px; }
-      .openerp .oe_reconciliation .change_statement_name_container td:last-child button {
-        height: 100%;
-        box-sizing: content-box; }
-  .openerp .oe_reconciliation h2 {
-    font-size: 1.8em; }
-  .openerp .oe_reconciliation .progress {
-    width: 49%;
-    margin: 10px 15px 0 0;
-    float: right;
-    position: relative;
-    display: inline-block; }
-    .openerp .oe_reconciliation .progress .progress-text {
-      text-align: center;
-      position: absolute;
-      width: 100%;
-      left: 0;
-      top: 2px;
-      z-index: 10;
-      text-shadow: -1px -1px 0 #f5f5f5, 1px -1px 0 #f5f5f5, -1px 1px 0 #f5f5f5, 1px 1px 0 #f5f5f5; }
-  .openerp .oe_reconciliation .show_more_container {
-    text-align: center; }
-    .openerp .oe_reconciliation .show_more_container .show_more {
-      display: none; }
-  .openerp .oe_reconciliation .notification_area {
-    margin: 0 15px; }
-    .openerp .oe_reconciliation .notification_area .fa {
-      font-size: 20px;
-      margin-left: 7px;
-      line-height: 14px;
-      position: relative;
-      top: 3px; }
-  .openerp .oe_reconciliation .interface_options {
-    margin-bottom: 25px;
-    padding-left: 15px; }
-    .openerp .oe_reconciliation .interface_options .oe_radio_input {
-      border: none;
-      display: inline; }
-  .openerp .oe_reconciliation .protip {
-    margin: 0;
-    position: absolute;
-    bottom: 7px;
-    right: 15px;
-    text-align: right;
-    color: #bbb; }
-  .openerp .oe_reconciliation .done_message {
-    width: 100%;
-    padding: 0 20%;
-    margin-top: 50px;
-    margin-bottom: 50px; }
-    .openerp .oe_reconciliation .done_message h2 {
-      margin-bottom: 30px; }
-      .openerp .oe_reconciliation .done_message h2 .congrats_icon {
-        float: right;
-        font-size: 2em;
-        position: relative;
-        top: -0.25em; }
-    .openerp .oe_reconciliation .done_message .achievements {
-      margin-top: 30px;
-      text-align: center;
-      position: relative; }
-      .openerp .oe_reconciliation .done_message .achievements .achievement {
-        font-size: 4em;
-        margin: 0 0.3em;
-        position: relative;
-        vertical-align: middle;
-        text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2); }
-        .openerp .oe_reconciliation .done_message .achievements .achievement i {
-          font-size: 0.5em;
-          color: white;
-          position: absolute;
-          top: 50%;
-          margin-top: -0.55em;
-          left: 0;
-          width: 100%;
-          text-align: center; }
-    .openerp .oe_reconciliation .done_message .action_buttons {
-      text-align: center; }
-  .openerp .oe_reconciliation .fa {
-    font-size: 12px !important; }
-    .openerp .oe_reconciliation .fa.line_info_button {
-      color: #ccc !important; }
-  .openerp .oe_reconciliation .accounting_view .fa-add-remove:before {
-    content: "\f068"; }
-  .openerp .oe_reconciliation .match .fa-add-remove:before {
-    content: "\f067"; }
-  .openerp .oe_reconciliation .oe_reconciliation_line {
-    margin-bottom: 30px;
-    /* gap between accounting_view and action view */
-    /* popover */
-    /* arrays of move lines */
-    /* Partie infos */
-    /* Match view */
-    /* Action create */ }
-    .openerp .oe_reconciliation .oe_reconciliation_line table {
-      width: 100%; }
-    .openerp .oe_reconciliation .oe_reconciliation_line .toggle_match, .openerp .oe_reconciliation .oe_reconciliation_line .toggle_create {
-      -webkit-transition-property: -webkit-transform;
-      -moz-transition-property: -moz-transform;
-      -ms-transition-property: -ms-transform;
-      -o-transition-property: -o-transform;
-      transition-property: transform;
-      -webkit-transform: rotate(0deg);
-      -moz-transform: rotate(0deg);
-      -ms-transform: rotate(0deg);
-      -o-transform: rotate(0deg);
-      transform: rotate(0deg);
-      -webkit-transition-duration: 300ms;
-      -moz-transition-duration: 300ms;
-      -ms-transition-duration: 300ms;
-      -o-transition-duration: 300ms;
-      transition-duration: 300ms; }
-    .openerp .oe_reconciliation .oe_reconciliation_line .visible_toggle, .openerp .oe_reconciliation .oe_reconciliation_line[data-mode="match"] .toggle_match, .openerp .oe_reconciliation .oe_reconciliation_line[data-mode="create"] .toggle_create, .openerp .oe_reconciliation .oe_reconciliation_line[data-mode="create"].no_partner .toggle_match {
-      visibility: visible !important;
-      -webkit-transform: rotate(90deg);
-      -moz-transform: rotate(90deg);
-      -ms-transform: rotate(90deg);
-      -o-transform: rotate(90deg);
-      transform: rotate(90deg); }
-    .openerp .oe_reconciliation .oe_reconciliation_line .partner_name .change_partner {
-      display: none;
-      cursor: pointer;
-      margin: 0 10px 0 5px; }
-    .openerp .oe_reconciliation .oe_reconciliation_line .partner_name:hover .change_partner {
-      display: inline; }
-    .openerp .oe_reconciliation .oe_reconciliation_line .change_partner_container {
-      width: 200px;
-      display: none;
-      position: relative !important; }
-    .openerp .oe_reconciliation .oe_reconciliation_line[data-mode="inactive"] .initial_line > td {
-      background-color: #f8f8f8 !important; }
-    .openerp .oe_reconciliation .oe_reconciliation_line.no_match:not(.no_partner) .initial_line {
-      cursor: default !important; }
-      .openerp .oe_reconciliation .oe_reconciliation_line.no_match:not(.no_partner) .initial_line .line_info_button {
-        cursor: pointer; }
-    .openerp .oe_reconciliation .oe_reconciliation_line.no_match:not(.no_partner) .toggle_match {
-      visibility: hidden !important; }
-    .openerp .oe_reconciliation .oe_reconciliation_line > table > tbody > tr:nth-child(1) > td table {
-      margin-bottom: 10px; }
-    .openerp .oe_reconciliation .oe_reconciliation_line table.details td:first-child {
-      padding-right: 10px;
-      font-weight: bold; }
-    .openerp .oe_reconciliation .oe_reconciliation_line table.details tr.one_line_info td {
-      padding-top: 10px;
-      text-align: center;
-      color: #44c; }
-    .openerp .oe_reconciliation .oe_reconciliation_line .accounting_view, .openerp .oe_reconciliation .oe_reconciliation_line .match table {
-      width: 100%; }
-      .openerp .oe_reconciliation .oe_reconciliation_line .accounting_view tbody tr, .openerp .oe_reconciliation .oe_reconciliation_line .match table tbody tr {
-        cursor: pointer; }
-      .openerp .oe_reconciliation .oe_reconciliation_line .accounting_view tr.already_reconciled, .openerp .oe_reconciliation .oe_reconciliation_line .match table tr.already_reconciled {
-        color: #44c; }
-      .openerp .oe_reconciliation .oe_reconciliation_line .accounting_view td, .openerp .oe_reconciliation .oe_reconciliation_line .match table td {
-        padding: 1px 8px;
-        vertical-align: middle; }
-      .openerp .oe_reconciliation .oe_reconciliation_line .accounting_view td.cell_action, .openerp .oe_reconciliation .oe_reconciliation_line .accounting_view td.cell_info_popover, .openerp .oe_reconciliation .oe_reconciliation_line .match table td.cell_action, .openerp .oe_reconciliation .oe_reconciliation_line .match table td.cell_info_popover {
-        width: 15px;
-        padding: 0; }
-      .openerp .oe_reconciliation .oe_reconciliation_line .accounting_view td.cell_action, .openerp .oe_reconciliation .oe_reconciliation_line .match table td.cell_action {
-        text-align: left; }
-      .openerp .oe_reconciliation .oe_reconciliation_line .accounting_view td.cell_account_code, .openerp .oe_reconciliation .oe_reconciliation_line .match table td.cell_account_code {
-        width: 80px;
-        padding-left: 3px; }
-      .openerp .oe_reconciliation .oe_reconciliation_line .accounting_view td.cell_due_date, .openerp .oe_reconciliation .oe_reconciliation_line .match table td.cell_due_date {
-        width: 100px; }
-      .openerp .oe_reconciliation .oe_reconciliation_line .accounting_view td.cell_debit, .openerp .oe_reconciliation .oe_reconciliation_line .match table td.cell_debit {
-        text-align: right;
-        width: 15%; }
-      .openerp .oe_reconciliation .oe_reconciliation_line .accounting_view td.cell_credit, .openerp .oe_reconciliation .oe_reconciliation_line .match table td.cell_credit {
-        width: 15%;
-        text-align: right;
-        padding-right: 3px; }
-      .openerp .oe_reconciliation .oe_reconciliation_line .accounting_view td.cell_info_popover, .openerp .oe_reconciliation .oe_reconciliation_line .match table td.cell_info_popover {
-        text-align: right; }
-      .openerp .oe_reconciliation .oe_reconciliation_line .accounting_view tr.line_open_balance, .openerp .oe_reconciliation .oe_reconciliation_line .match table tr.line_open_balance {
-        color: #bbb; }
-      .openerp .oe_reconciliation .oe_reconciliation_line .accounting_view tr .fa:not(.line_info_button), .openerp .oe_reconciliation .oe_reconciliation_line .match table tr .fa:not(.line_info_button) {
-        visibility: hidden;
-        color: #555; }
-      .openerp .oe_reconciliation .oe_reconciliation_line .accounting_view tr:hover .fa, .openerp .oe_reconciliation .oe_reconciliation_line .accounting_view tr:focus .fa, .openerp .oe_reconciliation .oe_reconciliation_line .accounting_view tr.active .fa, .openerp .oe_reconciliation .oe_reconciliation_line .match table tr:hover .fa, .openerp .oe_reconciliation .oe_reconciliation_line .match table tr:focus .fa, .openerp .oe_reconciliation .oe_reconciliation_line .match table tr.active .fa {
-        visibility: visible; }
-      .openerp .oe_reconciliation .oe_reconciliation_line .accounting_view tr .do_partial_reconcile_button, .openerp .oe_reconciliation .oe_reconciliation_line .match table tr .do_partial_reconcile_button {
-        color: #f0ad4e;
-        padding-right: 5px; }
-      .openerp .oe_reconciliation .oe_reconciliation_line .accounting_view tr .undo_partial_reconcile_button, .openerp .oe_reconciliation .oe_reconciliation_line .match table tr .undo_partial_reconcile_button {
-        color: #555;
-        padding-right: 5px; }
-    .openerp .oe_reconciliation .oe_reconciliation_line .accounting_view {
-      border-collapse: separate; }
-      .openerp .oe_reconciliation .oe_reconciliation_line .accounting_view .initial_line > td {
-        border-top: 1px solid #bbb;
-        padding-top: 4px;
-        padding-bottom: 5px;
-        background-color: #f0f0f0;
-        -webkit-transition-property: background-color;
-        -moz-transition-property: background-color;
-        -ms-transition-property: background-color;
-        transition-property: background-color;
-        -webkit-transition-duration: 300ms;
-        -moz-transition-duration: 300ms;
-        -ms-transition-duration: 300ms;
-        -o-transition-duration: 300ms;
-        transition-duration: 300ms; }
-        .openerp .oe_reconciliation .oe_reconciliation_line .accounting_view .initial_line > td.cell_action, .openerp .oe_reconciliation .oe_reconciliation_line .accounting_view .initial_line > td.cell_info_popover {
-          border-top: none;
-          background: white !important;
-          padding-top: 6px;
-          padding-bottom: 3px; }
-      .openerp .oe_reconciliation .oe_reconciliation_line .accounting_view caption {
-        text-align: left;
-        height: 26px;
-        margin: 0 15px 4px 15px; }
-        .openerp .oe_reconciliation .oe_reconciliation_line .accounting_view caption .partner_name {
-          font-size: 1.1em;
-          font-weight: bold; }
-        .openerp .oe_reconciliation .oe_reconciliation_line .accounting_view caption .tip_reconciliation_not_balanced {
-          float: right;
-          padding-right: 7px; }
-        .openerp .oe_reconciliation .oe_reconciliation_line .accounting_view caption button {
-          float: right;
-          position: relative;
-          top: -4px; }
-          .openerp .oe_reconciliation .oe_reconciliation_line .accounting_view caption button:disabled {
-            opacity: 0.5; }
-        .openerp .oe_reconciliation .oe_reconciliation_line .accounting_view caption > span, .openerp .oe_reconciliation .oe_reconciliation_line .accounting_view caption > input {
-          position: relative;
-          top: 7px;
-          /* meh */ }
-      .openerp .oe_reconciliation .oe_reconciliation_line .accounting_view td.cell_credit {
-        border-left: 1px solid #000; }
-    .openerp .oe_reconciliation .oe_reconciliation_line .match {
-      display: none;
-      padding: 1px; }
-      .openerp .oe_reconciliation .oe_reconciliation_line .match .match_controls {
-        padding: 0 0 5px 18px; }
-        .openerp .oe_reconciliation .oe_reconciliation_line .match .match_controls .filter {
-          width: 240px; }
-        .openerp .oe_reconciliation .oe_reconciliation_line .match .match_controls .pager_control_left, .openerp .oe_reconciliation .oe_reconciliation_line .match .match_controls .pager_control_right {
-          display: inline-block;
-          cursor: pointer; }
-        .openerp .oe_reconciliation .oe_reconciliation_line .match .match_controls .pager_control_left {
-          margin-right: 10px; }
-        .openerp .oe_reconciliation .oe_reconciliation_line .match .match_controls .pager_control_left.disabled, .openerp .oe_reconciliation .oe_reconciliation_line .match .match_controls .pager_control_right.disabled {
-          color: #ddd;
-          cursor: default; }
-      .openerp .oe_reconciliation .oe_reconciliation_line .match .show_more {
-        display: inline-block;
-        margin-left: 18px;
-        margin-top: 5px; }
-    .openerp .oe_reconciliation .oe_reconciliation_line .create {
-      display: none;
-      margin: 0 15px;
-      border: 1px solid #d5d5d5;
-      border-radius: 5px;
-      padding: 10px;
-      overflow: auto; }
-      .openerp .oe_reconciliation .oe_reconciliation_line .create .quick_add {
-        position: relative;
-        margin-bottom: 10px;
-        clear: both; }
-        .openerp .oe_reconciliation .oe_reconciliation_line .create .quick_add:empty {
-          display: none; }
-        .openerp .oe_reconciliation .oe_reconciliation_line .create .quick_add .presets_config {
-          display: none;
-          position: absolute;
-          top: 0;
-          right: 0;
-          z-index: 100; }
-          .openerp .oe_reconciliation .oe_reconciliation_line .create .quick_add .presets_config .dropdown-menu {
-            font-size: 1em; }
-        .openerp .oe_reconciliation .oe_reconciliation_line .create .quick_add:hover .presets_config, .openerp .oe_reconciliation .oe_reconciliation_line .create .quick_add .presets_config.open {
-          display: inline; }
-      .openerp .oe_reconciliation .oe_reconciliation_line .create .oe_form > table {
-        width: 49%;
-        height: 26px; }
-        .openerp .oe_reconciliation .oe_reconciliation_line .create .oe_form > table:nth-child(2n+1) {
-          float: left;
-          clear: left; }
-        .openerp .oe_reconciliation .oe_reconciliation_line .create .oe_form > table:nth-child(2n) {
-          float: right;
-          clear: right; }
-        .openerp .oe_reconciliation .oe_reconciliation_line .create .oe_form > table th {
-          font-weight: bold;
-          line-height: 26px;
-          padding-right: 8px;
-          min-width: 100px;
-          border-right: 1px solid #ddd;
-          white-space: nowrap;
-          width: 1%; }
-        .openerp .oe_reconciliation .oe_reconciliation_line .create .oe_form > table td {
-          width: 99%;
-          padding-left: 8px; }
-        .openerp .oe_reconciliation .oe_reconciliation_line .create .oe_form > table input, .openerp .oe_reconciliation .oe_reconciliation_line .create .oe_form > table select {
-          width: 100%; }
-        .openerp .oe_reconciliation .oe_reconciliation_line .create .oe_form > table.add_line_container:nth-child(2n+1) {
-          width: 98%;
-          float: none;
-          margin: auto; }
-        .openerp .oe_reconciliation .oe_reconciliation_line .create .oe_form > table.add_line_container td {
-          text-align: center; }
-        .openerp .oe_reconciliation .oe_reconciliation_line .create .oe_form > table.add_line_container .add_line {
-          line-height: 26px; }
-
-.openerp .oe_manual_reconciliation .oe_manual_reconciliation_line .button_reconcile {
-  float: right;
-  position: relative;
-  top: 1.1em; }
-.openerp .oe_manual_reconciliation .oe_manual_reconciliation_line .accounting_view thead {
-  background: none; }
-  .openerp .oe_manual_reconciliation .oe_manual_reconciliation_line .accounting_view thead td {
-    vertical-align: bottom !important; }
-  .openerp .oe_manual_reconciliation .oe_manual_reconciliation_line .accounting_view thead td:nth-child(2) {
-    padding-left: 0; }
-  .openerp .oe_manual_reconciliation .oe_manual_reconciliation_line .accounting_view thead .cell_item_name {
-    display: inline-block;
-    min-width: 135px; }
-  .openerp .oe_manual_reconciliation .oe_manual_reconciliation_line .accounting_view thead .cell_last_time_entries_checked {
-    font-weight: normal;
-    display: inline-block; }
-  .openerp .oe_manual_reconciliation .oe_manual_reconciliation_line .accounting_view thead .cell_item_name + .cell_last_time_entries_checked {
-    padding-left: 20px; }
-  .openerp .oe_manual_reconciliation .oe_manual_reconciliation_line .accounting_view thead .cell_title_account_code {
-    text-align: center; }
-  .openerp .oe_manual_reconciliation .oe_manual_reconciliation_line .accounting_view thead tr:first-child td {
-    border-bottom: 1px solid #bbb; }
-    .openerp .oe_manual_reconciliation .oe_manual_reconciliation_line .accounting_view thead tr:first-child td.cell_action, .openerp .oe_manual_reconciliation .oe_manual_reconciliation_line .accounting_view thead tr:first-child td.cell_info_popover {
-      border-bottom: none; }
-    .openerp .oe_manual_reconciliation .oe_manual_reconciliation_line .accounting_view thead tr:first-child td.cell_title_account_code {
-      border-bottom: 1px solid #000 !important; }
-.openerp .oe_manual_reconciliation .oe_manual_reconciliation_line .accounting_view .filler_line td {
-  height: 22px;
-  cursor: default !important; }
-.openerp .oe_manual_reconciliation .oe_manual_reconciliation_line .accounting_view tbody.tbody_matched_lines tr:first-child td {
-  padding-top: 4px; }
-.openerp .oe_manual_reconciliation .oe_manual_reconciliation_line td.cell_due_date {
-  padding-left: 3px !important; }
diff --git a/addons/account/static/src/js/account_reconciliation_widgets.js b/addons/account/static/src/js/account_reconciliation_widgets.js
index 123bb480224..e80d53b0e7a 100644
--- a/addons/account/static/src/js/account_reconciliation_widgets.js
+++ b/addons/account/static/src/js/account_reconciliation_widgets.js
@@ -59,7 +59,7 @@ then cloning it for each new child.
 
 */
 var abstractReconciliation = Widget.extend(ControlPanelMixin, {
-    className: 'oe_reconciliation',
+    className: 'oe_reconciliation o_reconciliation',
 
     events: {
         "click *[rel='do_action']": "doActionClickHandler",
@@ -268,6 +268,7 @@ var abstractReconciliation = Widget.extend(ControlPanelMixin, {
     },
 
     doActionClickHandler: function(e) {
+        e.preventDefault();
         var name = e.currentTarget.dataset.action_nam;
         var model = e.currentTarget.dataset.model;
         var ids = e.currentTarget.dataset.ids.split(",").map(Number);
@@ -282,40 +283,22 @@ var abstractReconciliation = Widget.extend(ControlPanelMixin, {
         });
     },
 
-    presetConfigCreateClickHandler: function() {
+    presetConfigCreateClickHandler: function(e) {
+        e.preventDefault();
         var self = this;
-        // Fetch the ID of an action that will be pushed in the URL
-        // If the page is reloaded, this action will be loaded
-        new Model("ir.model.data")
-            .call("get_object_reference", ['account', 'action_account_operation_template'])
-            .then(function (result) {
-                self.action_manager.do_action({
-                    name: _t("Operation Templates"),
-                    res_model: "account.operation.template",
-                    views: [[false, 'form']],
-                    type: 'ir.actions.act_window',
-                    view_type: "form",
-                    view_mode: "form",
-                    action: result[1]
-                });
-            });
+        return self.rpc("/web/action/load", {action_id: "account.action_account_operation_template"}).then(function(result) {
+            result.views = [[false, "form"], [false, "list"]];
+            return self.do_action(result);
+        });
     },
 
-    presetConfigEditClickHandler: function() {
+    presetConfigEditClickHandler: function(e) {
+        e.preventDefault();
         var self = this;
-        new Model("ir.model.data")
-            .call("get_object_reference", ['account', 'action_account_operation_template'])
-            .then(function (result) {
-                self.action_manager.do_action({
-                    name: _t("Operation Templates"),
-                    res_model: "account.operation.template",
-                    views: [[false, 'list'], [false, 'form']],
-                    type: 'ir.actions.act_window',
-                    view_type: "list",
-                    view_mode: "list",
-                    action: result[1]
-                });
-            });
+        return self.rpc("/web/action/load", {action_id: "account.action_account_operation_template"}).then(function(result) {
+            result.views = [[false, "list"], [false, "form"]];
+            return self.do_action(result);
+        });
     },
 
     displayNotifications: function(notifications, speed) {
@@ -365,7 +348,7 @@ var abstractReconciliation = Widget.extend(ControlPanelMixin, {
     keyboardShortcutsHandler: function(e) {
         var self = this;
         if ((e.which === 13 || e.which === 10) && (e.ctrlKey || e.metaKey)) {
-            self.processReconciliations(_.filter(self.getChildren(), function(o) { return o.is_valid; }));
+            self.processReconciliations(_.filter(self.getChildren(), function(o) { return o.get("balance").toFixed(3) === "0.000"; }));
         }
     },
 
@@ -394,7 +377,7 @@ var abstractReconciliation = Widget.extend(ControlPanelMixin, {
 });
 
 var abstractReconciliationLine = Widget.extend({
-    className: 'oe_reconciliation_line',
+    className: 'oe_reconciliation_line o_reconciliation_line',
 
     events: {
         "click .mv_line": "moveLineClickHandler",
@@ -513,7 +496,7 @@ var abstractReconciliationLine = Widget.extend({
         var dataset = new data.DataSet(this, "account.account", self.context);
         dataset.ids = [];
         dataset.arch = {
-            attrs: { string: "Stéphanie de Monaco", version: "7.0", class: "oe_form_container" },
+            attrs: { string: "Stéphanie de Monaco", version: "7.0", class: "oe_form_container o_form_container" },
             children: [],
             tag: "form"
         };
@@ -1116,7 +1099,7 @@ var abstractReconciliationLine = Widget.extend({
 });
 
 var bankStatementReconciliation = abstractReconciliation.extend({
-    className: abstractReconciliation.prototype.className + ' oe_bank_statement_reconciliation',
+    className: abstractReconciliation.prototype.className + ' oe_bank_statement_reconciliation o_bank_statement_reconciliation',
 
     events: _.defaults({
         "click .statement_name span": "statementNameClickHandler",
@@ -1542,7 +1525,7 @@ var bankStatementReconciliation = abstractReconciliation.extend({
         // Render it
         self.$(".protip").hide();
         self.updateShowMoreButton();
-        self.$(".oe_form_sheet").append(QWeb.render("bank_statement_reconciliation_done_message", {
+        self.$(".oe_form_sheet, o_form_sheet").append(QWeb.render("bank_statement_reconciliation_done_message", {
             title: title,
             all_was_auto_reconciled: all_was_auto_reconciled,
             time_taken: time_taken,
@@ -1604,7 +1587,7 @@ var bankStatementReconciliation = abstractReconciliation.extend({
 });
 
 var bankStatementReconciliationLine = abstractReconciliationLine.extend({
-    className: abstractReconciliationLine.prototype.className + ' oe_bank_statement_reconciliation_line',
+    className: abstractReconciliationLine.prototype.className + ' oe_bank_statement_reconciliation_line o_bank_statement_reconciliation_line',
 
     events: _.defaults({
         "click .change_partner": "changePartnerClickHandler",
@@ -1856,8 +1839,10 @@ var bankStatementReconciliationLine = abstractReconciliationLine.extend({
         $.when(self.changePartner(false)).then(function(){
             self.$(".change_partner_container").show();
             self.$(".partner_name").hide();
-            self.change_partner_field.$drop_down.trigger("click");
-        })
+            // Old design uses drop_down and new design uses dropdown
+            var m2o_widget_dropdown = self.change_partner_field.$drop_down || self.change_partner_field.$dropdown;
+            m2o_widget_dropdown.trigger("click");
+        });
     },
 
 
@@ -2108,7 +2093,7 @@ var bankStatementReconciliationLine = abstractReconciliationLine.extend({
 });
 
 var manualReconciliation = abstractReconciliation.extend({
-    className: abstractReconciliation.prototype.className + ' oe_manual_reconciliation',
+    className: abstractReconciliation.prototype.className + ' oe_manual_reconciliation o_manual_reconciliation',
 
     events: _.defaults({
         "change input[name='modeselektor']": "modeSelektorHandler",
@@ -2336,7 +2321,7 @@ var manualReconciliation = abstractReconciliation.extend({
     },
 
     showDoneMessage: function() {
-        this.$(".oe_form_sheet").append(QWeb.render("manual_reconciliation_done_message"));
+        this.$(".oe_form_sheet, .o_form_sheet").append(QWeb.render("manual_reconciliation_done_message"));
         var container = $("<div style='overflow: hidden;' />");
         this.$(".done_message").wrap(container).css("opacity", 0).css("position", "relative").css("left", "-50%");
         this.$(".done_message").animate({opacity: 1, left: 0}, this.aestetic_animation_speed*2, "easeOutCubic");
@@ -2364,7 +2349,7 @@ var manualReconciliation = abstractReconciliation.extend({
 });
 
 var manualReconciliationLine = abstractReconciliationLine.extend({
-    className: abstractReconciliationLine.prototype.className + ' oe_manual_reconciliation_line',
+    className: abstractReconciliationLine.prototype.className + ' oe_manual_reconciliation_line o_manual_reconciliation_line',
 
     events: _.defaults({
         "click .accounting_view thead": "headerClickHandler",
diff --git a/addons/account/static/src/css/account_reconciliation.scss b/addons/account/static/src/less/account_reconciliation.less
index 0481bc08bbe..ff7038acd49 100644
--- a/addons/account/static/src/css/account_reconciliation.scss
+++ b/addons/account/static/src/less/account_reconciliation.less
@@ -1,24 +1,28 @@
-$actionColWidth: 15px;
-$mainTableBordersPadding: 3px;
-$lightBorder: 1px solid #bbb;
-$accountingBorder: 1px solid #000;
-$initialLineBackground: #f0f0f0;
-$infoColor: #44c;
-// Warning, this value is also specified in the instance.web.account.abstractReconciliation widget
-$aestetic_animation_speed: 300ms;
+@actionColWidth: 15px;
+@mainTableBordersPadding: 3px;
+@lightBorder: 1px solid #bbb;
+@accountingBorder: 1px solid #000;
+@initialLineBackground: #f0f0f0;
+@infoColor: #44c;
+// Warning, this value is also specified in the abstractReconciliation widget
+@aestetic_animation_speed: 300ms;
 
 
-.openerp .oe_reconciliation {
-    font-size: 12px;
+.oe_reconciliation, .o_reconciliation {
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     -o-user-select: none;
     user-select: none;
     cursor: default;
-    height: 100%;
+    font-size: 12px;
     overflow: auto;
 
+    // Why on earth does bootstrap set font-size to 14px in popovers ?
+    .popover {
+        font-size: 12px;
+    }
+
     .oe_form_sheetbg {
         padding-top: 0;
 
@@ -30,18 +34,11 @@ $aestetic_animation_speed: 300ms;
         }
     }
 
-    // For future ⌨ navigation
-    // *[tabindex='0']:focus {
-    //     outline: 1px solid #888;
-    //     outline-offset: 2px;
-    //     outline-color: invert;
-    // }
-
     .clearer {
         clear: both;
     }
 
-    .oe_view_nocontent {
+    .oe_view_nocontent, .o_view_nocontent {
         max-width: none;
 
         > p {
@@ -55,7 +52,7 @@ $aestetic_animation_speed: 300ms;
 
     h1 {
         width: 48%;
-        padding: 0 0 0 $actionColWidth;
+        padding: 0 0 0 @actionColWidth;
         margin: 0 0 25px 0;
         float: left;
         font-size: 2em;
@@ -91,7 +88,7 @@ $aestetic_animation_speed: 300ms;
 
     .progress {
         width: 49%;
-        margin: 10px $actionColWidth 0 0;
+        margin: 10px @actionColWidth 0 0;
         float: right;
         position: relative;
         display: inline-block;
@@ -101,7 +98,7 @@ $aestetic_animation_speed: 300ms;
             position: absolute;
             width: 100%;
             left: 0;
-            top: 2px;
+            top: 1px;
             z-index: 10;
             text-shadow:
                -1px -1px 0 #f5f5f5,
@@ -109,17 +106,22 @@ $aestetic_animation_speed: 300ms;
                 -1px 1px 0 #f5f5f5,
                  1px 1px 0 #f5f5f5;
         }
+        .progress-bar {
+            background-color: @odoo-brand-optional;
+        }
     }
 
     .show_more_container {
         text-align: center;
+        margin-bottom: 15px;
 
         .show_more {
             display: none;
+            margin: auto;
         }
     }
     .notification_area {
-        margin: 0 $actionColWidth;
+        margin: 0 @actionColWidth;
         .fa {
             font-size: 20px;
             margin-left: 7px;
@@ -131,9 +133,9 @@ $aestetic_animation_speed: 300ms;
 
     .interface_options {
         margin-bottom: 25px;
-        padding-left: $actionColWidth;
+        padding-left: @actionColWidth;
 
-        .oe_radio_input {
+        .oe_radio_input, .o_radio_input {
             border: none;
             display: inline;
         }
@@ -198,8 +200,6 @@ $aestetic_animation_speed: 300ms;
 
     /* icons */
     .fa {
-        font-size: 12px !important;
-
         &.line_info_button {
             color: #ccc !important;
         }
@@ -212,7 +212,7 @@ $aestetic_animation_speed: 300ms;
     }
 
     // reconciliationLine widget
-    .oe_reconciliation_line {
+    .oe_reconciliation_line, .o_reconciliation_line {
         margin-bottom: 30px;
 
         table {
@@ -231,11 +231,11 @@ $aestetic_animation_speed: 300ms;
             -ms-transform: rotate(0deg);
             -o-transform: rotate(0deg);
             transform: rotate(0deg);
-            -webkit-transition-duration: $aestetic_animation_speed;
-            -moz-transition-duration: $aestetic_animation_speed;
-            -ms-transition-duration: $aestetic_animation_speed;
-            -o-transition-duration: $aestetic_animation_speed;
-            transition-duration: $aestetic_animation_speed;
+            -webkit-transition-duration: @aestetic_animation_speed;
+            -moz-transition-duration: @aestetic_animation_speed;
+            -ms-transition-duration: @aestetic_animation_speed;
+            -o-transition-duration: @aestetic_animation_speed;
+            transition-duration: @aestetic_animation_speed;
         }
 
         .visible_toggle {
@@ -248,7 +248,10 @@ $aestetic_animation_speed: 300ms;
         }
 
         .partner_name {
+            color: #444;
+
             .change_partner {
+                color: @odoo-brand-optional;
                 display: none;
                 cursor: pointer;
                 margin: 0 10px 0 5px;
@@ -267,25 +270,25 @@ $aestetic_animation_speed: 300ms;
         // modes : specific
         &[data-mode="match"] {
             .toggle_match {
-                @extend .visible_toggle;
+                .visible_toggle;
             }
         }
 
         &[data-mode="create"] {
             .toggle_create {
-                @extend .visible_toggle;
+                .visible_toggle;
             }
 
             &.no_partner {
                 .toggle_match {
-                    @extend .visible_toggle;
+                    .visible_toggle;
                 }
             }
         }
 
         &[data-mode="inactive"] {
             .initial_line > td {
-                background-color: ($initialLineBackground + #080808) !important;
+                background-color: (@initialLineBackground + #080808) !important;
             }
         }
 
@@ -318,7 +321,7 @@ $aestetic_animation_speed: 300ms;
                 td {
                     padding-top: 10px;
                     text-align: center;
-                    color: $infoColor;
+                    color: @infoColor;
                 }
             }
         }
@@ -332,7 +335,7 @@ $aestetic_animation_speed: 300ms;
             }
 
             tr.already_reconciled {
-                color: $infoColor;
+                color: @infoColor;
             }
 
             td {
@@ -341,7 +344,7 @@ $aestetic_animation_speed: 300ms;
             }
 
             td.cell_action, td.cell_info_popover {
-                width: $actionColWidth;
+                width: @actionColWidth;
                 padding: 0;
             }
 
@@ -351,7 +354,7 @@ $aestetic_animation_speed: 300ms;
 
             td.cell_account_code {
                 width: 80px;
-                padding-left: $mainTableBordersPadding;
+                padding-left: @mainTableBordersPadding;
             }
 
             td.cell_due_date {
@@ -370,7 +373,7 @@ $aestetic_animation_speed: 300ms;
             td.cell_credit {
                 width: 15%;
                 text-align: right;
-                padding-right: $mainTableBordersPadding;
+                padding-right: @mainTableBordersPadding;
             }
 
             td.cell_info_popover {
@@ -381,22 +384,22 @@ $aestetic_animation_speed: 300ms;
                 color: #bbb;
             }
 
-            tr .fa:not(.line_info_button) {
+            tr .toggle_create, .toggle_match, .fa-add-remove {
                 visibility: hidden;
                 color: #555;
             }
 
-            tr:hover .fa, tr:focus .fa, tr.active .fa {
+            tr:hover .toggle_create, tr:focus .toggle_match, tr.active .fa-add-remove, tr:hover .toggle_create, tr:focus .toggle_match, tr.active .fa-add-remove, tr:hover .toggle_create, tr:focus .toggle_match, tr.active .fa-add-remove {
                 visibility: visible;
             }
 
             tr .do_partial_reconcile_button {
-                color: #f0ad4e;
+                color: @odoo-brand-optional;
                 padding-right: 5px;
             }
 
             tr .undo_partial_reconcile_button {
-                color: #555;
+                color: @odoo-brand-secondary;
                 padding-right: 5px;
             }
         }
@@ -406,19 +409,19 @@ $aestetic_animation_speed: 300ms;
             border-collapse: separate;
 
             .initial_line > td {
-                border-top: $lightBorder;
+                border-top: @lightBorder;
                 padding-top: 4px;
                 padding-bottom: 5px;
-                background-color: $initialLineBackground;
+                background-color: @initialLineBackground;
                 -webkit-transition-property: background-color;
                 -moz-transition-property: background-color;
                 -ms-transition-property: background-color;
                 transition-property: background-color;
-                -webkit-transition-duration: $aestetic_animation_speed;
-                -moz-transition-duration: $aestetic_animation_speed;
-                -ms-transition-duration: $aestetic_animation_speed;
-                -o-transition-duration: $aestetic_animation_speed;
-                transition-duration: $aestetic_animation_speed;
+                -webkit-transition-duration: @aestetic_animation_speed;
+                -moz-transition-duration: @aestetic_animation_speed;
+                -ms-transition-duration: @aestetic_animation_speed;
+                -o-transition-duration: @aestetic_animation_speed;
+                transition-duration: @aestetic_animation_speed;
 
                 &.cell_action, &.cell_info_popover {
                     border-top: none;
@@ -432,7 +435,8 @@ $aestetic_animation_speed: 300ms;
             caption {
                 text-align: left;
                 height: 26px;
-                margin: 0 $actionColWidth 4px $actionColWidth;
+                margin: 0 @actionColWidth 4px @actionColWidth;
+                padding: 0; 
 
                 .partner_name {
                     font-size: 1.1em;
@@ -440,6 +444,7 @@ $aestetic_animation_speed: 300ms;
                 }
 
                 .tip_reconciliation_not_balanced {
+                    color: red;
                     float: right;
                     padding-right: 7px;
                 }
@@ -460,7 +465,7 @@ $aestetic_animation_speed: 300ms;
             }
 
             // accounting "T"
-            td.cell_credit { border-left: $accountingBorder; }
+            td.cell_credit { border-left: @accountingBorder; }
         }
 
 
@@ -469,10 +474,11 @@ $aestetic_animation_speed: 300ms;
             display: none;
             padding: 1px;
             .match_controls {
-                padding: 0 0 5px ($actionColWidth+$mainTableBordersPadding);
+                padding: 0 0 5px (@actionColWidth+@mainTableBordersPadding);
 
                 .filter {
                     width: 240px;
+                    display: inline-block;
                 }
 
                 .pager_control_left, .pager_control_right {
@@ -492,7 +498,7 @@ $aestetic_animation_speed: 300ms;
 
             .show_more {
                 display: inline-block;
-                margin-left: ($actionColWidth+$mainTableBordersPadding);
+                margin-left: (@actionColWidth+@mainTableBordersPadding);
                 margin-top: 5px;
             }
         }
@@ -501,7 +507,7 @@ $aestetic_animation_speed: 300ms;
         /* Action create */
         .create {
             display: none;
-            margin: 0 $actionColWidth;
+            margin: 0 @actionColWidth;
             border: 1px solid #d5d5d5;
             border-radius: 5px;
             padding: 10px;
@@ -533,7 +539,7 @@ $aestetic_animation_speed: 300ms;
                 }
             }
 
-            .oe_form > table {
+            .oe_form > table, .o_form > table {
                 width: 49%;
                 height: 26px;
 
@@ -578,8 +584,8 @@ $aestetic_animation_speed: 300ms;
     }
 }
 
-.openerp .oe_manual_reconciliation {
-    .oe_manual_reconciliation_line {
+.oe_manual_reconciliation, .o_manual_reconciliation {
+    .oe_manual_reconciliation_line, .o_manual_reconciliation_line {
         .button_reconcile {
             float: right;
             position: relative;
@@ -616,7 +622,7 @@ $aestetic_animation_speed: 300ms;
                 }
 
                 tr:first-child td {
-                    border-bottom: $lightBorder;
+                    border-bottom: @lightBorder;
 
                     &.cell_action, &.cell_info_popover {
                         border-bottom: none;
@@ -640,7 +646,7 @@ $aestetic_animation_speed: 300ms;
         }
 
         td.cell_due_date {
-            padding-left: $mainTableBordersPadding !important;
+            padding-left: @mainTableBordersPadding !important;
         }
     }
 }
diff --git a/addons/account/static/src/xml/account_reconciliation.xml b/addons/account/static/src/xml/account_reconciliation.xml
index b34fd5d79a9..8f0cccd3343 100644
--- a/addons/account/static/src/xml/account_reconciliation.xml
+++ b/addons/account/static/src/xml/account_reconciliation.xml
@@ -5,16 +5,16 @@
     <!-- abstract or shared templates -->
 
     <t t-name="reconciliation">
-        <div class="oe_form_sheetbg"><div class="oe_form_sheet oe_form_sheet_width">
+        <div class="oe_form_sheetbg o_form_view"><div class="oe_form_sheet o_form_sheet oe_form_sheet_width">
             <h1><t t-esc="title"/></h1>
             <div t-if="! hide_progress" class="progress progress-striped">
                 <div class="progress-text"><span class="valuenow">0</span> / <span class="valuemax"><t t-esc="total_lines"/></span></div>
                 <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" t-att-aria-valuemax="total_lines" style="width: 0%;">
                 </div>
             </div>
-            <div class="oe_clear"></div>
+            <div class="oe_clear o_clear"></div>
             <div class="notification_area"></div>
-            <div class="interface_options oe_form"></div>
+            <div class="interface_options oe_form o_form"></div>
             <div class="reconciliation_lines_container"></div>
             <div class="show_more_container"><button class="show_more btn btn-default btn-sm">Show more... (<span class="num_items_remaining"></span> remaining)</button></div>
             <p class='protip'>Tip : Hit ctrl-enter to reconcile all the balanced items in the sheet.</p>
@@ -22,9 +22,9 @@
     </t>
 
     <t t-name="nothing_to_reconcile">
-        <div class="oe_form_sheetbg"><div class="oe_form_sheet oe_form_sheet_width">
+        <div class="oe_form_sheetbg o_form_view"><div class="oe_form_sheet o_form_sheet oe_form_sheet_width">
             <div class="notification_area"></div>
-            <div class="oe_view_nocontent"></div>
+            <div class="oe_view_nocontent o_view_nocontent"></div>
         </div></div>
     </t>
 
@@ -82,7 +82,7 @@
                                 </ul>
                             </div>
                         </div>
-                        <div class="oe_form create_form">
+                        <div class="oe_form o_form create_form">
                             <!-- here come some form_create_field -->
                             <table class="create_field add_line_container"><tr><td><a href="javascript:void(0)" class="add_line"><i class="fa fa-plus-circle"></i> New Operation</a></td></tr></table>
                             <div class='clearer'></div>
@@ -187,7 +187,7 @@
             <t t-if="single_statement">
                 <h1 class="statement_name">
                     <span><t t-esc="title"/></span>
-                    <table class="change_statement_name_container oe_form"><tr>
+                    <table class="change_statement_name_container oe_form o_form"><tr>
                         <td><input class="change_statement_name_field" type="text"/></td>
                         <td><button class="change_statement_name_button btn btn-primary btn-sm">OK</button></td>
                     </tr></table>
@@ -200,7 +200,7 @@
     </t>
 
     <t t-name="bank_statement_nothing_to_reconcile" t-extend="nothing_to_reconcile">
-        <t t-jquery=".oe_view_nocontent" t-operation="inner">
+        <t t-jquery=".oe_view_nocontent, .o_view_nocontent" t-operation="inner">
             <p><b>Good Job!</b> Bank statements are fully reconciled.</p>
             <p>This page displays all the bank transactions that are to be reconciled and provides with a neat interface to do so.</p>
         </t>
@@ -236,7 +236,7 @@
                 <t t-esc="line.partner_name"/>
                 <span class="change_partner fa fa-times"></span>
             </span>
-            <div class="change_partner_container oe_form"></div>
+            <div class="change_partner_container oe_form o_form"></div>
         </t>
         <t t-jquery=".accounting_view caption" t-operation="after">
             <tbody class="tbody_initial_line">
@@ -276,20 +276,20 @@
 
     <t t-name="show_mode_selector_option">
         <div>
-            <span class="oe_radio_input"><input type="radio" name="modeselektor" t-att-val="value" t-attf-id="mode_{{value}}" t-att-checked="(mode === value ? true : undefined)" /></span>
+            <span class="oe_radio_input o_radio_input"><input type="radio" name="modeselektor" t-att-val="value" t-attf-id="mode_{{value}}" t-att-checked="(mode === value ? true : undefined)" /></span>
             <label t-attf-for="mode_{{value}}"><t t-esc="title"/></label>
         </div>
     </t>
 
     <t t-name="manual_reconciliation" t-extend="reconciliation">
         <t t-jquery=".interface_options" t-operation="append">
-            <table t-if="show_mode_selector" border="0" cellpadding="0" cellspacing="0" class="oe_form_group"><tbody>
-                <tr class="oe_form_group_row">
-                    <td class="oe_form_group_cell oe_form_group_cell_label" colspan="1">
-                        <label for="oe-field-input-5" class="oe_form_label oe_align_right">Show</label>
+            <table t-if="show_mode_selector" border="0" cellpadding="0" cellspacing="0" class="oe_form_group o_form_group"><tbody>
+                <tr class="oe_form_group_row o_form_group_row">
+                    <td class="oe_form_group_cell o_form_group_cell oe_form_group_cell_label o_form_group_cell_label" colspan="1">
+                        <label for="oe-field-input-5" class="oe_form_label o_form_label oe_align_right o_align_right">Show</label>
                     </td>
-                    <td class="oe_form_group_cell" colspan="1" width="99%">
-                        <span class="oe_form_field oe_form_field_radio oe_vertical oe_form_required">
+                    <td class="oe_form_group_cell o_form_group_cell" colspan="1" width="99%">
+                        <span class="oe_form_field o_form_field oe_form_field_radio o_form_field_radio oe_vertical o_vertical oe_form_required o_form_required">
                             <span>
                                 <t t-if="display_mode_customers" t-call="show_mode_selector_option"><t t-set="value">customers</t><t t-set="title">Customers</t></t>
                                 <t t-if="display_mode_suppliers" t-call="show_mode_selector_option"><t t-set="value">suppliers</t><t t-set="title">Vendors</t></t>
@@ -304,7 +304,7 @@
     </t>
 
     <t t-name="manual_reconciliation_nothing_to_reconcile" t-extend="nothing_to_reconcile">
-        <t t-jquery=".oe_view_nocontent" t-operation="inner">
+        <t t-jquery=".oe_view_nocontent, .o_view_nocontent" t-operation="inner">
             <p><b>Good Job!</b> There is nothing to reconcile.</p>
             <p>All invoices and payments have been matched, your accounts' balances are clean.</p>
         </t>
diff --git a/addons/account/views/account.xml b/addons/account/views/account.xml
index 58bc0ffd3f0..41bf0ceb410 100644
--- a/addons/account/views/account.xml
+++ b/addons/account/views/account.xml
@@ -4,8 +4,8 @@
         <template id="assets_backend" name="account assets" inherit_id="web.assets_backend">
             <xpath expr="." position="inside">
                 <link rel="stylesheet" href="/account/static/src/css/account_bank_and_cash.css"/>
-                <link rel="stylesheet" href="/account/static/src/css/account_reconciliation.css"/>
                 <link rel="stylesheet" href="/account/static/src/css/account.css"/>
+                <link rel="stylesheet" href="/account/static/src/less/account_reconciliation.less"/>
                 <link rel="stylesheet" href="/account/static/src/less/account_journal_dashboard.less"/>
 
                 <script type="text/javascript" src="/account/static/src/js/account_reconciliation_widgets.js"></script>