Skip to content

Commit b7dab7d

Browse files
bso-odoodetrouxdev
bso-odoo
authored and
detrouxdev
committed
[REF] website: convert s_rating option to Owl
task-3850413
1 parent 5beda1a commit b7dab7d

File tree

4 files changed

+81
-63
lines changed

4 files changed

+81
-63
lines changed

‎addons/website/__manifest__.py

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -265,6 +265,7 @@
265265
'website/static/src/snippets/s_chart/options.js',
266266
'website/static/src/snippets/s_chart/options.xml',
267267
'website/static/src/snippets/s_rating/options.js',
268+
'website/static/src/snippets/s_rating/options.xml',
268269
'website/static/src/snippets/s_tabs/options.js',
269270
'website/static/src/snippets/s_tabs/options.xml',
270271
'website/static/src/snippets/s_progress_bar/options.js',

‎addons/website/static/src/snippets/s_rating/options.js

Lines changed: 32 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,23 @@
22

33
import { MediaDialog } from "@web_editor/components/media_dialog/media_dialog";
44

5-
import options from "@web_editor/js/editor/snippets.options.legacy";
5+
import {
6+
SnippetOption,
7+
} from "@web_editor/js/editor/snippets.options";
8+
import {
9+
registerWebsiteOption,
10+
} from "@website/js/editor/snippets.registry";
611

