[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>

addons/web/static/tests/fields/basic_fields_tests.js

@@ -42,6 +42,7 @@ QUnit.module('basic_fields', {
                     selection: {string: "Selection", type: "selection", searchable:true,
                         selection: [['normal', 'Normal'],['blocked', 'Blocked'],['done', 'Done']]},
                     document: {string: "Binary", type: "binary"},
+                    hex_color: {string: "hexadecimal color", type: "char"},
                 },
                 records: [{
                     id: 1,
@@ -57,6 +58,7 @@ QUnit.module('basic_fields', {
                     trululu: 4,
                     selection: 'blocked',
                     document: 'coucou==\n',
+                    hex_color: '#ff0000',
                 }, {
                     id: 2,
                     display_name: "second record",
@@ -2940,7 +2942,7 @@ QUnit.module('basic_fields', {
 
         await testUtils.form.clickEdit(form);
         await testUtils.dom.openDatepicker(form.$('.o_datepicker'));
-        
+
         assert.containsOnce($('body'), '.bootstrap-datetimepicker-widget', "datepicker should be opened");
 
         form.el.dispatchEvent(new Event('scroll'));
@@ -5814,6 +5816,68 @@ QUnit.module('basic_fields', {
 
         form.destroy();
     });
+
+    QUnit.module('FieldColor');
+
+    QUnit.test('Field Color: default widget state', async function (assert) {
+        assert.expect(3);
+
+        var form = await createView({
+            View: FormView,
+            model: 'partner',
+            data: this.data,
+            arch:
+                '<form>' +
+                    '<field name="hex_color" widget="color" />' +
+                '</form>',
+            res_id: 1,
+            viewOptions: {
+                mode: 'edit',
+            },
+        });
+
+        await testUtils.dom.click(form.$('.o_field_color'));
+        await testUtils.nextTick();
+        assert.containsOnce($, '.modal');
+        assert.containsNone($('.modal'), '.o_opacity_slider',
+            "Opacity slider should not be present");
+        assert.containsNone($('.modal'), '.o_opacity_input',
+            "Opacity input should not be present");
+
+        await testUtils.dom.click($('.modal .btn:contains("Discard")'));
+
+        form.destroy();
+    });
+
+    QUnit.test('Field Color: pick and reset colors', async function (assert) {
+        assert.expect(2);
+
+        var form = await createView({
+            View: FormView,
+            model: 'partner',
+            data: this.data,
+            arch:
+                '<form>' +
+                    '<field name="hex_color" widget="color" />' +
+                '</form>',
+            res_id: 1,
+            viewOptions: {
+                mode: 'edit',
+            },
+        });
+
+        assert.strictEqual($('.o_field_color').css('backgroundColor'), 'rgb(255, 0, 0)',
+            "Background of the color field should be initially red");
+
+        await testUtils.dom.click(form.$('.o_field_color'));
+        await testUtils.fields.editAndTrigger($('.modal .o_hex_input'), '#00ff00', ['change']);
+        await testUtils.dom.click($('.modal .btn:contains("Choose")'));
+
+        assert.strictEqual($('.o_field_color').css('backgroundColor'), 'rgb(0, 255, 0)',
+            "Background of the color field should be updated to green");
+
+        form.destroy();
+    });
 });
 });
 });