From d4cc66793e8277652855b4fe58d895547d024e5b Mon Sep 17 00:00:00 2001 From: xO-Tx Date: Thu, 28 Jul 2022 14:08:50 +0000 Subject: [PATCH] [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]: 31cc10b91dc7762e23b4bde9b945be0c4ce3fe3b task-2687506 closes odoo/odoo#96346 Related: odoo/enterprise#29922 Signed-off-by: Quentin Smetz (qsm) --- addons/website/__manifest__.py | 1 + .../static/src/components/fields/fields.js | 37 +++++++++++++++++++ .../static/src/components/fields/fields.scss | 9 +++++ .../static/src/components/fields/fields.xml | 10 +++++ .../static/src/scss/website_slides.scss | 12 ------ .../views/slide_channel_add.xml | 2 +- 6 files changed, 58 insertions(+), 13 deletions(-) create mode 100644 addons/website/static/src/components/fields/fields.scss diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py index a20e686e9ee..8bbf4cae2a6 100644 --- a/addons/website/__manifest__.py +++ b/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', diff --git a/addons/website/static/src/components/fields/fields.js b/addons/website/static/src/components/fields/fields.js index 93dfb2bea96..35aae70d298 100644 --- a/addons/website/static/src/components/fields/fields.js +++ b/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); diff --git a/addons/website/static/src/components/fields/fields.scss b/addons/website/static/src/components/fields/fields.scss new file mode 100644 index 00000000000..00fa1d96617 --- /dev/null +++ b/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; + } +} diff --git a/addons/website/static/src/components/fields/fields.xml b/addons/website/static/src/components/fields/fields.xml index 8c2a42f458a..2364ade9278 100644 --- a/addons/website/static/src/components/fields/fields.xml +++ b/addons/website/static/src/components/fields/fields.xml @@ -66,4 +66,14 @@ + +
+ +
+ +
+ +
+ + diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss index 4dff653aa63..63aa8879e97 100644 --- a/addons/website_slides/static/src/scss/website_slides.scss +++ b/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; } diff --git a/addons/website_slides/views/slide_channel_add.xml b/addons/website_slides/views/slide_channel_add.xml index de16bc77011..bd235c426df 100644 --- a/addons/website_slides/views/slide_channel_add.xml +++ b/addons/website_slides/views/slide_channel_add.xml @@ -13,7 +13,7 @@ - +