From 250e716c3a12e88acb4a199b427dc47d4ec55d5d Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Wed, 19 Apr 2017 18:06:12 +0200
Subject: [REF] web, *: restore views design

Since the new views merge, a lot of design elements were broken. This
was particularly impacting the fields in the editable list view; indeed
the editable list view is not using an inline form view anymore so the
fields in the list were not properly styled as the LESS was still
defined assuming the form view environment (for example the invalid
fields were red for o2m fields in form view but not in editable list
view even though they got the right CSS class).

This commit refactor the LESS following these rules:
- No more division of non-layout and layout rules. Dividing LESS rules
  in x_layout.less and x.less was a mistake. Many rules can be
  considered to be layout and not layout at the same time, developers
  always have to switch from one file part to the other, many CSS
  selectors (and rules!) are duplicated for nothing, ...
- Field style is extracted from x_view.less and put in the new
  fields.less file. As before, the fields_extra.less will contain the
  rules specific to community so that the enterprise repo can override
  those by replacing the whole file.
- Many classes have been renamed so that o_form_x_y becomes o_x_y as
  many classes can now be applied outside of form view. These classes
  should not be used in templates anyway.

The commit also changes the DOM of fields so that it is more minimalist
(no useless parent div, etc).

Input elements are not automatically styled anymore, they have to get
the o_input class explicitely. This allows to fix lots of small style
bugs of previous versions (required monetary field had not the proper
style, readonly m2m tags appeared as editable, ...). This also improves
the LESS code.

The editable list view should also completely stop flickering on chrome
and firefox.

The commit also removes the orange outline on list view dirty cells.

The commit also removes deprecated static xml, LESS and other code.

Notice there are still styles to restore/fix and LESS to improve.
---
 addons/web/static/src/js/fields/basic_fields.js | 105 +++++++++++-------------
 1 file changed, 47 insertions(+), 58 deletions(-)

(limited to 'addons/web/static/src/js/fields/basic_fields.js')

diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js
index e600954b967..7b48574fb44 100644
--- a/addons/web/static/src/js/fields/basic_fields.js
+++ b/addons/web/static/src/js/fields/basic_fields.js
@@ -184,7 +184,7 @@ var InputField = DebouncedField.extend({
      */
     _prepareInput: function ($input) {
         this.$input = $input || $("<input/>");
-        this.$input.addClass('o_form_input');
+        this.$input.addClass('o_input');
         this.$input.attr({
             type: 'text',
             placeholder: this.attrs.placeholder || "",
@@ -261,12 +261,13 @@ var InputField = DebouncedField.extend({
 });
 
 var FieldChar = InputField.extend({
-    supportedFieldTypes: ['char'],
+    className: 'o_field_char',
     tagName: 'span',
+    supportedFieldTypes: ['char'],
 });
 
 var FieldDate = InputField.extend({
-    className: "o_form_field_date",
+    className: "o_field_date",
     tagName: "span",
     supportedFieldTypes: ['date'],
 
@@ -411,7 +412,8 @@ var FieldDateTime = FieldDate.extend({
 });
 
 var FieldMonetary = InputField.extend({
-    className: 'o_form_field_monetary o_list_number',
+    className: 'o_field_monetary o_field_number',
+    tagName: 'span',
     supportedFieldTypes: ['float', 'monetary'],
     resetOnAnyFieldChange: true, // Have to listen to currency changes
 
@@ -436,6 +438,7 @@ var FieldMonetary = InputField.extend({
 
         if (this.mode === 'edit' && this.currency) {
             this.tagName = 'div';
+            this.className += ' o_input';
         }
     },
 
@@ -554,28 +557,18 @@ var FieldBoolean = AbstractField.extend({
     /**
      * The actual checkbox is designed in css to have full control over its
      * appearance, as opposed to letting the browser and the os decide how
-     * a checkbox should look. The actual input is disabled and hidden.
+     * a checkbox should look. The actual input is disabled and hidden. In
+     * readonly mode, the checkbox is disabled.
      *
      * @override
      * @private
      */
-    _renderReadonly: function () {
+    _render: function () {
         var $checkbox = this._formatValue(this.value);
         this.$input = $checkbox.find('input');
-        this.$el.empty().append($checkbox);
-    },
-
-    /**
-     * The actual checkbox is designed in css to have full control over its
-     * appearance, as opposed to letting the browser and the os decide how
-     * a checkbox should look. The actual input is hidden.
-     *
-     * @override
-     * @private
-     */
-    _renderEdit: function () {
-        this._renderReadonly();
-        this.$input.prop('disabled', false);
+        this.$input.prop('disabled', this.mode === 'readonly');
+        this.$el.addClass($checkbox.attr('class'));
+        this.$el.empty().append($checkbox.contents());
     },
 
     //--------------------------------------------------------------------------
@@ -591,7 +584,6 @@ var FieldBoolean = AbstractField.extend({
     _onChange: function () {
         this._setValue(this.$input[0].checked);
     },
-
     /**
      * Implement keyboard movements.  Mostly useful for its environment, such
      * as a list view.
@@ -624,6 +616,8 @@ var FieldBoolean = AbstractField.extend({
 });
 
 var FieldInteger = InputField.extend({
+    className: 'o_field_integer o_field_number',
+    tagName: 'span',
     supportedFieldTypes: ['integer'],
 
     //--------------------------------------------------------------------------
@@ -669,6 +663,8 @@ var FieldInteger = InputField.extend({
 });
 
 var FieldFloat = InputField.extend({
+    className: 'o_field_float o_field_number',
+    tagName: 'span',
     supportedFieldTypes: ['float'],
 
     /**
@@ -696,22 +692,6 @@ var FieldFloat = InputField.extend({
     isSet: function () {
         return this.value === 0 || this._super.apply(this, arguments);
     },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Format value according to precision parameter.
-     *
-     * @override
-     * @private
-     */
-    _renderReadonly: function () {
-        var value = this._formatValue(this.value);
-        var $span = $('<span>').addClass('o_form_field o_form_field_number').text(value);
-        this.$el.html($span);
-    },
 });
 
 var FieldFloatTime = FieldFloat.extend({
@@ -743,21 +723,28 @@ var FieldFloatTime = FieldFloat.extend({
 });
 
 var FieldText = DebouncedField.extend({
+    className: 'o_field_text',
     supportedFieldTypes: ['text'],
 
     /**
-     * In edit mode, the text widget contains a textarea. We append it in
-     * start() instead of _renderEdit() to keep the same textarea even
-     * if several _renderEdit are done. This allows to keep the cursor
-     * position and to autoresize only once.
+     * @constructor
+     */
+    init: function () {
+        this._super.apply(this, arguments);
+
+        if (this.mode === 'edit') {
+            this.tagName = 'textarea';
+            this.className += ' o_input';
+        }
+    },
+    /**
+     * As it it done in the start function, the autoresize is done only once.
      *
      * @override
      */
     start: function () {
-        this.$el.addClass('o_list_text o_form_textarea');
-
         if (this.mode === 'edit') {
-            this.$textarea = $('<textarea>').appendTo(this.$el);
+            this.$textarea = this.$el;
             if (this.attrs.placeholder) {
                 this.$textarea.attr('placeholder', this.attrs.placeholder);
             }
@@ -816,13 +803,14 @@ var FieldText = DebouncedField.extend({
  * Displays a handle to modify the sequence.
  */
 var HandleWidget = AbstractField.extend({
-    tagName: 'span',
     className: 'o_row_handle fa fa-arrows ui-sortable-handle',
+    tagName: 'span',
     description: "",
     supportedFieldTypes: ['integer'],
 });
 
-var EmailWidget = InputField.extend({
+var FieldEmail = InputField.extend({
+    className: 'o_field_email',
     prefix: 'mailto',
     supportedFieldTypes: ['char'],
 
@@ -853,7 +841,8 @@ var EmailWidget = InputField.extend({
     }
 });
 
-var FieldPhone = EmailWidget.extend({
+var FieldPhone = FieldEmail.extend({
+    className: 'o_field_phone',
     prefix: 'tel',
 
     /**
@@ -907,6 +896,7 @@ var FieldPhone = EmailWidget.extend({
 });
 
 var UrlWidget = InputField.extend({
+    className: 'o_field_url',
     supportedFieldTypes: ['char'],
 
     /**
@@ -939,9 +929,9 @@ var UrlWidget = InputField.extend({
 
 var AbstractFieldBinary = AbstractField.extend({
     events: _.extend({}, AbstractField.prototype.events, {
-        'change .o_form_input_file': 'on_file_change',
+        'change .o_input_file': 'on_file_change',
         'click .o_select_file_button': function () {
-            this.$('.o_form_input_file').click();
+            this.$('.o_input_file').click();
         },
         'click .o_clear_file_button': 'on_clear',
     }),
@@ -1084,8 +1074,8 @@ var FieldBinaryFile = AbstractFieldBinary.extend({
                 this.on_save_as(event);
             }
         },
-        'click .o_form_input': function () { // eq[0]
-            this.$('.o_form_input_file').click();
+        'click .o_input': function () { // eq[0]
+            this.$('.o_input_file').click();
         },
     }),
     supportedFieldTypes: ['binary'],
@@ -1106,7 +1096,7 @@ var FieldBinaryFile = AbstractFieldBinary.extend({
         if (this.value) {
             this.$el.children().removeClass('o_hidden');
             this.$('.o_select_file_button').first().addClass('o_hidden');
-            this.$('.o_form_input').eq(0).val(this.filename_value || this.value);
+            this.$('.o_input').eq(0).val(this.filename_value || this.value);
         } else {
             this.$el.children().addClass('o_hidden');
             this.$('.o_select_file_button').first().removeClass('o_hidden');
@@ -1727,8 +1717,8 @@ var FieldToggleBoolean = AbstractField.extend({
      * @private
      */
     _render: function () {
-        var class_name = this.value ? 'o_toggle_button_success' : 'text-muted';
-        this.$('i').attr('class', ('fa fa-circle ' + class_name));
+        var className = this.value ? 'o_toggle_button_success' : 'text-muted';
+        this.$('i').addClass('fa fa-circle ' + className);
         var title = this.value ? this.attrs.options.active : this.attrs.options.inactive;
         this.$el.attr('title', title);
     },
@@ -1747,7 +1737,6 @@ var FieldToggleBoolean = AbstractField.extend({
         event.stopPropagation();
         this._setValue(!this.value);
     },
-
 });
 
 var JournalDashboardGraph = AbstractField.extend({
@@ -1891,7 +1880,7 @@ var FieldDomain = AbstractField.extend({
 
     events: _.extend({}, AbstractField.prototype.events, {
         "click .o_domain_show_selection_button": "_onShowSelectionButtonClick",
-        "click .o_form_field_domain_dialog_button": "_onDialogEditButtonClick",
+        "click .o_field_domain_dialog_button": "_onDialogEditButtonClick",
     }),
     custom_events: {
         "domain_changed": "_onDomainSelectorValueChange",
@@ -1907,7 +1896,7 @@ var FieldDomain = AbstractField.extend({
         this.inDialog = !!this.nodeOptions.in_dialog;
         this.fsFilters = this.nodeOptions.fs_filters || {};
 
-        this.className = "o_form_field_domain";
+        this.className = "o_field_domain";
         if (this.mode === "edit") {
             this.className += " o_edit_mode";
         }
@@ -2190,7 +2179,7 @@ var AceEditor = DebouncedField.extend({
 
 return {
     DebouncedField: DebouncedField,
-    EmailWidget: EmailWidget,
+    FieldEmail: FieldEmail,
     FieldBinaryFile: FieldBinaryFile,
     FieldBinaryImage: FieldBinaryImage,
     FieldBoolean: FieldBoolean,
-- 
cgit v1.2.3