7-
options.registry.Rating = options.Class.extend({
12+
export class RatingOption extends SnippetOption {
813
/**
914
* @override
1015
*/
11-
start: function () {
16+
willStart() {
1217
this.iconType = this.$target[0].dataset.icon;
1318
this.faClassActiveCustomIcons = this.$target[0].dataset.activeCustomIcon || '';
1419
this.faClassInactiveCustomIcons = this.$target[0].dataset.inactiveCustomIcon || '';
15-
return this._super.apply(this, arguments);
16-
},
20+
return super.willStart(...arguments);
21+
}
1722

1823
//--------------------------------------------------------------------------
1924
// Options
@@ -24,22 +29,22 @@ options.registry.Rating = options.Class.extend({
2429
*
2530
* @see this.selectClass for parameters
2631
*/
27-
setIcons: function (previewMode, widgetValue, params) {
32+
setIcons(previewMode, widgetValue, params) {
2833
this.iconType = widgetValue;
2934
this._renderIcons();
3035
this.$target[0].dataset.icon = widgetValue;
3136
delete this.$target[0].dataset.activeCustomIcon;
3237
delete this.$target[0].dataset.inactiveCustomIcon;
33-
},
38+
}
3439
/**
3540
* Allows to select a font awesome icon with media dialog.
3641
*
3742
* @see this.selectClass for parameters
3843
*/
39-
customIcon: async function (previewMode, widgetValue, params) {
44+
async customIcon(previewMode, widgetValue, params) {
4045
const media = document.createElement('i');
4146
media.className = params.customActiveIcon === 'true' ? this.faClassActiveCustomIcons : this.faClassInactiveCustomIcons;
42-
this.call("dialog", "add", MediaDialog, {
47+
this.env.services.dialog.add(MediaDialog, {
4348
noImages: true,
4449
noDocuments: true,
4550
noVideos: true,
@@ -58,25 +63,25 @@ options.registry.Rating = options.Class.extend({
5863
this.iconType = 'custom';
5964
}
6065
});
61-
},
66+
}
6267
/**
6368
* Sets the number of active icons.
6469
*
6570
* @see this.selectClass for parameters
6671
*/
67-
activeIconsNumber: function (previewMode, widgetValue, params) {
72+
activeIconsNumber(previewMode, widgetValue, params) {
6873
this.nbActiveIcons = parseInt(widgetValue);
6974
this._createIcons();
70-
},
75+
}
7176
/**
7277
* Sets the total number of icons.
7378
*
7479
* @see this.selectClass for parameters
7580
*/
76-
totalIconsNumber: function (previewMode, widgetValue, params) {
81+
totalIconsNumber(previewMode, widgetValue, params) {
7782
this.nbTotalIcons = Math.max(parseInt(widgetValue), 1);
7883
this._createIcons();
79-
},
84+
}
8085

8186
//--------------------------------------------------------------------------
8287
// Private
@@ -85,7 +90,7 @@ options.registry.Rating = options.Class.extend({
8590
/**
8691
* @override
8792
*/
88-
_computeWidgetState: function (methodName, params) {
93+
_computeWidgetState(methodName, params) {
8994
switch (methodName) {
9095
case 'setIcons': {
9196
return this.$target[0].dataset.icon;
@@ -99,14 +104,14 @@ options.registry.Rating = options.Class.extend({
99104
return this.nbTotalIcons;
100105
}
101106
}
102-
return this._super(...arguments);
103-
},
107+
return super._computeWidgetState(...arguments);
108+
}
104109
/**
105110
* Creates the icons.
106111
*
107112
* @private
108113
*/
109-
_createIcons: function () {
114+
_createIcons() {
110115
const $activeIcons = this.$target.find('.s_rating_active_icons');
111116
const $inactiveIcons = this.$target.find('.s_rating_inactive_icons');
112117
this.$target.find('.s_rating_icons i').remove();
@@ -118,13 +123,13 @@ options.registry.Rating = options.Class.extend({
118123
}
119124
}
120125
this._renderIcons();
121-
},
126+
}
122127
/**
123128
* Renders icons with selected fonts.
124129
*
125130
* @private
126131
*/
127-
_renderIcons: function () {
132+
_renderIcons() {
128133
const icons = {
129134
'fa-star': 'fa-star-o',
130135
'fa-thumbs-up': 'fa-thumbs-o-up',
@@ -138,5 +143,11 @@ options.registry.Rating = options.Class.extend({
138143
const $inactiveIcons = this.$target.find('.s_rating_inactive_icons > i');
139144
$activeIcons.removeClass().addClass(faClassActiveIcons);
140145
$inactiveIcons.removeClass().addClass(faClassInactiveIcons);
141-
},
146+
}
147+
}
148+
149+
registerWebsiteOption("Rating", {
150+
Class: RatingOption,
151+
template: "website.s_rating_option",
152+
selector: ".s_rating",
142153
});

‎addons/website/static/src/snippets/s_rating/options.xml

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<templates id="template" xml:space="preserve">
3+
4+
<t t-name="website.s_rating_option">
5+
<WeRow title.translate="Icon">
6+
<WeSelect>
7+
<WeButton setIcons="'fa-star'"><i class="fa fa-fw fa-star"/> Stars</WeButton>
8+
<WeButton setIcons="'fa-thumbs-up'"><i class="fa fa-fw fa-thumbs-up"/> Thumbs</WeButton>
9+
<WeButton setIcons="'fa-circle'"><i class="fa fa-fw fa-circle"/> Circles</WeButton>
10+
<WeButton setIcons="'fa-square'"><i class="fa fa-fw fa-square"/> Squares</WeButton>
11+
<WeButton setIcons="'fa-heart'"><i class="fa fa-fw fa-heart"/> Hearts</WeButton>
12+
<WeButton setIcons="'custom'" class="'d-none'">Custom</WeButton>
13+
</WeSelect>
14+
</WeRow>
15+
<WeRow title.translate="Active" class="'o_we_sublevel_1'">
16+
<WeColorpicker selectStyle="''" applyTo="'.s_rating_active_icons'" cssProperty="'color'" colorPrefix="'text-'"/>
17+
<WeButton customIcon="'true'" customActiveIcon="'true'" noPreview="'true'">
18+
<i class="fa fa-fw fa-refresh me-1"/> Replace Icon
19+
</WeButton>
20+
</WeRow>
21+
<WeRow title.translate="Inactive" class="'o_we_sublevel_1'">
22+
<WeColorpicker selectStyle="''" applyTo="'.s_rating_inactive_icons'" cssProperty="'color'" colorPrefix="'text-'"/>
23+
<WeButton customIcon="'true'" customActiveIcon="'false'" noPreview="'true'">
24+
<i class="fa fa-fw fa-refresh me-1"/> Replace Icon
25+
</WeButton>
26+
</WeRow>
27+
<WeRow title.translate="Score">
28+
<WeInput activeIconsNumber="'true'" step="'1'"/>
29+
<span class="mx-2">/</span>
30+
<WeInput totalIconsNumber="'true'" step="'1'"/>
31+
</WeRow>
32+
<WeRow title.translate="Size">
33+
<WeButtonGroup applyTo="'.s_rating_icons'">
34+
<WeButton selectClass="''" tooltip.translate="Small" img="'/website/static/src/img/snippets_options/size_small.svg'"/>
35+
<WeButton selectClass="'fa-2x'" tooltip.translate="Medium" img="'/website/static/src/img/snippets_options/size_medium.svg'"/>
36+
<WeButton selectClass="'fa-3x'" tooltip.translate="Large" img="'/website/static/src/img/snippets_options/size_large.svg'"/>
37+
</WeButtonGroup>
38+
</WeRow>
39+
<WeRow title.translate="Title Position">
40+
<WeSelect>
41+
<WeButton selectClass="''">Top</WeButton>
42+
<WeButton selectClass="'s_rating_inline'">Left</WeButton>
43+
<WeButton selectClass="'s_rating_no_title'">None</WeButton>
44+
</WeSelect>
45+
</WeRow>
46+
</t>
47+
48+
</templates>

‎addons/website/views/snippets/s_rating.xml

Lines changed: 0 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -18,48 +18,6 @@
1818
</div>
1919
</template>
2020

21-
<template id="s_rating_options" inherit_id="website.snippet_options">
22-
<xpath expr="." position="inside">
23-
<div data-js="Rating" data-selector=".s_rating">
24-
<we-select string="Icon">
25-
<we-button data-set-icons="fa-star"><i class="fa fa-fw fa-star"/> Stars</we-button>
26-
<we-button data-set-icons="fa-thumbs-up"><i class="fa fa-fw fa-thumbs-up"/> Thumbs</we-button>
27-
<we-button data-set-icons="fa-circle"><i class="fa fa-fw fa-circle"/> Circles</we-button>
28-
<we-button data-set-icons="fa-square"><i class="fa fa-fw fa-square"/> Squares</we-button>
29-
<we-button data-set-icons="fa-heart"><i class="fa fa-fw fa-heart"/> Hearts</we-button>
30-
<we-button data-set-icons="custom" class="d-none">Custom</we-button>
31-
</we-select>
32-
<we-row string="&#8985; Active">
33-
<we-colorpicker data-select-style="" data-apply-to=".s_rating_active_icons" data-css-property="color" data-color-prefix="text-"/>
34-
<we-button data-custom-icon="true" data-custom-active-icon="true" data-no-preview="true">
35-
<i class="fa fa-fw fa-refresh me-1"/> Replace Icon
36-
</we-button>
37-
</we-row>
38-
<we-row string="&#8985; Inactive">
39-
<we-colorpicker data-select-style="" data-apply-to=".s_rating_inactive_icons" data-css-property="color" data-color-prefix="text-"/>
40-
<we-button data-custom-icon="true" data-custom-active-icon="false" data-no-preview="true">
41-
<i class="fa fa-fw fa-refresh me-1"/> Replace Icon
42-
</we-button>
43-
</we-row>
44-
<we-row string="Score">
45-
<we-input data-active-icons-number="true" data-step="1"/>
46-
<span class="mx-2">/</span>
47-
<we-input data-total-icons-number="true" data-step="1"/>
48-
</we-row>
49-
<we-button-group string="Size" data-apply-to=".s_rating_icons">
50-
<we-button data-select-class="" title="Small" data-img="/website/static/src/img/snippets_options/size_small.svg"/>
51-
<we-button data-select-class="fa-2x" title="Medium" data-img="/website/static/src/img/snippets_options/size_medium.svg"/>
52-
<we-button data-select-class="fa-3x" title="Large" data-img="/website/static/src/img/snippets_options/size_large.svg"/>
53-
</we-button-group>
54-
<we-select string="Title Position">
55-
<we-button data-select-class="">Top</we-button>
56-
<we-button data-select-class="s_rating_inline">Left</we-button>
57-
<we-button data-select-class="s_rating_no_title">None</we-button>
58-
</we-select>
59-
</div>
60-
</xpath>
61-
</template>
62-
6321
<record id="website.s_rating_000_scss" model="ir.asset">
6422
<field name="name">Rating 000 SCSS</field>
6523
<field name="bundle">web.assets_frontend</field>

0 commit comments

Comments
 (0)