[IMP] website, *: restore course layout preview

*: website_slides

After [1], the website "new content" dialogs were replaced by formView
dialogs of targeted content (blog, slides, product,...).

The goal of this commit is to restore the "course layout image preview"
on the "New Course" dialog for the "channel_type" field (as on the old
frontend dialog).

Remarks:

- The field was added on 'website' module so it can be used on other
website related modules if needed.
- Some CSS related to the old form was removed in this commit too.

Follows the merge of the "website in backend" task at [1].

[1]: 31cc10b91d

task-2687506

closes odoo/odoo#96346

Related: odoo/enterprise#29922
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/website/__manifest__.py

@@ -169,6 +169,7 @@
             ('remove', 'website/static/src/client_actions/website_preview/website_preview_test_mode.js'),
             'website/static/src/client_actions/*/*.scss',
             'website/static/src/components/fields/fields.js',
+            'website/static/src/components/fields/fields.scss',
             'website/static/src/components/fullscreen_indication/fullscreen_indication.js',
             'website/static/src/components/fullscreen_indication/fullscreen_indication.scss',
             'website/static/src/components/website_loader/website_loader.js',

addons/website/static/src/components/fields/fields.js

@@ -135,3 +135,40 @@ FieldFaPrefix.supportedFieldTypes = ['char'];
 FieldFaPrefix.template = 'website.FieldFaPrefix';
 
 fieldRegistry.add('fa_prefix', FieldFaPrefix);
+
+/**
+ * Displays 'Selection' field's values as images to select.
+ * Image src for each value can be added using the option 'images' on field XML.
+ */
+export class ImageRadioField extends Component {
+    setup() {
+        const selection = this.props.record.fields[this.props.name].selection;
+        // Check if value / label exists for each selection item and add the
+        // corresponding image from field options.
+        this.values = selection.filter(item => {
+            return item[0] || item[1];
+        }).map((value, index) => {
+            return [...value, this.props.images && this.props.images[index] || ''];
+        });
+    }
+
+    /**
+     * @param {String} value
+     */
+    onSelectValue(value) {
+        this.props.update(value);
+    }
+}
+ImageRadioField.supportedTypes = ['selection'];
+ImageRadioField.template = 'website.FieldImageRadio';
+ImageRadioField.props = {
+    ...standardFieldProps,
+    images: {type: Array, element: String},
+};
+ImageRadioField.extractProps = ({attrs}) => {
+    return {
+        images: attrs.options.images,
+    };
+};
+
+registry.category("fields").add("image_radio", ImageRadioField);

addons/website/static/src/components/fields/fields.scss

@@ -0,0 +1,9 @@
+.o_image_radio_option {
+    cursor: pointer;
+    margin: 1rem 0;
+
+    &.active {
+        border: 4px solid $o-brand-primary;
+        box-shadow: 3px 3px 5px gray;
+    }
+}

addons/website/static/src/components/fields/fields.xml

@@ -66,4 +66,14 @@
     <span><i t-attf-class="fa fa-fw {{prefix.class}} {{prefix.visible ? '': 'invisible'}}" t-att-title="prefix.help"/><t t-esc="_formatValue(value)"/></span>
 </t>
 
+<t t-name="website.FieldImageRadio" owl="1">
+    <div class="d-flex">
+        <t t-foreach="values" t-as="option" t-key="option">
+            <div class="flex-fill text-center">
+                <img t-attf-class="o_image_radio_option w-50 {{option[0] === props.value ? 'active' : ''}}" t-att-src="option[2]" t-on-click="() => this.onSelectValue(option[0])"/>
+            </div>
+        </t>
+    </div>
+</t>
+
 </templates>

addons/website_slides/static/src/scss/website_slides.scss

@@ -664,18 +664,6 @@ $line-height-truncate: 1.25em;
     }
 }
 
-#slide_channel_add_form input[name="channel_type"]:checked + label {
-    border: 4px solid $primary;
-    box-shadow: 3px 3px 5px gray;
-}
-
-#slide_channel_add_form label img {
-    // make the layout preview images size depending on the screen size
-    // so we do not need to scroll on most resolutions
-    cursor: pointer;
-    height: 20vh;
-}
-
 .o_wslides_body .form-control::-webkit-input-placeholder {
     color: $gray-500;
 }

addons/website_slides/views/slide_channel_add.xml

@@ -13,7 +13,7 @@
             <group>
                 <field name="website_url" invisible="1"/>
                 <field name="tag_ids" widget="many2many_tags" options="{'color_field': 'color'}" placeholder="Tags"/>
-                <field name="channel_type" widget="radio" options="{'horizontal': true}" string="Choose a layout"/>
+                <field name="channel_type" widget="image_radio" options="{'images': ['/website_slides/static/src/img/channel-training-layout.png', '/website_slides/static/src/img/channel-documentation-layout.png']}" string="Choose a layout"/>
                 <field name="description" placeholder="Common tasks for a computer scientist is asking the right questions and answering questions..." class="mb-3"/>
                 <field name="allow_comment" string="Allow Rating"/>
             </group>