[IMP] base: Configure document layout

The onboarding modal for setting up the few base fields of a company
has now been moved to a wizard
It is accessible from the general settings, but also in the onboarding
section of sale and account modules.

The following company settings are editable with that wizard:

- Set report **layout**:
The user can chose the overall look of the report. The current choices
are : *Standard* (default), *Background*, *Boxed* and *Clean*.

- Set company **logo**:
Changes the company logo.

- Set report **colors**:
The user can set the primary and secondary colors of the report through
a newly added widget allowing to pick a custom color.
When changing the **logo**, colors are automatically set to its most dominant
colors.
> A "Reset colors" button also triggers the color calculation.

- Set report **font**:
Changes the overall font of the report. Only Google Fonts are used
for enhanced compatibility.

- Company **tagline**, also called "header"
- **Footer**
- **Paper format**
- Report **preview**:
A mockup of a final report
Automatically updates when changing **layout**, **logo**, **colors** or **font**

Co-authored by: Julien Mougenot <jum@odoo.com>

closes odoo/odoo#33863

Signed-off-by: VincentSchippefilt <VincentSchippefilt@users.noreply.github.com>


Co-authored-by: Lucas Perais <lpe@odoo.com>

3 files changed, 92 insertions, 8 deletions

diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js
index 11da78c89e0..4e63e5d3613 100644
--- a/addons/web/static/src/js/fields/basic_fields.js
+++ b/addons/web/static/src/js/fields/basic_fields.js
@@ -23,6 +23,7 @@ var utils = require('web.utils');
 var view_dialogs = require('web.view_dialogs');
 var field_utils = require('web.field_utils');
 var time = require('web.time');
+var ColorpickerDialog = require('web.ColorpickerDialog');
 
 require("web.zoomodoo");
 
@@ -373,11 +374,11 @@ var NumericField = InputField.extend({
     // Private
     //--------------------------------------------------------------------------
 
-    /** 
+    /**
      * Evaluate a string representing a simple formula,
      * a formula is composed of numbers and arithmetic operations
      * (ex: 4+3*2)
-     * 
+     *
      * Supported arithmetic operations: + - * / ^ ( )
      * Since each number in the formula can be expressed in user locale,
      * we parse each float value inside the formula using the user context
@@ -385,7 +386,7 @@ var NumericField = InputField.extend({
      * We assume that this function is used as a calculator so operand ^ (xor)
      * is replaced by operand ** (power) so that users that are used to
      * excel or libreoffice are not confused
-     * 
+     *
      * @private
      * @param expr
      * @return a float representing the result of the evaluated formula
@@ -1756,7 +1757,7 @@ var FieldBinaryImage = AbstractFieldBinary.extend({
     },
     /**
      * Returns the image URL from a model.
-     * 
+     *
      * @private
      * @param {string} model    model from which to retrieve the image
      * @param {string} res_id   id of the record
@@ -1769,7 +1770,7 @@ var FieldBinaryImage = AbstractFieldBinary.extend({
             model: model,
             id: JSON.stringify(res_id),
             field: field,
-            // unique forces a reload of the image when the record has been updated	
+            // unique forces a reload of the image when the record has been updated
             unique: field_utils.format.datetime(unique).replace(/[^0-9]/g, ''),
         });
     },
@@ -1811,7 +1812,7 @@ var FieldBinaryImage = AbstractFieldBinary.extend({
     },
     /**
      * Only enable the zoom on image in read-only mode, and if the option is enabled.
-     * 
+     *
      * @override
      * @private
      */
@@ -3204,6 +3205,59 @@ var AceEditor = DebouncedField.extend({
     },
 });
 
+
+/**
+ * The FieldColor widget give a visual representation of a color
+ * Clicking on it bring up an instance of ColorpickerDialog
+ */
+var FieldColor = AbstractField.extend({
+    template: 'FieldColor',
+    events: {
+        'click .o_field_color': '_onColorClick',
+    },
+    custom_events: {
+        'colorpicker:saved': '_onColorpickerSaved',
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+    * @override
+    * @private
+    */
+    _render: function () {
+        this._super.apply(this, arguments);
+        this.$('.o_field_color').data('value', this.value)
+            .css('background-color', this.value)
+            .attr('title', this.value);
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+    * @private
+    * @param {MouseEvent} ev
+    */
+    _onColorClick: function (ev) {
+        new ColorpickerDialog(this, {
+            defaultColor: this.value,
+            noTransparency: true,
+        }).open();
+    },
+
+    /**
+    * @private
+    * @param {OdooEvent} ev
+    */
+    _onColorpickerSaved: function (ev) {
+        this._setValue(ev.data.hex);
+    },
+});
+
 return {
     TranslatableFieldMixin: TranslatableFieldMixin,
     DebouncedField: DebouncedField,
@@ -3247,6 +3301,7 @@ return {
     CharCopyClipboard: CharCopyClipboard,
     JournalDashboardGraph: JournalDashboardGraph,
     AceEditor: AceEditor,
+    FieldColor: FieldColor,
 };
 
 });
diff --git a/addons/web/static/src/js/fields/field_registry.js b/addons/web/static/src/js/fields/field_registry.js
index b5eed8a42b5..1de315eda30 100644
--- a/addons/web/static/src/js/fields/field_registry.js
+++ b/addons/web/static/src/js/fields/field_registry.js
@@ -59,7 +59,8 @@ registry
     .add('progressbar', basic_fields.FieldProgressBar)
     .add('toggle_button', basic_fields.FieldToggleBoolean)
     .add('dashboard_graph', basic_fields.JournalDashboardGraph)
-    .add('ace', basic_fields.AceEditor);
+    .add('ace', basic_fields.AceEditor)
+    .add('color', basic_fields.FieldColor);
 
 // Relational fields
 registry
@@ -78,7 +79,8 @@ registry
     .add('many2many_checkboxes', relational_fields.FieldMany2ManyCheckBoxes)
     .add('one2many', relational_fields.FieldOne2Many)
     .add('statusbar', relational_fields.FieldStatus)
-    .add('reference', relational_fields.FieldReference);
+    .add('reference', relational_fields.FieldReference)
+    .add('font', relational_fields.FieldSelectionFont);
 
 // Special fields
 registry
diff --git a/addons/web/static/src/js/fields/relational_fields.js b/addons/web/static/src/js/fields/relational_fields.js
index d50e03540f2..0f13228526e 100644
--- a/addons/web/static/src/js/fields/relational_fields.js
+++ b/addons/web/static/src/js/fields/relational_fields.js
@@ -2786,6 +2786,32 @@ var FieldSelectionBadge = FieldSelection.extend({
     },
 });
 
+var FieldSelectionFont = FieldSelection.extend({
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Changes CSS for all options according to their value.
+     * Also removes empty labels.
+     *
+     * @private
+     * @override
+     */
+    _renderEdit: function () {
+        this._super.apply(this, arguments);
+
+        this.$('option').each(function (i, option) {
+            if (! option.label) {
+                $(option).remove();
+            }
+            $(option).css('font-family', option.value);
+        });
+        this.$el.css('font-family', this.value);
+    },
+});
+
 /**
  * The FieldReference is a combination of a select (for the model) and
  * a FieldMany2one for its value.
@@ -2953,6 +2979,7 @@ return {
     FieldSelectionBadge: FieldSelectionBadge,
     FieldSelection: FieldSelection,
     FieldStatus: FieldStatus,
+    FieldSelectionFont: FieldSelectionFont,
 
     FieldReference: FieldReference,
 };